Селекторы классов
Оригинал: Class selectors
Введение
Не смотря на то, что селекторы предназначены для того, чтоб выбрать любой html элемент, можно также создавать
селекторы для элементов, в которых будет присутствовать признак класса, независимо от их расположения в дереве документа.
Например, если вы хотите выделить параграф и первый пункт списка, чтоб они отличались от общего текста, то это можно реализовать следующим
способом:
<body>
<p class="big">
Любой текст
</p>
<p>
Любой текст
</p>
<ul>
<li class="big">
Элемент списка
</li>
<li>
Элемент списка
</li>
</ul>
</body>
Дерево такого html документа будет таким:
css правила для класса .big :
.big {font-size:110%;font-weight:bold;}
Комбинирование названий классов и типа селекторов
Если при составлении css правил вы хотите быть более точными, то можно указывать для какого типа селекторов будет использоваться класс.
div.big {color:blue;}
td.big {color:yellow;}
label.big {color:green;}
form.big {color:red;}
Например, вы хотите, чтоб шрифт начала параграфа и первый элемент списка был большего размера, но чтоб начало параграфа было выделено жирным. Ниже показано дерево этого способа
и используемые для этого стили:
.big {font-size:110%;}
p.big {font-weight:bold;}
Все элементы с классом .big будут использовать размер шрифта равный 110% от основного.
А жирным будет выделен лишь тот текст, который находится в
параграфе с классом .big.
Комбинирование классов для одного элемента
Наверно самым мощным аспектом классов селекторов является то, что вы можете использовать несколько классов для одного элемента.
<p class="big indent">
Любой текст
</p>
.big {font-weight:bold;}
.indent {padding-left:2em;}
Такое комбинирование классов для одного элемента позволяет создавать классы нацеленные лишь на одну функцию.
В данном примере используются два класса, один из них направлен на воздействие для шрифта, а второй для отступов.
Подмена классами html элементов
Как показано выше использование классов - это очень мощный инструмент для создания стилей сайта. Но не нужно переусердствовать.
<div class="heading">
Заголовок
</div>
.heading {
font-weight:bold;
font-size:140%;
color:#600;
}
Проблема описанного выше способа создания заголовка заключается в том, что браузеры не поймут, что эта конструкция - заголовок и будут воспринимать
как обычный текст, что противоречит принципам семантической верстки.
Для создания заголовков предпочтительней будет следующий способ:
h2 {
font-weight:bold;
font-size:140%;
color:#600;
}
А если вам нужно стилизировать лишь один заголовок второго уровня на странице, то вы можете создать специальный класс для этого:
<h2 class="sidenav">
Заголовок
</h2>
h2.sidenav {
font-weight:bold;
font-size:140%;
color:#600;
}
Меньше классов!
Не следует злоупотреблять классами селекторов. Например, вы можете создать для каждого элемента, который будет использоваться и это будет считатся ошибкой.
<div class="sidenav">
<h2 class="sideheading">Навигация сайта</h2>
<ul class="sidelist">
<li class="sideheading">элемент списка</li>
<li class="sideheading">
<a href="#"><span class= "sidelink">элемент списка</span></a>
</li>
<li class="sideheading">элемент списка</li>
</ul>
</div>
Как видно с примера у нас получается очень сложная конструкция, которую к тому же проблематично будет изменять, так как для каждого добавленного элемент нужно будет прописывать нужный класс.
Вместо этого множества классов, можно использовать всего лишь один, от которого будут наследоватся стили для всех вложенных элементов.
<div class="sidenav">
<h2>Навигация сайта</h2>
<ul>
<li>элемент списка</li>
<li>
<a href="#">элемент списка</a>
</li>
<li>элемент списка</li>
</ul>
</div>
Как видите структура становится намного проще и понятней. И для этой структуры разработать стили очень просто.
Все будет базироватся на наследовании от главного контейнера div.
div.sidenav {}
div.sidenav h2 {}
div.sidenav ul {}
div.sidenav li {}
div.sidenav li a {}
Подумайте, прежде чем создавать класс
Прежде чем создавать класс для селектора, вы должны ответить на следующие вопрсы:
- Существует ли html элемент, селектор которого мог бы использоватся вместо класса?
- Не создан ли уже класс или id который можно было бы использовать не создавая новый класс?
Добавить комментарий
