Каскадируемые Стили | День1
Ваш первый Стиль.
Время перейти к главному!
Запустите ваш любимый HTML-редактор и создайте в нём следующую веб-страницу:
<HTML>
<HEAD>
<TITLE>Первый Стиль Васи Пупкина</TITLE>
</HEAD>
<BODY>
<H1>Стили: инструмент для крутых web-дизайнеров</H1>
<P>Вашим конкурентам и не снилось!</P>
</BODY>
</HTML>
Получилось очень интересно. Впрочем, имя в заголовке Вы можете изменить.
Теперь добавьте Стили - просто впишите этот код между тэгами <HTML>
и <BODY> :
<STYLE TYPE="text/css">
<!--
H2 { color: green;
font-size: 37px;
font-family: impact }
P { text-indent: 1cm;
background: yellow;
font-family: courier
}
-->
</STYLE>
Откройте страницу в броузере и вот что вы увидите:
Стили: инструмент для крутых web-дизайнеров
Вашим
конкурентам и не снилось!
Мои поздравления! Вы создали первую в жизни web-страницу со Стилями.
(Если строка про конкурентов не имеет желтого цвета, Вам придется обновить
браузер. Рекомендую Internet Explorer или Netscape Communicator 4-х версий.)
Терминология Стилей
Рассмотрим из чего состоит этот код:
Стили задаются командами. Простые команды выглядят так:
H2 { color: green }
Эта команда сообщает браузеру, что текст между <H2> и </H2> должен
быть зеленым.
В данном примере H2 - селектор, к которому применяеются Стили. Описание
определяет, какой Стиль используется и тоже состоит из двух частей. В данном
примере - свойство (цвет) и значение (зеленый).
Все это может быть применено к любому тэгу, будь то <P>, <CODE>
или <TABLE>. Стили также можно применять с графикой, помещая их с тэгом
<IMG>.
Как видно из первого примера, Вы можете группировать команды Стилей.
Выше мы установлии для тэга <P> сразу три команды. Аналогично вы можете
группировать тэги:
H2, P, BLOCKQUOTE { Font-family: arial }
Это значит, что весь текст в пределах тэгов <H2>, <P>, <BLOCKQUOTE>
отобразится шрифтом Arial.
Наследование
Свойства стилей передаются по наследству от "родителя" (основного тэга)
к "ребенку" (тэгу, находящемуся внутри основного). Давайте рассмотрим пример:
B { color: blue }
Эта команда сообщает браузеру, что весь текст в пределах тэга <B>
будет отображаться синим. Что мы видим?
<B>Даёшь поддержку Стилей на <I>всех страницах</I> к 2000 году!</B>
Эта команда не устанавливалось для тэга <I>. Но здесь он находится
в пределах тэга <B> и наследует текущую команду. Так, "ребенок" отображается
синим, подобно своему "родителю":
Даёшь поддержку стилей на всех страницах
к 2000 году!
Теперь мы с вами знаем основные правила работы Стилей. Мы также изучили
один из способов добавления Стилей в web-страницу. Но есть и другие способы.
Давайте их рассмотрим. >>
День1. Страница 1. Стили. Что же это такое?
День1. Страница 2. Зачем они нужны?
День1. Страница 3. Ваш первый Стиль.
День1. Страница 4. Добавление Стилей в web-страницу.
День1. Страница 5. Классы и другие хитрости.
День1. Страница 6. Каскадирование: Конфликт Стилей
День1. Страница 7. Плохие Новости о браузерах...
День1. Страница 8. Что дальше?
Введение
День1 | День2 | День3 | День4 | День5
|
