04.06.2013

Как подключить стили к HTML-документу. Урок 2

На прошлом уроке мы начали разбираться в способах подключения таблиц стилей в HTML-документе. Первый способ - это воспользоваться атрибутом style, который можно помещать практически в любом теге. Скажем, если хотим задать цвет текста для абзаца, можно записать:

<P style="color:green">

Здесь пишем текст зеленого цвета

</P>

Если вы не проходили первый урок, можете перейти по ссылке и начать уроки сначала.

 

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

Для этого внутри каждого тега <DIV> мы задавали свой стиль.

 

<div style="width:100%; height:20%;">

Все замечательно, но возникает резонный вопрос: "Если стили задавать внутри тегов, в чем же тогда преимущество стилей?

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

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

В данной ситуации воспользуемся специальным тегом <STYLE></STYLE>.

Размещать его можно в любом месте документа, но чаще всего описание стилей задают внутри тега <HEAD>.

<STYLE>
h1 {color:red;}
h2 {color:green;}
h3 {text-transform:uppercase; font-weight: bold;}
</STYLE>

Правила CSS записываются в следующем виде:

 Правила CSSПравила CSS

Вначале идет так называемый "селектор", в данном случае это просто буквы соответствующего тега, затем в фигурных скобках набор объявлений стилей. Каждое объявление состоит из свойства и значения, разделенных двоеточием.

Объявления отделяются друг от друга точкой с запятой. Если объявлений много, обычно каждое из них записывают с новой строки, просто для удобства восприятия.

<STYLE>
h3 {
color:black;
text-transform:uppercase;
font-weight: bold;} 
</STYLE>

Возвращаемся к нашему примеру. 

Описываем все стили в теге <STYLE> и помещаем его сразу же над закрывающим тегом </HEAD>

<html>
 <head>
  <title>Урок №2 по CSS</title>
 <STYLE>
h1 {color:red;}
h2 {color:green;}
h3 {text-transform:uppercase; font-weight: bold;} 
p  {margin:15px;}
a  {color:orange;text-decoration: none;}
</STYLE>
 </head>
 <body>
  <div style="width:100%; height:20%;">
   <h1>Тут шапка</h1>
  </div>
  <div style="width:30%; float:left;">
   <h2>Меню</h2>
   <ul>
    <li>1 Пункт</li>
    <li>2 Пункт</li>
    <li>3 Пункт</li>
   </ul>
  </div>
  <div style="width:70%; float:left;">
   <h1>Заголовок 1</h1>
   <h2>Заголовок 2</h2>
   <h3>Заголовок 3</h3>
   <p>Основной цвет черный и поля по 15px</p>
   <a href="">Цвет ссылок - оранжевый без подчеркивания</a>
  </div> 
  <div style="width:100%; height:20%;">
   <p>Футер - текст совсем мелкий</p>
  </div>
 </body>
</html>

Вот результат выполнения этого кода:

 Результат применения стилейРезультат применения стилей

 

СПОСОБ 2

 

Стили можно подключать сразу для всех однотипных элементов на странице с помощью тега <STYLE>

Стили описываются в виде:

Селектор {свойство:значение; свойство:значение}