Правила каскадных таблиц стилей чувствительны к грамматическим ошибкам

43

1. Общие положения

   Каскадные таблицы стилей
представляют собой простую технологию
определения и присоединения стилей к
документам HTML. Стиль, говоря
житейским языком, — это все то, что
определяет внешний вид документа HTML
— при его отображении в окне браузера:
шрифты и цвета заголовков разных уровней,
шрифт и разрядка основного текста,
задаваемого в тэге абзаца <P>, и
т.д. Стиль задается по определенным
правилам, о которых, собственно говоря,
и пойдет речь, а таблица стилей — набор
правил отображения, применяемых в
документе, к которому присоединена
соответствующая таблица стилей. Таблица
стилей — это шаблон, который управляет
форматированием тэгов HTML в
Web-документе. Если вы работали с
текстовым редактором Microsoft Word, то
концепция таблицы стилей напомнит вам
концепцию стилевых файлов этого
редактора: изменить внешний вид документа
HTML можно простым изменением
присоединенных к нему стилей. Точно
также изменить внешний вид документа
HTML можно простым изменением
присоединенной к нему таблицы стилей.

    Почему в название таблиц
стилей включено определение «каскадные»?
Дело в том, что здесь разрешено использовать
несколько таблиц стилей для управления
форматированием одного документа HTML,
а браузер по определенным правилам
выстраивает приоритетность применения
этих таблиц. Они выстраиваются неким
«каскадом», по которому и
«прокатывается» документ.

    Для разработки таблицы стилей
достаточно немного ориентироваться в
языке HTML и быть знакомым с базовой
терминологией настольных издательских
систем. Как отмечалось выше, таблица
стилей представляет собой набор правил
форматирования элементов HTML. Эти
правила достаточно просты и легко
запоминаемы. Например, если необходимо,
чтобы в документе все заголовки первого
уровня отображались синим цветом и
шрифтом с кеглем (размером) 16 пунктов,
то в таблице следует задать правило:

H1
{color: blue; font-size: 16pt}

    Любое правило каскадных
таблиц стилей состоит из двух частей:
селектора и определения.
Селектором может быть любой тэг
HTML, для которого определение задает,
каким образом необходимо его форматировать.
Само определение, в свою очередь, также
состоит из двух частей: свойства
и его значения, разделенных
знаком двоеточия (:). Назначение свойства
очевидно из его названия. В приведенном
правиле селектором является элемент
H1, а определение, записанное в
фигурных скобках, задает значения двух
свойств заголовка первого уровня: цвет
шрифта (свойство color) определен как
синий (значение blue) и размер шрифта
(свойство font-size) определен в 16 пунктов
(значение 16pt). В одном правиле можно
задать несколько определений, разделенных
символом точка с запятой (;), как это
демонстрируется в приведенном примере.

    Созданная только что таблица
стилей влияет на форматирование элемента
определенного типа: заголовок первого
уровня. Ее комбинация с другими таблицами
стилей определяет окончательное
представление документа при его просмотре
в окне браузера.

    Замечание.
Синтаксис правил каскадных таблиц
стилей не чувствителен к регистру.
Селекторы, свойства и их значения можно
задавать как строчными (маленькими),
так и прописными (большими) буквами, или
в смешанном порядке. Однако каскадные
таблицы стилей чувствительны к синтаксису
задания правил и правильности названий
свойств, значений и селекторов. Любая
грамматическая ошибка приводит к тому,
что правило пропускается анализатором
браузера, и никакого предупреждающего
сообщения не появляется!

    Авторы страниц HTML должны
создавать свои таблицы стилей, только
если они хотят придать документу вид,
отличный от вида, предоставляемого
умалчиваемой таблицей стилей браузера.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

• #
• #
• #
• #
• #
• #
• #
• #
• #
• #
• #

1. ДИНАМИЧЕСКИЙ HTML

• Динамический HTML (dynamic HTML или
D H T M L ) н е я в л я е т ся к а к и м — т о о с о б ы м
языком разметки страниц. Это всего лишь
термин, применяемый для обозначения
HTML-страниц с динамически
изменяемым содержимым
• Р е а л и з а ц и я D H T M L о с н о в ы в а е т ся н а :
н е п о с р е д с т в е н но H T M L , к а с к а д н ы х
таблицах стилей (cascade style sheets –
CSS) и языке сценариев (JavaScript или
VBScript)

2. Каскадные таблицы стилей (Cascade Style Sheets – CSS)

