CSS-селектор
Добавить в избранное
создайте файл index.html и повторяйте.
Селекторы CSS используются для выбора содержимого, которое вы хотите стилизовать . Селекторы являются частью набора правил CSS. Селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом, атрибутом и т. д.
В CSS есть несколько различных типов селекторов.
1. Селектор элементов CSS
2. Селектор CSS-идентификатора
3. Селектор класса CSS
4. Универсальный селектор CSS
5. Селектор группы CSS
1) Селектор элементов CSS
Селектор элементов выбирает элемент HTML по имени.
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>Этот стиль будет применяться к каждому абзацу. </p>
<p id="para1"> Я тоже! </p>
<p>И я! </p>
</body>
</html>
2) Селектор идентификаторов CSS
Селектор id выбирает атрибут id элемента HTML, чтобы выбрать конкретный элемент. Идентификатор всегда уникален на странице, поэтому он выбирается для выбора одного уникального элемента.
Он записывается с помощью символа решетки (#), за которым следует идентификатор элемента.
Возьмем пример с идентификатором «para1».
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Здравствуйте, mirjs.uz </p>
<p> Этот абзац не будет затронут. </p>
</body>
</html>
3) Селектор класса CSS
Селектор класса выбирает элементы HTML с определенным атрибутом класса. Он используется с символом точки . (символ точки), за которым следует имя класса.
Примечание. Имя класса не должно начинаться с цифры.
Возьмем пример с классом «para2».
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.para2 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p class="para2">Здравствуйте, mirjs.uz </p>
<p> Этот абзац не будет затронут. </p>
</body>
</html>
Селектор класса CSS для определенного элемента
Если вы хотите указать, что должен быть затронут только один конкретный элемент HTML, вы должны использовать имя элемента с селектором класса.
Давайте посмотрим пример.
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.para2 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="para2">Этот заголовок не затрагивается </h1>
<p class="para2"> Этот абзац синего цвета и выровнен по центру. </p>
</body>
</html>
4) Универсальный селектор CSS
Универсальный селектор используется как подстановочный знак. Он выбирает все элементы на страницах.
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>Это заголовок </h1>
<p> Этот стиль будет применяться к каждому абзацу. </p>
<p id="para1"> Я тоже! </p>
<p> И я! </p>
</body>
</html>
5) Селектор группы CSS
Селектор группировки используется для выбора всех элементов с одинаковыми определениями стиля.
Селектор группировки используется для минимизации кода. Запятые используются для разделения каждого селектора в группе.
Давайте посмотрим код CSS без группового селектора.
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
Как видите, вам нужно определить свойства CSS для всех элементов. Его можно сгруппировать следующими способами:
h1, h2, p {
text-align: center;
color: blue;
}
Давайте посмотрим на полный пример селектора группы CSS.
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Здравствуйте, mirjs </h1>
<h2> Здравствуйте, mirjs.uz (шрифт меньшего размера) </h2>
<p> Это абзац. </p>
</body>
</html>