Нюансы применения отрицательного значения z-index в CSS
Если z-index у элемента не задан, то его значение следует трактовать как 0. Это значит, что элемент со значением z-index, равным -1, будет ниже элемента без z-index.

Можно переделать пример с нашими двумя элементами следующим образом: просто задать второму элементу z-index в значение -1, и он станет под первый элемент:

#elem1 {
	/* не задаем z-index */
}
#elem2 {
	z-index: -1;
	Проникновение плавающих элементов через теги в CSS
Пусть теперь у нас текст размещен в абзацах, а картинка, которой задано свойство float находится над этими абзацами. В этом случае все будет работать, как и работало - наличие других тегов не мешает обтеканию:


	
	

		long text...
	
	

		long text...
	

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
img {
	float: left;
} Фиксированное позиционирование в CSS
Сейчас мы разберемся с фиксированным позиционированием. Оно похоже на абсолютное, разница проявляется в том, как ведут себя эти типы позиционирования при наличии полосы прокрутки.

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



	long text...

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}
	Фиксированное позиционирование в CSS
Сейчас мы разберемся с фиксированным позиционированием. Оно похоже на абсолютное, разница проявляется в том, как ведут себя эти типы позиционирования при наличии полосы прокрутки.

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



	long text...

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}Центрирование строчно-блочных элементов в CSS
Для примера давайте поставим строчно-блочные элементы по центру:


	text
	text
	text

.parent {
	text-align: center;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}
Результат выполнения кода:


№1⊗mkPmBMIBAC

Даны дивы внутри некоторого родителя:


	
text 1
	
text 2
	
text 3

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}
Преобразуйте дивы-потомки в строчно-блочные элементы, задайте им горизонтальный margin в 5px, а затем отцентрируйте их по горизонтали относительно своего родителя.
	Несколько строчно-блочных элементов рядом в CSS
Если расположить несколько строчно-блочных элементов рядом, то они выстроятся в ряд, подобно строчным элементам:

text
text
text
span {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	border: 1px solid red;
	display: inline-block;
}Несколько строчно-блочных элементов рядом в CSS
Если расположить несколько строчно-блочных элементов рядом, то они выстроятся в ряд, подобно строчным элементам:

text
text
text
span {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	border: 1px solid red;
	display: inline-block;
}
	Отступы margin для разных сторон в CSS
Для того, чтобы задать разные отступы для разных сторон существуют отдельные свойства: margin-left - для левой стороны, margin-right - для правой, margin-top - для верхней и margin-bottom - для нижней.

Давайте посмотрим на примере:


	


#parent {
	width: 300px;
	border: 1px solid red;
}
#child {
	margin-top:    10px; /* сверху */
	margin-right:  20px; /* справа */
	margin-bottom: 30px; /* снизу */
	margin-left:   40px; /* слева */
	
	height: 100px;
	border: 1px solid green;
}
	Четыре значения скругления для разных углов CSS
Если задано четыре значения, то первое значение задает скругление для верхнего левого угла, второе - для верхнего правого, третье - для нижнего правого угла, а четвертое - для нижнего левого угла:


#elem {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px 40px;
}
	Создание круга в CSS
Скругление в половину ширины и высоты сделает круг:


#elem {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border: 1px solid red;
}
	Два значения скругления для разных углов CSS
Если задано два значения, то первое значение задает скругление для для верхнего левого и нижнего правого, второе - верхнего правого и нижнего левого углов:


#elem {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 40px;
	Свойство-сокращение для границы в CSS
Так же, как и для шрифтов, для границ тоже существует свойство-сокращение border, которое мы можем использовать вместо того, чтобы писать 3 разных свойства для толщины, цвета и типа границы. В этом свойстве мы можем просто перечислить значения для границы в любом порядке.

Давайте посмотрим на примере. Пусть у нас есть вот такая граница:

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}
Перепишем ее через свойство-сокращение:

#elem {
	border: 1px solid red;
	width: 300px;
	height: 100px;
}
	Перечеркивание текста в CSS
