Как подключить стили к HTML-документу. Урок 2
dorofeeva 4-06-2013, 12:45 2 944 Уроки по CSSНа прошлом уроке мы начали разбираться в способах подключения таблиц стилей в HTML-документе. Первый способ - это воспользоваться атрибутом style, который можно помещать практически в любом теге. Скажем, если хотим задать цвет текста для абзаца, можно записать:
<P style="color:green">
Здесь пишем текст зеленого цвета
</P>
Если вы не проходили первый урок, можете перейти по ссылке и начать уроки сначала.
Ну, а мы продолжим. На прошлом уроке мы уже создали документ, состоящий из четырех блоков. С помощью стилей мы разместили эти блоки на экране в нужном нам месте.
Для этого внутри каждого тега <DIV> мы задавали свой стиль.
Все замечательно, но возникает резонный вопрос: "Если стили задавать внутри тегов, в чем же тогда преимущество стилей?
А все дело в том, что стили можно задавать сразу для всех однотипных элементов документа.
Вот, скажем, мне надо сделать так, чтобы все заголовки первого уровня на странице были красного цвета, второго уровня - зеленого цвета, а заголовки третьего уровня были черного цвета, но выделены полужирным начертанием и все буквы были заглавными.
В данной ситуации воспользуемся специальным тегом <STYLE></STYLE>.
Размещать его можно в любом месте документа, но чаще всего описание стилей задают внутри тега <HEAD>.
<STYLE>
h1 {color:red;}
h2 {color:green;}
h3 {text-transform:uppercase; font-weight: bold;}
</STYLE>
Правила CSS записываются в следующем виде:
Вначале идет так называемый "селектор", в данном случае это просто буквы соответствующего тега, затем в фигурных скобках набор объявлений стилей. Каждое объявление состоит из свойства и значения, разделенных двоеточием.
Объявления отделяются друг от друга точкой с запятой. Если объявлений много, обычно каждое из них записывают с новой строки, просто для удобства восприятия.
<STYLE>
h3 {
color:black;
text-transform:uppercase;
font-weight: bold;}
</STYLE>
Возвращаемся к нашему примеру.
Описываем все стили в теге <STYLE> и помещаем его сразу же над закрывающим тегом </HEAD>
Вот результат выполнения этого кода:
СПОСОБ 2
Стили можно подключать сразу для всех однотипных элементов на странице с помощью тега <STYLE>
Стили описываются в виде:
Селектор {свойство:значение; свойство:значение}