Название

Селекторы CSS. Выбраем элементы на странице по имени тэга.

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

Одним из самых простых способов выбирать элементы на веб-странице и присваивать им соответствующие стили оформления являются селекторы по имени тэга.

Давайте сразу рассмотрим пример на следующей простой странице:

<h1>Чем отличаются атрибуты HTML id от class.</h1>
<p>Эта статья является продолжением статьи об атрибутах id и class. Если вы успели ее прочитать, то у вас наверняка мог возникнуть вопрос, чем же отличаются эти атрибуты друг от друга?</p>
<p>Бывают ситуации, что одному элементу присваиваются сразу оба атрибута:</p>
<p>В чем же отличие?</p>
<p>Атрибут id расшифровывается от английского слова «identificator», которое переводиться как «идентификатор» или уникальный признак объекта, позволяющий различать его от других объектов. Это, своего рода, паспорт элемента.</p>

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

Вы можете добавлять к каждому из них атрибут style, который будет задавать нужный цвет.

<h1>Чем отличаются атрибуты HTML id от class.</h1>
<p style="color:red">Эта статья является продолжением статьи об атрибутах id и class. Если вы успели ее прочитать, то у вас наверняка мог возникнуть вопрос, чем же отличаются эти атрибуты друг от друга?</p>
<p style="color:red">Бывают ситуации, что одному элементу присваиваются сразу оба атрибута:</p>
<p style="color:red">В чем же отличие?</p>
<p style="color:red">Атрибут id расшифровывается от английского слова «identificator», которое переводиться как «идентификатор» или уникальный признак объекта, позволяющий различать его от других объектов. Это, своего рода, паспорт элемента.</p>

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

Селекторами тэгов в CSS пользоваться очень просто, они просто состоят из названия тэга, к которому они применяются.

Чтобы нам выделить все тэги абзаца p на странице, нужно добавить следующий стиль CSS.

p {color:red;}

В итоге, все абзацы на странице станут красными:

Точно также можно выделить другим цветом, скажем заголовок h1.

h1 {color:blue;}

Как видите, работа с селекторами тэгов не представляет особой трудности. Поэкспериментируйте с этим на своих примерах.

Назад Далее