Каскадные таблицы стилей предоставляют удобный
способ добавления к web-страницам сложных атрибутов
форматирования
С их помощью можно определить гарнитуры и размеры
шрифтов, способ выравнивания и другие
характеристики, до мельчайших деталей определить
параметры текста, цветов, графики, линий, цитат и т.д.
Можно создать таблицу стилей и использовать её для
всех документов, расположенных на сервере, что
придаст стройность и строгость всему web-сайту
Таблица стилей – это набор правил, который управляет
форматированием тэгов HTML в web-документе

3. Правило каскадных таблиц стилей

Любое правило каскадных таблиц стилей состоит из двух
частей: селектора и определения
Селектор – любой тэг HTML
Определение также состоит из двух частей: свойства и его
значения, разделенных знаком двоеточия (:)
В одном правиле можно задать несколько определений,
разделённых символом точка с запятой (;)

4.

Синтаксис правил каскадных таблиц стилей не
чувствителен к регистру (селекторы, свойства и
их значения можно задавать как строчными, так
и прописными буквами, или в смешанном
порядке)
Любая грамматическая ошибка приводит к тому,
что правило пропускается анализатором
браузера, и никакого предупреждающего
сообщения не появляется

5. Встраивание таблиц стилей в документ

1. Связывание
Таблица стилей храниться в отдельном файле
Присоединяется с помощью тэга <LINK> в разделе
HEAD

6.

2. Внедрение
Таблица стилей задаётся в стилевом блоке в разделе
HEAD
Используется тэг <STYLE>

7.

3. Импортирование
В тэге <STYLE> можно импортировать внешнюю таблицу стилей
4. Встраивание в тэги документа
Каждый тэг HTML имеет параметр STYLE, в котором можно
задать значения его свойств в соответствии с синтаксисом
каскадных таблиц стилей

8. Группирование

Для уменьшения размеров таблиц стилей можно
группировать разные элементы страницы HTML в
виде списка через запятую, если для них задаётся
одно правило
Можно задать в виде

9.

Можно группировать свойства элемента
Можно задать в виде
Некоторые свойства имеют собственный синтаксис
группирования, связанный с заданием значений нескольких
свойств в одном

10. Селекторы

Правила каскадных таблиц стилей влияют на отображение всех
элементов заданного типа в документе
Для одного тэга можно создавать различные классы

11. Использование классов

В тексте документа ссылка на соответствующий класс
задаётся в параметре CLASS

12.

Если класс должен применяться ко всем элементам
документа, то в селекторе задаётся имя класса с
лидирующей точкой без указания конкретного элемента

13.

В качестве селектора можно использовать уникальное
идентификационное имя элемента, предваряя его символом
#

14. Свойства форматирования элементов

В каскадных таблицах стилей все доступные свойства
форматирования элементов в документе HTML
разбиты на 8 категорий
1.
2.
3.
4.
5.
6.
7.
8.
Шрифт
Цвет и фон
Текст
Блок
Визуальное форматирование
Печать
Фильтры и переходы
Псевдоклассы и другие свойства

15. Единицы измерения, используемые для задания значений свойств

Относительные единицы
измерения
em — высота элемента
шрифта
ex — высота буквы
px — пиксел
Абсолютные единицы
измерения
in — дюйм (1 in = 2.54 cm)
% — процент
pt — пункт (1pt= 1/72 in)
рс — пика (1 рс = 12 pt)
cm – сантиметр
mm – миллиметр

16. Шрифты

Шрифты различаются по
внешнему виду (начертанию)
размеру
стилю (прямой, курсив или наклонный)
«жирности» отображения (нормальный, полужирный)

17. Определение шрифта

Свойство
задаёт приоритетный список шрифтов
типовые семейства шрифтов
1.
2.
3.
4.
5.
serif (например, Times)
sans-serif (например, Helvetica)
cursive (например, Zapf-Chancery)
fantasy (например, Western)
monospace (например, Courier)

18.

19. Стиль шрифта

Свойство
1.
2.
3.
определяет стиль шрифта
normal
italic
oblique
— шрифт капитель (small-caps)

20.

21. Жирность шрифта

Свойство
выбирает из заданного
семейства шрифт определённой жирности
Числовые значения (9 категорий): 100 (самый
бледный), 200, 300 .. 900 (самый жирный)
Ключевые слова: normal, bold

22.

23. Размер шрифта

Свойство
определяет размер шрифта
Абсолютное
значение
• ключевые слова: xx-small, х-small,
small, medium, large, x-large, xx-large
• абсолютное значение длины (pt)
Относительный
размер
• ключевые слова: larger и smaller
• проценты
• относительные единицы длины (em)
— высота строки

24.

25.

Для сочетания всех возможных стилей для шрифта
используется свойство
Все значения свойств задаются через пробелы в
порядке font-style, font-variant, font-weight, font-size,
line-height и font-family
Первые три свойства могут не задаваться, что
соответствует установке их значений в normal
Размер шрифта и высота строки (свойство line-height)
задаются через косую черту
Элементы списка семейств шрифтов свойства fontfamily задаются через запятую

26.

27.

28. Цвет и фон

цвет
элемента
фон элемента
• цвет
• изображение
• положение
• повторение
• фиксация

29. Цвет элемента

— цвет текста элемента

30.

31. Фон

– цвет фона (начальное значение
transparent — прозрачный)
– фоновое изображение
— повторяемость фонового
изображения
repeat
repeat-x
repeat-y
no-repeat
– прокрутка фона
fixed
scroll

32.

33.

фонового изображения
– начальное положение
ключевые значения: left, right, center, top и bottom
проценты
абсолютные единицы длины
Свойство
позволяет одновременно
устанавливать значения всех свойств фонового
изображения

34.

35. Форматирование текста

Позволяет определить
расстояние между словами
расстояние между буквами в словах
отступы и высота строк в абзацах

36.

словами
символами
влияет на расстояние между
влияет на расстояние между
– расстояние между базовыми
линиями двух соседних строк
– преобразование текста
capitalize – все слова отображаются с прописной буквы
uppercase – все буквы прописные
lowercase – все буквы строчные

37.

38.

— задаёт подчеркивание,
надчеркивание или перечеркивание текста
underline – подчеркивание
overline – надчеркивание
line-through – перечеркивание
– выравнивание текста
left
right
center
justify
– отступ первой строки

39.

– положение элемента по вертикали
относительно элемента-родителя
baseline – выравнивание базовой линии элемента по базовой линии
родителя
middle – выравнивание средней точки элемента на уровне базовой
линии родителя плюс половина ширины блока содержимого родителя
sub – элемент отображается в виде нижнего индекса
sup – элемент отображается в виде верхнего индекса
text-top – выравнивание верха элемента с верхом шрифта элементародителя
text-bottom – выравнивание низа элемента с низом шрифта элементародителя
top – выравнивание верха элемента с верхом самого высокого элемента
строки
bottom – выравнивание низа элемента с низом самого низкого
элемента строки

40. Пример

Каскадные таблицы стилей¶

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, оформленного языком разметки.

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Каскадные таблицы стилей используются создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления веб-документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и оформления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

p {
    text-align: justify;
    text-indent: 30px;
    font-family: Serif;
    font-size: 14px;
    }

h1, h2, h3 {
    color: blue; /* тоже самое, что и #0000FF */
}

table, img {border: none;}

li a {text-decoration: none;}

div, th, td {
    padding-left: 10px;
    padding-right: 10px;
    background-color: yellow;
}

a {color: black; font-weight: bold;}
p a, li a {font-weight: normal; text-decoration: none;}
p a:hover, li a:hover {
    color: #00FF00; text-decoration: underline;
    }

p {margin-left: 0;}
p.warn {margin-left: 40px; color: #FF00;}

<p class=”warn”>Красный текст с отступом слева</p>

.solid_blue {color: blue;}

<p class=”solid_blue”>Синий текст абзаца</p>
<li class=”solid_blue”>Синий текст элемента списка</li>

h1.bigsans  {font-family: Sans; font-size: 1.5em;}
h1.smallserif       {font-family: Serif; font-size: .84em;}

<h1 class=”bigsans”>Большой, но рубленый</h1>
<h1 class=”smallserif”>Маленький, но с засечками</h1>

div#content {
    position: absolute;
    top: 10px;
    left: 10%;
    right: 10%;
    border: solid 1px silver;
    }
    ...

<div id="content">Текст</div>

div {
    margin-left: 10px;
    margin-top: 5px;
    margin-right: 40px;
    margin-bottom: 15px;
    }

div {margin: 5px 40px 15px 10px;} /*порядок: top right bottom left*/

<p style="font: 12pt Courier">Это текст с кеглем 12 точек и гарнитурой Courier</P>

<div style="font-family: Garamond; font-size: 18 pt;>"
Весь текст в этом разделе имеет размер 18 точек и шрифт Garamond.
<span style="color:#ff3300;">
А этот фрагмент еще и выделен красным цветом.</span>
</div>

<html>
<head>
    ...
    <style>
        правила CSS
    </style>

    ...
</head>
<body>
...

<link rel=stylesheet href="sample.css" type="text/css">

@media print {/* печатающее устройство */
    BODY { font-size: 10pt; }
    }
@media screen { /* монитор */
    BODY { font-size: 12pt; }
    }

@media screen, print {
    BODY { line-height: 1.2; }
    }
@media all {
    BODY { margin: 1pt; }
    }

<link rel=stylesheet href="sample.css" type="text/css" media=”screen”>

@media screen { H1#first { position: fixed; } }
@media print { H1#first { position: static; } }