Селекторы CSS

Селектор тегов

Итак мы подключили таблицу стилей. Давайте теперь посмотрим, что же это такое – стиль.

Стиль состоит из двух частей – "селектор" и "свойство: значение;".

В каждом селекторе может быть множество свойств и значений. Вам это ничего не напоминает? Вспомните HTML – < тег атрибут=”значение”>. Опять возникает вопрос: “а зачем?”. Скоро поймёте.

Селектор {
свойство: значение;
}

Давайте разберём эту запись. Селектор (англ. отобранный, выбранный) указывает, какой элемент HTML кода мы выберем, для придания ему тех, или иных свойств и значений.

Например, захотелось нам изменить цвет всего текста, заключённого в теги , на странице нашего сайта.

Для этого создаём селектор тега р, задаём ему свойство color, и значение #A5260A.

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="utf-8" />

        <title>Документ без названия</title>

<style>

p{

  color:#A5260A;

}

</style>

/head>

body>

  <p>Текст абзаца статьи</p>

    <p>Текст абзаца статьи</p>

  <p>Текст абзаца статьи</p>

</body>

</html>

И смотрим, что выдаст браузер

Как видим всё, что было заключено в тег , приобрело заданный цвет.

Итак, ещё раз вникнем, что мы сделали. В область “селектор” мы поставили тег, свойства которого нам захотелось изменить, вернее изменить свойства того, что заключено в этот тег.

В области “свойства:” указали, какое именно свойство будет меняться, и в области “значение;”, как это свойство будет изменено.

Селектор идентификатор (якорь)

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

Название этому якорю придумываем самостоятельно. У меня “ab”, а можно “p” или “nev”.



<p>Текст абзаца статьи</p>

<p id="ab">Текст абзаца статьи</p>

<p>Текст абзаца статьи</p>

Затем создаём селектор для этого якоря, и зададим цвет.



#ab{

  color: #A5260A;

}

И полностью, как это делается в html документе

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="utf-8" />

        <title>Документ без названия</title>

<style>

#ab{

color: #A5260A;

}

</style>

</head>

<body> Текст абзаца статьи Текст абзаца статьи Текст абзаца статьи </body> </html>

Посмотрим, как это отобразит браузер.

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

Идентификатор очень часто применяется в css. Им отмечаются блоки и другие элементы кода, которым потом, в таблицах стилей, задаются самые разные свойства и значения.

Селектор классов

Ещё немного усложним. Допустим, что какому либо элементу, у нас уже задан идентификатор и стили, а внутри этого элемента, есть ещё один, или несколько, вид которых нам хотелось бы сделать отличным от других, или задать им какой-то определённый размер и расположение.

В таком случае применяется селектор классов. Так же как и идентификатор, класс задаётся элементу в коде html. Для примера давайте возьмём нумерованный список, и несколько строк из него, сделаем не похожими на остальные.

Задаём идентификатор и класс элементам html кода



<ol id="ab">

  <li>Строка списка</li>

  <li>Строка списка</li>

  <li class="nev">Строка списка</li>

  <li class="nev">Строка списка</li>

  <li>Строка списка</li>

  <li>Строка списка</li>

</ol>

И создаём селекторы идентификатора и класса



#ab{

  color: #A5260A;

}

.nev{

  color: #18a40a;

}

Как видите, в css селектор класса пишется с точкой перед словом. Кстати слово может быть любым, но лучше дать этому слову какую нибудь смысловую нагрузку.

Допустим, собрались Вы задать, при помощи класса, цвет нескольким элементам, значит надо назвать его «.color». Это чтоб лучше ориентироваться потом в том, что написали.

Пример:

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="utf-8" />

        <title>Документ без названия</title>

<style>

#ab{

  color: #A5260A;

}

.nev{

  color: #18a40a;

}

</style>

</head>

<body>

  <ol id="ab">

    <li>Строка списка</li>

    <li>Строка списка</li>

    <li class="nev">Строка списка</li>

    <li class="nev">Строка списка</li>

    <li>Строка списка</li>

    <li>Строка списка</li>

  </ol>

