Категория > Учебник CSS > Базовый синтаксис CSS
Базовый синтаксис CSS24-03-2016, 16:20. Автор: Administrator |
Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.
Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить. CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил. Пример 5.1. Использование стилей HTML5CSS 2.1IECrOpSaFx
В данном примере свойства селектора h1 записаны в одну строку, а для селектора h2 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика. Правила применения стилейДалее приведены некоторые правила, которые необходимо знать при описании стиля. Форма записиДля селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 5.2. Пример 5.2. Расширенная форма записи
Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3). Пример 5.3. Компактная форма записи
Эта форма записи более наглядная и удобная в использовании. Имеет приоритет значение, указанное в коде нижеЕсли для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4). Пример 5.4. Разные значения у одного свойства
В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту. На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти случайно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы. ЗначенияУ каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа. КомментарииКомментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают. Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* ... */ (пример 5.5). Пример 5.5. Комментарии в CSS-файле
Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы. Вопросы для проверки1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?
2. В какой строке кода содержится ошибка?
3. Какая ошибка содержится в следующем коде? /* --------------------------------
4. В какой строке содержится корректный синтаксис?
5. Как правильно вставить комментарий в CSS-файл?
Ответы1. синий. 2. p { color: green; color; } 3. Вложенные комментарии. 4. body{color:black} 5. /* комментарий */ Перейти обратно к новости |