 |
Синтаксис таблиц стилей (применение селекторов и объявлений)
|
|
|
|
Таблицы стилей хранятся в текстовых файлах, удобных для редактирования. Их легко создавать вручную, однако существуют специальные редакторы таблиц стилей, например, MS FrontPage.
Таблицы стилей позволяют определять стиль для одного или нескольких тегов. Например, можно создать таблицу стилей для тегов <H1>, <P>, <EM>. Каждое определение называется правилом (rule). Структура правила:
| h1 |
| { } |
| color: red; |
| background: yellow; |
| Селектор |
| Объявление |
| Блок объявлений |
| Свойство |
| Свойство |
| Значение |
| Значение |
| Объявление |
Правило содержит селектор (тег HTML) за которым следует декларация (определение стиля).
Селектор – это чаще всего (но не всегда) – элемент HTML типа H1, P, EM, TABLE:
P {COLOR: silver;}
EM {BACKGROUND: red;}
Селектор является связующим звеном между определением и тегом. Ниже приведен пример правила, указывающего стиль для каждого из тегов заголовка <H1>:
H1 {COLOR: blue}
В блок объявлений (декларацию) входит одно или несколько объявлений. После знаков: и; может быть произвольное количество пробелов.
Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и его значение, разделенные двоеточием. Каждое свойство может принимать несколько значений, одно из которых присваивается ему по умолчанию.
Значение – это либо одно ключевое слово, либо несколько допустимых ключевых слов, разделенных пробелами:
P { FONT: medium helvetica; }
Если указать неверное свойство или значение – все объявление будет проигнорировано целиком.
Допустимо группировать селекторы и объявления, например:
H1, H2, H3 {COLOR: purple;}
H4, P {COLOR: silver; BACKGROUND: green;}
Селекторы разделяются “, ”, а объявления - “; ”
H1, P {
FONT: helvetica;
COLOR: purple;
BACKGROUND: aqua;
|
|
|
}
Применение группировок и наследования
Группировка – удобный способ, помогающий обеспечить небольшой объем, выразительность и простоту обслуживания таблиц стилей
Наследование- это механизм, с помощью которого стили применяются не только к самим элементам, но также к их потомкам.
Например, если цвет применяется к элементу <OL>, то этот цвет будет применен также и к элементам <IL> в этом списке:
OL { COLOR: gray;}
Параметры CSS:
1) параметры шрифта:
FONT-WEIGHT: [ bold | normal | number] - жирность шрифта
FONT-STYLE: [normal | italic | oblique] - наклон шрифта
FONT-SIZE: number - размер шрифта
FONT-FAMILY: name - гарнитура шрифта
COLOR: number - цвет шрифта
BACKGROUND-COLOR: number - цвет подложки
BACKGROUND: url - текстурная подложка
2) параметры абзаца:
TEXT-ALIGN: [ left | right | center | justify] - выравнивание
TEXT-INDENT: number - отступ красной строки
LINE-HEIGHT: number - интерлиньяж
LETTER-SPACING: number - трекинг
PADDING-LEFT: number - отступ от текста слева
PADDING-RIGHT: number - отступ от текста справа
PADDING-TOP: number - отступ от текста сверху
PADDING-BOTTOM: number - отступ от текста снизу
MARGIN-LEFT: number - отступ от границы слева
MARGIN-RIGHT: number - отступ от границы справа
MARGIN-TOP: number - отступ от границы сверху
MARGIN-BOTTOM: number - отступ от границы снизу
Единицы измерения в CSS
Абсолютные единицы измерения:
Дюймы in 2,54 см
Сантиметры cm
Миллиметры mm
Пункты pt 1/72 дюйма
Пики pc 1/6 дюйма или 12 пунктов
Пиксели px
К относительным единицам измерения относятся:
1) Один em - это значение свойства font-size заданного текста: если для элемента font-size равен 14 пикселам, то 1em равен 14 пикселов; 1.5em равно 21 пиксел. Величина em зависит от того, к каким элементам применяется.
2) Ex - это высота строчной буквы х заданного шрифта.
В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:
· относительный размер в процентах (%)
· относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)
· абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)
|
|
|
· абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)
· абсолютный размер в пикселях (px)
Задание цвета в CSS
Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:
· при помощи названия цвета: yellow, red, green, grey,..
· шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..
· десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..
Можно задать повторение стиля в определенном направлении. Для этого используется свойство BACKGROUND-REPEAT.Значения свойства: repeat / repeat-x / repeat-y / no-repeat/. Начальное значение: no-repeat.
Можно задать расположение фонового изображения с помощью свойства BACKGROUND-POSITION. Значения: top / center / bottom / left / right. Например:
DIV {BACKGROUND-COLOR: blue;
BACKGROUND-IMAGE: url(fon.gif);
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-POSITION: bottom;}
При использовании блоков внутри HTML-документы можно моделировать их свойства. На рисунке показаны основные элементы блоков:
| Ширина |
| Высота |
| Верхняя внутренняя граница |
| Нижняя внутренняя граница |
| Верхний отступ |
| Нижний отступ |
| Верхняя рамка |
| Нижняя рамка |
| Верхнее поле |
| Верхняя внешняя граница |
| Нижнее поле |
| Нижняя внешняя граница |
| Нижняя рамка |
Свойства WIDTH и HEIGHT позволяют определить ширину и высоту блоков. Значения свойства: длина / %-ое значение /auto. Начальное значение – auto. Наследование отсутствует.
Поля определяются свойством MARGIN. Значения: длина /%-ое значение/auto. Наследование отсутствует. Начальное значение не определено. %-ое значение вычисляется относительно ширины родительского элемента. В свойстве MARGIN можно использовать единицы длины - дюймы, пиксели, см.
Абсолютные значения и поля:
а) P { BACKGROUND–COLOR: silver; margin: 10px; } - поле в 10px со всех сторон абзаца.
б) разные поля:
P { MARGIN: 10px 20px 15px 5px; }
При разных полях порядок очень важен - 1 Top – 2 Right – 3 Bottom – 4 Left:
| 1 Top |
| 2 Right |
| 3 Bottom |
| 4 Left |
в) Допускаются различные единицы измерения:
H2 { MARGIN: 14px 5em 1.0in 3ex;}
Некоторые элементы (например, абзацы <Р>) имеют поля снизу и сверху по умолчанию. Свойство MARGIN может отменить их.
Пример определения поля с одной стороны:
|
|
|
MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, MARGIN-LEFT
H2 { MARGIN-LEFT: 3 em; }= MARGIN: 0 0 0 3 em
В одном правиле можно задать несколько этих свойств (в данном случае удобно просто MARGIN с несколькими значениями):
P { MARGIN: 10% 20%; } – сверху и снизу по 10%, справа и слева – по 20%
Отрицательные и свернутые поля
Отрицательные поля позволяют переместить элемент за границы его родительского элемента.
DIV {BACKGROUND: silver;
BORDER:1px solid;
MARGIN: 0 3em 0 3em;
}
P.A { BACKGROUND: #f00;
MARGIN:1em -2em 1em 25%;
BORDER:1px solid;
BORDER-RIGHT: none;
TEXT-ALIGN: justify;
}
Поля и строковые элементы
В строковых незамещаемых элементах (<А>, <STRONG>, <EM> и т. п.) браузеры устанавливают поля только слева и справа. Высоту строк вокруг таких элементов можно выставить с помощью свойств LINE – HEIGHT, FONT – SIZE и VERTICAL – ALIGN.
В строковых замещаемых элементах (<IMG>) поля выставляются и сверху, и снизу (относительно базовой линии, если не использовали VERTICAL – ALIGN).
Рамки
Рамки рисуются поверх фона элемента. Чтобы зарисовать рамку, нужно задать ее стиль с помощью свойства BORDER-STYLE. Значения:
none – нет (это значение по умолчанию)
hidden – скрытая
dotted – в виде точек
dashed – в виде тире
solid – сплошная
double – двойная
inset – вдавленная
outset – выпуклая
Ширина рамки
Определяется свойствомBORDER-WIDTH. Значения: thin / medium / thick / длина. По умолчанию ширина – medium = 2-3 px. Процентные значения для рамок не допускаются.
Цвета рамок
Определяется свойствомBORDER-COLOR. Значения свойства: цвет / transparent. Если цвет не объявлен, то будет применяется основной цвет элемента или его родителя.
Сложная рамка
H1 { BORDER-LEFT: 3px solid gray;
BORDER-RIGHT: black 0.5em dotted;
BORDER-TOP: thick silver solid;
BORDER-BOTTOM: double #oo88ff 10 px; }
Можно применять каскад:
H1 { BORDER: thick silver solid;
BORDER-LEFT-WIDTH: 20 px; }
|
|
|
