Как применить таблицу стилей CSS к сайту.

На этом уроке мы посмотрим как применить таблицы стилей CSS ко всему сайту, рассмотрим три способа и выберем самую оптимальную. Самый лучший способ применения CSS это пример 3, смотрим примеры применения стилей к сайту.

Пример 1) Давайте посмотрим первый способ применения стилей к странице сайта когда мы придаём стиль конкретно к определенному кусочку веб документа. Смотрим пример применения CSS в теле документа между тегами <BODY> и </BODY>. Лучший вариант в третьем примере.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Варианты применения стилей css к сайту.
</title>
</HEAD>
<BODY>
<h1 style="color:green">Это заголовок первого уровня нашей страницы и мы придаём ему зелёный цвет. </h1>
Как видите, применение таблицы стилей css облегчают задачу вебмастерам при создании или изменении дизайна всего сайта.
</BODY>
</HTML>
 


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



Пример 2) Теперь рассмотрим второй вариант применения стиля к одной странице. В этом примере мы подключаем стиль между тегами <HEAD> и </HEAD> но если вы захотите менять дизайн всему сайту то, пользуясь этим способом вам всё равно придётся менять код в каждой странице. Смотрите в примере, но хочу напомнить, что лучший вариант подключения таблицы стилей CSS в третьем примере.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Варианты применения стилей css к сайту.
</title>
<style type="text/css">
h1{color:green}
</style>

</HEAD>
<BODY>
<h1>Это заголовок первого уровня нашей страницы и мы придаём ему зелёный цвет. </h1>
Как видите, применение таблицы стилей css облегчают задачу вебмастерам при создании или изменении дизайна всего сайта.
</BODY>
</HTML>
 


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



Пример 3) А вот и рекомендованный третий вариант применения таблицы стилей CSS ко всему сайту. Я хочу, чтоб вы сделали два файла один index.html а другой style.css с помощью обычного блокнота. Если вы ещё не знаете, как это делается, то прошу посетить этот урок для ознакомления. Теперь если вы уже их подготовили, то не забудьте, что оба файла должны находиться в одной папке. Вот пример файла index.html здесь мы красным обозначили, где мы должны разместить строчку <link href="style.css" rel="stylesheet" type="text/css"/> которая указывает что стиль задаётся через файл style.css.

Пример файла index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Варианты применения стилей css к сайту.
</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</HEAD>
<BODY>
<h1>Это заголовок первого уровня нашей страницы и мы придаём ему зелёный цвет. </h1>
Как видите, применение таблицы стилей css облегчают задачу вебмастерам при создании или изменении дизайна всего сайта.
</BODY>
</HTML>
 

А вот пример файла style.css здесь мы уже указываем то что мы хотим применить стиль ко всем страницам в которых мы прописали строчку <link href="style.css" rel="stylesheet" type="text/css"/>обозначающая, что стиль задаётся через фай style.css в нём мы указали что все заголовки первого уровня будут зелёного цвета. Смотрите в примере.

Пример файла style.css


h1{color:green}
 

Теперь давайте откроем index.html в браузере как видите заголовок первого уровня стал зелёным цветом.

Пример приминения таблицу стилей css к сайту.

Теперь вы легко можете менять или задавать одинаковый дизайн всего сайта с помощью таблицы стилей CSS. Надо всего лишь добавить на каждую страницу одну строку <link href="style.css" rel="stylesheet" type="text/css"/> между тегами <HEAD> и </HEAD> и вы сможете управлять всем внешним видом вашего сайта с помощью одного файла style.css. Ну что стало интересно, тогда жду вас на следующем уроке, где мы научимся применять таблицу стилей CSS к тексту.

Следующий урок работа с текстом CSS.
Вернуться назад к ознокомлению CSS.



Рейтинг@Mail.ru   Яндекс.Метрика