Как подключить стили к HTML-документу. Урок 1
dorofeeva 30-05-2013, 15:58 3 858 Уроки по CSSHTML - это язык разметки документов, то есть главное слово - разметка. А CSS - таблица стилей, здесь главное слово - стиль.
Стили можно подключать разными способами:
- дописывать стилевые свойства вместо атрибутов в теги;
- описывать стили внутри специального тега <style>, который обычно размещается в разделе <head>;
- создавать отдельные документы с описанием всех стилей, сохранять их с расширением .css, а затем подключать с помощью мета-тегов.
Рассмотрим все это на конкретном примере.
Создадим страничку следующего вида:
У нас есть четыре блока - шапка, меню, основной текст, футер. Выделяем их тегами <div> .
То есть в итоге имеем следующий код:
Естественно, наши блоки как были написаны один за одним, так и на экране в браузере тоже появились в столбик.
Зададим стиль для каждого из блоков <div>.
Первый блок должен занимать пятую часть экрана сверху и по ширине быть во весь экран.
Задаем стиль:
style="width:100%; height:20%;"
Второй блок должен занимать 30% экрана по ширине и располагаться слева.
Задаем стиль:
style="width:30%; float:left;"
Третий блок занимает оставшиеся 70%.
Задаем стиль:
style="width:70%; float:left;"
Ну и последний четвертый блок аналогичен первому.
Задаем стиль:
style="width:100%; height:20%;"
Стили помещаем в виде атрибутов в теги <div>. То есть теги будут выглядеть так:
С помощью стилей мы разместили наши блоки в нужном месте.
СПОСОБ 1
Стили можно описывать внутри тегов с помощью конструкции:
style="свойство:значение; свойство:значение; свойство:значение;"