Каскадируемые Стили | День1
Классы и другие хитрости.
Мы уже познакомились с основами синтаксиса Стилей. Теперь еще несколько
хитростей.
Классы
Выше было сказано, что команды Стилей можно испльзовать с любым конкретным
тэгом. Но что делать, если вы хотите чего-то большего? Например, одному
параграфу указать зеленый цвет, второму - пурпурный и серый - третьему?
В этом Вам помогут классы. Вы создадите три различных класса для параграфов,
с разными командами Стилей в каждом. Стили (или вложенные, или находящиеся
во внешнем CSS-файле) будут выглядеть примерно так:
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
Ваш код HTML должен выглядеть так:
<P CLASS=first>Это первый параграф, имя класса "first."</P>
<P CLASS=second>Это второй параграф, имя класса "second."</P>
<P CLASS=third>Это третий параграф, имя класса "third."</P>
Вы также можете создать классы, которые не будут прилагаться к конкретному
HTML-тэгу:
.first { color: green }
Этот метод - более гибкий, поскольку теперь мы можем использовать CLASS=first
с любым HTML-тэгом в пределах тэга <BODY>, и текст будет отображаться
зеленым.
Контекстные селекторы
Скажем, Вы хотите, чтобы "жирный" текст отображался красным, но только
в том случае, если этот bold текст находится в определенном месте документа.
Думаете это невозможно?
Очеь даже возможно. Со Стилями даже самые безумные ваши мечты осуществятся.
Контекстные селекторы выполняются только в конкретной ситуации, указываемой
в их свойствах.
P B { color: red }
<H1><B>Алексей Александров</B>, программист</H1>
<P>Знает HTML, Java, Javascript и CSS.
Есть ли <B>что-то,</B>что ему не под силу?</P>
Команда Стилей сообщает браузеру, чтобы "жирный" текст отображался красным
только если он находится в пределах тэга <P>. Таким образом, когда приведённый
выше HTML-код отображается броузером, цвет "жирного" текста в первой строке
- тот, который установлен по умолчанию, а во второй строке - красный.
Комментарии
Даже несмотря на то, что структура Стилей проста и понятна, комментарии
Вам не помешают. К счастью, комментарии могут быть использованы в любой
строке кода CSS:
/* зеленый для параграфа со стилем first*/
P.first { color: green }
H1 { text-indent: 10px; font-family: verdana }
/* сдвигать все картинки на 100px сверху */
IMG { margin-top: 100px }
Каскадирование
Мы уже прошли с Вами пять разделов, а вы все еще не справиваете: "Почему
эта технология называется Каскадируемые Стили"? Ответ - в следующем разделе. >>
День1. Страница 1. Стили. Что же это такое?
День1. Страница 2. Зачем они нужны?
День1. Страница 3. Ваш первый Стиль.
День1. Страница 4. Добавление Стилей в web-страницу.
День1. Страница 5. Классы и другие хитрости.
День1. Страница 6. Каскадирование: Конфликт Стилей
День1. Страница 7. Плохие Новости о браузерах...
День1. Страница 8. Что дальше?
Введение
День1 | День2 | День3 | День4 | День5
|
