В документе обычно используется несколько разных стилей. Конфликты между ними разрешаются при помощи понятия каскадности (cascade) и наследования (inheritance). Наследование основывается на том, что элементы html вложены один в другой и соотносятся как предок и потомок. Те параметры, которые не указаны у потомка наследуются им от родителя.Приоритеты (от высшего к низшему):
Таблицы пользователя
Таблицы автора документа
Таблицы браузера по умолчанию
Если использовать несколько таблиц автора, то приоритет расставляется следующим образом:
Правило задается как значение атрибута style
Правило задается как значение id
Правило определяется с помощью атрибута class
Правило для параметров элементов в таблице связанной с документом тегом <link> зависит от того в какой последовательности включены элементы link и style. Больший приоритет имеет последний записанный элемент.
Правило определяет параметры элементов по умолчанию браузера
Наследование наоборот от 5 к 1.
Пример:
Файл mystyle.css содержит строку: h1 { color : blue; font-size : 26 pt; font-style : italic}
Документ:
<HTML>
<HEAD>
<link rel=” stylesheet” type = “text/css” href = “mystyle.css”>
<style>
h1 { color : red; font-size : 40 pt}
</style>
</HEAD>
<BODY>
<h1 style = “color : yellow”> Заголовок </h1>
</BODY>
</HTML>
При открытии этого документа в браузере, заголовок будет отображаться желтым курсивом размером 40 pt. Если поменять местами link и style, то заголовок отобразиться желтым курсивом, размер – 26 pt.
Составные части форматирования текста:
– шрифт текста (стиль шрифтов)
– цвет текста, фона, фоновый рисунок (стиль оформления)
– «табулирование», межсловное и межсимвольное расстояние, отступы, подчеркивание и т.д.
– расположение элемента (размеры, поля, отступы, границы)
– позиционирование
Рассмотрим параметры и их значения.
1) font-family –семейство шрифта (поддерживается всеми элементами). Если конкретного шрифта нет у пользователя, браузер выбирает наиболее подходящий из указанного семейства. Можно через запятую указать альтернативные варианты семейства шрифтов, это является хорошим тоном. Возможные значения: Arial, Courier, Helvetica, “Times New Roman”, название состоящее из нескольких слов пишется в кавычках ‘ или “.
Пример:
р {font-family: ”Times New Roman”, Arial}
2) font-size –размер шрифта (поддерживается всеми элементами). Для таблиц стилей существует несколько способов задания размеров:
абсолютный, указывается размер в единицах
- cm (сантиметр)
- mm (миллиметр)
- in (дюймы lin=2,54cm)
- pt (пункт l pt= 1/72 in)
- pc (пика 1 pc= 12 pt)
- px (пикселы, зависит от конкретного экрана)
абсолютный размер с помощью ключевых слов (условно абсолютный), в этом случае размер зависит от таблицы шрифтов конкретного браузера. Ключевые слова: xx-small, x- small, medium, large, x- large, xx- large
относительный размер (размер вычисляется относительно текущего текста, того который указан в элементе-контейнере)
- в процентах
- c помощью ключевых слов (зависит от браузера). Возможные значения: larger, smaller
Пример: р {font-size: 12pt}
body {font-size : 12 pt}
h1 { font-size : 125%}
h3 { font-size : 75%}
В примере размеры заголовков hi задаются относительно body
3) font- weight – толщина шрифта (поддерживается всеми элементами). Не у каждого шрифта есть соответствующая жирность, браузер выбирает наиболее подходящую толщину. Значением может служить: ключевое слово или числа 100, 200,…900. Некоторые соответствия ключевых слов и числены значений:
normal 400
lignt
bold 700
bolder
4) font-style – стиль шрифта (поддерживается всеми элементами)
normal – прямой (по умолчанию)
italic – курсивный
5) font-variant – вариант стиля шрифта (смена написания строчных букв) (поддерживается всеми элементами)
normal – не включен
small-caps – капитель (строчные как малые заглавные) Е и е (ТЕКСТ текст)
6) font – задание одновременно всех свойств, описанных выше (поддерживается всеми элементами). Значение свойств задается через пробел для каждого одно, альтернативные могут быть только у font-family через запятую. Свойства задаются в определённом порядке: стиль, вариант, толщина, размер, семейство.
Такие стили рекомендуется использовать вместо нежелательных элементов управления шрифтом: b (полужирный шрифт), big (крупный шрифт), small (мелкий шрифт), i (курсив), strike и s (перечеркнутый текст – как задать будет описано далее), u (подчеркнутый текст), tt (шрифт курьер), font, basefont.
Стили оформления текста (цвет, фон)
1) color – цвет текста (всеми). Значения: ключевое слово (16 названий), шестнадцатеричное число # 000000 (из 6 цифр: 0 – F), вещественные числа, определяющие яркость в процентах или значениях от 0 до 255, как параметр функции rgb.
Примеры:
Black # 000000 red # FF 0000
Lime # 00FF00 blue # 0000 FF
сolor: rgb (0, 255, 0)
сolor: rgb (0%, 100%, 0%)
Код цвета, созданный путем любой комбинации пар 00, 33, 66, 99, CC, FF, считается безопасным, т. е. должны отражаться одинаково на любом устройстве, любой платформе или операционной системе.
2) background–image – изображение для фона (все), значением является url-адрес файла с рисунком; формат файла: GIF, JPG, PNG
Пример: background–image: url (pic.gif)
3) background–repeat – расположение фонового рисунка (все)
- repeat – заполнение всей области элемента по горизонтали и вертикали (по умолчанию)
- no–repeat – вывод изображения в единственном экземпляре
- repeat–x – повторяется изображение только по горизонтали
- repeat–y – повторяется изображение только по вертикали
4) background-attachment – прокручивание фонового изображения (все)
- scroll (по умолчанию)
- fixed
5) background – position – начальное положение фонового изображения с помощью 2-х значений: горизонтальной и вертикальной координаты, разделяемых запятой. Значение координат может задаваться абсолютной величиной (см, мм, in, px), в процентах (от размера области), ключевыми словами (top, center, bottom, left, right)
6)background – одновременно значение всех четырех свойств через пробел. Порядок: цвет, изображение, способ расположения, прокрутка, начальное положение.
Пример: body {background: blue url (pic.gif) repeat-x}
