Правила стиля CSS
Синтаксис для правил стилей в каскадных таблицах стилей:
Selector{declaration}
Селектор (selector) идентифицирует тэг, к которому применяется заданный стиль
Объявление (declaration) представляет правила стилей, применяемые к данному селектору
Такой селектор обозначается, как "Простой селектор" (‘Simple Selector’)
Пример:
greeting
{display:block;font-family: Arial, Helvetica,sans-serif;
font-size: 32pt; width: 30em; |
color: red } |
Множественный
селектор |
Селектор 1 |
Используется для применения одного правила стиля к различным элементам |
|
Синтаксис: |
|
selector,selector…….{declaration} |
|
|
Одно Правило стиля |
Правило стиля |
использует и Селектор1, |
|
и Селектор2 |
Пример:
greeting,question |
|
{font-family: sans-serif; |
Селектор 2 |
font-size: 32pt; |
} |
Контекстные селекторы
–1
Помогает отличать друг от друга различные вхождения одного тэга
tag (тэг) INMADE
U.S.A
Контекстный селектор
|
Вхождение 1 |
|
|
tag([declaration]} |
|
Вхождение 1 |
Вхождение 2 |
Вхождение 2 |
|
tag([declaration]}
Контекстные селекторы
–2
Пример:
<xsampdoc>
<greeting>Hello!
<extension>there</extension></greeting>
<answer>
<ans>Fine<extension>here</extension></ans> <ans>Thank you.</ans>
</answer>
</xsampdoc>
Контекстные селекторы позволяют отличать разные вхождения элемента <extension>
greeting.extension{[declarations]}
answer.ans.extension{[declaration]}
Символы, используемые в CSS
Символ |
Имя |
Функция |
: |
Двоеточие |
Разделяет свойство и его значение |
; |
Точка с |
Разделяет несколько комбинаций |
|
запятой |
свойство/значение |
. |
Точка |
Идентифицирует контекст |
|
|
селектора |
, |
Запятая |
Разделяет несколько селекторов в |
|
|
правиле стиля |
Связывание CSS с XML
В документе XML должны быть организованы ссылки на каскадные таблицы стилей
Для этого мы используем инструкции обработки
Синтаксис:
<?xml-stylesheet type=“text/css” href=“url”?>
Пример:
<?xml-stylesheettype="text/css“ href="hello.css"?>
Свойства и значения
Значением свойства стиля CSS может быть строка, число с единицей измерения, целое число или цветовое значение
Значения могут быть абсолютными или относительными, наследуемыми или не наследуемыми
Пример абсолютного |
|
Пример относительного |
значения |
|
значения |
P{margin-left:3cm;} |
|
P{margin-left:10%} |
Создаётся поле в 3 |
|
Создаётся поле шириной 10% |
сантиметра независимо от |
|
от общей ширины страницы |
размера страницы |
|
|
Цветовые значения
Цветовые значения, поддерживаемые в XML
Gray (Серый) |
White (Белый) |
Red (Красный) |
Краткая форма |
#888 |
#FFF |
#F00 |
|
|
|
|
Десятичное целое |
rgb(136,136,136) |
rgb(255,255,255) |
rgb(255,0,0) |
|
Проценты |
rgb(55%,55%,55%) rgb(100%,100%,10 |
rgb(100%,0,0) |
|
0%) |
|
Форматирование текста
Свойства CSS позволяют определить, какой шрифт следует использовать для вывода элемента, размер и цвет текста
Ключевые слова <absolute-size> и <relative-size> используются в свойствах шрифта
<absolute-size> xx-small
x-small small medium
<relative-size> larger
smaller
Форматирование текста
Различные свойства шрифта, которые могут быть установлены:
font-family
(семейство шрифта)
font-variant |
Font |
font-size |
|
(видоизменение |
(размер шрифта) |
||
(Шрифт) |
|||
шрифта) |
|
||
|
|||
|
|
||
|
|
|
font-weight |
|
font-style |
(плотность шрифта) |
|
(стиль шрифта) |
|
|
|