Виды селекторов CSSИспользование CSS не ограничивается применением какого-то одного селектора. Существует несколько основных видов селекторов, благодаря которым мы можем использовать истинное предназначение каскадных таблиц для придания яркости, красочности и усовершенствования внешнего вида веб-страниц сайтов. Таким образом, употребление нескольких видов селекторов позволяет сделать абсолютно любой дизайн различных элементов веб-документа.
Давайте же ознакомимся с основными селекторами CSS. Селекторы элементов (тегов)Это самые простые и элементарные селекторы. При этом, селектором является определенный элемент или тег HTML страницы. Давайте посмотрим, как это выглядит на примере: h1 {color: #36CFFF}
Здесь в качестве селектора выступает заголовок первого уровня, то есть тег <h1>, а все его содержимое имеет цвет «36CFFF». Универсальные селекторыС помощью данного селектора можно применить стили ко всем элементам веб-страницы. Например: * {color: #000000}
Это правило делает содержимое всех элементов страницы черным цветом. Селекторы потомковС их помощью можно изменять стили определенного элемента, только тогда, когда он находится внутри другого элемента. К примеру: ul em {color: #000000}
Таким образом, CSS применяется к тегу <em> только тогда, корда он находится внутри тега <ul>. Селекторы классовОни позволяют задать стили только к тем элементам, которые имеют одинаковые названия атрибута «class». Вот как это будет выглядеть html код: <p class="black">С помощью CSS этот текст будет черным</p>
А таким будет стиль: .black {color: #000000}
Если же вы хотите, чтобы CSS применялся только к тегу <p>, то синтаксис будет таким: p.black {color: #000000}
Селекторы идентификаторовПринцип использования для таких селекторов такой же самый как для селекторов классов, но атрибутом элемента выступает идентификатор. Код html: <h1 id="myID">Заголовок 1-го уровня</h1> CSS код будет следующим: #myID {color: #000000}
Так же, как и в случае с селекторами классов, CSS можно прописать для идентификаторов определенного элемента: h1#myID {color: #000000}
Групповые селекторыВ CSS есть возможность применять один и тот же стиль к нескольким элементам без копирования того самого стиля под каждый элемент. Для этого, между элементами нужно проставить запятые. Пример: h1, h2, h3 {color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase}
Теперь вы знаете о самых основных селекторах CSS, в следующих статьях мы будем изучать уже непосредственно написание кодов CSS с разными свойствами. Удачи в создании сайтов!
| ||||
Рейтинг: Категория: Учебник CSS | Добавил: zaharchuk (13.01.2015)
4.0/5 из 5
| ||||
Просмотров: 8435 |
Комментариев: 0 | |