|
<
Предыдущая Следующая
> Селекторы CSS
С помощью
селекторов
Вы можете
выбирать элементы
на странице,
которые
хотите
оформить. В CSS существуют
следующие
виды
селекторов: Селекторы
тэгов
Вы можете
выбирать элементы
на странице
для
оформления
по названию
тэга. Пример p { color:green; } h2 { color:red; } Селектор id
Данный
вид
селекторов
позволяет
производить
более
точную
выборку и
используется,
когда
необходимо
выбрать
только один
определенный
элемент на
странице, с
предварительно
заданным
идентификатором. Идентификатор
для
элемента
задается с
помощью
атрибута id (<p id="идентификатор">текст</p>). Для
того, чтобы
затем
оформить
данный элемент
необходимо
обратиться
к
идентификатору
в таблицах
стилей
добавив
перед ним
символ "#"
(#идентификатор
{color:red}). Пример /* Оформим элемент с id="test1" */ #test1 { color:green; font-family:verdana; font-size:1.2em; } Селектор class
Данный
вид
селекторов
позволяет
выбирать
для
оформления
не
единственный
элемент, а
группу
элементов. С
помощью
атрибута class можно
задать, что
элемент
относится к
группе (<p class="имя_группы">текст</p>). Для
того, чтобы
затем
оформить
эту группу необходимо
в таблицах
стилей
обратится к
имени
группы
добавив
перед ней
символ "." (.имя_группы
{color:red}). Пример /* Свойства будут применены ко всем элементам с class="test1" */ .test1 { color:green; font-family:verdana; font-size:1.2em; } Обратите
внимание: имя
группы и
идентификатор
может
состоять
только из
латинских
букв и не
может начинаться
с цифр. Селекторы
атрибутов
Элементы
на странице
могут быть
выбраны по
их
атрибутам. Пример /* Оформит все элементы имеющие атрибут src */ [src] { border:solid green 3px; } Пример
ниже
оформит все
элементы,
которые ссылаются
на главную
страницу
нашего сайта: Пример /* Оформит все элементы, атрибут href которых имеет значение http://www.wisdomweb.ru */ [href="http://www.wisdomweb.ru"] {color:green;} Комбинирование
селекторов
Для
более
точного
выбора
элементов в CSS может
использоваться комбинирование
селекторов. Например,
Вы можете
комбинировать
селекторы
тэгов с
селекторами class: Пример /* Свойства будут применены только к тем элементам с class="test1", которые являются заголовками */ h2.test1 { color:green; font-family:verdana; font-size:1.2em; } Также
Вы можете
комбинировать
селекторы
тэгов: Пример /* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */ div p { color:green; font-family:verdana; font-size:1.2em; } Символ "+" позволяет
выбирать
элементы,
которые идут
сразу после
указанного. Пример /* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */ div+p { color:green; font-family:verdana; font-size:1.2em; } Группировка
селекторов
Часто
при
оформлении HTML документов
с помощью CSS приходится
применять
одинаковые
свойства
для разных
селекторов,
например: h1 { font-family:verdana; color:green; } h2 { font-family:verdana; color:green } p { font-family:verdana; color:green; } Для
того, чтобы
сократить
размер кода
Вы можете
группировать
селекторы с
одинаковыми
свойствами
разделяя их
запятой: Пример h1,h2,p { font-family:verdana; color:green; } Сделайте
сами
Задание
1 оформите
элементы
согласно их
содержимому. Пример <h3>Покрасьте меня в розовый цвет (color:pink).</h3> <p>Данный элемент должен остаться неоформленным.</p> <p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p> <div>Данный элемент должен остаться неоформленным.</div> <div><p>Покрасьте меня в красный цвет (color:red).</p></div> <h4>Данный элемент должен остаться неоформленным.</h4> <p>Покрасьте меня в зеленый цвет (color:green).</p> <p class='yellowcol'>Покрасьте меня в желтый цвет (color:yellow).</p> |
Последние добавления |