Значение line-through добавляет линию, перечеркивающую текст:


	Lorem ipsum dolor sit amet.

p {
	text-decoration: line-through;
}
Результат выполнения кода:
	
	Выравнивание текста влево в CSS
А вот значение left для абзацев можно и не ставить - они по умолчанию и так выровнены по левому краю. Однако есть элементы, которые по умолчанию стоят по центру (это, например, теги th, которые делают ячейку-заголовок таблицы). И вот для них как раз-таки и может потребоваться выравнивание по левой стороне. Сделаем это:


	

		
Name
		
Surname
		
Salary
	
	

		
John
		
Smith
		
200$
	
	

		
Nick
		
Mayers
		
300$
	
	

		
Alex
		
Jonson
		
400$
	

th {
	text-align: left;
}

table {
	width: 400px;
}Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу p соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.

После селектора следует ставить фигурные скобки, внутри которых следует писать CSS свойства. Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте, например, покрасим все абзацы в красный цвет:

p {
	color: red;
} Практика на макетах на HTML и CSS
Попрактикуемся в создании макетов, наполняя их содержимым. Давайте, например, сделаем вот такой макет:

открыть в дочернем окне
Для начала сделаем основную структуру макета:


	

		...
	
	

		
		

			...
		
		
	
	

Давайте теперь разберемся с хедером. Как видно на образце в хедере будет название сайта и менюшка. При этом эти блоки стоят на одинаковом расстоянии от левого края. Логично в таком случае объединить их общим родителем, двигая эти блоки как одно целое:


	

		

			

			
		
	

Добавим содержимое блоков хедера:


	

		

			
site.com
			
		
	

Давайте теперь напишем стили блоков хедера. При этом не будем задавать высоту хедера - пусть он раздвигается своим содержимым:

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
Напишем код, создающий три колонки в контейнере. При этом не будем задавать высоту контента - пусть она формируется его содержимым:

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
Напишем теперь остальные стили нашего макета и получим решение нашей задачи:


	

		

			
site.com
			
		
	
	

		
		

			
Our blog
			

				...
			
			

				...
			
			

				...
			
			

				...
			
			

				...
			
		
		
	
	

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}
Расстояние между столбцами и рядами в CSS гридах
С помощью свойства gap можно одновременно задать расстояние между столбцами и рядами грида.

Можно передать либо одно значение, либо два через пробел. Если передано одно значение, оно задает одновременно расстояние между столбцами и рядами. Если же передано два значения, то первое задает расстояние между рядами, а второе - между столбцами.

Пример 
Зададим одинаковое расстояние между столбцами и рядами:


	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8
	
9

#parent {
	display: grid;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
Результат выполнения кода:


Пример 
Зададим разные расстояния между столбцами и рядами:


	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8
	
9

#parent {
	display: grid;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
	Простые одноколоночные макеты сайтов в CSS
В данном уроке мы будем практиковаться создавать простые одноколоночные макеты сайтов. Давайте, например, сделаем вот такой макет:

открыть в дочернем окне
Приступим к реализации. Каждый макет как правило начинается с общего дива с названием wrapper, содержащего весь остальной сайт:


	

В нашем случае враппер будет выровнен по центу экрана:

#wrapper {
	width: 800px;
	margin: 50px auto;
}
Также он будет иметь границу:

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}
Давайте теперь сделаем основную структуру страницы. Она будет состоять из меню и основного содержимого - контента:


	

		
	
	

		
	

Добавим содержимое наших блоков:


	

		link text 1
		link text 2
		link text 3
		link text 4
		link text 5
	
	

		
Proin tristique lorem
		

			...
		
		

			...
		
	

Теперь можно добавить стили нашим блокам. Давайте добавим стиль менюшке:

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}
А теперь добавим стили элементам контента:

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}
Можем теперь собрать весь код вместе:


	

		link text 1
		link text 2
		link text 3
		link text 4
		link text 5
	
	

		
