Суп Дня

Каскадируемые Стили | День1

Добавление Стилей в web-страницу.

Мы рассмотрели один способ добавления Стилей в web-страницу. Всего существуют четыре способа, каждый имеет свои преимущества:

Вложение Стилей в HTML-документ.
Ссылка из HTML-документа на внешний документ Стилей
Импортирование документа Стилей в HTML-документ.
Добавление Стилей непосредственно в строки HTML-документа.

Вложение Стилей

Это метод, который мы использовали на предыдущей странице. Вся информация, связанная со Стилями, распологается в шапке HTML-документа и не контактирует с содержимым тэга <BODY>. Пример:


<HTML> 
<STYLE TYPE="text/css"> 
<!-- 
H1 { color: green; font-family: impact } 
P { background: yellow; font-family: courier } 
--> 
</STYLE> 
<HEAD> 
<TITLE>Первый стиль Васи Пупкина</TITLE> 
</HEAD> 
<BODY> 
<H1>H1>Стили: инструмент для крутых web-дизайнеров</H1> 
<P>Вашим конкурентам и не снилось!</P> 
</BODY> 
</HTML>

Вложенные стили исполняются только для текущего HTML-документа. Когда Вы хотите добавить Стили только на единственную страницу, этот путь подходит как нельзя лучше. Вы, вероятно, обратили внимание на два любопытных момента в этом коде:

Атрибут и коментарий тэга TYPE="text/css". TYPE="text/css" определяет тип MIME, чтобы броузеры, не поддерживающие CSS могли проигнорировать Стили.
Еще более важны тэги комментария (). Некоторые, более старые, броузеры (как например, I.Е. 2.0 для Mac) не признают Стили несмотря на атрибут TYPE="text/css", и отображают код текстом! С тэгом коментария этого не случится.

Ссылка на документ Стилей.

Вместо размещения CSS-кода в каждой конкретной странице, Вы можете привязать множество HTML-документов к одному документу Стилей. Этот внешний CSS-файл установит правила для всех ваших веб-страниц. К примеру, если вы изменяете размер шрифта в документе Стилей, шрифт немедленно изменится на всех ваших страницах. Это очень удобно при поддержании большого сервера с большим количеством файлов.

Вот как это будет выглядеть: создайте обычную веб-страницу, но вместо тэга <STYLE>, используйте <LINK> в пределах тэга <HEAD>:


<HTML> 
<HEAD> 
<TITLE>Первый стиль Васи Пупкина</TITLE> 
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> 
</HEAD> 
<BODY> 
<H1>Стили: инструмент для крутых web-дизайнеров</H1> 
<P>Вашим конкурентам и не снилось!</P> 
</BODY> 
</HTML>

Теперь Создайте отдельный текстовый файл, названный mystyles.css (Если хотите, наховите его любым другим именем). Все что он содержит, это:


H1 { color: green; 
     font-family: impact }
P { background: yellow; 
    font-family: courier }

В итоге, ваш HTML-документ указывает серверу путь к CSS-файлу. Когда вы рассматриваете страницу в броузере, Вы увидите, как броузер отслеживает тэг <LINK> и загружет настройки страницы из CSS-файла. Этот же CSS-файл может применяться на неограниченном количестве HTML-документов, ссылающихся на него. Вы можете использовать относительные или абсолютные URL с атрибутом HREF.

Импорт Стилей.

Аналогично выглядит импортирование Стилей. Различие в том, что Вы можете объединить импортированные Стили со своими собственными, содержащимися внутри документа. Давайте посмотрим пример:


<HTML> 
<STYLE TYPE="text/css"> 
<!-- 
@import url(company.css); 
H1 { color: orange; font-family: impact } 
--> 
</STYLE> 
<HEAD> 
<TITLE>Первый стиль Васи Пупкина</TITLE> 
</HEAD> 
<BODY> 
<H1>Стили: инструмент для крутых web-дизайнеров</H1> 
<P>Вашим конкурентам и не снилось!</P> 
</BODY> 
</HTML>

В этом случае файл company.css выглядит так:


H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }

В этом примере браузер сначала импортирует Стили из файла company.css (строка @import всегда должна быть первой), а затем добавляет к этому вложенные команды Стилей. На странице применяются и те, и другие Стили.

Тем не менее, уточним, что команда для H1 имеется и во внешних и во вложеных Стилях. Что броузер делает в случае подобного конфликта? Вложеные правила главенствуют, и текст отображается оранжевым:

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

К несчастью, еще не все броузеры поддерживают этот метод применения Стилей на веб-страницах. Пока это доступно только IE 4.0.

Добавление стилей в строки web-страницы

Наконец, Вы можете добавлять Стили непосредсвеннов строки любого HTML-документа.

Пример:


<HTML> 
<HEAD> 
<TITLE>Первый стиль Васи Пупкина</TITLE> 
</HEAD> 
<BODY> 
<H1 STYLE="color: orange; font-family: impact">Стили: 
   инструмент для крутых web-дизайнеров</P></H1> 
<P STYLE="background: yellow; font-family: courier">Вашим 
   конкурентам и не снилось!</P> 
</BODY> 
</HTML>

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

Минус этого метода в том, что Вы должны добавлять встроенный код Стилей каждый раз, когда Вы захотите их использовать. Каждый следующий тэг <H1> отображается по умолчанию, если Вы не присвоите ему команду Стилей.

Встроенные стили менее удобны, чем импортируемые или вставленные посредством ссылки, но Вы можете найти применение и для них.

Запомните, Вы можете использовать один и более методов в каждом конкретном случае. Фактически сила Стилей - в объединении всех этих способов.

В CSS есть еще несколько хитростей. Чтобы узнать о них, мы поговорим о синтаксисе Стилей. >>

День1. Страница 1. Стили. Что же это такое?

День1. Страница 2. Зачем они нужны?

День1. Страница 3. Ваш первый Стиль.

День1. Страница 4. Добавление Стилей в web-страницу.

День1. Страница 5. Классы и другие хитрости.

День1. Страница 6. Каскадирование: Конфликт Стилей

День1. Страница 7. Плохие Новости о браузерах...

День1. Страница 8. Что дальше?

Введение

День1 | День2 | День3 | День4 | День5