30.05.2013

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

HTML - это язык разметки документов, то есть главное слово - разметка.  А CSS - таблица стилей, здесь главное слово - стиль.

Стили можно подключать разными способами:

- дописывать стилевые свойства вместо атрибутов в теги;

- описывать стили внутри специального тега <style>, который обычно размещается в разделе <head>;

- создавать отдельные документы с описанием всех стилей, сохранять их с расширением .css, а затем подключать с помощью мета-тегов.

Рассмотрим все это на конкретном примере.

Создадим страничку следующего вида:

Шаблон сайта

У нас есть четыре блока - шапка, меню, основной текст, футер. Выделяем их тегами <div> .

То есть в итоге имеем следующий код:

<html>
 <head>
  <title>Урок по CSS</title>
 </head>
 <body>
  <div>
   <h1>Тут шапка</h1>
  </div>
  <div>
   <h2>Меню</h2>
   <ul>
    <li>1 Пункт</li>
    <li>2 Пункт</li>
    <li>3 Пункт</li>
   </ul>
  </div>
  <div>
   <h1>Заголовок 1</h1>
   <h2>Заголовок 2</h2>
   <h3>Заголовок 3</h3>
   <p>Основной цвет черный и поля по 15px</p>
   <a href="">Цвет ссылок - оранжевый без подчеркивания</a>
  </div> 
  <div>
   <p>Футер - текст совсем мелкий</p>
  </div>
 </body>
</html>
Сохраняем документ как css1.html.
Открываем - видим:
Вид странички в браузере

 

Естественно, наши блоки как были написаны один за одним, так и на экране в браузере тоже появились в столбик.

Зададим стиль для каждого из блоков <div>.

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

Задаем стиль:

style="width:100%; height:20%;"

Второй блок должен занимать 30% экрана по ширине и располагаться слева. 

Задаем стиль:

style="width:30%; float:left;"

Третий блок занимает оставшиеся 70%. 

Задаем стиль:

style="width:70%; float:left;"

Ну и последний четвертый блок аналогичен первому.  

Задаем стиль:

style="width:100%; height:20%;"

 

Стили помещаем в виде атрибутов в теги <div>. То есть теги будут выглядеть так:

<div style="width:100%; height:20%;">
 
Сохраняем изменения и смотрим, что получилось:
Страницв в браузере

С помощью стилей мы разместили наши блоки в нужном месте.

 СПОСОБ 1

Стили можно описывать внутри тегов с помощью конструкции:

style="свойство:значение; свойство:значение; свойство:значение;"