Селекторы

Последнее обновление: 21.04.2016

Определение стиля начинается с селектора. Например:

div{
	width:50px; /* ширина */
	height:50px; /* высота */
	background-color:red; /* цвет фона */
	margin: 10px; /* отступ от других элементов */
}

В данном случае селектором является 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>

Здесь на странице 3 элемента div, и все они будут стилизованы:

Селекторы CSS

Классы

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

Для определения селектора класса в 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>
Классы в CSS3

Идентификаторы

Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице может быть головной блок или шапка:

<div id="header"></div>

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Идентификаторы CSS</title>
		<style>
			div{
				margin: 10px;
				border: 1px solid #222;
			}
			#header{
				height: 80px;
				background-color: #ccc;
			}
			#content{
				height: 180px;
				background-color: #eee;
			}
			#footer{
				height: 80px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="header">Шапка сайта</div>
		<div id="content">Основное содержимое</div>
		<div id="footer">Футер</div>
	</body>
</html>
Идентификаторы в CSS3

Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации преимущественно используются классы, нежели идентификаторы.

Универсальный селектор

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор, который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

*{		
	background-color: red;
}

Стилизация группы селекторов

Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае мы можем перечислить селекторы всех элементов через запятую:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Селекторы CSS</title>
		<style>
			h1, h2, h3, h4{
				
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>CSS3<h1>
		<h2>Селекторы</h2>
		<h3>Группа селекторов</h3>
		<p>Некоторый текст...</p>
	</body>
</html>
Группа селекторов в CSS3

Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:

h1, #header, .redBlock{
				
	color: red;
}

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850