Тонкости CSS

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

Задача (на примере пункта меню): Сверстать меню без потери текстовых ссылок и замусоривания html-кода.

Решение:
применяем к ссылке display: block, задаем нужную ширину и высоту, кладем в бакгроунд нужную нам картинку. С этим я думаю проблем ни у кого возникнуть не должно.

А теперь самое интересное – красим слова.

Оптимальное решение – это использовать тэг со специально прописанным для этого случая стилем и применить стиль к каждому новому спану.

Но… В задании сказано не захламлять код, т.е. class=”название класса” – использовать нельзя.
Так вот решение:


a.free {
width: 196px;
height: 94px;
background-image: url(free.png);
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #005FC4;
}
a.free span {
font-size: 15px;
color: #DB1716;
float: left;
}
a.free span + span {
font-size: 12px;
color: #005FC4;
float: left;
}


Поясню: Первое правило задает размер и цвет шрифта вне тэга . Второе объясняет что происходит с первым дочерним спаном (увеличивается шрифт и красится в красный)

А последнее – третье правило содержит комбинация селекторов дочерних и сестринских элементов и означает: «Применить это правило к любому элементу span, которому непосредственно предшествует другой элемент span и который также является дочерним элементом .free». Другими словами, это все span’ы внутри .free, кроме первого.

Подпишитесь на RSS

Следуй за мной в Твиттере

Обновления на e-mail