Таблица стилей, CSS, класс, идентификатор, id

Ну, что такое таблица стилей (CSS) вы уже поняли. Частенько задают вопросы. Как в таблице стилей создать простую таблицу, или страничку? Ответ простой - ни как. В таблице стилей можно задать только свойства элемента, например ширину той же самой таблицы, толщину и цвет рамок, поиздеваться над шрифтами и т.д. Саму же таблицу там создать невозможно.

Можно сделать страничку для сайта на дивах (div). Вот тогда в таблице стилей, меняя свойства дивов, будете менять и саму страничку - месторасположение и цвет блоков, абзацев, меню и т.д. Я вот здесь что то об этом говорил - PHP, дивы (<div>).


Собственно говоря, что бы добавить нужные вам свойства элементу - надо сперва присвоить ему класс. К примеру это делается так:

<span class="z002">таблица стилей (CSS)</span>

или так:

<p class="z002">таблица стилей (CSS)</p>

В первом случае я присвоил класс просто словам. Во втором случае, сразу целому абзацу. Классы можно присваивать и таблицам, и горизонтальным линиям и всему, чему захотите.


Хотя в некоторых случаях можно обойтись и без присвоения классов, а сразу прописать свойства элемента в таблице CSS. Возьмём к примеру горизонтальную линию (<hr>). Кстати в разных кодировках она прописывается по разному. Где то например с чёрточкой - </hr>, где то без. В принципе без разницы, браузеры и так, и так поймут. Но это сейчас, а раньше такого не было :) Так вот, свойства этого элемента можно сразу прописать в таблице CSS:

hr {
border: none; /* Убираем границу для браузера Firefox. */
color: #999; /* Цвет линии для браузера Internet Explorer. */
background-color: #999; /* Цвет линии для браузера Firefox и Opera. */
height: 1px; /* Толщина линии. */
width: 90%;/* Ширина линии, можно задать и в пикселях. */
margin-left: 0px;/* А вот тут довольно весело получилось. Лично у меня, линия ни как не хотела выравниваться по левому краю. Пришлось задать нулевой отступ слева. */
}

В принципе так задать свойства можно любому элементу. Но на страничке всегда находятся по нескольку одних и тех же элементов и частенько для них требуются разные свойства. Поэтому слишком увлекаться не советую. Проще каждому элементу присвоить свой класс.


А что бы задать свойства классу, нужно сделать всё тоже самое. Только в начале прописать класс, вместо элемента. Пример покажу на свойствах для шрифта:

.z002 {
font-family: Verdana, Geneva, sans-serif;/* Название шрифта. */
font-size: 13px;/* Размер. */
font-weight: bold;/* Выделил жирным. */
}

Это я так выделяю слова на сайте, вместо просто жирного. Некоторые шрифты, при выделении жирным, начинают плохо читаться. Поэтому я и сделал отдельный стиль. На страничке у меня один шрифт, а при выделении слова жирным, другой и ни каких проблем.


Кроме классов существует ещё такое понятие как идентификатор (id). Можно сказать что это одно и тоже. Только идентификатор поглавнее будет. То есть, если они вместе встретятся в свойствах элемента. То у идентификатора будет более высокий приоритет. Кстати многие гуру стали поэтому утверждать, что это и является его основной задачей. Это не совсем так, точнее совсем не так. Идентификатор используется для определения одного элемента. А класс может использоваться для определения группы элементов. В общем это другая история и принципиального значения не имеет. Просто запомните, что в таблице CSS, они прописываются по разному:

.z002 - . точкой прописывается класс.

#z002 - # решёткой прописывается идентификатор (id).

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

a:link, a:visited, a:active, a.forumtitle:active, a.topictitle:active, a.left:active, a.forumtitle:focus, a.topictitle:focus, a.left:focus {
color: #4141A5;
}

Я тут задал один цвет, для целой кучки классов, для ссылок.


И просто совет :) Постарайтесь писать название класса не русскими буквами :) Дело в том, что при переходе с одной кодировки на другую - вместо русским букв могут возникнуть кракозябры. На работе сайта это не скажется. Но вот посмотреть какой класс вы присвоили тому, или иному элементу, будет невозможно. Просто для удобства одним словом.

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP