CSS Селекторы

селекторы css

Всем доброго времени суток! В этой статье я вам расскажу об css-селекторах. Через селектор мы указываем браузеру конкретно, для какого тега или группу тегов, оформить внешний вид на странице.

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

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

селектор и правила css

Базовые селекторы

Существуют 3 базовых селекторов:

  1. Селектор тегов
  2. Id селектор
  3. Селектор класса

Теперь расскажу подробнее о каждом из них.

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

Используется, когда хотим задать стиль для конкретного тега, например для абзацев. Этот стиль применяется ко всем абзацам, которые есть на странице.
Разберем это на примере.
Допустим у нас есть html страница с таким кодом:

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <title>Файл html</title>
    </head>
    <body>
        <h2 align="center"> What is Lorem Ipsum </h2>
        <p>
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only.
        </p>
        <p>
            five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </body>
</html>

В браузере оно отображается так:

html страница

Допустим мы хотим, чтобы все абзацы на этой страницы были зеленого цвета, для этого в таблицу стилей пишем следующее:

p{
    color: #00CA00;
}

Теперь страница в браузере отображается так:

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

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

Разберем то что написали в таблицу стилей.

оформление абзаца в css

Аналогично с групповыми селекторами.
Добавим еще пару элементов в html страницу.

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <title>Файл html</title>
    </head>
    <body>
        <h2 align="center"> What is Lorem Ipsum </h2>

        <p>
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>

        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only.
        </p>

        <ul>
            <li> Element 1 </li>
            <li> Element 2 </li>
            <li> Element 3 </li>
            <li> Element 4 </li>
            <li> Element 5 </li>
        </ul>

        <a href="//sozdatisite.ru"> sozdatisite.ru </a>

        <h2> Заголовок второго уровня </h2>

        <p>
            five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </body>
</html>

Сохраняем и смотрим, как отображается в браузере:

html страница с сылками

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

h2, a, li{
    color: #CA000D;
}

Стиль применяется ко всем выбранным тегов.

оформление html страницы

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

2. ID Селектор

Для начала в коде html странице задаем id для тега, которого хотим оформить. Например, зададим первому абзацу id, с именем firstp

<p id="firstp">
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Далее в таблицу стилей задаем стили для этого абзаца. Например, увеличим размер текста, поменяем стиль шрифта и цвет. Для этого пишем следующее:

#firstp{
    color: #650095;
    font: 16px Arial, sans-serif;
}

Сохраняем изменения и смотрим на результат:

id селектор css

Как видим у первого абзаца ( у которого задали id ), изменился внешний вид.

#firstp – это и есть id селектор. Другими словами это идентификатор для конкретного тега и он уникален на странице. Перед именем идентификатора обязательно должна быть решётка.

3. Селектор класса

Класс это группа свойств, которая обычно применяется ко многим тегам. Например, мы хотим выравнивать зеленые абзацы по центру и изменить цвет текста. Для этого в таблицу стилей создаем класс с именем center, где напишем эти свойства. Перед именем класса обязательно должна быть точка.

.center{
    text-align: center;
    color: #474747;
}

Класс мы создали, теперь нужно задать этот класс тем абзацем, которые хотим сделать серого цвета и выравнивать по центру. Класс задается через атрибут тега, class="Имя класса".

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

Открываем в редакторе html страницу и задаем класс для второго и последнего абзаца.

1 абзац:

<p class="center">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only.
</p>

2 абзац:

<p class="center">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only.
</p>

Сохраняем и смотрим на результат:

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

Вот и все о чем хотел я вам рассказать об селекторах CSS . В версий CSS3, добавлены и другие селекторы, но об этом я расскажу вам в отдельной статье.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%