Proin tristique lorem
		

			...
		
		

			...
		
	

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}
Совет 1
Удобнее всего давать отступы сверху вниз. К примеру, у нас есть менюшка и контент, а между ними - пустое пространство. Очевидно, что это пространство может быть сделано нижним отступом менюшки, верхним отступом контента, или их одновременным влиянием. В этом случае лучше задать нижний отступ менюшке, а контенту убрать верхний padding и margin по умолчанию для h1.

Совет 2
Потомки не должны формировать отступ между родителями. Например, у нас есть менюшка. Нижний отступ этой менюшки можно сформировать либо margin дива с меню, либо margin ссылок. Лучше выбрать первый вариант, так как ссылки не должны действовать через голову родителя.

Совет 3
Пусть между двумя элементами есть отступ и в данном случае визуально нет разницы, что выбрать для отступа - margin или padding. В этом случае выбирайте margin, так как именно он должен создавать отступы между элементами.
	Проценты и единицы fr в CSS гридах
Также наряду с fr можно использовать значения в %, которые также определяют какую часть контейнера будет занимать столбец. При этом сначала будет высчитываться размер столбца в %, а оставшееся свободное пространство разобьется на фракции:


	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
	Свойство float и родитель без текста в CSS
Пусть теперь у нас есть див с классом parent без текста, но с двумя блоками-потомками с классом child:


	
1
	
2

.parent {
	width: 500px;
	border: 1px solid red;
	text-align: justify;
}
.child {
	width: 200px;
	height: 100px;
	border: 1px solid green;
}
	Нюансы применения отрицательного значения z-index в CSS
Если z-index у элемента не задан, то его значение следует трактовать как 0. Это значит, что элемент со значением z-index, равным -1, будет ниже элемента без z-index.

Можно переделать пример с нашими двумя элементами следующим образом: просто задать второму элементу z-index в значение -1, и он станет под первый элемент:

#elem1 {
	/* не задаем z-index */
}
#elem2 {
	z-index: -1;
}
	Абсолютное позиционирование без координат в CSS
На самом деле указания координат при абсолютном позиционировании не обязательно. Если элементу просто написать position в значении absolute, то он станет абсолютно спозиционированным, но останется стоять в том же месте, где и стоял. При этом все остальные элементы будут вести себя так, будто нашего элемента нет и могут налезть на него.

Давайте посмотрим на примерах.

Пример 
Для начала давайте просто сделаем три блока без позиционирования и между ними некоторый текст:



text text text text text text

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}
Результат выполнения кода:

открыть в дочернем окне
Пример 
А теперь давайте добавим зеленому блоку absolute. В результате этот блок останется на месте, а все элементы снизу будут вести себя так, будто нашего элемента нет и налезут на него:



text text text text text text

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}
Результат выполнения кода:

открыть в дочернем окне
Пример 
А теперь давайте добавим свойство left, не добавляя позицию по вертикали. В результате по горизонтали наш блок станет на указанное значение, а по вертикали - останется стоять там, где и стоял:



text text text text text text

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* добавляем позицию по горизонтали */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}
Результат выполнения кода:

открыть в дочернем окне
Пример 
Теперь давайте, наоборот, добавим свойство top, не добавляя позицию по горизонтали. В результате по вертикали наш блок станет на указанное значение, а по горизонтали - останется стоять там, где и стоял:



text text text text text text

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* добавляем позицию по вертикали */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}
	Особенности строчных элементов в CSS
Существуют теги, которые при отображении на экране являются строчными. К таким тегам относятся, к примеру, тег span. На примере этого тега давайте посмотрим на особенности строчных элементов в следующих уроках.
	Строчные греческие буквы для списков ol в CSS
Значение lower-greek свойства list-style-type задает нумерацию маленькими (строчными) греческими буквами:


	
list item
	
list item
	
list item
	
list item
	
list item

ol {
	list-style-type: lower-greek;
}
	Четыре значения в свойстве margin в CSS
В случае, если в свойстве margin задано четыре значения, то первое значение задает отступ сверху. Второе значение определяет отступ справа, третье - снизу, а четвертое - слева. То есть мы начинаем сверху и идем по часовой стрелке: верх-право-низ-лево. Смотрите пример:


	


#parent {
	width: 300px;
	border: 1px solid red;
}
#child {
	height: 100px;
	border: 1px solid green;
	margin: 10px 20px 30px 40px;
}
	
	Несколько значений в свойстве margin в CSS
Подобно другим свойствам CSS, свойство margin может принимать не только одно значения, но и два, три или четыре. В этом случае разные значения задают отступы для разных сторон.

Более подробно мы рассмотрим количество задаваемых значений в следующих уроках.Отступы margin для разных сторон в CSS
Для того, чтобы задать разные отступы для разных сторон существуют отдельные свойства: margin-left - для левой стороны, margin-right - для правой, margin-top - для верхней и margin-bottom - для нижней.

Давайте посмотрим на примере:


	


#parent {
	width: 300px;
	border: 1px solid red;
}
#child {
	margin-top:    10px; /* сверху */
	margin-right:  20px; /* справа */
	margin-bottom: 30px; /* снизу */
	margin-left:   40px; /* слева */
	
	height: 100px;
	border: 1px solid green;
}
	
Основы работы с границами в CSS
Сейчас мы научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color - цвет, а border-style задает тип границы.

Первые два свойства работают очевидным образом: border-color принимает цвета в том же формате, что и свойство color, а толщина границы задается в пикселях. А вот свойство border-style принимает значения в виде ключевых слов. Например, значение solid задает сплошную линию.

Сделаем, к примеру, границу толщиной 3 пикселя, в виде сплошной линии, красного цвета:


#elem {
	border-width: 3px;    /* толщина 3px */
	border-style: solid;  /* в виде линии */
	border-color: red;    /* красный цвет */
	width: 300px;
	height: 100px;
}
Группировка сложных селекторов в CSS
Пусть у нас есть два следующих селектора:

.block h2 {
	color: red;
}
.block h3 {
	color: red;
}
Так как эти селекторы делают одно и тоже их можно сгруппировать через запятую:

.block h2, .block h3 {
	color: red;
}
№1⊗mkPmSlCSG

Упростите код, используя группировку селекторов:

#block h1 {
	text-align: center;
}
#block h2 {
	text-align: center;
}
№2⊗mkPmSlCSG

Упростите код, используя группировку селекторов:

#block h1 {
	text-align: center;
	font-size: 30px;
}
#block h2 {
	text-align: center;
	font-size: 20px;
}
	
	Ошибка при использовании несколько CSS селекторов
Напоминаю, про ошибку новичков: селектор .bbb.zzz и селектор .bbb .zzz делают разные вещи. Первый ищет элемент, имеющий одновременно два класса, а второй - ищет элемент с классом zzz, находящийся внутри класса bbb.

№1⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

h2.zzz {
	color: red;
}
№2⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

h2 .zzz {
	color: red;
}
№3⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.bbb.zzz {
	color: red;
}
№4⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.bbb .zzz {
	color: red;
}
№5⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.bbb.zzz.xxx {
	color: red;
}
№6⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.bbb .zzz.xxx {
	color: red;
}
№7⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.bbb.zzz .xxx {
	color: red;
}
№8⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.bbb .zzz .xxx {
	color: red;
}
№9⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

#elem.bbb {
	color: red;
}
№10⊗mkPmSlSSM

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

#elem .bbb {
	color: red;
}
	Селектор по id и CSS классы
Одному элементу можно задавать и id, и классы. В этом случае часть стилей элемента можно задать через id, а часть стилей - через класс:


	
text
	
text

#block {
	color: red;
	font-family: Arial;
}
.large {
	font-size: 30px;
}
№1⊗mkPmSlISC

Стилизуйте блоки по id и по классу:


	
text
	
text
	
text


	
text
	
text
	
text

	
	Тег с заданным классом в CSS
Пусть у нас есть два типа тегов с одинаковыми классами. Например, пусть и заголовки h2, и абзацы имеют один и тот же класс:

Title

	text


Title

	text

Мы можем, к примеру, покрасить все элементы с таким классом в красный цвет:

.eee {
	color: red;
}
Можно, однако, обратиться к конкретному тегу с классом. К примеру, можно выбрать все h2 с классом eee и отдельно выбрать все p с этим классом.

Для этого в селекторе нужно написать имя тега, а затем слитно имя класса. Давайте, например, покрасим h2 с нашим классом в красный цвет, а абзацы с таким классом - в зеленый:

h2.eee {
	color: red;
}
p.eee {
	color: green;
}
№1⊗mkPmSlTCS

Дан следующий код:

text
text
text
text
.header {
	color: red;
}
Сделайте все h2 с классом header размером 40px, а все h3 с этим классом - размером 30px.
Бесплатный тренинг по PHP: работа с многострочностью. Начало 11 сентября. Жми для записи!
Дочерний селектор в CSS
Пусть у нас есть следующий код:


	text bold italic


	text just italic

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

p i {
	color: red;
}
Результат выполнения кода:


Давайте теперь выберем те теги i, которые являются непосредственными потомками наших абзацев. В этом нам поможет дочерний селектор >.

Чтобы понять, как им пользоваться, давайте сравним его с селектором потомков. Вот так: p i - мы выберем все курсивы внутри абзацев, а вот так: p > i - только курсивы, являющиеся непосредственными потомками абзацев.

Давайте применим этот селектор к нашему HTML коду:

p > i {
	color: red;
}
Результат выполнения кода:


№1⊗mkPmSlChS

Дан следующий код:


	

		italic
		bold
		bold italic
	
	

		italic
		bold
		bold italic
	

Покрасьте в красный цвет только те теги b, которые являются непосредственными потомками тегов li.
Родственные связи тегов в HTML
В данном уроке мы разберем терминологию родственных связей тегов. Каждый тег, в зависимости от положения в HTML коде может быть либо родителем, либо потомком, либо и тем и другим одновременно.

Рассмотрим для примера следующий код:


	
paragraph italic
	
paragraph italic
	
paragraph italic
	
paragraph italic

В данном случае мы можем сказать, что теги i в этом коде являются потомками тегов li, а также являются потомками тега ul. При этом для каждого нашего тега i тег li является непосредственным родителем (отцом), а тег ul - дедушкой.

Что можно сказать про наши теги li? Они являются потомками тега ul и при этом сами являются родительскими для тегов i. Ну, а тег ul является родителем тегам li и тегам i. При этом для тегов li наш тег ul - непосредственный родитель.

№1⊗mkPmSlTR

Дан следующий код:


	
text link
	
text link
	
text link
	
text bold link

Расскажите какие родительские связи вы видите.

№2⊗mkPmSlTR

Дан следующий код:


	

		
cell 1
		
cell 2
		
cell 3
	
	

		
cell 4
		
cell 5
		
cell 6
	
	

		
cell 7
		
cell 8
		
cell 9
	

Расскажите какие родительские связи вы видите.

№3⊗mkPmSlTR

Дан следующий код:


	This is a paragraph with text
	bold italic
	link italic.

Какие потомки есть у абзаца? Какие непосредственные потомки есть у абзаца?

№4⊗mkPmSlTR

Дан следующий код:


	link bold italic

Расскажите, какие родители есть у тега b. Кто является его непосредственным родителем?
Языки для создания сайта
Для того, чтобы сделать сайт, нужно знать много разных веб языков.
Языки HTML и CSS предназначены для верстки сайтов (верстка - это размещение элементов сайта по нужным местам).
 Язык PHP нужен для программирования сайта (с его помощью можно, к примеру, сделать регистрацию пользователей). 
 Язык JavaScript нужен для того, чтобы "оживить" сайт: к примеру, сделать меняющиеся картинки.

Текст с красным цветом и размером шрифта 18px