Типы листов стилей.
Существуют три способа применения стилей в документе HTML.
1. Встраивание (inline).
Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например:
для объявления абзацев,
заголовков,
горизонтальных полос,
якорей и ячеек таблицы.
В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.
<p style="color:red">текст красного цвета</p>
2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля.
<html>
<head>
<style>
<! --
p{color: red}
-->
</style>
</head>
<body>
<p>текст красного цвета </p>
</body>
</html>
3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей.
При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<p>текст красного цвета</p>
</body>
</html>
style.css должен содержать:
основы css
cинтаксис css
типы листов стилей
типы css
селекторы
псевдоклассы
hover css
Селекторы.
Это элементы дескрипторов, задаваемые в начале определения листов стилей, эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является BODY:
body { color: blue}
Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:
h1, p, h2{font-size: 12px}
Вместо селекторов можно использовать маску *. В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице дескрипторам:
* { font-size: 14pt}
Другим символом маски является знак >. Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL:
ol > li {list-style-type: decimal}
Используя селекторы классов, можно к одному и тому же дескриптору применять разные стили. После общего селектора следуют точка и имя класса, и стиль применяется тому дескриптору, чей атрибут CLASS соответствует этому имени. В следующем примере стиль применяется ко всем дескрипторам H2, у которых атрибут CLASS равен "myBlue":
h2.mybule {background-color: bule}
<h2 class="mybule">у этого заголовка голубой фон</h2>
Селекторы также можно определять с помощью атрибута id, используя для этого символ #. В следующем примере стиль соответствует любому дескриптору, у которого значение атрибута id является "ducie"
#ducie {border-color: yellow}
Псевдоклассы.
Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс :first-letter, в котором устанавливаете различные стили:
p:first-letter { float: right; font-size: 2em; color: red;}
В CSS2 определяются следующие псевдоклассы:
:
first-child -первый дочерний элемент другого элемента;
:
link - еще не посещенные ссылки;
:
visited - посещенные ссылки;
:
hover - элемент, над которым в настоящее время находится курсор;
:
active - активный в данный момент элемент ;
:
focus - элемент, имеющий фокус ввода;
:
lang - этот псевдокласс определяет текущий язык;
:
first-line - первая формированая строка абзаца;
:
first-letter - первая буква абзаца;
:
before - определяет содержимое перед элементом;
:
after - определяет содержимое после элемента.
Примеры: [1]