Внешняя стилевая таблица создается с помощью текстового редактора, например того же Notepad++. Только нужно сохранить этот файл с расширением .css (например, style.css).
В этом файле объявляются правила стилей для разных объектов. Они записываются с самой первой строки Блокнота, ничем особым не выделяясь.
Например,
H1 {color:blue}
Это правило говорит о том, что все заголовки первого уровня (выделяемые тегами <h1>… </h1>) будут иметь синий цвет[1].
Каждое правило состоит из двух частей:
Определение, в свою очередь, тоже состоит из двух частей: свойства (color) и значения (blue). Они записываются в фигурных скобках и отделяются друг от друга двоеточием. Определения перечисляются через точку с запятой. Селекторы тоже могут перечисляться, отделяясь запятой.
Например:
H1, H2 {color:red; font-family:Arial}
В данном примере задается одинаковое оформление для заголовков первого и второго уровней. Они будут иметь красный цвет и шрифт Arial.
Некоторые свойства и их значения приведены в таблицах 2.3, 2.4, 2.5.
В таблицах стилей также могут применяться контекстные селекторы. Они позволяют задать стилевое оформление для тега, который находится внутри другого тега.
Пусть в CSS заданы стили
H4 {color:grey}
H4 I {color:green} .
Два подряд (через пробел) записанных селектора H4 и I и есть контекстный селектор.
Тогда в строке
<h4> Наследование <i> родительских </i> свойств </h4>
текст, заключенный между тегами <i>…</i>, будет отображаться зеленым цветом, в то время как остальной текст между тегами <h4>…</h4> будет серого цвета. И это будет выполняться для любых участков текста, где встретится такая комбинация.
Таблица 2.3. Параметры шрифта
|
Свойство |
Описание |
Значения |
Примеры и примечания |
|
font-family |
Задает шрифт(ы) или семейство шрифтов |
Названия шрифтов в порядке приоритетности. Перечисляются через запятую |
BODY { font-family: Verdana, Arial, sans-serif} В данном примере страница будет оформляться шрифтом Verdana. Если этого шрифта на машине пользователя нет, то браузер будет искать Arial, а если нет и его, то используется любой шрифт из семейства sans-serif |
|
font-style |
Задает способ начертания шрифта |
normal, italic, oblique |
H1 { font-family: Helvetica; font-style: italic; font-weight: bold} |
|
font-weight |
Задает толщину шрифта |
bold (400) normal (700) Числовые значения от 100 до 900, с шагом, кратным 100. Можно употреблять относительные значения bolder и lighter |
|
|
font-size |
Задает размер шрифта |
Точный размер: px – пиксели, pt – пункты (1pt = 1/72 in), in – дюймы, mm – миллиметры. Относительное изменение: larger, smaller |
H1{ font-weight: bold; font-size: 30pt } |
Таблица 2.4. Параметры текста
|
Свойство |
Описание |
Значения |
Примеры и примечания |
|
text-decoration |
Задает параметры начертания: подчеркивание, надчеркивание, зачеркивание |
none, underline, overline, line-through |
A:visited { text-decoration: none } |
|
text-align |
Задает горизонтальное выравнивание текста |
left, right, center, justify |
P {text-align: justify} |
|
text-indent |
Задает абзацный отступ |
px – пиксели, pt – пункты, mm – миллиметры, em – символ максимальной ширины |
P {text-align: justify; text-indent: 5em} |
|
vertical-align |
Задает отображение текста по вертикали; верхние (210) и нижние (H2O) индексы |
top, middle, bottom, super, sub, |
TD {vertical-align: top} <P>H<SPAN STYLE="vertical-align : sub;">2</SPAN>O</P> В браузере – H2O |
Таблица 2.5. Параметры цвета и фона
|
Свойство |
Описание |
Значения |
Примеры |
|
сolor |
Задает цвет текста |
Название цвета – red; шестнадцатеричное значение составляющих цвета – #FF0000 |
H1 {color:red} A:link {color: #8B4513} |
|
background-color |
Задает цвет фона |
TD { background-color: #F5F5DC } |
|
|
background-image |
Задает фоновое изображение |
BODY { background-image: URL (picture /back.gif)} |
|
|
background-repeat |
Задает способ повторения фонового изображения |
repeat – повторять по вертикали и горизонтали. no-repeat – не повторять. repeat-x – повторять по горизонтали. repeat-y – повторять по вертикали |
BODY { background-image: URL (picture/back.gif); background-repeat: repeat-x } |
Итак, наберем в блокноте строки:
BODY {font-family: Verdana}
H1, H2 {color:red; font-family:Arial}
P {text-align: justify; text-indent: 3em}
TD {background-color: yellow}
и сохраним под именем style.css. Таблица стилей создана. Как теперь ее применить?