Синтаксис CSS: свойства, значения, селекторы, правила CSS стилей и комментарии

Здравствуйте, уважаемые читатели! Сегодня я хочу представить синтаксис CSS и его базовые понятия: свойства, селекторы, правила применения стилей, а также использование комментариев.

В начальной статье рубрики «Учебник CSS», посвященной общей характеристике каскадных таблиц стилей, я писал о способах подключения свойств CSS к документу html, который определяет наличие тех или иных элементов на вебстранице. В этой статье мы рассмотрим, как правильно составлять и прописывать свойства CSS для каждого элемента, чтобы браузер смог его правильно идентифицировать и корректно отобразить.

Если провести аналогию с простым текстом, написанном не важно на каком языке, то каждое слово в нем состоит из букв, предложение - из слов, а сам текст - из предложений. Учитывая эту наглядную ассоциацию, можно вывести следующую последовательность, касающуюся структуры CSS (которая является максимально оптимальной, на мой скромный взгляд):

  • Структурной единицей CSS является свойство; каждое свойство, которое определяет свою часть внешнего вида элемента на странице (цвет, размеры, расположение и т.д.), соответствует свое значение, которое выражается в абсолютных или относительных цифрах, коде цвета, названии шрифта и т.п.
  • Набор свойств CSS для каждого отдельно взятого элемента определяет его внешний вид и расположение на вебстранице.
  • Селектор CSS - наименование стиля, которому соответствуют параметры форматирования, определяемые набором свойств. Селектор указывает браузеру, к какому именно элементу необходимо применить данные свойства.

Итак, каждому свойству присваивается свое значение, каждый набор свойств (правило) применяется к определенному селектору. Селектор, в свою очередь, является названием элемента (указанного в коде html), к которому применяется этот набор свойств. Схематически правило CSS можно отобразить так:

Впереди прописывается селектор, затем ставятся фигурные скобки, внутри которых проставляются свойства CSS с присвоенными им значениями, значение указывается напротив соответствующего свойства после двоеточия. Свойства вместе со значениями разделяются точкой с запятой. Отмечу, что этих стилевых свойств и соответствующих значений может быть как угодно много. Так, здесь, думаю, понятно. Теперь пойдем дальше и рассмотрим все более детально.

Селекторы, свойства, применение стилей CSS

Итак, продолжим. Возьмем в качестве примера использование горизонтальной линии как элемента дизайна страницы сайта. Мы уже знаем, что эта линия создается с помощью тега hr, который прописывается в html коде. Для наглядной демонстрации того, как может меняться внешний вид этого элемента, я использовал атрибуты тега hr, которые задаются в html документе вместе с этим тегом .

Однако, как я уже говорил, современные тенденции направлены на разгрузку html кода за счет использования оформления с помощью стилей CSS. Поэтому данные атрибуты тега hr (align, width, size, color) заменяем на свойства стилей, которые позволяют получить точно такой же результат.

hr { 
    border: none; 
    height: 10px;
    background-color: blue;
    margin: 10px 175px 10px 
   }

Обратите внимание, как записаны стилевые свойства. Это самый удобный способ, поскольку позволяет сразу охватить взглядом отдельно каждое свойство, относящееся к нужному селектору (в данном случае это тег hr). Этим способом записи правила CSS пользуется большинство разработчиков, так как CSS не чувствителен к пробелам, переносам строк, символам табуляции.

Есть незнакомые слова? Не волнуйтесь, изучение все впереди, это пока постижение простых истин каскадных таблиц стилей. Но вернемся к теме. Это же самое правило можно записать и другими способами. Например, так:

hr { border: none; }
hr { height: 10px; }
hr { background-color: blue; }
hr { margin: 10px 175px 10px; }

Как видите, здесь для каждого свойства повторяется один и тот же селектор. Это не будет ошибкой по причинам, упомянутым выше, однако такой формат записи правила CSS является неудобным, потому что замыливает взгляд и усложняет восприятие кода.

Представленный первым способ записи правил CSS был бы идеальным, если бы не пробелы и переносы, которые во множестве будут присутствовать, особенно если структура ресурса достаточна сложна и этих правил в коде CSS тьма-тьмущая. Поэтому, после того, как дизайн сайта готов или внесены все необходимые изменения в шаблон готовой темы, файлы стилей CSS сжимают с помощью специальных программ (об этом тоже последуют публикации отдельно). Тогда правило CSS будет представлено в виде, в котором схематически изображено на самом верхнем рисунке:

hr { border: none; height: 10px; background-color: blue; margin: 10px 175px 10px; }  

Однако вы можете сразу добавлять свойства при редактировании (уверяю, это будет обязательно, когда-нибудь вам захочется что-то поменять или даже необходимо будет это сделать) шаблона в этом компактном виде, все зависит от пристрастий.

