Пробельные последовательности
Каскадные таблицы стилей 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" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='black'">Изменение цвета заголовка</H1>
<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 - элемент не плавающий.
Воспользуйтесь поиском по сайту: