Инструменты пользователя

Инструменты сайта


небольшой_мануал_по_css

CSS

Селекторы элементов

Селекторы элементов, носят общий характер, т.к. затрагивают одновременно все элементы на странице. Следовательно, данный тип селекторов подходит для создания стилей которые будут оставаться постоянными на всех страницах сайта

body {
	font-family: Arial;
	font-size: 90%;
}

Селекторы по классу

Селекторы по классу позволяют обратится к любому элементу на странице, если данный элемент имеет такой же атрибут

.classname {
	border: 1px solid green;
	}

Селекторы по ID

Селекторы по id работают по такому же принципу, что и селекторы по классу. Конкретный id может быть задействован только один раз. В случае конфликта между селекторами class и id, форматирование будет произведено по селектору id, т.к. он более конкретный

#aside1 {
	background: beige;
	}

Индивидуальные селекторы по элементу

Индивидуальные селекторы по элементу могут использоваться как с классами таки с id. Индивидуальные селекторы, требуют больше времени для обработки браузером.

.artist {
	font-weight: bold;
	font-style: italic;
	color: brown
}
h2.artist {
	font-style: normal;
	color: black;
	font-variant: small-caps;
}

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

Универсальный селектор - затрагивает каждый элемент на странице.

* {
color: blue;
}

Групповые селекторы

h1,h2 {
font-family: Georgia;
font-size: 1.4em;
font-weight: normal;
}

Селекторы потомков

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

article aside p {
	line-height: 1.2;
	margin: 0 15px 1em;
}

Дочерние селекторы

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

article > h2 {
	color: #7D6855;
}

Смежные селекторы

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

h1 + p, h2 + p {
 	margin-top: .6em;
	font-style: italic;
	}
небольшой_мануал_по_css.txt · Последнее изменение: 2019/10/01 16:13 (внешнее изменение)