На моем блоге пока используется самый удобный первый вариант, но только лишь потому, что вношу много различных изменений в тему, как я уже сказал, с такой записью правил CSS это осуществлять гораздо сподручнее. Но как только закончу редактирование основных элементов, обязательно оптимизирую файлы со стилями и приведу все записи правил к последнему представленному здесь виду. Если для селектора заданы различные значения одного и того же свойства, до к нему будет применяться значение, указанное ниже.

hr { background-color: blue; }
hr { background-color: green; }

Здесь заданы последовательно два цветовых оттенка для горизонтальной линии blue (синий) и green (зеленый). Поскольку значение green находится ниже, горизонтальная линия в браузере будет окрашена в зеленый цвет. Конечно, до такой ситуации лучше не доводить, но такое случается даже с опытными вебмастерами, главное, вы теперь знаете, откуда ноги растут.

Далее. В приведенном выше примере с горизонтальной линией в качестве селектора выступает тег hr. Кроме тегов селекторами могут служить ID или классы. Также различают контекстные селекторы, где выделена группа селекторов, разделенных пробелами. В общем эта тема очень широка и заслуживает, чтобы написать отдельный пост.

Значения свойств CSS и комментарии

Теперь что касается значений стилевых свойств CSS. Здесь все регламентировано и каждому свойству CSS соответствуют свой набор значений, выраженных в определенных единицах измерения либо тех или иные ключевых словах.

1. Числа - Значением свойства может быть целое число, содержащее цифры от 0 до 9 или десятичная дробь, где целая и дробная часть разделяются точкой:

p {
    font-weight: 700; /* Жирное начертание */ 
    line-height: 1.6; /* Межстрочный интервал */
   }

Здесь для абзаца, определяемого тегом p, заданы свойства со значениями, которые задают жирный шрифт и интервал между строками. Если целая часть десятичной дроби равно 0, то ее можно не писать, а просто впереди ставить точку. То есть записи: 0.6 и .6 абсолютно идентичны.

2. Размеры - для того, чтобы задать размеры того или иного элемента в CSS применяются абсолютные и относительные единицы измерения. Абсолютные единицы показывают размер независимо от устройства, в котором просматривается документ (например, монитор компьютера), а относительные единицы определяют размер относительно значения какого-то другого элемента вебстраницы.

Относительные единицы используются гораздо чаще, чем абсолютные. Это связано с тем, что значения, выраженные в относительных единицах позволяют оптимизировать расположение элементов вебстраницы при просмотре в различных браузерах и при использовании разных мониторов, это помогает достичь идентичности, то есть вебстраница с этими элементами будет максимально одинакова для всех пользователей.

Сначала подробнее остановимся на относительных единицах. Единица em дает возможность задать, например, размер шрифта по отношению к размеру, установленному в браузере по умолчанию или по отношению к размеру родительского элемента (о наследовании правил форматирования элементов будет отдельная статья). То есть значение 1em можно приравнять к 100%. Если размер шрифта не задан, то браузер отображает шрифт по умолчанию. Чтобы увеличить размер шрифта по отношению к заданному по умолчанию размеру, необходимо проставить значение больше 1, например 1.6em, а чтобы уменьшить, меньше 1, к примеру, 0.9em.

Единица ex определена высотой символа «x» в нижнем регистре. Все, что сказано выше для em, верно и для ex. Здесь также справедливо замечание о том, что эта единица связана с размером, установленном по умолчанию.

Пиксел (px) - это самая популярная единица для определения относительного размера шрифта в CSS. Данная единица измерения представляет из себя минимальную точку, из множества которых состоит экран того или иного пользователя. Разрешение экрана может быть разным (например, мой монитор - 1280 на 1024 px), поэтому фактический размер пиксела будет разным для каждого отдельно взятого устройства вывода (монитора). Ниже представлены свойства со значениями, выраженными в относительных единицах:

h1 {
font-size: 200%; /* Размер шрифта в процентах */
}
h2 {
font-size: 1.6em; /* Размер шрифта в единицах em */
}
p {
padding-bottom: 10px; /* Поле снизу от текста */
}

Абсолютные единицы для задания размеров в CSS, как я уже отмечал, используются гораздо реже. Я думаю, с обычными единицами измерения метрической системы, то есть миллиметрами, сантиметрами, а также дюймами все знакомы. Однако в CSS самой распространенной абсолютной единицей измерения все-таки является пункт (pt).

h1 {
font-size: 20pt; /* Размер шрифта в пунктах */
}

3. Цвет - значения цветов для свойств при составлении правил CSS могут задаваться тремя способами.

