Спонсоры

Файл стиля CSS

Кроме встроенного и внедренного стилей CSS, можно использовать способы связывания и импортирования таблиц стилей CSS в HTML. При этих способах селекторы и правила для селекторов пишутся в отдельном файле с расширением .CSS (Создается такой файл в обычном текстовом блокноте). Данный способ является наилучшим способом придания единого стилевого оформления сразу нескольким, а может и всем страницам вашего сайта.

Например, открываем текстовый блокнот (пуск → программы → стандартные → блокнот) и вписываем следующую запись:

  A {
text-decoration: none; color: #1b6f1c;
}
A:hover {
text-decoration: underline; color: #e30000;
}
h2 { text-align: center; color: #d28900;
}

Сохраняем данный файл в ту же директорию (папку) в которой лежит страница для которой будет применено правило CSS. И самое главное не забываем, что файл должен иметь стандартное расширение для таблиц стилей .CSS К примеру назовем наш файл stil.css

Для связи документа HTML к которому будет применен стиль, нужно прописать следующую строку:
<link rel="stylesheet" type="text/css" href="stil.css">
На странице сайта данная запись должна быть, размещена в любом месте между тегами <head> и </head>
В этой строке мы указали браузеру следующее:

  • Что связываемый файл является таблицей стилей (rel="stylesheet")
  • Формат этого файла - .css (type="text/css")
  • И находится он в той же директории, что и страница сайта для которой будет применен данный стиль (href="stil.css") то есть данная запись указывает путь к файлу где написан стиль CSS.

В качестве примера берем обычную страницу HTML из предыдущего примера и применяем к ней стиль CSS который был сохранен в отдельном файле:

  <html>
<head>
<title>Моя первая страничка с использованием CSS</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h2>Моя первая страничка с использованием CSS</h2>
<table border="0" width="100%" align="center" cellpadding="5">
<tr>
<td colspan="3" align="center">
<table width="100%" border="0" bgcolor="#CCCC99">
<tr>
<td><a href="#">меню 1</a></td>
<td><a href="#">меню 2</a></td>
<td><a href="#">меню 3</a></td>
<td><a href="#">меню 4</a></td>
<td><a href="#">меню 5</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">
<table border="0" width="160">
<tr>
<td><a href="#">подменю 1</a></td>
</tr>
<tr>
<td><a href="#">подменю 2</a></td>
</tr>
<tr>
<td><a href="#">подменю 3</a></td>
</tr>
<tr>
<td><a href="#">подменю 4</a></td>
</tr>
<tr>
<td><a href="#">подменю 5</a></td>
</tr>
</table>
</td>
<td rowspan="2">
<p align="Justify">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
</p>
<p align="Right">Борис АКУНИН</p>
<hr size="1" noshade color="#000000" width="350">
</td>
<td align="center" bgcolor="#CCCCFF">сюда можно поместить какие-нибудь новости
<br>
или рекламу</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCFF"><img src="1.jpg" width="180" height="135"></td>
<td align="center" bgcolor="#CCCCFF"><img src="2.jpg" width="180" height="135"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFCCCC"><font color="#666666"> Здесь можно разместить контактную информацию, баннеры, счетчики и т.д</font></td>
</tr>
</table>
</body>
</html>     посмотреть

Из примера видно, что все эффекты которые были применены во встроенном стиле, ни каким образом не изменились при использовании стиля который написан в отдельном файле. Но обратите внимание, что стили прописанные для отдельных тегов или элементов HTML страницы при помощи атрибута style или внедренные стили прописанные внутри тега контейнера <style> </style> имеют приоритет перед связанными файлами стиля. То есть это дает нам возможность изменить стиль для конкретного тега или элемента на странице HTML.

К примеру мне захотелось изменить цвет заголовка (h2) на существующей странице, которая в свою очередь связана с файлом силей в котором указано правило для заголовка (h2 {text-align: center; color: #d28900;}) и изменить его я не могу так-так с этим файлом стилей связаны другие страницы сайта. Для этого стоит просто прописать правило для заголовка (h2) непосредственно на самой странице.
Выглядеть это будет следующим образом:

  <html>
<head>
<title>Моя первая страничка с использованием CSS</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h2 style="color: #00C400">Моя первая страничка с использованием CSS</h2>
<table border="0" width="100%" align="center" cellpadding="5">
<tr>
<td colspan="3" align="center">
<table width="100%" border="0" bgcolor="#CCCC99">
<tr>
<td><a href="#">меню 1</a></td>
<td><a href="#">меню 2</a></td>
<td><a href="#">меню 3</a></td>
<td><a href="#">меню 4</a></td>
<td><a href="#">меню 5</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">
<table border="0" width="160">
<tr>
<td><a href="#">подменю 1</a></td>
</tr>
<tr>
<td><a href="#">подменю 2</a></td>
</tr>
<tr>
<td><a href="#">подменю 3</a></td>
</tr>
<tr>
<td><a href="#">подменю 4</a></td>
</tr>
<tr>
<td><a href="#">подменю 5</a></td>
</tr>
</table>
</td>
<td rowspan="2">
<p align="Justify">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
</p>
<p align="Right">Борис АКУНИН</p>
<hr size="1" noshade color="#000000" width="350">
</td>
<td align="center" bgcolor="#CCCCFF">сюда можно поместить какие-нибудь новости
<br>
или рекламу</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCFF"><img src="1.jpg" width="180" height="135"></td>
<td align="center" bgcolor="#CCCCFF"><img src="2.jpg" width="180" height="135"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFCCCC"><font color="#666666"> Здесь можно разместить контактную информацию, баннеры, счетчики и т.д</font></td>
</tr>
</table>
</body>
</html>     посмотреть

Таким образом мы видим, что при использовании связанных стилей всегда есть возможность изменить стиль для конкретного элемента HTML страницы.

На этом этапе можно подвести небольшой итог и разложить все выше изложенные стили по полочкам:

  1. Встроенные стили при помощи атрибута style непосредственно в теги документа - имеют самый высокий приоритет и будут применены браузером в любом случае, даже если будет возникать конфликт с внедренными или внешними стилями;
  2. Внедренный стиль при помощи тега контейнера <style></style> прописанного между тегами <head></head> - имеет меньший приоритет будет применяться во всех случаях, за исключением возникновения конфликта с встроенными стилями (при возникновении такого конфликта будет применен встроенный стиль);
  3. Связанный стиль хранящийся в отдельном файле и связанный с HTML страницей посредством тега <link> - имеет наименьший приоритет и будет применен только после того, как браузер проанализирует и убедиться сто на странице не применены стили встроенный и внедренный.

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

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



Вернуться на предыдущую страницу Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru