Определение стиля начинается с селектора. Например:
div{
width:50px; /* ширина */
height:50px; /* высота */
background-color:red; /* цвет фона */
margin: 10px; /* отступ от других элементов */
}
В данном случае css селектором является div. Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет применяться ко всем элементам <div> на веб-странице:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы CSS</title>
<style>
div{
width:50px;
height:50px;
background-color:red;
margin: 10px;
}
</style>
</head>
<body>
<h2>Селекторы CSS</h2>
<div></div>
<div></div>
<div></div>
</body>
</html>
Классы
Иногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы.
Для определения селектора класса в CSS перед названием класса ставится точка:
.redBlock{
background-color:red;
}
Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно обязательно с буквы.
Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.
После определения класса мы можем его применить к элементу с помощью атрибута class. Например:
<div class="redBlock"></div>
Определим и используем несколько классов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Классы CSS</title>
<style>
div{
width: 50px;
height: 50px;
margin: 10px;
}
.redBlock{
background-color: red;
}
.blueBlock{
background-color: blue;
}
</style>
</head>
<body>
<h2>Классы CSS</h2>
<div class="redBlock"></div>
<div class="blueBlock"></div>
<div class="redBlock"></div>
</body>
</html>
Читать далее
Следить
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20250617231045