</body> </html>

И смотрим, что нам покажет на это браузер.

Всё как и планировали. Идентификатор задан всему списку, и он коричневый, а две строки согласно классам — зелёные.

Групповые селекторы

Групповые селекторы применяются тех случаях, когда нескольким разным тегам нужно придать одни и те же свойства.

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

Пишутся они через запятую, без пробела



h1,p,h3,img{

  border: 2px solid #0a29a4;

  width: 150px;

}

Пример:

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="utf-8" />

        <title>Документ без названия</title>

<style>

h1,p,h3,img{

  border:2px solid #0a29a4;

  width:150px;

}

</style>

</head>

<body>

  <h1>Заголовок</h1>

    <p>Абзац</p>

      <img src="http://trueimages.ru/img/9e/70/d2dbf025.jpg">

    <h3>Подзаголовок</h3>

  <p>Абзац</p>

</body> </html>

Посмотрим, что покажет браузер.

Вот, пожалуйста. У всех выбранных тегов, появилась рамочка. Можно станцевать корробори (групповой танец австралийских аборигенов, отражающий радости жизни).

Селекторы потомков

Селектор потомков позволяет задавать какие либо свойства потомкам, через их родителей.

Дело в том, что у тегов очень строгий принцип наследования, то есть все теги, располагающиеся внутри других тегов, являются их потомками, и патриархом у них является тег < html>.

Затем идут его дети — теги <head> и <body>, каждый со своими потомками, и так далее.

Посмотрим на примере списков. В упорядоченном списке, родитель <ol> имеет несколько потомков <li>.

В неупорядоченном, родитель <ul>, так же имеет потомков <li>. Наша задача — задать нужные свойства только потомкам упорядоченного списка.

И сделать это можно через родителя <ol>, не прибегая к идентификаторам и классам. В этом случае родитель и наследник прописываются через пробел.

Пример:

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="utf-8" />

        <title>Документ без названия</title>

<style>

ol li{

  color: #a40a0d;

}

</style>

</head>

<body>

  <ol>

    <li>Строка списка</li>

    <li>Строка списка</li>

    <li>Строка списка</li>

  </ol>
  <ul>

    <li>Строка списка</li>

    <li>Строка списка</li>

    <li>Строка списка</li>

  </ul>

</body> </html>

Смотрим картинку в браузере.

Как видим, окрасились только теги “li”, являющиеся потомками тега “ol”, хотя в следующем неупорядоченном списке, тоже есть теги “li”.

Остаётся добавить, что подобным образом задаётся не только цвет, а и все другие свойства, какие только можно придать контенту, и которые мы вскоре рассмотрим.

И ещё о наследовании. Часто случаются такие ситуации, когда какой либо стиль бывает задан всему тегу <body>, а внутри него, какому-то элементу задаётся другой стиль, и так бывает по нескольку раз в порядке убывания.

Поэтому CSS и называются каскадные таблицы стилей. Так вот, браузер отобразит элемент в том стиле, который находится к нему, элементу, ближе.

Неужели не осталось вопросов? Спросить

Перемена

Еврейская Винда:
После загрузки Windows появляется надпись «Таки я загрузилась! » и в течение 15 минут играет мелодия «Семь сорок», которую нельзя не приостановить, не отменить
При открытии любой папки или файла появляется предупреждающее сообщение: «И оно тебе туда надо? »
Пpи нажатии на клавишу «Стаpт» появляется сообщение «Hу, шо ты тут клацаешь, пошел бы лучше в футбол поиграл …».

Тeги div и span < < < В раздел > > > Шрифты для сайта в CSS

Статьи по теме
Что такое CSS;
Подключение таблиц стилей;
Селекторы CSS.;
Выравнивание и красная строка;
Сокращение записи;

Селекторы CSS.

Селектор тегов

Селектор идентификатор (якорь)

Селектор классов

Групповые селекторы

Селекторы потомков

2 комментария на «Селекторы CSS.»

Добавить комментарий