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

Переходим от теории к практике. Сейчас у нас имеется 2 документа: index.html (содержит html-код веб-страницы) и style.css (в котором находятся стили оформления).

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

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

<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3 <a href="#">Ссылка</a></p>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
<table>
<tr>
<td>Элемент 1</td>
<td>Элемент 2</td>
<td>Элемент 3</td>
</tr>
</table>

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

Теперь пришло время выбрать нужные элементы и применить к ним стили CSS. Самый простой селектор CSS, который мы с вами сейчас рассмотрим - это селектор тэгов.

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

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

p {
color:red;
}

Эта запись означает то, что всем элементам p, которые будут встречаться на странице в файле index.html нужно присвоить свойство color, которое отвечает за цвет текста и сделать текст этих элементов красным цветом. 

Чтобы сделать все ссылки красным текстом, можно написать так:

a {
color:red;
}

Элементы списка сделать красным цветом можно сделать так:

li {
color:red;
}

Вот такой довольно простой селектор, который мы с вами изучили в первую очередь - это селектор тэгов. Он позволяет указать те элементы (тэги), к которым должны примениться стили CSS, обратиться к ним и настроить их внешний вид.

Комментарии: