 |
Пробельные последовательности
|
|
|
|
Каскадные таблицы стилей CSS
Применение таблиц стилей основано на принципе разделения информативной и оформительской частей работы над веб-страницами.
С помощью таблиц стилей решаются следующие вопросы стилевой разметки:
- шрифты;
- оформление текста;
- цвет фона и переднего плана;
- управление отображением;
- управление списками;
- оформление таблиц;
- размеры элементов;
- отображение элементов;
- границы, отступы, поля;
- управление версткой страниц;
- управление интерфейсом.
Одно из фундаментальных средств CSS — каскад стилей. Стили могут быть указаны
- в рамках элемента;
- документа;
- внешнего документа.
В действительности, для любого заданного экземпляра документа стили могут существовать во всех этих трех указанных местах. Подобная гибкость по отношению к расположению стиля обеспечивает модульность и гибкость проектирования документов. Стиль, определенный на уровне элемента, подавляет стиль, определенный на уровне всего документа, который, в свою очередь, подавляет любые стили, определенные во внешних файлах таблиц каскадных стилей.
Каскадная таблица стилей — это текстовый файл, обычно сохраняемый с расширением.сss. Он создается с помощью обычного текстового редактора или с помощью редактора со встроенной поддержкой каскадных таблиц стилей CSS. Файл содержит правила для синтаксического анализатора браузера по отображению данных. Эти правила состоят из селекторов и объявлений, которые определяют, каким образом данные должны быть представлены пользователю. Селекторы обычно ссылаются на отдельные HTML-элементы, а объявления определяют, каким образом тот или иной выбранный элемент отображается. Объявления содержат пары свойство-значение. Каждое свойство назначает определенное значение. Синтаксис правила CSS приведен ниже:
|
|
|
Селектор {свойство:значение; свойство:значение;...}
HTML-документ связывается с внешней таблицей стилей посредством дескриптора <LINK>:
<link rel="stylesheet" type="text/css" href=URI>
Внутренняя таблица стилей обычно приводится в заголовке документа посредством дескриптора <STYLE>:
<style type="text/css"><!--
Селектор1 {свойство: значение}
Селектор2 {свойство: значение}
Селектор3 {свойство: значение}...
-->
</style>
В рамках HTML-элемента его стиль определяется атрибутом style:
<ДЕСКРИПТОР style="свойство:значение; свойство:значение;...">
Селекторы стилей
В синтаксисе языка CSS селекторы играют роль указателя совокупности форматируемых данным стилем элементов документа. В качестве селектора могут быть:
- Селектор типа элемента - задаёт стиль всякому элементу данного типа. Обозначается ключевым словом дескриптора соответствующего элемента. Универсальный селектор "*" позволяет задать стиль для каждого элемента документа, независимо от его типа;
- Селектор класса и псевдокласса - для стиля подмножества элементов одного типа или нескольких различных. Селектор класса обозначается произвольным именем с префиксом ".". К кокретному любому элементу стиль можно применить, указав имя класса в атрибуте class
<ДЕСКРИПТОР class="имя">
Псевдоклассы имеют свои предопределённые имена. С помощью такого селектора можно выделить элементы документа, имеющие определённый динамический статус. Обозначается
ДЕСКРИПТОР:псевдокласс;
| Таблица 2.1. Специальные псевдоклассы | |
| Имя | Описание |
| link | Адресная ссылка <A>, по которой ещё не выполнялся переход |
| visited | Адресная ссылка <A>, по которой уже выполнялся переход |
| active | Элемент, активизированный щелчком мыши |
| hover | Элемент с курсором мыши (без щелчка) |
| focus | Элемент в фокусе (готовый принять ввод с клавиатуры) |
- Селектор атрибута - для стиля эелементов с определённым атрибутом (или определённым его значением. Обозначается
ДЕСКРИПТОР[атрибут=значение]; - Селектор идентификатора - для стиля отдельного элемента с указанным идентификатором. Обозначается
ДЕСКРИПТОР#идентификатор
Можно использовать простые селекторы, именем одного тега, но можно строить и более сложные селекторы:
|
|
|
- A> B Такой селектор определяет элемент вида В , который является дочерним для А .
- A> B:first-child Этот селектор определяет первый дочерний элемент.
- А1+А2 Такой селектор отбирает два соседних элемента одного уровня.
- А1, А2... Аn Группирование селекторов позволяет сократить описание стилей в случае, если несколько элементов должны иметь одинаковый стиль.
- A:first-line позволяет задать особый формат первой строки текстового содержания элемента.
- A:first-letter позволяет задать особый формат первого символа.
- A:before позволяет вставить генерируемый текст перед содержимым элемента (например, маркер).
- A:after позволяет вставить генерируемый текст после содержимого элемента.
Значения свойств стилей
В правилах стилевых таблиц задаются пары «свойство: значение». При некорректном задании свойства или значения соответствующая пара игнорируется.
Задаваемые в стилевых правилах значения можно подразделить на следующие категории:
- целые числа и действительные числа (с десятичной точкой). Допустимо использование знака + или -. Например: 2, -10, +2.333. Условное обозначение Vv.
- Sv - размерные величины, задающие горизонтальный и вертикальный размеры объектов. Это целые или действительные числа, за которыми следует указание единицы измерения. Размерные величины могут быть абсолютными или относительными.
- Абсолютные единицы:
- in : дюймы;
- cm : сантиметры;
- mm : миллиметры;
- pt : пойнты — 1 пойнт равен 1/72 части дюйма;
- рс : пики — 1 пика равна 12 пойнтам.
- Относительные единицы (базовая величина):
- em : размер шрифта (задается свойством font-size);
- ex : размер литеры «х» нижнего регистра данного шрифта;
- рх : размер пикселя данного устройства отображения (для большинства дисплеев — около 0,28 мм, для лазерного принтера при разрешении 300 точек/дюйм — пикселю соответствуют 3 точки).
- Pv - процентные величины представлены действительными числами (допустим знак + или -) с замыкающим символом процента %. Они задают величину по отношению к опорному значению (для разных свойств опорными могут служить разные величины).
- адресные ссылки задаются в кавычках «адрес» или в виде url(адрес).
- Cv - цвет задается:
- наименованием, т.е. ключевым словом (например, red , yellow ),
- числовым кодом (например, #ff000d ),
- в виде rgb-тройки (например, rgb(255,0,0) ).
| Таблица 2.2. Стандартные цвета Web | |||||
| Образец | Имя цвета | RR | GG | BB | Русское название |
| aqua | ff | ff | бирюзовый | ||
| black | черный | ||||
| blue | ff | синий | |||
| fuchsia | ff | ff | розовый | ||
| gray | серый | ||||
| green | зеленый | ||||
| lime | ff | светло-зеленый | |||
| maroon | коричневый | ||||
| navy | ультрамариновый | ||||
| olive | оливковый | ||||
| purple | пурпурный | ||||
| red | ff | красный | |||
| silver | c0 | c0 | c0 | серебряный | |
| teal | темно-зеленый | ||||
| yellow | ff | ff | желтый | ||
| white | ff | ff | ff | белый |
- Av - угол задается действительным числом, а единицей измерения служат:
- градусы deg ;
- грады grad ;
- радианы rad .
- Tv - длительность задается действительным числом, а единицей измерения служат:
- миллисекунды ms ;
- секунды s .
- Fv - частота задается действительным числом, а единицей измерения служат:
- герцы Hz ;
- килогерцы kHz .
- текстовая строка задается в одинарных или двойных кавычках и не может содержать внутри символов кавычек, совпадающих с ограничивающими строку (эти символы следует задавать в виде \' \" или кодом \27 либо \22 соответственно).
Свойства стилей
|
|
|
Рассмотрение свойств стилей начнём с наиболее наглядной категории для документов с текстовым содержанием.
Шрифты
Свойства шрифтов предоставляют широкие возможности контроля над внешним видом символов, используемых при отображении тех или иных элементов. Свойства шрифтов применяются ко всем элементам.
| Таблица 2.3. Свойства шрифтов | ||
| Свойство | Описание | Умолчание |
| font-family | Тип шрифта | Зависит от браузера |
| font-style | Стиль шрифта | normal |
| font-variant | Вид шрифта | normal |
| font-weight | Жирность шрифта | normal |
| font-str | Плотность шрифта | normal |
| font-size | Размер шрифта | medium |
Тип шрифта
|
|
|
font-family:семейство_шрифта
При управлении шрифтами принимается во внимание отношение шрифта к семейству шрифтов и к категории. Множество категорий ограничено:
- serif (с засечками, например, Times),
- sans-serif (без засечек, например, Arial),
- cursive (курсивный), fantasy (декоративный) и
- monospace (с символами фиксированной ширины, например, Courier).
Число существующих семейств шрифтов гораздо больше (фактически название семейства можно рассматривать как торговую марку).
Стиль шрифта
font-style:normal|italic|oblique
Вид шрифта
font-variant:normal|small-caps
Жирность шрифта
font-weight:Vv|lighter|normal|bold|bolder
Жирность шрифта задается с помощью числа от 100 до 900 или ключевого слова
- normal (соответствует жирности 400),
- bold (соответствует жирности 700),
- bolder (жирнее, чем унаследованный),
- lighter (светлее, чем унаследованный).
Плотность шрифта
font-str:ultra-condensed|extra-condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded
- ultra-condensed - наиболее сжатый
- extra-condensed - сверх сжатый
- semi-condensed - немного сжатый
- normal - нормальный
- semi-expanded - немного разреженный
- expanded - разреженный
- extra-expanded - сверх разреженный
Размер шрифта
font-size:Sv|Pv|em
font-size:xx-small|x-small|small|medium|large|x-large|xx-large
font-size:smaller|larger
- Ключевые слова xx-small|x-small|small|medium|large|x-large|xx-large перечислены в порядке возрастания размера. Соседние значения отличаются в 1,2 раза, а размеру medium обычно соответствует 12pt;
- Ключевые слова smaller|larger указывают относительную величину:
- smaller - меньший по сравнению с родительским размер,
- larger - больший;
Относительный размер можно задать в процентах 150% или коэффициентом 1.5em
Оформление текста
Для текстовых элементов можно задать отступ (абсолютной величиной или в процентах), выравнивание, подчёркивание, надчёркивание и зачёркивание, особым образом оформить первую букву абзаца.
| Таблица 2.4. Свойства текстового оформления | |||
| Свойство | Описание | Умолчание | Применение |
| text-indent | Отступ текста | 0 | К блочным элементам |
| text-align | Выравнивание текста | Зависит от браузера | К блочным |
| text-decoration | Оформление текста | none | К блочным |
| text-shadow | Тень текста | none | Ко всем |
| letter-spacing | Разрежение литер | normal | Ко всем |
| word-spacing | Разрежение слов | normal | Ко всем |
| text-transform | Преобразование текста | none | Ко всем |
| white-space | Пробельные последовательности | normal | К блочным |
Выравнивание текста
text-align:left|right|center|justify
Оформление текста
text-decoration:none|underline|overline|line-through|blink
- underline - подчёркивание,
- overline - надчёркивание,
- line-through - зачёркивание,
- blink - мерцание.
Тень текста
|
|
|
text-shadow:none|Sv1 Sv2 Sv3 Cv,...
- Sv1 - отступ тени от текста по горизонтали,
- Sv2 - отступ тени от текста по вертикали,
- Sv3 - радиус размытия тени,
- Cv - цвет тени.
Если отступ тени задан положительным числом, то тень располагается справа (снизу) от текста, а если отрицательным - слева (сверху). Можно наложить несколько теней, перечислив их через запятую.
Разрежение литер и слов
letter-spacing:normal|Pv|em
word-spacing:normal|Pv|em
При оформлении разрежения между литерами (словами) задаваемая величина представляет изменение интервала между литерами (словами) относительно предусмотренного параметрами шрифта. Положительное число увеличивает интервал, а отрицательное - уменьшает.
Преобразование текста
text-transform:none|capitalize|uppercase|lowercase
- capitalize - первая литера каждого слова переводится в верхний регистр,
- uppercase - каждая литера каждого слова переводится в верхний регистр,
- lowercase - каждая литера каждого слова переводится в нижний регистр.
Пробельные последовательности
white-space:normal|pre|nowrap
- normal - последовательность пробелов сокращается до одного пробела и при необходимости разрываются,
- pre - пробельные последовательности не сжимаются и разрываются только переводом на новую строку кодом в исходном тексте,
- nowrap - как normal, но разрывы строк блокируются.
| Таблица 2.5. Цвет фона и переднего плана | |||
| Свойство | Описание | Умолчание | Применение |
| color | Цвет | auto | Ко всем элементам |
| background-color | Цвет фона | transparent | Ко всем |
| z:\CorvDoc\Технологии Web\StyleSheets\StyleSheets.htm - 2_4_2_2background-image | Фоновая иллюстрация | none | Ко всем |
| background-repeat | Повтор фона | repeat | Ко всем |
| background-attachment | Привязка фона | scroll | Ко всем |
| background-position | Позиция фона | 0% 0% | К блочным и замещаемым |
<h1 align="center" onClick="this.style.textAlign='left'"
onDblClick="this.style.textAlign='right'">и выравнивания</h1>
Изменение цвета заголовка
И выравнивания
Повтор фона
background-repeat:repeat-x|repeat-y|repeat|no-repeat
- repeat-x - повтор по горизонтали,
- repeat-y - повтор по вертикали,
- repeat - повтор по горизонтали и вертикали,
- no-repeat - нет повтора (одна копия).
Привязка фона
background-attachment:scroll|fixed
- scroll - фон прокручивается,
- fixed - фон неподвижен.
Позиция фона
background-position:Pv1 Pv2|Sv1 Sv2
background-position:left|center|right top|center|bottom
- Pv1/Sv1 - горизонталь% / размер по горизонтали,
- Pv2/Sv2 - вертикаль% / размер по вертикали,
- left - выравнивание по горизонтали влево,
- right - выравнивание по горизонтали вправо,
- top - выравнивание по вертикали вверх,
- bottom - выравнивание по вертикали вниз,
- center - выравнивание по центру.
Управление отображением
В этом разделе рассматриваются специальные средства управления отображением элементов. С помощью свойства display задаётся принадлежность элемента определённой категории.
Позиции задаются свойствами смещения top от верхнего края вниз, left - от левого края вправо, right - от правого края влево и bottom - от нижнего вверх. Элементу, для которого не указан режим абсолютного позиционирования, можно указать плавающее позиционирование свойством float.
| Таблица 2.6. Свойства управления отображением | |||
| Свойство | Описание | Умолчание | Применение |
| display | Вид элемента | inline | Ко всем элементам |
| position | Способ размещения | static | Ко всем элементам кроме сгенерированных |
| top | Верхняя координата | auto | К позиционируемым элементам |
| bottom | Нижняя координата | auto | К позиционируемым элементам |
| left | Левая координата | auto | К позиционируемым элементам |
| right | Правая координата | none | К позиционируемым элементам |
| float | Вид смещения | auto | Ко всем элементам кроме сгенерированных и позиционированных |
| clear | Выравнивание после плавающего элемента | none | К блочным элементам |
Вид элемента
display:block|inline|list-item|marker|none|run-in|compact
display:table|inline-table|table-row-group|table-column|table-column-group|table-header-group|table-footer-group|table-row|table-cell|table-caption
- block - блочный элемент,
- inline - внутристрочный элемент,
- list-item - элемент списка,
- marker - генерируемый элемент перед или после блока,
- none - блок не генерируется,
- run-in - блок вдвигаемого текста,
- compact - блок занимающий поле,
- table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption - табличные элементы.
Способ размещения
position:static|relative|absolute|fixed
- static - статическое, обычное размещение в порядке описания слева направо сверху вниз, при необходимости вставляются разрывы строк и страниц,
- relative - относительное, тоже обычное, но можно дополнительно сместить элемент от своей позиции свойствами top, left, bottom и right.
- absolute - абсолютное, позиция (размер) задаются свойствами top, left, bottom и right относительно родительского блока,
- fixed - фиксированное, как и абсолютное, но элемент фиксируется к позиции просмотра (не перемещается при скроллинге).
Вид смещения
float:left|right|none
Способ размещения плавающего элемента в объемлющем блоке (например, иллюстрация на заполненной текстом странице) задаётся следующими значениями:
- left - плавающий элемент смещается влево,
- right - плавающий элемент смещается вправо,
- none - элемент не плавающий.
|
|
|
