Другие методы, достойные упоминания. Как хорошо, что я занимаюсь саморазвитием
Одной разметкой сайт жив не будет, нужна одёжка! Каскадные таблицы стилей третьего стандарта дают нам новые возможности для того, чтобы одеть сайт.
Множество неожиданных и загадочных вещей появилось в css . Например, новые селекторы, связанные с пространством имён, другие связаны со структурой документа, псевдо-класс отрицание, псевдо-классы состояния, и т.д. Появились эффекты, которые облегчат жизнь верстальщикам. Теперь не нужно рисовать тени и выделять для них лишние дивы или скруглять углы, с помощью четырёх картинок. Сейчас у вас есть возможность скомандовать и тексту и блокам разметки: “Отбрасывайте тени или станьте немного прозрачными!”, а блокам: “Скруглите углы!”.
Думаю, для верстальщиков будет большим подспорьем появившаяся в CSS3 возможность, ну прям как в глянцевых журналах, создавать макеты страниц из нескольких столбцов. При этом, перед ними возникают два варианта: или разбивать текст на конкретное количество столбцов, или указать подгон текста под определённую ширину столбца.
Ещё одна типографская фишка — возможность включения нестандартных шрифтов, используя правило @font-face .
Ну и для того, чтобы глаза совсем разбежались в стороны — поддержка цветовых моделей HSL (Hue, Saturation and Lightness — Тон, Насыщенность и Яркость) и RGBA (Red, Green, Blue, and Alpha — Красный, Зеленый, Синий и Прозрачность).
Новые селекторы
Все мы давно используем селекторы , привязанные к реальным сущностям. С элементом документа у нас ассоциируется селектор типа. Элемент документа абзац, тег
Это селектор p, которому можно указать любое оформление, например p {color: black}
(цвет всех параграфов будет чёрным). Чтобы выборочно указать некоторым параграфам серый цвет текста, задействуйте атрибут class
Соответствующий селектор с правилом будет выглядеть так:
.silvered {color: #aaa}
. Кроме того, можно воспользоваться атрибутом id
Тогда селектор и правило будут такими #antivampir {color: #aaa}
.
Перечисленные селекторы можно комбинировать, чтобы более точно указывать нужные элементы документа.
Кроме перечисленных были селекторы атрибутов, псевдо-классы и т.д. В CSS3 было увеличено число вспомогательных селекторов, которые позволяют увеличить гибкость и точность указания стиля для элементов.
Селекторы атрибутов
В этих селекторах используется обращение к атрибутам тегов.
E
Выбирается элемент Е, foo атрибут которого начинается именно со строки bar
Например: img — этот селектор будет соответствовать всем картинкам, у которых значение в title начинается с fire.
E
Выбирается элемент Е, foo атрибут которого заканчивается именно строкой bar
E
Выбирается элемент Е, foo атрибут которого содержит подстроку bar
Структурные псевдо-классы
Эти селекторы позволят вам то, что другие не в силах. Их работа основана на расширенной информации, которую они берут из дерева документа.
E:root
С помощью такого селектора, вы всегда сможете обратиться к корню документа, для HTML-документа это будет тег , при этом E любой элемент документа
E:nth-child()
В скобках может быть указано либо выражение an+b, либо значения odd(нечётные) или even(чётные). a и b это целые числа, а n показывает изменение номеров элементов начиная с нуля.
Данный селектор позволяет выбрать элемент Е, среди таких же как и он дочерних элементов внутри некоторого предка, перед которым расположено столько элементов сколько указано в скобках.
Например: li:nth-child(2n) или li:nth-child(even) — будут выбраны все чётные элементы списков на странице. li:nth-child(3n) — каждый третий элемент.
E:nth-last-child()
Похож на предыдущий селектор, но отсчёт идёт с конца списка.
Например: p:nth-last-child(1) — таким образом обращаемся к последним абзацам.
E:nth-of-type()
По действию похож на селектор nth-child, отличительной чертой является учёт типа элемента. То есть при выборе дочерних элементов параграфы и заголовки будут реагировать на селектор независимо. Используя этот селектор вы сможете перечислить, например, только картинки.
Например: img:nth-of-type(odd){align:left} img:nth-of-type(even){align:right} все нечётные картинки, внутри некоторого контейнера, будут выровнены по левому краю, все чётные по правому.
E:nth-last-of-type()
По действию похож на селектор nth-last-child, учитывается тип элемента.
E:last-child
Выбирается элемент Е, который является последним дочерним элементом (Обратите внимание, что E:first-child был ранее определён в CSS2)
E:first-of-type
Выбирается элемент Е, который является первым потомком своего типа.
E:last-of-type
Выбирается элемент Е, который является последним потомком своего типа
E:only-child
Выбирается элемент Е, который является единственным дочерним элементом своего родителя, если у родителя будет больше дочерних элементов, то на их всех селектор уже не подействует
E:only-of-type
Выбирается элемент Е, который является единственным потомком своего типа
E:empty
Выбирается элемент Е, который не имеет дочерних элементов (Обратите внимание, включая текстовые узлы)
Псевдо-класс target
E:target
Выбирается элемент Е, который является целью указывающего URI. В качестве такого элемента может быть с атрибутом name или элемент с атрибутом id. Значения этих атрибутов должны соответствовать URI.
Например: div:target{background-color: #efe;}
это правило сработает в том случае, если на странице будет присутствовать элемент
Псевдо-классы состояний
E:enabled
Выбирается активный (через который можно управлять) элемент управления веб-страницы Е, например текстовое поле или флажок
Например: input:enabled{border: #0f0 1px solid} у всех активных одно-строчных текстовых полей границы станут зелёными
E:disabled
Выбирается неактивный элемент Е
E:checked
Выбирается элемент Е (переключатель или флажок), отмеченный пользователем или включенный по умолчанию
Псевдо-класс отрицание
E:not(s)
Выбирается элемент Е, который не соответствует простому селектору s. В качестве простого селектора может быть: класс, идентификатор, атрибут, псевдо-класс, тег, звёздочка.
Например: span:not(.progs) {color: green} в тегах , которым не назначен класс progs, текст станет зелёным.
Обобщённый родственный комбинатор
E ~ F
Выбирается элемент F, который находится после элемента E, при этом оба должны принадлежать одному предку, в дереве документа.
Например: p:not(.trg) ~ div {background-color:#f00} фон у блока div, который расположен после абзаца без класса trg, будет красным.
Выше перечисленные селекторы будут прекрасно работать в последних версиях популярных браузеров. И если вы захотите, чтобы старые браузеры тоже не остались в долгу, вам придётся это решать с помощью дополнительных средств html- или css-хаков.
Новые эффекты
Мы просто перечислим здесь некоторые замечательные инструменты, которые появились в CSS3. Именно они позволят сбросить напряжение с верстальщиков, уменьшая количество блоков для создания нужных дизайнерских эффектов:
- background (теперь вы можете использовать множество фонов)
- background-clip (определяйте вид фона под границей блока)
- background-origin (позиционирование фона, не работает когда background-fixed: fixed)
- background-size (задаёт алгоритм установки размера фоновой картинки)
- border-radius (закругленные углы)
- border-image (можно использовать картинку для создания границ блока)
- border-color (есть возможность сделать градиент параллельный границе)
- box-shadow (задаёт тень у блоков)
- box-sizing (изменяет алгоритм расчёта размеров блока)
- opacity (тут всё ясно — прозрачность)
- outline-offset (линия вокруг блока, не входит в его размер)
- resize (определяет возможность менять размеры текстовой области)
- text-shadow (текст отбрасывает тень)
- word-wrap (перенос в блоке по словам)
Мы с вами обязательно поупражняемся с этими эффектами попозже.
Многоколоночные макеты
Журналы и газеты выработали удобное представление текста — в колонках. Такой вариант макета, без дополнительных усилий, создаётся с помощью CSS3. Перечислим два доступных способа.
- С помощью свойства column-width (ширина столбца). Вы только определяете, какая будет ширина каждого столбца, при этом число столбцов вычисляется на основе ширины контейнера и ширины столбца.
- Используя column-count (количество столбцов). Вы определяете число столбцов, для вашего текста, при этом их ширина будет вычисляться в зависимости от ширины контейнера.
Кроме этого, у вас есть возможность определить column-gap (разрыв между колонками), однако он будет действовать когда используется метод column-width. Ещё одним полезным дополнением является свойство column-rule , которое позволяет размещать границу между колонками. Наконец, есть свойство column-space-distribution , которое определяет, как оставшееся пространство должно быть выделено между колонками.
Многоколоночные макеты в настоящее время поддерживаются браузерами Firefox, Chrome и Safary. Однако, названия параметров нужно немного дополнить, чтобы нужный эффект заработал. Для Firefox нужен префикс -moz, а для Chrome -webkit.
Веб-шрифты
Некоторые из вас скажут — что удивительного и нового, веб-шрифты стали доступны уже в CSS2 и хорошо работали в Microsoft Internet Explorer, начиная с версии 5. Да, это так, однако есть парочка “НО”. Первое (влияющее на второе), необходимо использовать проприетарный формат шрифтов.eot (Embedded Open Type). Второе, в следствии этого ни один из других браузеров не поддерживает этого. В результате веб-шрифты никогда не использовались на сайтах, основанных на CSS2.
Однако, теперь в последних версиях Firefox, Safari, Chrome и Opera, вы можете использовать правило @font-face, используя шрифт любой лицензии.ttf (TrueType) или.otf (OpenType) на вашей веб-странице.
Например: @font-face {font-family: Alexa; src: url(‘Alexa.otf’);} . После этого используйте этот шрифт в ваших правилах CSS, таких как: article p {font-family: Alexa, Arial, Helvetica, sans-serif;} .
Также нужно помнить, что шрифты как изображения: если они не ваши, то возможно, потребуется разрешение на их использование у правообладателей. Кроме того, вы можете купить лицензию на использование или скачать свободные шрифты.
Другие новые функции
CSS3 также включает много других новых функций. К ним относятся: поддержка новых цветовых моделей, в частности, HSL (Hue, Saturation, Lightness — Тон, Насыщенность, Яркость) и две с альфа-каналом — RGBA (Red, Green, Blue, Alpha — Красный, Зеленый, Синий, Альфа) и HSLA (Hue, Saturation, Lightness, Alpha).
Медиа запросы позволят Вам определять стили для различных устройств, основанных на их размерах окна. Например, вы можете предоставить конкретные стили для устройств с шириной экрана менее 500 пикселей (например, смартфон, КПК или другого мобильного устройства).
Речевой модуль CSS3 позволит Вам контролировать свойства речи для чтения с экрана, в том числе громкость голоса, баланс, скорость, ударение, и многое другое.
Это была вторая часть статьи. Продолжение следует …
В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++ , он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.
Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets , он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets , то он подходит и для пользователей Microsoft Windows , вы можете впоследствии выбрать, что вам ближе.
Создание внутренней таблицы стилей
Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.
Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите и нажмите Enter (откроется программа ), либо запустите программу через её ярлык.
Перед Вами откроется основное окно программы:
Шаг 2: Создайте структуру документа
Скопируйте или впишите в редактор следующий HTML код:
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег , текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */ . Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).
Шаг 3: Добавьте встроенные стили
Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color : red ), а для абзацев голубой (color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.
Как хорошо, что я занимаюсь саморазвитием.
Я выучу CSS за месяц, а то и быстрее
Шаг 4: Просмотр HTML страницы в браузере
Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:
Подключение внешней таблицы стилей
Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.
- В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
- Перенесите из предыдущего примера код CSS (содержимое тега
