CSS (Cascading Style Sheets) - язык для управления стилем Web-страниц. Применение CSS позволяет значительно сократить объем HTML-документов, особенно если у вас имеется множество страниц с однотипным стилем и, в то же время, упростить работу по созданию и добавлению новых документов. Сохранив описание различных стилей в отдельных файлах, вы сможете с легкостью манипулировать стилями.
Файлы стилей - обычные текстовые файлы, содержащие описание стиля на языке CSS, и располагающиеся на Web-сервере. Для того, чтобы Web-страница, видела стиль,внутри тэга <BODY> делается ссылка на файл стиля, как показано в примере: Файл style.css
Если файл стилей находится на другом сервере, необходимо указать его полный URL href="("http://...")" Можно описать стили и в коде Web-страницы, внутри тэга <BODY>, как показано в следующем примере:
Файл index.htm
<html><head> <title> Пример Глобальных Таблиц Стилей </title></head><STYLE type="text/css">h1,h2,p{color:red; font-style:italic; font-size:32px}.blue{color:blue}#bold{font-weight:bold}</STYLE><body></body><html>
В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах WEB-страницы. То есть все текстовые элементы, находящиеся внутри тэгов <H1></H1>, <H2></H2> и <P></P> на этой странице будут отображаться красным курсивом, с размером символа в 32 пикселя.
И последний вариант - описание стиля находится непосредственно внутри тэга элемента к которому применяется этот стиль, например:
<font style="color:blue; font-size:12pt; font-family:Arial"> Данный стиль применяется только к этой надписи </font>
Этот вариант не самый лучший, так как приводит к увеличению размера кода страницы и потере разделения отдельно стилей и отдельно данных страницы.
Теперь рассмотрим случай, когда необходимо присвоить стили не всем одинаковым элементам страницы, а только некоторым - для этого используется параметр CLASS = "имя класса" или идентификатор ID="имя элемента", которое может быть присвоено любому элементу страницы (параграф, таблица и т.д.).
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных). Например, указав в описании стиля:
Можно сделать так, что только некоторые ячейки таблицы будут отображаться жирным курсивом. Для этого присвоим им стиль класса bi:
<TD CLASS="bold_italic">текст</TD>
Внимание! Названия классов чувствительны к регистру.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс.
11.1. Псевдоклассы и псевдоэлементы:
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль.
Синтаксис: селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }
Список псевдоклассов и псевдоэлементов :
Псеводоклассы ссылок - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. active (активная ссылка)
visited (посещенный ранее URL)
hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в NN).
Псевдоэлементы первой строки. Может быть использован с block-level элементами (p, h1 и т.д.).Изменяет стиль первой строки этих элементов.
Псевдоэлементы первой буквы. Влияет не на всю строку, а только на первый символ.
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все ссылки будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
