Реферат: Разработка сайта с использованием CSS
---
Как видите, такой способ очень неудобен, а ко всему прочему здесь происходит засорение кода, что приводит к большему торможению вашего сайта. Таким образом, я советую вам избегать CSS в этом виде и юзать более рациональные методы.
В первом уроке я уже упоминал о том, что каскадные стили можно загружать из внешнего файла. Как это делается? Давайте посмотрим:
---
<Link href=”style.css” type=”text/css” rel=”stylesheet”>
---
Последний атрибут дает понять броузеру, что содержимое файла style.css – ничто иное, как таблицы стилей. Такой способ очень удобен и является одним из самых предпочтительных. Style.css – это текстовый файл, содержащий только описания элементов. Здесь не должно быть никаких контейнеров и тэгов. Могу привести пример:
P {text-indent: 15;
font-size: 20;}
Как видите, ничего сложного тут нет. Свойство text-indent определяет красную строку, которая в нашем случае равна 15 пикселям.
Установку стилей для одного тэга можно применять многократно. Если мои слова для вас – пустой звук, то взгляните на очередной пример:
Font, P {font-size: 20;}
P, H1 {color: darkgreen;}
Предположим, что в некотором файле style.css, вы определили свойство P {color: blue;}, но вам необходимо сделать цвет абзаца другим. В таком случае, при постановке стилей в контейнере <Style> и разметке P{color: red;}, цвет будет одинаково красным во всех абзацах, то есть свойство, определенное в файле замещается.
Классы и идентификаторы.
Существуют еще 2 способа определения стилей, а именно: через классы и идентификаторы. Давайте поговорим о каждом из них подробней.
Предположим, вам необходимо задать свойства для тэга P, но каждый абзац должен быть отличным от предыдущего. Достигнуть данной цели известными нам способами невозможно, вот тут-то и приходят на помощь классы. Давайте посмотрим на очередной листинг:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
p.one {background-color: #D6D2DD; font-style: regular; font-size: 15;}
p.two {background-color: #D1DED7; font-style: bold; font-size: 20;}
p.three {background-color: #DDD8D2; font-style: italic; font-size: 25;}
-->
</STYLE>
</HEAD>
<BODY>
<P class="one">CSS имеет очень простой синтаксис, но открывает нам новые грани, недоступные при стандартной HTML-верстке.
<P class="two">Зная CSS, вы сможете создать по-настоящему красивый сайт, надеюсь, что моя книга поможет вам в обучении.