Зачем нужен CSS?
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Например, чтобы описать в HTML выравнивание содержимого параграфа по ширине и задания отступов слева и справа Вы должны были в каждом параграфе прописать, что то вроде этого:
<p align="justify" style="margin-left: 3; margin-right: 3"></p>
При использовании CSS можно один раз задать параметры для всех параграфов для всех страниц сайта. Например:
P {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align: justify; padding-right: 3px;
}
Таким образом при использовании CSS мы можем получить следующее:
- Добиться однообразия всех страниц сайта;
- Существенно сократить размер сайта (так как не нужно будет писать кучу параметров к каждому тэгу);
- Улучшить внешний вид сайта.
Для того, что бы увидеть как использование CSS улучшает дизайн сайта, советую посмотреть 2 моих сайта, один я делал давно, когда еще не знал CSS, а второй сделал сравнительно недавно:
- С использованием CSS: http://aupair-evro.narod.ru
- Без использования CSS: http://aupair-evropa.narod.ru
Не правда ли разница в дизайне очевидна? Сайт с использованием CSS сделан на 5+, а сайт без его использования на троечку.
Встраивание CSS в документ
Существует четыре способа встраивания CSS в документ:
- Внедрение
- Связывание
- Импортирование
- Встраивание
При внедрении описание стилей находиться между тэгами <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>
Пример:
<STYLE>
<!--
P {
text-align : justify;
margin-right : 3pt;
margin-left : 3pt;
font-size : 10pt;
font-family : sans-serif;
}
-->
</STYLE>
В результате - мы задали выравнивание содержимого всех параграфов по ширине, отступы слева и справа, размер шрифта и отображение текста параграфа шрифтом Sans-serif.
При связывании Вы располагаете стили в отдельном файле. Тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Как выглядит сайт при использовании этого метода смотрите здесь - http://aupair-evro.narod.ru
Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться теги<STYLE></STYLE>.
Изменение файла таблицы стилей приводит к изменению отображения всех страниц сайта, что очень удобно для форматирования сайтов.
При импортировании, также как и при связывании встраивается внешняя таблица стилей, но с помощью свойства @import таблицы стилей:
@import: url (mystyles.css)
@import: url (mystyles.css) следует задавать в начале стилевого блока <STYLE> или связываемой таблицы стилей перед заданием остальных правил.
Встраивание в тэги - тэги HTML имеют параметр style, в котором можно задать стили. Например, в следующем примере задаётся форматирование заголовка втрого уровня, определяющее его отображение шрифтом красного цвета:
<H2 style="color: red">Пример встраивания</h2>
Все способы встраивания CSS свободно сочетаются в одном документе.
(Пока оценок нет)
Загрузка...