Блог Тимура Казанского

Урок 2. CSS классы


Всем привет! В первой части данного урока мы подробно разберем, что же такое классы css, зачем они нужны и в чем их отличие от идентификаторов, а во второй части мы подробно рассмотрим рабочий пример, а именно стилизацию блога, который мы с вами начали писать в уроке 6. Элементы div на примере создания блога. Как говориться меньше слов – больше действий, поэтому приступим.

И так, классы нужны для того, чтобы классифицировать элементы html по определенным группам, которые имеют что-то общее между собой. В качестве примера, представьте все тот же интернет магазин радиоуправляемых игрушек, так вот, каждую позицию (или товар) с ценой мы будем классифицировать, как class= "cena" и присвоим данному классу красный цвет, в итоге мы получим группу (цена) с общим свойством – красный цвет.

Класс в css документе мы определяем с помощью точки (.), далее указываем имя класса (например .imya). Если мы хотим применить свойство css, (например красный цвет) ко всем элементам html помеченным определенным классом (например <p class="color">,<h1 class="color">,<b class="color">), то в css документе указываем класс без имени селектора (т.е. просто .color), следовательно все элементы, которые помеченные данным классом будут окрашены в красный цвет(т.е. это элементы p,h1 и b).

Но если мы хотим применить свойство css (красный цвет), только к абзацам класса (<p class="color">) или заголовкам (<h1 class="color">), то уже перед точкой указываем имя селектора данного элемента (p.color="red" или h1.color="red"). Посмотрите, как это будет выглядеть на простом примере:

В элементе p устанавливаем атрибут class со значением cena (class= "cena"):

<html>
<div class= "item">
<p>вертолет</>
<p class= "cena">Цена: 1500 руб.</p>
</div>
</html>

В css документе указываем имя селектора (p), и имя класса (cena):

<style>
p.cena {
color: red;
}
</style>

А теперь рассмотрим отличие классов от идентификаторов. Об идентификаторах, а также селекторах css я уже писал в в уроке 1. Основы и правила CSS. Напомню, идентификаторы (id) нужны для того, чтобы придавать уникальность какому либо элементу в html, т.е. значение идентификатора, должно использоваться в документе только один раз.

Идентификатор в css документе определяется с помощью знака решетки (#), следом идет имя идентификатора (#imya). Чтобы было все понятно, мы еще раз рассмотрим вышеуказанный пример, применив к нему идентификаторы:

Товар радиоуправляемый вертолет S-200:

<html>
<div class= "item" id="vert_1">
<p>вертолет S-200</>
<p class= "cena">Цена: 1500 руб.</p>
</div>
</html>
<style>
p.cena {
color: red;
}
div.item {
padding 5px;
}
#vert_1 {
сolor: blue;
}
</style>

Товар радиоуправляемый вертолет S-600:

<html>
<div class= "item" id="vert_2">
<p>вертолет S-600</>
<p class= "cena">Цена: 3500 руб.</p>
</div>
</html>
<style>
p.cena {
color: red;
}
div.item {
padding 5px;
}
#vert_2 {
сolor: orange;
}
</style>

Как вы видите, класс «товары» (class= "item") имеют поля в 5px, т.е. все товары, принадлежащие к классу class= "item" имеют размер полей в 5 пикселей, когда как, только один из них, т.е. единственный товар имеет только один, единственный цвет (blue и orange). Вот и все различие.

Стилизация блога

А вот стили, которые использовались в нашем блоге, из урока 6:

<style> body { указываем правила для тела страницы
background: #f9f3e9; цвет фона
color: #594846; цвет текста
font: "Adobe Caslon Pro", Georgia, "Times New Roman", serif; указываем шрифт
}
.kolonka b { правила для селектора b класса kolonka
text-align: center; отображение текста по центру
padding-left: 10px; поле в 10px
}
.kolonka {
float: right; класс колонка плавает по правому краю
margin-left: 20px; отступ в 20px
width: 200px; ширина правой колонки 200 пикселей
padding-bottom: 200px; нижнее поле имеет размер 200 пикселей
padding-top: 20px; верхнее поле 20 пикселей
font-size: 1.2em; размер шрифта 1.2em
}
a, a:visited { правила для псевдокласса «visited» селектора «a»
color: blue; задаем синий цвет
}
.navigaciya a{
padding-left: 150px; размер левого поля 150 пикселей
padding-right: 60px; размер правого поля 60 пикселей
color: grey; цвет серый
font-size: 1.3em; размер шрифта
}
p {
margin: 0.5em 0.25em;
color: black; черный цвет
}
h1 {
font-size: 1.75em;
border: solid #594846; определяем тип и цвет границы
border-width: 2px 0; толщину границы
padding: 0.25em; размер поля
text-align: center; текст по центру
font-variant: small-caps; модифицируем символы, как уменьшенные
}
h2 {
text-align: center;
font-variant: small-caps;
}
.podval {
background-color: grey;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
clear: right; запрещает обтекание с правой стороны
}
.posti {
float: left;
width: 75%;
padding-left: 1.5em;
padding-bottom: 80px;
line-height: 160%;
font-family: Verdana,sans-serif;
font-size: 0.95em;
letter-spacing: -0.5px; сужаем интервал между буквами
}
h2 {
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
font: 1.7em normal Verdana,Tahoma,sans-serif;
letter-spacing: -0.5px;
color: black;
}
/* Structure */
body, .shapka, .navigaciya, .podval {
width: 1200px;
}
.shapka, .navigaciya, .podval {
clear: both; отменяет обтекание элемента с правого и левого края
}
</style>

Знаю, многие правила стилей, которые представлены выше, мы с вами еще не разбирали и сначала я даже думал не описывать их, но потом, все-таки решил сделать это, хоть и очень кратко. Что-то может быть для вас интуитивно понятным, а что-то, мы уже успели разобрать в предыдущем уроке. Думаю, через пару уроков, мы устраним все пробелы, которые у вас могли возникнуть в ходе изучения данного урока и все обязательно встанет на свои места, так что, до следующих уроков и всем удачи.

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0