Обьединение CSS и HTML

Существует три способа добавления каскадных таблиц стилей на веб-страницу.

1. Внутренние стили. В данном случае эффект получается ограниченным. Стиль при­меняется только к тому тегу, в котором он определен, и совершенно не влияет на ос­тальные элементы веб-страницы. Внутренние стили — самый простой вариант реа­лизации CSS, однако они не обеспечивают достаточной гибкости. В этом случае для определения стиля используется атрибут style. Внутренний стиль, устанавливаю­щий цвет расположенного только в пределах элемента HI текста, будет выглядеть следующим образом:

<Н1 style="color: Ыие">Это основной заголовок синего цвета.</Н1>

2.Объявление стиля с помощью тега < STYLE >. В данном случае форматирование применяется для всей веб-сграницы. Однако польза от такого способа форматирова­ния нивелируется при наличии огромного сайта со множеством веб-страниц. Кон­тейнерный тег <STYLE> размещается в HTML-документе внутри тега <HEAD>. Объявление стиля будет выглядеть примерно так:

<HEAD>

<STYLE>

HI

{color:blue}

</STYLE>

</HEAD>

Теперь, если текст на веб-странице поместить внутри тега <Н1>, этот текст будет отформатирован синим цветом.

3.Отдельный .сss-файл. Этот файл необходимо связать с файлами .html веб­сайта. Данный подход предполагает создание . css-файла, в котором определены цвет и размер шрифта, а также другие атрибуты. Файл с расширением . css созда­ется отдельно от HTML-файла, где расположено все содержимое страниц сайта. Это дает огромные преимущества по сравнению с двумя другими подходами, описанны­ми ранее: один . css-файл управляет отображением множества веб-страниц. Пред­положим, например, что сайт состоит из 87 веб-страниц. Можете себе представить, сколько потребуется усилий, чтобы вручную исправить вес CSS-атрибугы на каждой странице. А теперь представьте, что есть всего один . css-файл, который достаточ­но немного модифицировать для изменения оформления всего сайта. Надеюсь, раз­ница предельно ясна.

Остается лишь сделать ссылку на .css-файл на каждой веб-странице. После этого все изменения, вносимые в него, автоматически приведут к изменению форматирования связан­ных веб-страниц.

11иже подробно описана вся процедура создания связи с . css-файлом.

1. Создайте файл с расширением .css, в котором задайте кегль, цвет шрифта или любые другие настройки.

2. Создайте HTML-файл с содержимым сайта.

3. Добавьте следующий фрагмент кода внутрь тега-контейнера <HEAD>.

<HEAD>

<LINK rel-stylesheet href="имя_файла.css" type=ntexc/css">

</HEAD>

Конечно. имя_файла заменяется на реальное название . css-файла.

4. Разместите .css- и .html-файлы на удаленном сервере. Вот и все, что нужно сделать.

Теперь, чтобы изменить форматирование веб-страниц, достаточно просто заменить ста­рый .css-файл новой версией. Вот и все, честное слово.

Наверное, самое сложное для разработчика — запомнить, что если . css-файл отделен от HTML-документа, то тег <STYLE> уже не используется. По сути, в .css-файле вообще нет HTML-кода. Хотя синтаксис и очень похож. Обратите внимание на разницу в коде при раз­личных вариантах использования технологии CSS.

1.Объявление стиля с помощью ТОП <STYLE>.

<HEAD>

<STYLE>

HI

(color:blue}

</STYLE>

</HEAD>

2.Отдельный .сев-файл.

hi {

color:blue

}

 

 
 

Реклама