Селектор тегов
Всем привет, сегодня мы с Вами начнем изучать селекторы CSS, а именно мы разберем селектор тегов CSS, после изучения которого, Вы сможете применять на практике при создании сайта.
Как Вы уже знаете для задания свойств и значений CSS необходимо указать, к какому элементу на странице данные свойства и значения будут применяться. Для этого и существуют селекторы CSS.
Итак, для начала напишем следующий код в файле index.html
<html>
<head>
<title>Селектор тегов CSS</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p>Произвольный текст, написанный для тестирования селектора тегов CSS</p>
</body>
</html>
Если открыть указанный нами файл index.html, то на экране нашего браузера мы увидим следующее:
Мы видим обычный абзац текста, который написали, у него присутствует обычный шрифт, черный цвет текста, и размер текста является небольшим. Все это является настройками по умолчанию. Теперь мы в нашем файле стилей styles.css пропишем код:
p {
color: red;
font-size: 20px;
text-align: center;
}
После обновления страницы нашего браузера мы видим следующую картину, что наш текст абзаца стал вместо черного цвета - красным цветом, текст абзаца увеличился до 20px, ну и наконец, наш текст оказался выравнен по центру окна нашего браузера.
И все это благодаря нашим CSS свойствам, которые мы с Вами прописали для селектора тегов (p). Разберем наш CSS код. Мы указали наш тег <p>, для которого хотим задать наши определенные свойства с их значениями, вот этот тег <p> и является селектором тегов, выбрав который мы можем применять различные стили к нему. Но прошу Вас заметить, что если мы напишем еще один абзац при помощи тега <p>, к нему также будут применены наши CSS свойства, т.к. мы указали, что данный CSS код должен применяться для всех абзацев, написанных на нашей странице.
Вот мы и разобрали самый простой из селекторов CSS, селектор тегов. В следующем уроке мы разберем очередной селектор CSS. До скорого!
