*CSS
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
CSS при отображении страницы может быть взята из различных источников (порядок иерархии от сильного к слабому):
Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.
Встроенных стилей — блоков CSS внутри самого HTML-документа.
Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.
Пользовательские стили
Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.
Стиль браузера
Стандартный стиль, используемый браузером по умолчанию для представления элементов.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.
Схематически это можно показать так:
- селектор, селектор {
- свойство: значение;
- свойство: значение;
- свойство: значение;
- }
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Приоритеты рассчитываются таким образом (от большего к меньшему):
- свойство задано при помощи !important;
- стиль прописан напрямую в теге;
- количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет);
- количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;
- количество имён тегов в селекторе.
Кроме того, имеет значение относительный порядок расположения свойств — свойство, указанное позже, имеет приоритет.
Пример таблицы стилей:
- p {
- font-family: "Garamond", serif;
- }
- h2 {
- font-size: 110 %;
- color: red;
- background: white;
- }
- .note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.
В первых двух правилах HTML-элементам p (абзацу) и h2 (заголовку второго уровня) назначаются стили. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.
Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:
< p class="note">
Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.
Четвёртое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).
Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.
Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».
*Включение в HTML
CSS можно включать в HTML тремя способами:
- 1.1. Ссылка в HTML, а сами CSS в отдельном файле:
- < link rel="stylesheet" type="text/css" href="style.css" />
- 1.2. Еще один способ подключить CSS, находящиеся в отдельном файле:
- < style type="text/css" media="all">@import "style.css";</style>
- 2. Непосредственно в HTML-документе:
- < style type="text/css">
- body {
- color: red;
- }
- </style>
- 3. Непосредственно в элемент:
- < p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