Во-первых, по названию. Так определяются не все цвета, а лишь некоторые, названия которых поддерживаются браузерами.

Во-вторых, используя шестнадцатеричный код, установленный для цветовой модели RGB. Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Таким образом, буквы от A до F соответствуют числам от 10 до 15.

Существует специальная формула перевода чисел шестнадцатеричной системы в десятеричную и наоборот. Но сейчас мы не будем углубляться в эти дебри, скажу только для примера, что, например, числу 255 десятеричной системы соответствует обозначение FF в шестнадцатеричной.

Модель RGB основана на использовании трех основных цветов: red (красный), green (зеленый), blue (синий) и связана как раз с шестнадцатеричным кодом. У каждого из трех возможных цветов существует 256 различных оттенков, при этом запись значения цвета включает три составляющие :#rrggbb (перед обозначением цвета ставится знак решетки).

Каждый из трех цветов может принимать значения от 00 до FF. Допускается сокращать запись, если для каждого из цветов знаки дублируются, ну например, запись #00ffcc можно представить как #0fc. Ниже приведу значения свойств основных цветов в виде названий и шестнадцатеричного кода:

В-третьих, можно задать значения цвета, исходя из десятеричной системы. Оттенки каждого из трех цветов (красный, зеленый, синий) находятся в диапазоне от 0 до 255. Для этого необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты: rgb (100%, 20%, 35%). Пример задания цветов элементов страницы различными способами:

body {
    background-color: #5c84cd; /* Цвет фона страницы */
   } 
   h1 {
    background-color: rgb(35, 108, 89); /* Цвет фона под заголовком */
   }
   p {
    color: black; /* Цвет текста абзаца*/
   }

4. URI (Uniform Resource Identifiers) - унифицированный идентификатор ресурсов, по другому адрес ссылки. Используется, когда необходимо, например, указать относительный или абсолютный путь к файлу с изображением (об абсолютном и относительном пути я писал в статье, посвященной тегу img) для установки картинки на страницу. Адрес можно прописать в одинарных или двойных кавычках. Для того, чтобы это осуществить, надо сначала впереди использовать слово url:

body { 
    background: url('/images/star.jpg'); /* Абсолютный путь */
   }
   div { 
    background: url("images/globus.jpg") no-repeat; /* Относительный путь */
   }

5. Ключевые слова - они применяются в качестве значений свойств CSS для получения того или иного результата. Например:

p {
text-align: left;
}

Эта запись означает, что текст абзаца будет выровнен по левому краю.

Ну и, наконец, комментарии в правилах со свойствами CSS. На этой странице я уже неоднократно пользовался ими, разъясняя действие того или иного свойства. Комментарии прописываются прямо в коде CSS, напротив соответствующего свойства. Текст комментариев располагается между двумя символами «*», которые, в свою очередь находятся между двумя знаками слэша «/».

Не забывайте точно использовать правила написания комментариев, поскольку только в таком случае браузер правильно их воспринимает, то есть игнорирует. В противном случае отображение элементов на вебстранице будет некорректным.

div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  border: 8px dashed blue; /* Параметры границы элемента: толщина, стиль и цвет */
}

Но комментарии обычно используются в учебных целях для наглядного объяснения действия соответствующего свойства. Однако появление дополнительного текста увеличивает время загрузки страницы, что не является оптимальным с точки зрения продвижения проекта. По этой причине в файлах CSS действующего сайта они обычно удаляются (оптимизация или сжатие CSS c помощью отличного дополнения Google Page Speed, служащего великолепным инструментом для увеличения скорости сайта.).

Ну, вот, на сегодня, пожалуй, все. Пост получился объемным, однако вся информация, которая касается синтаксиса CSS и его базовых понятий, таких как свойства, селекторы, правила стилей, поверьте, является очень важной для постижения основ каскадных таблиц стилей. Не сочтите за труд приложиться к кнопкам социальных сетей, расположенных чуть ниже, ежели, конечно, материал не оставил вас равнодушными.

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Учебник CSS

2 отзыва

  1. Олег

    CSS для меня пока темный лес, надо побродить подольше в "дебрях" Вашего сайта.

  2. Игорь

    Олег, я очень рад Вас видеть на своем ресурсе, с Вашим сайтом знаком и о нем хорошего мнения, даже время от времени оставляю комментарии. А что касается CSS, для меня он тоже был темным лесом, пока буквально не заставил себя покорить его базовые понятия и сразу стало легче жить. Не нужно каждый раз обращаться к мастерам, если необходимо отредактировать какой-то элемент. И ничего страшного в нем нет, хотя, если поставить себе цель конструировать сайты с нуля на раз-два, попотеть придется, все же таки он посложнее, чем html.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.