Селектор и описание - основа CSS

Селектор и описание - основа CSS  
Селектор и описание - основа CSS
 

Селектор и описание - основа CSS:

Селектор и описание - основа CSS.

Вы уже знаете, что такое CSS и как его подключать к html документу. Теперь перейдем к основам. В предыдущем уроке вы видели такой пример:

H1 {font-size: 12px;}


Здесь все предельно просто - сначала указывается объект, затем - в фигурных скобках как он должен выглядеть. Если все называть своими словами, то "H1" - это селектор, "font-size" - свойство, "12px " - описание. Пары свойство-описание отделяются друг от друга с помощью точки с запятой. Все селекторы можно условно разделить на три группы: селекторы, образованные от html тегов, классы и id-селекторы. Предыдущий пример с "H1" - это и есть пример селектора первой группы. Их особенностью является то, что свое действие эти селекторы распространяют на весь документ. То есть в нашем примере все заголовки первого уровня будут отображаться так и никак иначе! А если один или несколько заголовков нам надо выделить? Тут и приходят на помощь классы. Чтобы было понятно, что речь идет о классе, в CSS документе перед названием класса ставится точка. Имя для класса можно придумать любое, вы здесь не ограничены. Так как же работают классы? Посмотрим на этот пример.

<html>
<head>
<title>
Тест </title>
<style type="text/css">
.textclass {
font-size: 12px;
}
</style>
</head>
<body>
<h1 class="textclass">
Заголовок </h1><br>
<p class="textclass">
Параграф </p>
</body>
</html>



Как мы видим, создается класс textclass, который устанавливает свойство font-size равным 12px. Мы присваиваем этот класс заголовку и параграфу, после чего, они оба становятся одного размера. Таким образом, классы не зависят от того, кому мы их будем присваивать. Главное, чтобы у этого html-элемента было данное свойство. ID-селекторы служат для уникальной идентификации, то есть задания свойств определенному элементу. Перед этим селектором ставится знак решетки. Возьмем предыдущий пример: допустим, наш класс присваивается заголовку первого уровня и параграфу, а заголовок второго уровня должен иметь шрифт равный 10px. Сначала мы добавляем соответствующий селектор и описание:

#special {
font-size: 10px;
}


а затем сам элемент:

<h2 id="special"> Заголовок второго уровня </h2>


Так же существуют различные сложные селекторы, но о них речь пойдет в следующих уроках.

| Каскадные листы стилей. Как подключать к HTML документу. | Содержание | Блоки в CSS или Сайт без таблиц |

Баннер Profit-Partner.ru

Опрос
Вопрос: Ваш возраст ?
< 15
15 - 17
18 - 25
26 - 33
34 - 45
> 45
 
 
 


Яндекс цитирования
Rambler's Top100

  Copyright © 2005-2006 WCode.Ru Group