Синтаксис CSS. Правила CSS
CSS состоит из трех частей: селектора, свойства и значения:селектор {свойство: значение}
Селектор - элемент/тег HTML , который необходимо определить. Свойство - атрибут , который желательно изменить. Каждое свойство может принимать значение . Существует ряд правил и рекомендаций, которые необходимо запомнить.
- Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:
p {font-size: 75%}
- Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:
h1 {font-family: "lucida calligraphy"}
- Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:
table { font-family: arial, "sans serif"; border-style: dotted}
- Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:
h2 { font-family: arial; margin-right: 20pt; color:#ffffff }
- При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:
p,table,li { font-family: "sans serif"; }
Селектор класса (class)
При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.
Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй - 20 пунктов. Вот как это можно сделать с помощью стилей:
h1.stepleft {margin-left: 10pt} h2.stepright {margin-left: 20pt}
Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:
Заголовок с внешним отступом 10 пунктов.
Заголовок с внешним отступом 20 пунктов.
В то же время не допускается следующее определение атрибута class :
< h1 class="stepleft" h2 class="stepright">,
т.е. можно определить только один атрибут class
Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class .
Left {margin-left: 40pt}
В следующем примере все элементы HTML, имеющие class="left" , будут иметь внешний отступ, равный 40 пунктам.
В следующем коде элементы table и p имеют class="left" . Это означает, что оба элемента будут следовать правилам в селекторе ".left":
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.
описание css основы css html css dvd region css free
основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css
Типы листов стилей.
Существуют три способа применения стилей в документе HTML.
1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.
текст красного цвета
2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора
текст красного цвета