1. Основные характеристики грамматики
Проанализируйте типичный оператор CSS:
р {COLOR:#FF0000;BACKGROUND:#FFFFFF}
Среди них «p» называется «селекторами», что указывает на то, что мы хотим определить стиль для «p»;
Объявления стилей записываются в паре фигурных скобок «{}»;
ЦВЕТ и ФОН называются «свойствами», а различные свойства разделяются точкой с запятой «;»;
«#FF0000» и «#FFFFFF» — значения атрибутов.
2. Значение цвета
Значения цвета могут быть записаны в значениях RGB, например: color: rgb(255,0,0), или в шестнадцатеричном виде, как в приведенном выше примере color:#FF0000. Если шестнадцатеричные значения повторяются парами, их можно сократить с тем же эффектом. Например: #FF0000 можно записать как #F00. Однако его нельзя сократить, если он не повторяется. Например, #FC1A1B должен быть заполнен шестью цифрами.
3. Определите шрифт
Веб-стандарты рекомендуют следующие методы определения шрифтов:
body { семейство шрифтов: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体, без засечек };
Шрифты выбираются в указанном порядке. Если на компьютере пользователя установлен шрифт Lucida Grande, документ будет называться Lucida Grande. Если нет, то он обозначается как шрифт Verdana, если Verdana нет, то он обозначается как шрифт Lucida и так далее;
Шрифт Lucida Grande подходит для Mac OS X;
Шрифт Verdana подходит для всех систем Windows;
Lucida подходит для пользователей UNIX.
«Song Ti» подходит для пользователей упрощенного китайского языка;
Если ни один из перечисленных шрифтов недоступен, гарантированно будет вызван шрифт без засечек по умолчанию;
4. Селектор группы
Если несколько элементов имеют одинаковые атрибуты стиля, оператор может быть вызван вместе, а элементы разделены запятыми: p, td, li {font-size: 12px };
5. Производные селекторы
Вы можете использовать производные селекторы для определения стилей дочерних элементов внутри элемента, например:
ли сильный {стиль шрифта: курсив; вес шрифта: нормальный;
Это значит, что для сильного подэлемента li будет выделен курсив, а не жирный шрифт.
6.селектор идентификатора
Макет с помощью CSS в основном реализуется с использованием слоя «div», а стиль div определяется с помощью «селектора идентификаторов». Например, мы сначала определяем слой
<div id="menubar"></div>
Затем определите его в таблице стилей следующим образом:
#menubar {ПОЛЕ: 0 пикселей;ФОН: #FEFEFE;ЦВЕТ: #666;}
Где «менюбар» — это идентификатор, который вы определяете. Обратите внимание на знак «#» впереди.
Селектор id также поддерживает деривацию, например:
#menubar p {text-align: right;
Этот метод в основном используется для определения более сложных слоев и элементов, имеющих несколько производных элементов.
6. Выбор категории
Используйте точку в CSS для обозначения определения селектора категории, например:
.14px {цвет: #f60; размер шрифта: 14 пикселей;}
На странице используйте метод class="имя категории" для вызова:
<span class="14px">Шрифт размером 14 пикселей</span>
Этот метод относительно прост и гибок, его можно создавать и удалять в любое время в зависимости от потребностей страницы.
7. Определите стиль ссылки
В CSS для определения стилей ссылок используются четыре псевдокласса, а именно: a:link, a:visited, a:hover и a:active, например:
а: ссылка {вес шрифта: жирный; оформление текста: нет; цвет: #c00;}
a: посещенный {вес шрифта: жирный; оформление текста: нет; цвет: #c30;}
a:hover {вес шрифта: жирный; оформление текста: подчеркивание; цвет: #f60;}
а: активный {вес шрифта: жирный; оформление текста: нет; цвет: #F90;}
Приведенные выше операторы соответственно определяют стили «ссылок, посещенных ссылок, при наведении курсора мыши и при щелчке мыши». Обратите внимание, что вы должны писать в указанном выше порядке, иначе отображение может отличаться от того, что вы ожидали. Помните, что они расположены в порядке «LVHA».
Ха-ха, после такого прочтения у меня немного закружилась голова. На самом деле, для CSS существует еще много грамматических спецификаций. Вот лишь некоторые из них, которые часто используются. В конце концов, мы делаем это шаг за шагом, и невозможно стать толстым. за один укус :)