CSS задачи
http://belarusweb.net
Основы создания сайтов

Сборник упражнений и задач по CSS

Наш задачник по каскадным таблицам стилей CSS содержит стандартные упражнения и задачи с решениями на закрепление теоретических основ излагаемых в учебнике.

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

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный 'Чат с автором' (по возможности стараюсь отвечать всем).

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, нажмите кнопку 'Результат'.

Оглавление задачника

Синтаксис CSS

1.1. Создайте на локальном диске (желательно на локальном сервере Xampp в папке htdocs) тестовую папку test, в ней создайте папки css, images и pages, а также пустую главную страницу index.html нашего тестового сайта. Затем в папке pages создайте пустую веб-страницу page_1.html, а в папке CSS два пустых css-файла: styles_1.css и styles_2.css. Папку test в дальнейшем не удаляйте, все упражнения мы будем выполнять в ней. В html-документах не забудьте указать кодировку utf-8 и заголовок страницы title. Для быстрого доступа к главной странице, создайте в браузере ее закладку. Если вы использовали локальный сервер, то адресный путь к странице должен иметь вид http://localhost/test/index.html. Показать решение.

index.html Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №1.1</title>
</head>
<body>
 

 
 
 
 
Здесь будет располагаться содержимое документа.
 
 
 
 
 
 
</body>
</html>

Решение задачи №1.1

1.2. Добавьте в начало и конец представленной таблицы стилей комментарии 'Внешняя таблица стилей' и 'Конец таблицы стилей'. Далее, закомментируйте второе и третье объявления в стиле (они должны стать одним комментарием), а в строки с первым и четвертым объявлениями добавьте комментарии 'Первое объявление в блоке' и 'Четвертое объявление в блоке'. Показать решение.

Условие BwCodes
    
   
span{
color: red;             
font-weight: bold;     
text-align: center;
padding-right: 10px;    
overflow: hidden;     
font-style: italic;
}
    

Условие задачи №1.2

Решение BwCodes
/* Внешняя таблица стилей */

span{
color: red;             /* Первое объявление в блоке */
/* font-weight: bold;     
text-align: center; */
padding-right: 10px;    /* Четвертое объявление в блоке  */
overflow: hidden;     
font-style: italic;
}

/* Конец таблицы стилей */

Решение задачи №1.2

1.3. Отформатируйте исходный код представленной таблицы стилей. Показать решение.

Условие BwCodes
	
span{color:red;/*
Первое объявление в блоке */
font-weight:bold;text-align: center;
padding-right:10px;/*Четвертое 
объявление в блоке */
overflow:hidden;font-style:italic;}
  

Условие задачи №1.3

Решение BwCodes
span{
color: red;             /* Первое объявление в блоке */
font-weight: bold;     
text-align: center;
padding-right: 10px;    /* Четвертое объявление в блоке */
overflow: hidden;     
font-style: italic;
}

Решение задачи №1.3

1.4. Исправьте в исходном коде представленной таблицы стилей три ошибки. Показать решение.

Условие BwCodes
	
span{
color: red;             /* Первое объявление в блоке /
font-weight: bold;     
text-align: center
padding-right: 10px;    /* Четвертое объявление в блоке */
overflow hidden;     
font-style: italic;
}
  

Условие задачи №1.4

Решение BwCodes
span{
color: red;             /* Первое объявление в блоке */
font-weight: bold;     
text-align: center;
padding-right: 10px;    /* Четвертое объявление в блоке */
overflow: hidden;     
font-style: italic;
}

Решение задачи №1.4

Подключение CSS к html-документу

2.1. Воссоздайте код представленной веб-страницы (нажмите кнопку 'Результат'). Для абзаца используйте внутреннюю таблицу стилей (тег <style>) и селектор элементов <p>, а для элемента <span> встроенный стиль (универсальный атрибут style). Также используйте css-свойства color и width. Ширину абзаца установите в 300px. Цвета используйте red и blue. Показать решение.

Условие Результат BwCodes

......

Восстановите исходный код страницы, 
чтобы получить требуемый результат!

......

Условие задачи №2.1

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №2.1</title>
	
	<style>
		
		p{
		color: red;
		width: 300px;
		}

	</style>
	
</head>
<body>

	<p>
		Текст абзаца должен быть красного цвета. 
		<span style="color: blue"> А вот и нет, 
		т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
	
</body>
</html>

Решение задачи №2.1

2.2. Используйте условие второй задачи, но разместите все стили во внешней таблице стилей в файле css/styles_1.css. Для подключения внешней таблицы стилей, используйте служебный тег <link>. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №2.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Текст абзаца должен быть красного цвета. 
		<span> А вот и нет, т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
	
</body>
</html>
/* styles_1.css */

p{
color: red;
width: 300px;
}

span{
color: blue
}



	
	
	
	

Решение задачи №2.2

2.3. Используйте условие третьей задачи, но внешнюю таблицу стилей подключите при помощи правила @import, разместив его в служебном элементе <style>. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №2.3</title>
	
	<style>
		
		/* Можно использовать разные записи правила */
		/* @import "css/styles_1.css"; */
		
		@import url("css/styles_1.css");
		
	</style>
	
</head>
<body>

	<p>
		Текст абзаца должен быть красного цвета. 
		<span> А вот и нет, т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
	
</body>
</html>
	
	
	
/* styles_1.css */

p{
color: red;
width: 300px;
}

span{
color: blue
}

	
	
	
	
	
	
	
	
	
	

	

Решение задачи №2.3

2.4. Используйте условие второй задачи, но разместите правило для абзаца во внешнем файле css/styles_1.css, а правило для тега <span> во внешнем файле css/styles_2.css. Подключите один из этих файлов при помощи служебного тега <link>, а второй при помощи правила @import, разместив его в служебном теге <style>. Во всех четырех задачах результат должен быть одинаковым! Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №2.4</title>
	
	<link rel="stylesheet" href="css/styles_1.css">
	
	<style>
		@import url("css/styles_2.css");
	</style>
	
</head>
<body>

	<p>
		Текст абзаца должен быть красного цвета. 
		<span> А вот и нет, т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
	
</body>
</html>
	
	
	
/* css/styles_1.css */

p{
color: red;
width: 300px;
}

	
	
	
/* css/styles_2.css */

span{
color: blue
}
	
	
	
	
	

Решение задачи №2.4

Селекторы CSS

3.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы по идентификатору, классу и атрибуту, а также свойства color (значения цвета red, blue и green), width (ширину абзаца установите в 300px) и font-weight (используйте для насыщенности шрифта значение bold). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первая красная строчка абзаца.<br>
		<span class="s_1 s_2"> Синий жирный 'span'.</span><br>
		<span title="Селектор атрибута"> Зеленый 'span'.</span><br>
	</p>
	
</body>
</html>

Условие задачи №3.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первая красная строчка абзаца.<br>
		<span class="s_1 s_2"> Синий жирный 'span'.</span><br>
		<span title="Селектор атрибута"> Зеленый 'span'.</span><br>
	</p>
	
</body>
</html>
#p_1{
color: red;
width: 300px;
}

.s_1{
color: blue;
}

.s_2{
font-weight: bold;
}

span[title*="Сел"]{
color: green;
}
	

Решение задачи №3.1

3.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только универсальный селектор, дочерние селекторы и соседние селекторы. Для установки нужного цвета текста используйте свойство color (значения цвета red, blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Первая красная строчка абзаца.<br>
		<em>Оранжевый 'em'.</em><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Первая красная строчка абзаца.<br>
		<em>Оранжевый 'em'.</em><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>
	
/* Универсальный селектор */
*{
color: red;
}

/* Селектор дочерних элементов */
p>em{
color: orange;
}

/* Селектор соседних элементов */
em+br+em{
color: blue;
}

	

Решение задачи №3.2

3.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы по типу и селекторы потомков. Для установки нужного цвета текста используйте свойство color (значения цвета red, blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<div>
		Первая красная строчка блока.<br>
		<span>Синий 'span'.</span><br>
		<em>Оранжевый 'em'.</em>
	</div>

	<p>
		Первая красная строчка абзаца.<br>
		<span>Оранжевый 'span'.</span><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<div>
		Первая красная строчка блока.<br>
		<span>Синий 'span'.</span><br>
		<em>Оранжевый 'em'.</em>
	</div>

	<p>
		Первая красная строчка абзаца.<br>
		<span>Оранжевый 'span'.</span><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>
/* Селектор по типу */
span{
color: blue;
}

em{
color: orange;
}

/* Селекторы по типу */
p, div{
color: red;
}

/* Селектор потомков */
p span{
color: orange;
}

p em{
color: blue;
}
		

Решение задачи №3.3

3.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы родственных элементов. Для установки нужного цвета текста используйте свойство color (значения цвета blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.4</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Первая строчка абзаца.<br>
		<span>Оранжевый 'span'.</span><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.4

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.4</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Первая строчка абзаца.<br>
		<span>Оранжевый 'span'.</span><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>
	
	
	
	
	
/* Селектор родственных элементов */
br~span{
color: orange;
}

br~em{
color: blue;
}
	

	
	

Решение задачи №3.4

3.5. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы по атрибуту, а также свойство color (значения цвета red, blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.5</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p class="redText">
		Первая строчка абзаца.<br>
		<em title="1-й em">Синий 'em'.</em><br>
		<em title="2-й em">Оранжевый 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.5

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.5</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p class="redText">
		Первая строчка абзаца.<br>
		<em title="1-й em">Синий 'em'.</em><br>
		<em title="2-й em">Оранжевый 'em'.</em>
	</p>
	
</body>
</html>
	

/* Селекторы по атрибуту */

[class="redText"]{
color: red;	
}

[title="1-й em"]{
color: blue;
}

[title^="2-й"]{
color: orange;
}	
	
	

Решение задачи №3.5

3.6. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Подключите к элементам имеющийся класс formatBlock, сделайте их редактируемыми и отключите в универсальном блоке проверку орфографии (используйте соответствующие универсальные атрибуты). При получении фокуса цвет текста абзаца должен становиться синим, а при наведении курсора мыши на универсальный блок его цвет должен становиться оранжевым. Используйте селекторы псевдоклассов :focus и :hover, а также свойство color (значения цвета blue и orange). Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.6</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Редактируемый абзац.	
	</p>
	
	<div>
		Редактируемый универсальный блок 'div'.	
	</div>
	
</body>
</html>
		
		
		
		
.formatBlock{
width: 300px;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid black;
cursor: pointer;
}
	
	
/* Допишите недостающие стили */	
	


	

Условие задачи №3.6

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.6</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p class="formatBlock" contenteditable>
		Редактируемый абзац.	
	</p>
	
	<div class="formatBlock" spellcheck="false" contenteditable>
		Редактируемый универсальный блок 'div'.	
	</div>
	
</body>
</html>
	
.formatBlock{
width: 300px;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid black;
cursor: pointer;
}
	
p:focus{
color: blue;
}

div:hover{
color: orange;
}
	
		

Решение задачи №3.6

3.7. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Подключите к элементам имеющийся класс formatBlock (используйте соответствующий универсальный атрибут) и добавьте стили для цвета текста абзацев. Разрешается использовать только селекторы псевдоклассов :first-child, :last-child и :nth-child. Также используйте свойство color и значения цвета blue, orange и red. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.7</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Первый абзац.	
	</p>
	
	<p>
		Второй абзац.	
	</p>

	<p>
		Третий абзац.	
	</p>
	
	<p>
		Четвертый абзац.	
	</p>

</body>
</html>
		
		
	
	
	
	
	
		
.formatBlock{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
	
	
	
/* Допишите недостающие стили */	
	
	
	
	


	
	

Условие задачи №3.7

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.7</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p class="formatBlock">
		Первый абзац.	
	</p>
	
	<p class="formatBlock">
		Второй абзац.	
	</p>

	<p class="formatBlock">
		Третий абзац.	
	</p>
	
	<p class="formatBlock">
		Четвертый абзац.	
	</p>

</body>
</html>
	
	
	
.formatBlock{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
	
p:first-child{
color: blue;
}

p:nth-child(2){
color: orange;
}

p:last-child{
color: red;
}	
	



	

Решение задачи №3.7

3.8. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Разрешается использовать только селекторы псевдоклассов :first-of-type и :nth-of-type. Также используйте свойство color и значения цвета blue и orange. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.8</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p class="formatBlock">
		Первый абзац.	
	</p>
		
	<div class="formatBlock">
		Первый универсальный блок.	
	</div>

	<p class="formatBlock">
		Второй абзац.	
	</p>
	
	<div class="formatBlock">
		Второй универсальный блок.	
	</div>

</body>
</html>
		
		
	
	
	
	
	
		
.formatBlock{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
	
	
	
/* Допишите недостающие стили */	
	
	
	
	


	
	

Условие задачи №3.8

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.8</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p class="formatBlock">
		Первый абзац.	
	</p>
		
	<div class="formatBlock">
		Первый универсальный блок.	
	</div>

	<p class="formatBlock">
		Второй абзац.	
	</p>
	
	<div class="formatBlock">
		Второй универсальный блок.	
	</div>

</body>
</html>
	
	
	
.formatBlock{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
	
p:first-of-type{
color: blue;
}

div:nth-of-type(2){
color: orange;
}
	


	
	
	
	
	
	

Решение задачи №3.8

Наследование, каскадирование и приоритетность стилей CSS

4.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы псевдоклассов :hover, :active и :visited (не забываем о приоритете стилей!). Также создайте в папке pages страницу page_1.html с обратной ссылкой на индексную страницу (если вы не используете локальный сервер, не забудьте использовать систему относительной адресации с двумя точками). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Цвет ссылки при наведении на нее курсора 
		мыши должен стать зеленым, при нажатии - 
		оранжевым, а после посещения 
		<a href="pages/page_1.html">ссылка</a> 
		должна стать красной.
	</p>
	
</body>
</html>

Условие задачи №4.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Цвет ссылки при наведении на нее курсора 
		мыши должен стать зеленым, при нажатии - 
		оранжевым, а после посещения 
		<a href="pages/page_1.html">ссылка</a> 
		должна стать красной.
	</p>
	
</body>
</html>
	
	
/* Т.к. специфичности селекторов равны, 
приоритет стилей определяется по их 
расположению в таблице стилей! */ 

a:visited{
color: red;
}

a:hover{
color: green;
}
	
a:active{
color: orange;
}
	
	

Решение задачи №4.1

4.2. Какой из селекторов имеет большую специфичность:
p em или p.class, #m_d или em.m_cl, div p#my_id span или div[title*="City"] span#s_id,
div>div.my_class p[contenteditable].red_color span:hover или div p+div[title="css"] p.green_color span? Показать решение.

Решение BwCodes
/* Определяем специфичности и сравниваем */ 

/* т.к. (0,0,2)<(0,1,1) */
(p em) < (p.class) 

/* т.к. (1,0,0)>(0,1,1) */
(#m_d) > (em.m_cl) 

/* т.к. (1,0,3)<(1,1,2) */
(div p#my_id span) < (div[title*="City"] span#s_id)

/* т.к. (0,4,4)>(0,2,5) */
(div>div.my_class p[contenteditable].red_color span:hover) 
 > (div p+div[title="css"] p.green_color span) 

Решение задачи №4.2

4.3. Ниже представлен код html-страницы, в которой присутствует внутренняя таблица стилей. Также к странице подключена внешняя таблица стилей. Определите цвета текста абзацев на странице. Показать решение.

HTML CSS BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.3</title>
	<link rel="stylesheet" href="css/styles_1.css">

	<style>

		[class].red{
		color: red;
		}		

		[class].orange{
		color: orange;
		}
		
	</style>
	
</head>
<body>
	
	<p class="format red orange" title="1-й абзац">
		Красный, оранжевый или синий?	
	</p>

	<p class="format green" title="2-й абзац">
		Зеленый или синий?	
	</p>
	
	<p class="format red orange" id="violet">
		Красный, оранжевый или фиолетовый?	
	</p>

</body>
</html>
	


	
	
.format{
width: 350px;
margin: auto;
margin-top: 1em;
padding: 1em;
border: 1px solid black;
}

#violet{
color: violet;
}	
	
.green{
color: green;	
}

[class][title]{
color: blue;
}
	

	
	
	
	
	
	
	
	
	
	

Условие задачи №4.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.3</title>
	<link rel="stylesheet" href="css/styles_1.css">

	<style>

		[class].red{
		color: red;
		}		

		[class].orange{
		color: orange;
		}
		
	</style>
	
</head>
<body>

	<p class="format red orange" title="1-й абзац">
		Считаем специфичности: (0,2,0) = (0,2,0) = (0,2,0), <br>т.е.
		([class].red) = ([class].orange) = ([class][title]).<br>
		Т.к. специфичности равны, приоритет будет отдан 
		внуренним стилям и далее тому из них, который 
		находится в коде ниже. Следовательно,
		цвет текста будет оранжевым.	
	</p>

	<p class="format green" title="2-й абзац">
		Считаем специфичности: (0,1,0) &lt; (0,2,0), <br>т.е.
		(.green) &lt; ([class][title]),
		следовательно, цвет текста будет синим.
	</p>
	
	<p class="format red orange" id="violet">
		Считаем специфичности: (0,2,0) = (0,2,0) &lt; (1,0,0), <br>т.е.
		([class].red) = ([class].orange) &lt; (#violet).<br>
		Следовательно, цвет текста будет фиолетовым.			
	</p>

</body>
</html>
	
	
	
	
	
.format{
width: 350px;
margin: auto;
margin-top: 1em;
padding: 1em;
border: 1px solid black;
}

#violet{
color: violet;
}	
	
.green{
color: green;	
}

[class][title]{
color: blue;
}
	
	
	
	
	
	
	
	
	
	
	
	
	


	
	
	
	
	
	

Решение задачи №4.3

4.4. Ниже представлен код html-страницы, в которой присутствует внутренняя таблица стилей, а также встроенные стили. Определите цвета текста абзацев на странице. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.4</title>

	<style>

		.format{
		width: 350px;
		margin: auto;
		margin-top: 1em;
		padding: 1em;
		border: 1px solid black;
		}

		p#red{
		color: red;
		}		

		p#orange{
		color: orange !important;
		}

		p#green{
		color: green !important;
		}
		
	</style>
	
</head>
<body>

	<p class="format" id="red" style="color: blue">
		Красный или синий?
	</p>

	<p class="format" id="orange" style="color: blue">
		Оранжевый или синий?		
	</p>

	<p class="format" id="green" style="color: blue  !important">
		Зеленый или синий?		
	</p>

</body>
</html>

Условие задачи №4.4

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.4</title>

	<style>

		.format{
		width: 350px;
		margin: auto;
		margin-top: 1em;
		padding: 1em;
		border: 1px solid black;
		}
		
		p#red{
		color: red;
		}		

		p#orange{
		color: orange !important;
		}

		p#green{
		color: green !important;
		}
		
	</style>
	
</head>
<body>

	<p class="format" id="red" style="color: blue">
		Цвет текста будет синим, т.к. встроенный 
		стиль имеет приоритет над другими стилями.
	</p>

	<p class="format" id="orange" style="color: blue">
		Цвет текста будет оранжевым, т.к. во внутреннем 
		стиле используется параметр !important.
	</p>

	<p class="format" id="green" style="color: blue !important">
		Цвет текста будет синим, т.к. в обоих стилях
		используется параметр !important, но встроенный 
		стиль имеет приоритет над другими стилями.		
	</p>

</body>
</html>

Решение задачи №4.4

Единицы измерения и цветовые модели в CSS

5.1. Решите несколько примеров на перевод одних единиц измерения в другие. При этом будем считать, что область просмотра окна браузера имеет размеры 1000х800 пикселей (ширина и высота), а размер шрифта по умолчанию составляет 16px. Показать решение.

1. Переведите 17incm (дюймы в сантиметры).
2. Переведите 1.7empx.
3. Переведите 70vwpx.
4. Переведите 20% от высоты области просмотра окна браузера в пиксели.
5. Переведите 35degrad (градусы в радианы).
6. Переведите 2.3raddeg (радианы в градусы).
7. Переведите 2.3turndeg (обороты в градусы).

Решение BwCodes
	
	1. 17in = 17x2.54cm = 43.18cm.
2. 1.7em = 1.7x16px = 27.2px.
3. 70vw = 1000x0.7px = 700px.
4. 800x0.2px = 160px.
5. 35deg35x0,01745rad0.61075rad.
6. 2.3rad2.3x57,296deg131.7808deg.
7. 1.5rad = 2.3x360deg = 828deg.

Решение задачи №5.1

5.2. Допишите исходный код представленной html-страницы таким образом, чтобы первый и второй абзацы, а также третий и четвертый абзацы имели одинаковый фон. Для решения задачи вам понадобится перевести числа из шестнадцатеричной системы счисления в десятичную и наоборот. Для перевода чисел используйте наш калькулятор для перевода чисел из одной СС в другую. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №5.2</title>
	
	<style>

		.format{
		width: 350px;
		margin: auto;
		margin-top: 1em;
		padding: 1em;
		border: 1px solid black;
		}
		
		.darkRed16{
		background-color: #FEC9D5;
		}		
		
		/* Допишите значение цвета в 10-й СС */
		.darkRed10{
		background-color: rgb(254,);
		}

		/* Допишите значение цвета в 16-й СС */
		.darkBlue16{
		background-color: #E7;
		}

		.darkBlue10{
		background-color: rgb(231,249,253);
		}
		
	</style>
	
</head>
<body>
	
	<p class="format darkRed16">
		Светло-красный фон в RGB с использованием 
		значения в 16-ной системе счисления.
	</p>

	<p class="format darkRed10">
		Тот же светло-красный фон RGB, но с 
		использованием значения в 10-ной СС.		
	</p>

	<p class="format darkBlue16">
		Светло-голубой фон в RGB с использованием 
		значения в 16-ной системе счисления.	
	</p>

	<p class="format darkBlue10">
		Тот же светло-голубой фон RGB, но с 
		использованием значения в 10-ной СС.	
	</p>
	
</body>
</html>

Условие задачи №5.2

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №5.2</title>
	
	<style>

		.format{
		width: 350px;
		margin: auto;
		margin-top: 1em;
		padding: 1em;
		border: 1px solid black;
		}
		
		.darkRed16{
		background-color: #FEC9D5;
		}		
		
		/* FE->254, C9->201, D5->213 */
		.darkRed10{
		background-color: rgb(254,201,213);
		}

		/* 231->E7, 249->F9, 253->FD */
		.darkBlue16{
		background-color: #E7F9FD;
		}

		.darkBlue10{
		background-color: rgb(231,249,253);
		}
		
	</style>
	
</head>
<body>
	
	<p class="format darkRed16">
		Светло-красный фон в RGB с использованием 
		значения в 16-ной системе счисления.
	</p>

	<p class="format darkRed10">
		Тот же светло-красный фон RGB, но с 
		использованием значения в 10-ной СС.		
	</p>

	<p class="format darkBlue16">
		Светло-голубой фон в RGB с использованием 
		значения в 16-ной системе счисления.	
	</p>

	<p class="format darkBlue10">
		Тот же светло-голубой фон RGB, но с 
		использованием значения в 10-ной СС.	
	</p>
	
</body>
</html>

Решение задачи №5.2

Оформление внешнего вида текста

6.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet), расстояние между словами, соответственно, 5px и 15px, расстояние между отдельными буквами – 1px и 3px, высоту строк – 1.1em и 1.6em, отступ первой строки – 1% и 3%. Используйте свойства letter-spacing, line-height, text-indent, word-spacing. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №6.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p class="p_1">
		Первое предложение абзаца.<br>
		Второе более длинное предложение абзаца.<br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_2">
		Первое предложение абзаца.<br>
		Второе более длинное предложение абзаца.<br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №6.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №6.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p class="p_1">
		Первое предложение абзаца.<br>
		Второе более длинное предложение абзаца.<br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_2">
		Первое предложение абзаца.<br>
		Второе более длинное предложение абзаца.<br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>
	
	
.p_1{
width: 500px;
background-color: orange;
word-spacing: 5px;
letter-spacing: 1px;
line-height: 1.1em;
text-indent: 1%;
}
	
.p_2{
width: 500px;
background-color: violet;
word-spacing: 15px;
letter-spacing: 3px;
line-height: 1.6em;
text-indent: 3%;
}
	


	

Решение задачи №6.1

6.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet), также задайте для абзацев идентификаторы id, через которые и привяжите к ним стили. Текст первого абзаца должен выравниваться по левой стороне, а второго - по правой (свойство text-align). Для подчеркивания первых слов предложений используйте соответствующие значения свойства text-decoration для установки декоративной линии. При этом в первом абзаце стили к ним привяжите через универсальный атрибут class, а во втором - через селекторы псевдоклассов :nth-of-type (оберните в обоих абзацах первые слова в спаны). Не забывайте, что селекторы в таблице стилей, которые используются с одним и тем же стилем, можно записать через запятую, а не дублировать впустую повторяющийся код. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<title>Задача №6.2</title>
	
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>

	<p id="p_1">
		<span class="first">Первое</span> предложение абзаца.<br>
		<span class="second">Второе</span> более длинное предложение абзаца.<br>
		<span class="third">Третье</span> и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		<span>Первое</span> предложение абзаца.<br>
		<span>Второе</span> более длинное предложение абзаца.<br>
		<span>Третье</span> и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №6.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<title>Задача №6.2</title>
	
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>

	<p id="p_1">
		<span class="first">Первое</span> предложение абзаца.<br>
		<span class="second">Второе</span> более длинное предложение абзаца.<br>
		<span class="third">Третье</span> и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		<span>Первое</span> предложение абзаца.<br>
		<span>Второе</span> более длинное предложение абзаца.<br>
		<span>Третье</span> и последнее предложение абзаца.
	</p>
	
</body>
</html>
p{
width: 500px;
padding: 1em;
}

#p_1{
background-color: orange;
text-align: left;
}
	
#p_2{
background-color: violet;
text-align: right;
}

.first, span:nth-of-type(1){
text-decoration: underline dotted;
}

.second, span:nth-of-type(2){
text-decoration: underline dashed;
}

.third, span:nth-of-type(3){
text-decoration: underline wavy;
}

Решение задачи №6.2

6.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid grey. Также задайте для второго абзаца идентификатор, через который и привяжите к нему стиль. Первый абзац дополнительно не форматируйте. Во втором абзаце установите для текста серую (grey) тень с размытием в 2px и смещением в 1px как по горизонтали так и по вертикали. Кроме того, интервал между символами установите в 1.3px, а способ обработки пробельных символов задайте такой же, как и в элементе <pre> (это позволит расположить слова нужным образом). Для решения задачи используйте свойства white-space, letter-spacing, text-shadow. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №6.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Учиться,
		
						учиться
				
										и еще раз учиться! 
	</p>
	
	<p id="p_2">
		Учиться,
		
						учиться 
				
										и еще раз учиться!
	</p>
	
</body>
</html>

Условие задачи №6.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №6.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Учиться,
		
						учиться
				
										и еще раз учиться! 
	</p>
	
	<p id="p_2">
		Учиться,
		
						учиться 
				
										и еще раз учиться!
	</p>
	
</body>
</html>
	
	
	
	
p{
width: 500px;
margin: 2em;
padding: 1em;
border: 1px solid grey;
}
	
#p_2{
letter-spacing: 1.3px;
white-space: pre;
text-shadow: 1px 1px 2px grey;
}
	
	
	
	
	
	
	
	
	
	
	

Решение задачи №6.3

6.4. Найдите пять ошибок в исходном коде представленной таблицы стилей. Показать решение.

Условие BwCodes
p{
text-indent: 0.5em;
word-space: 3px;
white-space: no-wrap;
line-heigt: 1.3;
text-shadow: 1px 1px 2px grey;
}

p span{
leter-spacing: 1.3px;	
text-decoration: underline wavi;
}

Условие задачи №6.4

p{
text-indent: 0.5em;
word-spacing: 3px; /* spacing */
white-space: nowrap; /* nowrap */
line-height: 1.3; /* height */
text-shadow: 1px 1px 2px grey;
}

p span{
letter-spacing: 1.3px; /* letter */	
text-decoration: underline wavy; /* wavy */
}

Решение задачи №6.4

Определение характеристик шрифтов

7.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 15px, внешние отступы (margin) в 30px, границу (border) в 1px solid. Для всех абзацев установите шрифт "times new roman". Далее, для первого абзаца установите размер шрифта 1em, для второго - 1.2em и для третьего - 1.4em. Для решения задачи используйте свойства font-size и font-family. Сравните результат форматирования абзацев. После просмотра результата, попробуйте задать отступы в относительных единицах, установив их, например, в 2em. Обратите внимание, как изменятся размеры и положение абзацев на странице (это связано с различным итоговым абсолютным размером шрифтов абзацев в пикселях). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №7.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>
	
	
	
p{
width: 500px;
margin: 30px;
padding: 15px;
border: 1px solid;
font-family: "times new roman";
}

#p_1{
font-size: 1em;
}

#p_2{
font-size: 1.2em;
}
	
#p_3{
font-size: 1.4em;
}
		
		
	

	
		
		

Решение задачи №7.1

7.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid. Для всех абзацев установите шрифт "times new roman" размером в 1.2em. Далее, для первого абзаца установите нормальные начертание и стиль шрифта, для второго - курсивный стиль шрифта, а для третьего - жирное начертание шрифта. Для решения задачи используйте свойства font-size, font-family, font-style, font-weight. Сравните результат формати­рования абзацев. Обратите внимание, что размеры и положение абзацев на странице одинаковы, что связано с равнымым итоговым абсолютным размером шрифтов абзацев в пикселях. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №7.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>
	
	
	
p{
width: 500px;
margin: 30px;
padding: 15px;
border: 1px solid;
font-size: 1.2em;
font-family: "times new roman";
}

#p_1{
font-weight: normal;
font-style: normal;
}

#p_2{
font-style: italic;
}
	
#p_3{
font-weight: bold;
}	
		
	
	
		
		

Решение задачи №7.2

7.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid. Для всех абзацев установите шрифт gabriola размером в 1.2em. Далее, для первого абзаца установите нормальные начертание и стиль шрифта, для второго - курсивный стиль шрифта, а для третьего - используйте капитель. Для решения задачи используйте свойства font-size, font-family, font-style, font-weight, font-variant. Сравните результат формати­рования абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №7.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>
	
	
	
p{
width: 500px;
margin: 30px;
padding: 15px;
border: 1px solid;
font-size: 1.2em;
font-family: gabriola;
}

#p_1{
font-weight: normal;
font-style: normal;
}

#p_2{
font-style: italic;
}
	
#p_3{
font-variant: small-caps;
}	
		
	
	
		
		

Решение задачи №7.3

Оформление внешнего вида списков

8.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) списков установите 500px, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet). Для решения задачи используйте свойства для оформления списков list-style-type и list-style-position. Сравните результат форматирования обоих списков. Показать решение.

HTML Результат BwCodes
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<ul class="list_1">
		
		<li>
			Маркеры размещаем вне списка.
		</li>
		
		<li>
			Используем вид маркера decimal.
		</li>
		
	</ul>
	
	
	<ol class="list_2">
		
		<li>
			Маркеры размещаем внутри списка.
		</li>
		
		<li>
			Используем вид маркера square.
		</li>
		
	</ol>
	
</body>
</html>

Условие задачи №8.1

HTML CSS Результат BwCodes
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<ul class="list_1">
		
		<li>
			Маркеры размещаем вне списка.
		</li>
		
		<li>
			Используем вид маркера decimal.
		</li>
		
	</ul>
	
	
	<ol class="list_2">
		
		<li>
			Маркеры размещаем внутри списка.
		</li>
		
		<li>
			Используем вид маркера square.
		</li>
		
	</ol>
	
</body>
</html>
ul, ol{
width: 500px;
margin: 2em;
padding: 0px;
line-height: 1.3;
}

.list_1	{
background-color: orange;
list-style-type: decimal;
list-style-position: outside;
}

.list_2{
background-color: violet;	
list-style-type: square;
list-style-position: inside;
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

Решение задачи №8.1

8.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) списка установите в 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid, высоту строки в 1.3em. Маркеры списка расположите внутри. В качестве пунктов списка используйте изображения кружков в условии (скопируйте их себе в папку test/images/). При наведении курсора мыши на пункты списка маркер должен менять свой цвет на оранжевый. Для решения задачи используйте свойства для оформления списков list-style-image, list-style-position, а также псевдокласс :hover. Не забывайте про относительную адресацию при указании пути к файлам изображений. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<ul>
		
		<li>
			Первый пункт списка.
		</li>
		
		<li>
			Второй пункт списка.
		</li>
		
		<li>
			Изображения для маркеров
			<img src="images/circle_green.png"> и 
			<img src="images/circle_orange.png">.
		</li>
		
	</ul>
	
</body>
</html>

Условие задачи №8.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<ul>
		
		<li>
			Первый пункт списка.
		</li>
		
		<li>
			Второй пункт списка.
		</li>
		
		<li>
			Изображения для маркеров
			<img src="images/circle_green.png"> и 
			<img src="images/circle_orange.png">.
		</li>
		
	</ul>
	
</body>
</html>
ul{
width: 500px;
margin: 2em;
padding: 1em;
border: 1px solid;
line-height: 1.3em;
list-style-position: inside;
list-style-image: url("../images/circle_green.png");
}

ul li:hover{
list-style-image: url("../images/circle_orange.png");
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

Решение задачи №8.2

Оформление внешнего вида таблиц

9.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) таблиц установите в 70%, внешние отступы (margin) в 3em, границу (border) в 1px solid green. Также для заголовков и ячеек таблиц внутренние отступы (padding) задайте в 0.5em. Заголовки таблиц расположите слева над таблицами (нужно применить к заголовкам выравнивание текста по левому краю), границы первой таблицы оставьте раздельными, а у второй таблицы границы объедините. Для решения задачи используйте свойства для оформления таблиц border-collapse и caption-side. Сравните результат форматирования обоих таблиц. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №9.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<table class="table_1">
		
		<caption>Таблица с раздельными границами</caption>
		
		<tr>
			<td>Ячейка 1.1</td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="table_2">
		
		<caption>Таблица с объединенными границами</caption>
		
		<tr>
			<td>Ячейка 1.1</td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>
	
</body>
</html>

Условие задачи №9.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №9.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<table class="table_1">
		
		<caption>Таблица с раздельными границами</caption>
		
		<tr>
			<td>Ячейка 1.1</td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="table_2">
		
		<caption>Таблица с объединенными границами</caption>
		
		<tr>
			<td>Ячейка 1.1</td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>
	
</body>
</html>
table{
width: 70%;
margin: 3em;
border: 1px solid green;
caption-side: top;
}

caption{
padding: 0.5em;
text-align: left;
}

td{
padding: 0.5em;
border: 1px solid green;
}

.table_1{
border-collapse: separate;
}

.table_2{
border-collapse: collapse;
}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

Решение задачи №9.1

9.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) таблиц установите в 70%, внешние отступы (margin) в 3em, границу (border) в 1px solid green. Также для заголовков и ячеек таблиц внутренние отступы (padding) задайте в 0.5em. Заголовки таблиц расположите справа над таблицами (нужно применить к заголовкам выравнивание текста по правому краю), границы таблиц оставьте раздельными. При этом заметьте, что границы вокруг первых ячеек не должны отображаться (используйте соответствующий селектор псевдоклассов). Расстояние между границами для первой таблицы установите в 0.3em, а для второй - в 0.9em. Для решения задачи используйте свойства для оформления таблиц border-collapse, caption-side, empty-cells, border-spacing, а также псевдокласс :first-child. Сравните результат форматирования обоих таблиц. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №9.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<table class="table_1">
		
		<caption>Таблица №1</caption>
		
		<tr>
			<td></td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="table_2">
		
		<caption>Таблица №2</caption>
		
		<tr>
			<td></td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>
	
</body>
</html>

Условие задачи №9.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №9.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<table class="table_1">
		
		<caption>Таблица №1</caption>
		
		<tr>
			<td></td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="table_2">
		
		<caption>Таблица №2</caption>
		
		<tr>
			<td></td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>
	
</body>
</html>
table{
width: 70%;
margin: 3em;
border: 1px solid green;
caption-side: top;
border-collapse: separate;
}

caption{
padding: 0.5em;
text-align: right;
}

td{
padding: 0.5em;
border: 1px solid green;
}
 
tr:first-child td{
empty-cells: hide;
}	

.table_1{
border-spacing: 0.3em;
}

.table_2{
border-spacing: 0.9em;
}
		
		
		
		
		
		
		
		
		
		
		

Решение задачи №9.2

Оформление внешнего вида колонок

10.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите в 80%, внешние отступы (margin) в 3em, внутренние отступы (padding) в 0.7em, границу (border) в 1px solid green, высоту строки в 1.3em, текст растяните по ширине. Первый абзац разбейте на две колонки, а второй - на три. Расстояние между колонками установите в 1.4em, добавьте пунктирную границу зеленого цвета и шириной в 1px. Для решения задачи используйте свойства для многоколоночной верстки column-count, column-gap и column-rule. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №10.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
  <p class="p_1">
		В данном абзаце текст верста&shy;ется в 2 колонки.
		Ширина (width) абзацев уста&shy;новлена в 80%, 
		внешние отступы (margin) в 3em, 
		внут&shy;ренние отступы (padding) в 0.7em, 
		высота строки в 1.3em, 
		текст растягивается по ширине колонки,
		расстояние между колонками в 1.4em, 
		граница (border) в 1px solid green, 
		граница между колонками в 1px dashed green. 
  </p> 
  
  <p  class="p_2">
		В данном абзаце текст верста&shy;ется в 3 колонки.
		Ширина (width) абзацев уста&shy;новлена в 80%, 
		внешние отступы (margin) в 3em, 
		внут&shy;ренние отступы (padding) в 0.7em, 
		высота строки в 1.3em, 
		текст растягивается по ширине колонки,
		расстояние между колонками в 1.4em, 
		граница (border) в 1px solid green, 
		граница между колонками в 1px dashed green. 
  </p>
	
</body>
</html>

Условие задачи №10.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №10.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
  <p class="p_1">
		В данном абзаце текст верста&shy;ется в 2 колонки.
		Ширина (width) абзацев уста&shy;новлена в 80%, 
		внешние отступы (margin) в 3em, 
		внут&shy;ренние отступы (padding) в 0.7em, 
		высота строки в 1.3em, 
		текст растягивается по ширине колонки,
		расстояние между колонками в 1.4em, 
		граница (border) в 1px solid green, 
		граница между колонками в 1px dashed green. 
  </p> 
  
  <p  class="p_2">
		В данном абзаце текст верста&shy;ется в 3 колонки.
		Ширина (width) абзацев уста&shy;новлена в 80%, 
		внешние отступы (margin) в 3em, 
		внут&shy;ренние отступы (padding) в 0.7em, 
		высота строки в 1.3em, 
		текст растягивается по ширине колонки,
		расстояние между колонками в 1.4em, 
		граница (border) в 1px solid green, 
		граница между колонками в 1px dashed green. 
  </p>
	
</body>
</html>
	
	
	
p{
width: 80%;
margin: 3em;
padding: 0.7em;
border: 1px solid green;
text-align: justify;
line-height: 1.3em;
column-rule: 1px dashed green;
column-gap: 1.4em;
}
 
.p_1{column-count: 2;}
 
.p_2{column-count: 3;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

Решение задачи №10.1

10.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите в 90%, внешние отступы (margin) в 1em, внутренние отступы (padding) в 0.7em, границу (border) в 1px solid green, высоту строки в 1.3em, текст растяните по ширине. Заголовки расположите по середине, верстку оформите в две колонки. Для решения задачи используйте свойство для многоколоночной верстки column-count. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №10.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<h1>Заголовок 1-го уровня</h1>
	
	<h2>Первый заголовок 2-го уровня</h2>
	
	<p>
		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.
 		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.		
	</p> 

	<h2>Второй заголовок 2-го уровня</h2>

	<p>
		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.
 		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.	 
	</p>
	
</body>
</html>

Условие задачи №10.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №10.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<h1>Заголовок 1-го уровня</h1>
	
	<h2>Первый заголовок 2-го уровня</h2>
	
	<p>
		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.
 		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.		
	</p> 

	<h2>Второй заголовок 2-го уровня</h2>

	<p>
		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.
 		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.	 
	</p>
	
</body>
</html>
	
	
	
p{
width: 90%;
margin: 1em;
padding: 0.7em;
border: 1px solid green;
text-align: justify;
line-height: 1.3em;
column-count: 2;
}

h1{
text-align: center;
font-size: 1em;
}

h2{
text-align: center;
font-size: 0.8em;
} 
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

Решение задачи №10.2

Установка размеров элементов

11.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 80%, высоту – в 40%. Каковы размеры абзацев в пикселях? Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p>
		Каковы размеры абзацев в пикселях?
	</p>
	
	<p>
		Каковы размеры абзацев в пикселях?
	</p>

</div>
	
</body>
</html>

Условие задачи №11.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p>
		Ширина абзацев равна (500/100)*80px=400px,<br> 
		высота &ndash; (400/100)*40px=160px.
	</p>
	
	<p>
		Ширина абзацев равна (500/100)*80px=400px,<br> 
		высота &ndash; (400/100)*40px=160px.
	</p>

</div>
	
</body>
</html>
	
	
div{
width: 500px;
height: 400px;
background-color: yellow;
}

p{
width: 80%;
height: 40%;
background-color: violet;
}	
	
	
	
	
	
	
	
	



 

Решение задачи №11.1

11.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 70%, высоту – в 50%. Также задайте для первого абзаца минимально допустимую ширину в 400px, минимально допустимую высоту в 150px. Для второго абзаца задайте максимально допустимую ширину в 400px, максимально допустимую высоту в 150px. Для решения задачи используйте свойства для определения размеров элементов max-height, max-width, min-height и min-width. Рассчитайте конечные размеры абзацев в пикселях и объясните свое решение. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p class="p_1">
		Рассчитайте конечные размеры абзацев в пикселях 
		и объясните свое решение.	
	</p>
	
	<p class="p_2">
		Рассчитайте конечные размеры абзацев в пикселях 
		и объясните свое решение.
	</p>

</div>
	
</body>
</html>

Условие задачи №11.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p class="p_1">
		Ширина абзаца равна (500/100)*70px=350px,<br> 
		что меньше минимально допустимого значения,<br> 
		поэтому ширина примет минимально допустимое<br> 
		значение и будет  равна 400px.<br><br>
		
		Высота абзаца равна (400/100)*50px=200px,<br> 
		что больше минимально допустимого значения,<br> 
		поэтому высота будет равна 200px.		
	</p>
	
	<p class="p_2">
		Ширина абзаца равна (500/100)*70px=350px,<br> 
		что меньше максимально допустимого значения,<br> 
		поэтому ширина будет равна 350px.<br><br>
		
		Высота абзаца равна (400/100)*50px=200px,<br> 
		что больше максимально допустимого значения,<br> 
		поэтому высота примет максимально допустимое<br> 
		значение и будет  равна 150px.
	</p>

</div>
	
</body>
</html>
	
	
div{
width: 500px;
height: 400px;
background-color: yellow;
}

p{
width: 70%;
height: 50%;
background-color: violet;
}

.p_1{
min-width: 400px;
min-height: 150px;
}

.p_2{
max-width: 400px;
max-height: 150px;
}
	
		
	
	
	
	
	
	
	
	



 

Решение задачи №11.2

11.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 70%, высоту – в 50%. Задайте для первого абзаца алгоритм расчета размеров со значением content-box, а для второго - border-box (используйте свойство box-sizing). Рассчитайте размеры области содержимого каждого абзаца, а также их полные размеры вместе с внутренними отступами. Объясните свое решение. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p class="p_1">
		Рассчитайте размеры области содержимого элемента 
		и размеры всего элемента.
	</p>
	
	<p class="p_2">
		Рассчитайте размеры области содержимого элемента 
		и размеры всего элемента.
	</p>

</div>
	
</body>
</html>

Условие задачи №11.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p class="p_1">
		Т.к. box-sizing: content-box, то width задает ширину 
		содержимого элемента (ширина всего элемента при этом 
		равна (500/100)*70px+2*10px=370px), а height 
		задает высоту содержимого элемента (высота всего 
		элемента при этом равна (400/100)*50px+2*10px=220px). 
		
	</p>
	
	<p class="p_2">
		Т.к. box-sizing: border-box, то width задает ширину 
		всего элемента в (500/100)*70px=350px, а height 
		задает высоту всего элемента в (400/100)*50px=200px. 
		При этом ширина области содержимого абзаца будет 
		равна width-2*padding=350px-2*10px=330px, а высота 
		области содержимого - (400/100)*50px-2*10px=180px.
	</p>

</div>
	
</body>
</html>
	
	
div{
width: 500px;
height: 400px;
background-color: yellow;
}

p{
width: 70%;
height: 50%;
padding: 10px;
background-color: violet;
}

.p_1{
box-sizing: content-box;
}

.p_2{
box-sizing: border-box;
}
	
	
	
	
	
	
	
	
	
	
	

Решение задачи №11.3

Установка границ и теней элементов

12.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для таблицы внешние отступы (margin) установите в 3em, для заголовка таблицы внешний отступ снизу (margin-bottom) установите в 0.2em, для ячеек таблицы внутренние отступы (padding) установите в 0.5em. Границы таблицы и ячеек установите через сокращенное свойство для границ. Для ссылок используйте отдельные свойства для установки нижних границ, но ширину нижней границы укажите в одном стиле сразу для всех ссылок в таблице. Не забудьте отменить подчеркивание ссылок, чтобы у них визуально не отображались сразу две линии подчеркивания. Для решения задачи используйте свойства для определения параметров границ border, border-bottom-width, border-bottom-style, border-bottom-color. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<table>
		 
		<caption>Таблица ссылок</caption>

		<tr>
			<th>Ссылка №</th> 
			<th>Цвет ссылки</th> 
			<th>Стиль ссылки</th> 
		</tr>
				
		<tr>
			<td><a href="" id="first">Ссылка №1</a></td>
			<td>Оранжевый</td>
			<td>Пунктирная</td>
		</tr>

		<tr>
			<td><a href="" id="second">Ссылка №2</a></td>
			<td>Зеленый</td>
			<td>Точечная</td>
		</tr>
		 
	</table>
	
</body>
</html>

Условие задачи №12.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<table>
		 
		<caption>Таблица ссылок</caption>

		<tr>
			<th>Ссылка №</th> 
			<th>Цвет ссылки</th> 
			<th>Стиль ссылки</th> 
		</tr>
				
		<tr>
			<td><a href="" id="first">Ссылка №1</a></td>
			<td>Оранжевый</td>
			<td>Пунктирная</td>
		</tr>

		<tr>
			<td><a href="" id="second">Ссылка №2</a></td>
			<td>Зеленый</td>
			<td>Точечная</td>
		</tr>
		 
	</table>
	
</body>
</html>
table{
margin: 3em;
border-collapse: collapse;
border: 1px solid black;
}
 
caption{
text-align: left;
margin-bottom: 0.2em;
}

th,td{
padding: 0.5em;
border: 1px solid black;
}

td a{
text-decoration: none;
border-bottom-width: 1px;
}

a#first{
color: orange;
border-bottom-style: dashed;
border-bottom-color: orange;
}

a#second{
color: green;
border-bottom-style: dotted;
border-bottom-color: green;
}
	
	
	

Решение задачи №12.1

12.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для родительского блока внешние отступы (margin) установите в 3em, а ширину в 100px. Также установите ему черную сплошную границу в 2px и задайте скругление углов в 10px. Для дочерних блоков внешние отступы (margin) установите в auto (чтобы они выравнивались по центру), а внешние нижние и верхние отступы (margin-top и margin-bottom) установите в 20px. Ширину и высоту дочерних блоков установите в 80px. Границы им не устанавливайте, однако задайте скругление углов в 40px (делим размеры пополам, чтобы получить окружность). Чтобы применить к ним полученный стиль, используйте псевдокласс :not (селектор будет иметь вид div:not([id="main"])). Также установите для каждого из блоков соответствующий цвет фона (background-color). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №12.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>

	<div id="main">
		
		<div class="red"></div>
		
		<div class="orange"></div>
		
		<div class="green"></div>
		
	</div>
	
</body>
</html>

Условие задачи №12.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №12.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>

	<div id="main">
		
		<div class="red"></div>
		
		<div class="orange"></div>
		
		<div class="green"></div>
		
	</div>
	
</body>
</html>
	
	
	
	
#main{
width: 100px;
margin: 3em;
border: 2px solid black;
border-radius: 10px;
}
 
div:not([id="main"]){
width: 80px;
height: 80px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 40px;
}

.red{
background-color: red;
}

.orange{
background-color: orange;
}

.green{
background-color: green;
}

Решение задачи №12.2

12.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для блока внешние отступы (margin) установите в auto, а верхний отступ (margin-top) в 7em. Ширину и высоту установите в 60px. Границы не устанавливайте, однако задайте скругление углов в 30px. Для установки теней используйте свойство box-shadow, задав нулевые смещения и размытие, но установив им растяжение в 30px, 60px и 90px. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<div></div>
	
</body>
</html>

Условие задачи №12.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<div></div>
	
</body>
</html>
div{
width: 60px;
height: 60px;
margin: auto;
margin-top: 7em;
border-radius: 30px;
box-shadow: 0px 0px 0px 30px blue,
            0px 0px 0px 60px green,
            0px 0px 0px 90px red;
}
	
	
	

Решение задачи №12.3

12.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите для формы внешние отступы (margin) в auto, верхний отступ (margin-top) в 3em, внутренние отступы (padding) в 1em, ширину и высоту, соответственно, в 250px и 110px. Границы не устанавливайте, однако задайте скругление углов в 0.5em и установите тень с параметрами 4px 3px 8px 3px grey. Для полей ввода обнулите границы и установите сплошной серый контур шириной 1px (используйте свойство outline). При получении полями фокуса ширина контура должна увеличиваться до 2px. Обратите внимание на то, что при увеличении ширины контура, размеры поля ввода остаются прежними. Попробуйте убрать контур и проделать все тоже самое с границами. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.4</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<form action="php/reg.php" method="POST" name="reg_form">
	 
	<!-- Создаем поле для ввода имени -->
	Имя: <input type="text" name="first_name">
	<br><br>
	 
	<!-- Создаем поле для ввода фамилии -->
	Фамилия: <input type="text" name="last_name">
	<br><br>
	 
	<!-- Создаем кнопку для отправки данных формы на сервер -->
	<input type="submit" value="Отправить" disabled>
	 
	</form>
	
</body>
</html>

Условие задачи №12.4

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.4</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<form action="php/reg.php" method="POST" name="reg_form">
	 
	<!-- Создаем поле для ввода имени -->
	Имя: <input type="text" name="first_name">
	<br><br>
	 
	<!-- Создаем поле для ввода фамилии -->
	Фамилия: <input type="text" name="last_name">
	<br><br>
	 
	<!-- Создаем кнопку для отправки данных формы на сервер -->
	<input type="submit" value="Отправить" disabled>
	 
	</form>
	
</body>
</html>
form{
width: 250px;
height: 110px;
margin: auto;
margin-top: 3em;
padding: 1em;
border-radius: 0.5em;
box-shadow: 4px 3px 8px 3px grey;
text-align: right;            
}

input[type="text"]{
border: 0px;
outline: 1px solid grey;
}

input[type="text"]:focus{
outline: 2px solid grey;           
}
	
	
	
	
	
	
	

Решение задачи №12.4

Установка отступов и полей элементов

13.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину родительских блоков в 70%, внешние отступы в auto, верхний внешний отступ в 3em, нижний внешний отступ в 5em, внутренние отступы в 1em. Для всех элементов установите сплошную границу в 1px. Для абзацев внешние отступы установите в значение auto. Для абзацев первого блока переопределите внешние верхние отступы на 0.5em и установите внутренние отступы в 0.5em. Для абзацев второго блока внешние верхние отступы переопределите на 1.5em, а внутренние отступы установите в 1.5em. Каким должен получиться итоговый интервал по вертикали между родительскими блоками и почему? Какими будут интервалы между верхними границами первых дочерних абзацев и верхними сторонами родительских блоков и почему? Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №13.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<div>
		
		<p class="first">Первый абзац</p>
		
		<p class="first">Второй абзац</p>	
		
	</div>

	<div>
		
		<p class="second">Первый абзац</p>
		
		<p class="second">Второй абзац</p>	
		
	</div>	
	
</body>
</html>

Условие задачи №13.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №13.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<div>
		
		<!-- Итоговый интервал равен marginP+paddingDiv=0.5em+1em=1.5em -->
		<p class="first">Первый абзац</p>
		
		<p class="first">Второй абзац</p>	
		
	</div>

	<!-- Итоговый интервал будет равен большему marginDiv, т.е. 5em -->
	<div>

		<!-- Итоговый интервал равен marginP+paddingDiv=1.5em+1em=2.5em -->		
		<p class="second">Первый абзац</p>
		
		<p class="second">Второй абзац</p>	
		
	</div>	
	
</body>
</html>
div{
width: 70%;
margin: auto;
margin-top: 3em;
margin-bottom: 5em;
padding: 1em;
border: 1px solid;
}

p{
margin: auto;
border: 1px solid;
}

.first{
margin-top: 0.5em;
padding: 0.5em;
}

.second{
margin-top: 1.5em;
padding: 1.5em;
}
	
	
	
	
	
	
	

Решение задачи №13.1

Установка фона элементов

14.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину абзацев в 300px, внешние отступы в auto, верхние внешние отступы в 0px (абзацы должны идти вплотную друг к другу), внутренние отступы в 0.5em, внутренние левые отступы в 1.5em. Оформите шрифт: используйте жирный Gabriola размером в 1.5em. Также установите абзацам границу, но цвет не задавайте. Для первого абзаца переопределите верхний внешний отступ на 1em (чтобы он не прилипал к окну фрейма). Для этого используйте соответствующий псевдокласс (хотя можно было бы переопределить его и в классе red). Далее, установите для каждого из абзацев соответствующий цвет фона и границы (граница должна сливаться с фоном). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №14.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
		
	<p class="red">Каждый</p>
	
	<p class="orange">Охотник</p>	
	
	<p class="yellow">Желает</p>
	
	<p class="green">Знать</p>
	
	<p class="skyblue">Где</p>		
	
	<p class="blue">Сидит</p>
	
	<p class="violet">Фазан</p>
	
</body>
</html>

Условие задачи №14.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №14.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
		
	<p class="red">Каждый</p>
	
	<p class="orange">Охотник</p>	
	
	<p class="yellow">Желает</p>
	
	<p class="green">Знать</p>
	
	<p class="skyblue">Где</p>		
	
	<p class="blue">Сидит</p>
	
	<p class="violet">Фазан</p>
	
</body>
</html>
p{
width: 300px;
margin: auto;
margin-top: 0em;
padding: 0.5em;
padding-left: 1.5em;
font-weight: bold;
font-size: 1.5em;
font-family: Gabriola;
border: 1px solid;
}

p:first-child{
margin-top: 1em;
}

.red{
background-color: red;
border-color:  red;
}

.orange{
background-color: orange;
border-color:  orange;
}

.yellow{
background-color: yellow;
border-color:  yellow;
}

.green{
background-color: green;
border-color:  green;
}

.skyblue{
background-color: skyblue;
border-color:  skyblue;
}

.blue{
background-color: blue;
border-color:  blue;
}

.violet{
background-color: violet;
border-color:  violet;
}

Решение задачи №14.1

14.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину абзаца в 500px, внешние отступы в auto, верхний внешний отступ в 1em, внутренние отступы в 1em. Также установите абзацу серую сплошную границу в 1px и тень с параметрами 2px 1px 5px 3px grey. Размер шрифта заголовка установите в 0.9em и разместите его по центру. Для изображений во втором абзаце установите автоматические внешние отступы, ширину в 240px, высоту в 200px и сплошную черную границу в 1px. Что касается фонов, то для тела документа установите в качестве фона первое изображение, а для абзаца - второе (скопируйте их в папку images). При этом имейте в виду, что второе изображение можно использовать в качестве бесшовного фона, а вот первое придется масштабировать, чтобы покрыть весь элемент (используйте для этого свойство background-size и значение 300%, что позволит перекрыть область тела документа с излишком). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<h1>Установка изображения в качестве фона</h1>

	<p>
		Фон абзаца бесшовный, поэтому его не нужно 
		масштабировать. А вот фон тела документа 
		нужно масштабировать, т.к. он имеет малые 
		размеры и по умолчанию будет повторяться 
		в обоих направлениях.	
	</p>
	
	<p>
		<!-- Изображение для фона тела документа -->
		<img src="images/bg_light_3.png">
		
		<!-- Изображение для фона абзаца -->	
		<img src="images/bg_light_1.png">
	</p>	
	
</body>
</html>

Условие задачи №14.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<h1>Установка изображения в качестве фона</h1>

	<p>
		Фон абзаца бесшовный, поэтому его не нужно 
		масштабировать. А вот фон тела документа 
		нужно масштабировать, т.к. он имеет малые 
		размеры и по умолчанию будет повторяться 
		в обоих направлениях.	
	</p>
	
	<p>
		<!-- Изображение для фона тела документа -->
		<img src="images/bg_light_3.png">
		
		<!-- Изображение для фона абзаца -->	
		<img src="images/bg_light_1.png">
	</p>	
	
</body>
</html>
body{
background-image: url("../images/bg_light_3.png");
background-size: 300%;
}

h1{
font-size: 0.9em;
text-align: center;
}

p{
width: 500px;
margin: auto;
margin-top: 1em;
padding: 1em;
border: 1px solid grey;
box-shadow: 2px 1px 5px 3px grey;
background-image: url("../images/bg_light_1.png");
}

img{
width: 240px;
height: 200px;
margin: auto;
border: 1px solid black;
}
	
	
	

Решение задачи №14.2

14.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой частично нужно восстановить. Требуется установить кнопке сброса формы линейный градиент слева направо от #CCC до #FFF. При наведении курсора мыши градиент должен быть темнее - от #999 до #FFF. Для решения задачи используйте функцию linear-gradient(). Поэкспериментируйте со значениями цвета и величиной угла. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<form action="php/reg.php" method="POST" name="reg_form">

		<!-- Создаем поле для ввода имени -->
		Имя: <input type="text" name="first_name">
		<br><br>

		<!-- Создаем поле для ввода фамилии -->
		Фамилия: <input type="text" name="last_name">
		<br><br>

		<!-- Создаем кнопку сброса формы -->
		<input type="reset" value="Сброс">

	</form>
	
</body>
</html>
form{
width: 250px;
height: 110px;
margin: auto;
margin-top: 3em;
padding: 1em;
border-radius: 0.5em;
box-shadow: 4px 3px 8px 3px grey;
text-align: right;            
}
 
input{
border: 1px solid grey;
border-radius: 2px;
outline: 0px;
}

/* Добавьте линейный градиент */
input[type="reset"]{
width: 80px;
cursor: pointer;
}

/* Добавьте линейный градиент */
input[type="reset"]:hover{
}

Условие задачи №14.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<form action="php/reg.php" method="POST" name="reg_form">

		<!-- Создаем поле для ввода имени -->
		Имя: <input type="text" name="first_name">
		<br><br>

		<!-- Создаем поле для ввода фамилии -->
		Фамилия: <input type="text" name="last_name">
		<br><br>

		<!-- Создаем кнопку сброса формы -->
		<input type="reset" value="Сброс">

	</form>
	
</body>
</html>
form{
width: 250px;
height: 110px;
margin: auto;
margin-top: 3em;
padding: 1em;
border-radius: 0.5em;
box-shadow: 4px 3px 8px 3px grey;
text-align: right;            
}
 
input{
border: 1px solid grey;
border-radius: 2px;
outline: 0px;
}

input[type="reset"]{
width: 80px;
cursor: pointer;
background-image: linear-gradient(90deg, #CCC, #FFF);
}

input[type="reset"]:hover{
background-image: linear-gradient(90deg, #999, #FFF);
}

Решение задачи №14.3

14.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой частично нужно восстановить. Используйте функцию linear-gradient() и ключевые слова для установки цвета red, green и blue. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.4</title>
		
	<style>	
	
		div{
		width: 90%;
		height: 200px;
		margin: auto;
		margin-top: 3em;
		border: 1px solid;
		}
	
	</style>
	
</head>
<body>

	<div></div>
  
</body>
</html>

Условие задачи №14.4

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.4</title>
		
	<style>	
	
		div{
		width: 90%;
		height: 200px;
		margin: auto;
		margin-top: 3em;
		border: 1px solid;
		background: linear-gradient(to right, 
		red 33.3%, green 33.3% 66.6%, blue 66.6%);
		}
	
	</style>
	
</head>
<body>

	<div></div>
  
</body>
</html>

Решение задачи №14.4

14.5. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой частично нужно восстановить. Требуется установить блоку радиальный круговой градиент с использованием цветовой гаммы от красного до оранжевого цвета. Используйте функцию radial-gradient() и ключевые слова для установки цвета red и orange. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.5</title>
		
	<style>	
	
		div{
		width: 400px;
		height: 400px;
		margin: auto;
		margin-top: 3em;
		border-radius: 200px;
		}
	
	</style>
	
</head>
<body>

	<div></div>
  
</body>
</html>

Условие задачи №14.5

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.5</title>
		
	<style>	
	
		div{
		width: 400px;
		height: 400px;
		margin: auto;
		margin-top: 3em;
		border-radius: 200px;
		background: radial-gradient(circle at 50% 50%, red, orange);
		}
	
	</style>
	
</head>
<body>

	<div></div>
  
</body>
</html>

Решение задачи №14.5

Использование анимации и переходов

15.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой нужно частично восстановить. Параметры анимации привяжите к элементу при помощи класса anim. Имя анимации установите в example_1, длительность - в 3s, плавность - в ease-in-out, задержку - в 0.5s, повторение - в бесконечность, направление - в alternate, режим заполнения анимации - в backwards. Анимировать нужно ширину элемента от нуля до 500px. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №15.1</title>

	<style>
		
		pre{
		font-size: 1.3em;
		font-weight: bold;
		overflow: hidden;
		}
		
		/* Восстановите скрытый код */ 
		
	</style>
	
</head>
<body>
		
	<pre class="anim">
		1  2  3  4  5  6  7  8  9  10
	</pre>
	
</body>
</html>

Условие задачи №15.1

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №15.1</title>

	<style>
		
		pre{
		font-size: 1.3em;
		font-weight: bold;
		overflow: hidden;
		}

		.anim{
		animation-name: example_1;
		animation-duration: 3s;
		animation-timing-function: ease-in-out;
		animation-delay: 0.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		}

		/* Анимируем ширину элемента */      
		@keyframes example_1{

			from {
			width: 0px;
			}

			to {
			width: 500px;
			}

		}
		
	</style>
	
</head>
<body>
		
	<pre class="anim">
		1  2  3  4  5  6  7  8  9  10
	</pre>
	
</body>
</html>

Решение задачи №15.1

15.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой нужно частично восстановить. Параметры перехода привяжите к элементу при помощи класса trans. При наведении курсора мыши на элемент цвет фона должен меняться от #EEE до черного, а цвет шрифта наоборот. Длительность перехода установите в 0.3s, плавность - в ease. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №15.2</title>

	<style>
			 
		div{
		width: 70px;
		margin: auto;
		margin-top: 3em;
		padding: 0.3em;
		border: 3px inset grey;
		border-radius: 4px;
		background-color: #EEE;
		cursor: pointer;
		text-align: center;
		}
			 
		.trans{
		
		
		
		}
		
		div.trans:hover{
		
		
		}

	</style>
	
</head>
<body>
		
	<div class="trans">
		Кнопка
	</div>
	
</body>
</html>

Условие задачи №15.2

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №15.2</title>

	<style>
			 
		div{
		width: 70px;
		margin: auto;
		margin-top: 3em;
		padding: 0.3em;
		border: 3px inset grey;
		border-radius: 4px;
		background-color: #EEE;
		cursor: pointer;
		text-align: center;
		}
			 
		.trans{
		transition-property: background-color, color;
		transition-timing-function: ease;
		transition-duration: 0.3s;
		}
		
		div.trans:hover{
		background-color: #000;
		color: #EEE;
		}

	</style>
	
</head>
<body>
		
	<div class="trans">
		Кнопка
	</div>
	
</body>
</html>

Решение задачи №15.2

Форматирование элементов

16.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать так, чтобы блоки расположились в одной строке. Прозрачность блоков установите в 0.5. При наведении на блоки курсора мыши они должны становиться полностью непрозрачными. При этом курсор над первым блоком должен иметь вид указующего перста, а над вторым блоком вид перекрестья. Для решения задачи используйте свойства форматирования элементов display, opacity и cursor. Поэкспериментируйте с прозрачностью элементов и видами курсора. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №16.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый универсальный блок
	</div>	
	
	<div id="second">
		Второй универсальный блок
	</div>	
	
</body>
</html>
	
	
div{
	
	
width: 40%;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first:hover{


}

#second:hover{


}

Условие задачи №16.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №16.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый универсальный блок
	</div>	
	
	<div id="second">
		Второй универсальный блок
	</div>	
	
</body>
</html>
	
	
div{
display: inline-block;
opacity: 0.5;
width: 40%;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first:hover{
opacity: 1;
cursor: pointer;
}

#second:hover{
opacity: 1;
cursor: crosshair;
}

Решение задачи №16.1

16.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Сделайте блоки плавающими, но третьему блоку запретите обтекание верхних блоков. Далее, первому блоку включите автоматическую прокрутку по вертикали, а у второго содержимое, которое не вмещается в доступную область элемента, скройте. Для решения задачи используйте свойства форматирования элементов float, clear, overflow и overflow-y. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №16.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<div id="first">
		Первый универсальный блок. Первый универсальный блок.	
		Первый универсальный блок. Первый универсальный блок.			
		Первый универсальный блок. Первый универсальный блок.		
		Первый универсальный блок. Первый универсальный блок.
		Первый универсальный блок. Первый универсальный блок.
	</div>	
	
	<div id="second">
		Второй универсальный блок. Второй универсальный блок. 
		Второй универсальный блок. Второй универсальный блок.				
		Второй универсальный блок. Второй универсальный блок.		
		Второй универсальный блок. Второй универсальный блок. 
		Второй универсальный блок. Второй универсальный блок.				
	</div>
	
	<div id="third">
		Третий универсальный блок. Третий универсальный блок. 
		Третий универсальный блок. Третий универсальный блок.				
		Третий универсальный блок. Третий универсальный блок.		
		Третий универсальный блок. Третий универсальный блок. 
		Третий универсальный блок. Третий универсальный блок.				
	</div>	
	
</body>
</html>
div{
width: 200px;
height: 200px;
margin: auto;
margin-top: 3em;
margin-left: 30px;
padding: 1em;
border: 1px solid green;
background-color: #DDD;
font-weight: bold;

}

#first{

}

#second{

}

#third{
width: 450px;

}
	
	
	
	
	
	
	
	
	
	

Условие задачи №16.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №16.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<div id="first">
		Первый универсальный блок. Первый универсальный блок.	
		Первый универсальный блок. Первый универсальный блок.			
		Первый универсальный блок. Первый универсальный блок.		
		Первый универсальный блок. Первый универсальный блок.
		Первый универсальный блок. Первый универсальный блок.
	</div>	
	
	<div id="second">
		Второй универсальный блок. Второй универсальный блок. 
		Второй универсальный блок. Второй универсальный блок.				
		Второй универсальный блок. Второй универсальный блок.		
		Второй универсальный блок. Второй универсальный блок. 
		Второй универсальный блок. Второй универсальный блок.				
	</div>
	
	<div id="third">
		Третий универсальный блок. Третий универсальный блок. 
		Третий универсальный блок. Третий универсальный блок.				
		Третий универсальный блок. Третий универсальный блок.		
		Третий универсальный блок. Третий универсальный блок. 
		Третий универсальный блок. Третий универсальный блок.				
	</div>	
	
</body>
</html>
div{
width: 200px;
height: 200px;
margin: auto;
margin-top: 3em;
margin-left: 30px;
padding: 1em;
border: 1px solid green;
background-color: #DDD;
font-weight: bold;
float: left;
}

#first{
overflow-y: auto;
}

#second{
overflow: hidden;
}

#third{
width: 450px;
clear: both;
}
	
	
	
	
	
	
	
	
	
	

Решение задачи №16.2

16.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Требуется сверстать макет страницы при помощи плавающих блоков. Для решения задачи используйте свойства форматирования элементов float и clear. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и универсальный прием обнуления отступов всех элементов. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №16.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">

		<div id="log">Логотип</div>

		<div id="header_content">
			Другое содержимое шапки сайта
		</div>    

	</div>    


	<div id="main_block"> 

		<div id="aside_block">

			<div id="aside_adv_1">
				Рекламный блок №1
			</div>

			<div id="aside_adv_2">
				Рекламный блок №2
			</div>

		</div>


		<div id="content_block">
			Начало блока с основным содержимым страницы
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			Конец блока с основным содержимым страницы
		</div>
		
		<div id="support"></div>

	</div>
	
</body>
</html>
	
	
	<!-- Обратите внимание на блок-подпорку, который позволяет 
	подгонять высоту родительского блока под высоту 
	плавающего блока с наибольшим ее значением. 
	Обнуление границ и установка фона создает впечатление 
	равенства высот плавающих блоков. -->
	
	
	
	
	

*{
padding: 0px;
margin: 0px;
}
 
div{
box-sizing: border-box;
border: 1px solid grey;
}

#header, #main_block{
width: 90vw;
margin-left: 5vw;
}
   
#header{
height: 100px;
background-color: orange;
}

#log, #header_content, #aside_block, #content_block{
;
margin-left: 15px;
margin-top: 15px;
}
 
#log{
width: 260px;
height: 70px;
}
 
#header_content{
width: calc(90vw - 45px - 260px);
height: 70px;
}
  
#main_block{
margin-top: 5px;
background: linear-gradient(90deg, #EEE 0px 275px, #DDD 275px);
}
 
#aside_block{
width: 260px;
height: 100%;
margin-top: 0px;
border-width: 0px;
}
 
#aside_adv_1, #aside_adv_2{
width: 240px;
height: 400px;
margin: auto;
margin-top: 15px;
}
 
#content_block{
width: calc(90vw - 305px);
border-width: 0px;
text-align: center;
}
 
#support{
;
border: 0px;
margin-bottom: 15px;
}

Условие задачи №16.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №16.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">

		<div id="log">Логотип</div>

		<div id="header_content">
			Другое содержимое шапки сайта
		</div>    

	</div>    


	<div id="main_block"> 

		<div id="aside_block">

			<div id="aside_adv_1">
				Рекламный блок №1
			</div>

			<div id="aside_adv_2">
				Рекламный блок №2
			</div>

		</div>


		<div id="content_block">
			Начало блока с основным содержимым страницы
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			Конец блока с основным содержимым страницы
		</div>
		
		<div id="support"></div>

	</div>
	
</body>
</html>
	
	
	
	
	
	
	
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}
 
div{
box-sizing: border-box;
border: 1px solid grey;
}

#header, #main_block{
width: 90vw;
margin-left: 5vw;
}
   
#header{
height: 100px;
background-color: orange;
}

#log, #header_content, #aside_block, #content_block{
float: left;
margin-left: 15px;
margin-top: 15px;
}
 
#log{
width: 260px;
height: 70px;
}
 
#header_content{
width: calc(90vw - 45px - 260px);
height: 70px;
}
  
#main_block{
margin-top: 5px;
background: linear-gradient(90deg, #EEE 0px 275px, #DDD 275px);
}
 
#aside_block{
width: 260px;
height: 100%;
margin-top: 0px;
border-width: 0px;
}
 
#aside_adv_1, #aside_adv_2{
width: 240px;
height: 400px;
margin: auto;
margin-top: 15px;
}
 
#content_block{
width: calc(90vw - 305px);
border-width: 0px;
text-align: center;
}
 
#support{
clear: both;
border: 0px;
margin-bottom: 15px;
}

Решение задачи №16.3

Позиционирование элементов

17.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать так, чтобы блоки расположились в одной строке при помощи абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, top, left и right. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый абсолютно <br>позиционированный блок
	</div>	
	
	<div id="second">
		Второй абсолютно <br>позиционированный блок
	</div>
	
</body>
</html>
div{
width: 40%;
box-sizing: border-box;

: 3em;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
: 3em; 
}

#second{
: 3em;
}
	

Условие задачи №17.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.1</title>
	<link rel="stylesheet" href="css/styles_1.css">

</head>
<body>
	
	<div id="first">
		Первый абсолютно <br>позиционированный блок
	</div>	
	
	<div id="second">
		Второй абсолютно <br>позиционированный блок
	</div>
	
</body>
</html>
div{
width: 40%;
box-sizing: border-box;
position: absolute;
top: 3em;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
left: 3em; 
}

#second{
right: 3em;
}
	

Решение задачи №17.1

17.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать макет страницы при помощи фиксированного и абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, z-index, top, left и right. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и обнуление отступов тела документа. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">
		Позиционированная фиксированно шапка страницы
	</div>	
	
	<div id="aside_menu">
		Позициониро­ван­ное фиксированно боковое меню 
	</div>
	
	<div id="content_block">
		Абсолютно позиционированный блок 
		с основным содержимым страницы
	</div>	
	
</body>
</html>
body{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
padding: 1em;
border: 1px solid grey;
}

#header{

: 0px;
: 5vw;
width: 90vw;
height: 100px;
background-color: orange;
}

#aside_menu{

: 105px;
: 5vw;
width: 25vw;
height: 100%;
background-color: orange;
}

#content_block{

: -1;
: 105px;
: calc(30vw + 5px);
width: calc(65vw - 5px);
min-height: 1200px;
background-color: green;
text-align: center;
}

Условие задачи №17.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">
		Позиционированная фиксированно шапка страницы
	</div>	
	
	<div id="aside_menu">
		Позициониро­ван­ное фиксированно боковое меню 
	</div>
	
	<div id="content_block">
		Абсолютно позиционированный блок 
		с основным содержимым страницы
	</div>	
	
</body>
</html>
body{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
padding: 1em;
border: 1px solid grey;
}

#header{
position: fixed;
top: 0px;
left: 5vw;
width: 90vw;
height: 100px;
background-color: orange;
}

#aside_menu{
position: fixed;
top: 105px;
left: 5vw;
width: 25vw;
height: 100%;
background-color: orange;
}

#content_block{
position: absolute;
z-index: -1;
top: 105px;
left: calc(30vw + 5px);
width: calc(65vw - 5px);
min-height: 1200px;
background-color: green;
text-align: center;
}

Решение задачи №17.2

17.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать макет страницы при помощи относительного и абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, top, left. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и универсальный прием обнуления отступов всех элементов на странице. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">
		
		<div id="log">Логотип</div>
		
		<div id="header_content">
			Другое содержимое шапки сайта
		</div>		
		
	</div>		


	<div id="main_block">	
		
		<div id="aside_block">
			
			<div id="aside_adv_1">
				Рекламный блок №1
			</div>
			
			<div id="aside_adv_2">
				Рекламный блок №2
			</div>
		
		</div>

		
		<div id="content_block">
			Блок с основным содержимым страницы
		</div>
		
	</div>
	
</body>
</html>
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
padding: 1em;
border: 1px solid grey;
}

#header, #main_block{

width: 90vw;
margin-left: 5vw;
}


#header{
height: 100px;
background-color: orange;
}

#log{

: 15px;
: 15px;
width: 15vw;
height: 70px;
}

#header_content{

: 15px;
: calc(30px + 15vw);
width: calc(90vw - 45px - 15vw);
height: 70px;
}


#main_block{
min-height: 1200px;
margin-top: 5px;
padding: 0px;
background-color: green;
}

#aside_block{

: 15px;
: 15px;
width: 260px;
height: calc(100% - 30px);
}

#aside_adv_1, #aside_adv_2{

: 9px;
width: 240px;
height: 400px;
}

#aside_adv_1{
: 15px;
}

#aside_adv_2{
: 430px;
}


#content_block{

: 15px;
: 290px;
width: calc(90vw - 305px);
height: calc(100% - 30px);
text-align: center;
}

Условие задачи №17.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">
		
		<div id="log">Логотип</div>
		
		<div id="header_content">
			Другое содержимое шапки сайта
		</div>		
		
	</div>		


	<div id="main_block">	
		
		<div id="aside_block">
			
			<div id="aside_adv_1">
				Рекламный блок №1
			</div>
			
			<div id="aside_adv_2">
				Рекламный блок №2
			</div>
		
		</div>

		
		<div id="content_block">
			Блок с основным содержимым страницы
		</div>
		
	</div>
	
</body>
</html>
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
padding: 1em;
border: 1px solid grey;
}

#header, #main_block{
position: relative;
width: 90vw;
margin-left: 5vw;
}


#header{
height: 100px;
background-color: orange;
}

#log{
position: absolute;
top: 15px;
left: 15px;
width: 15vw;
height: 70px;
}

#header_content{
position: absolute;
top: 15px;
left: calc(30px + 15vw);
width: calc(90vw - 45px - 15vw);
height: 70px;
}


#main_block{
min-height: 1200px;
margin-top: 5px;
padding: 0px;
background-color: green;
}

#aside_block{
position: absolute;
top: 15px;
left: 15px;
width: 260px;
height: calc(100% - 30px);
}

#aside_adv_1, #aside_adv_2{
position: absolute;
left: 9px;
width: 240px;
height: 400px;
}

#aside_adv_1{
top: 15px;
}

#aside_adv_2{
top: 430px;
}


#content_block{
position: absolute;
top: 15px;
left: 290px;
width: calc(90vw - 305px);
height: calc(100% - 30px);
text-align: center;
}

Решение задачи №17.3

Трансформация элементов

18.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для решения задачи используйте свойство для трансформации элементов transform и функцию rotate() в качестве значения. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №18.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Трансформированный блок
	</div>	
	
	<div id="second">
		Первый позиционированный абсолютно блок
	</div>
	
	<div id="third">
		Второй позиционированный абсолютно блок
	</div>
	
</body>
</html>
	
	
	
	
	
	<!-- Используйте свойство transform и функцию rotate() -->
	
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
position: absolute;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
width: 300px;
height: 100px;
top: 120px;
left: -80px; 

}

#second, #third{
left: 140px;
width: 400px;
height: 140px;
}

#second{
top: 20px;
}

#third{
top: 180px;
}

Условие задачи №18.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №18.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Трансформированный блок
	</div>	
	
	<div id="second">
		Первый позиционированный абсолютно блок
	</div>
	
	<div id="third">
		Второй позиционированный абсолютно блок
	</div>
	
</body>
</html>
	
	
	
	
	
	
	
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
position: absolute;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
width: 300px;
height: 100px;
top: 120px;
left: -80px; 
transform: rotate(-90deg);
}

#second, #third{
left: 140px;
width: 400px;
height: 140px;
}

#second{
top: 20px;
}

#third{
top: 180px;
}

Решение задачи №18.1

18.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично изменить. Требуется заменить смещение абсолютно позиционированных элементов через свойства top и left на смещение при помощи функций трансформации. Для решения задачи используйте свойство для трансформации элементов transform, а также функции трансформации rotate() и translate(). После решения задачи измените порядок следования функций трансформации в свойстве transform и добейтесь первоначального эффекта от трансформаций. Объясните полученный результат. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №18.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Боковой трансформированный блок
	</div>	
	
	<div id="second">
		Первый трансформированный блок
	</div>
	
	<div id="third">
		Второй трансформированный блок
	</div>
	
</body>
</html>
	
	
	
	
	
	<!-- Замените top и left на translate() -->
	
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
position: absolute;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
width: 300px;
height: 100px;
top: 120px;
left: -80px; 
transform: rotate(-90deg);
}

#second, #third{
left: 140px;
width: 400px;
height: 140px;
}

#second{
top: 20px;
}

#third{
top: 180px;
}

Условие задачи №18.2

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №18.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Боковой трансформированный блок
	</div>	
	
	<div id="second">
		Первый трансформированный блок
	</div>
	
	<div id="third">
		Второй трансформированный блок
	</div>
	
</body>
</html>
	
	
	
	
	<!-- Порядок трансформаций имеет значение! -->
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
position: absolute;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
width: 300px;
height: 100px;
transform: rotate(-90deg) translate(-120px, -80px);
/* transform: translate(-80px, 120px) rotate(-90deg); */
}

#second, #third{
width: 400px;
height: 140px;
}

#second{
transform: translate(140px, 20px);
}

#third{
transform: translate(140px, 180px);
}

Решение задачи №18.2

18.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Требуется сделать так, чтобы при наведении курсора мыши на блоки они увеличивались в размере в 1.1 раза. Для решения задачи используйте свойство для трансформации элементов transform, а также функцию трансформации scale(). Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №18.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый блок
	</div>	
	
	<div id="second">
		Второй блок
	</div>
		
</body>
</html>
	
	
	
	
div{
position: absolute;
top: 30px;
box-sizing: border-box;
width: 250px;
height: 100px;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

div:hover{

}

#first{
left: 30px;
}

#second{
left: 310px;
}

Условие задачи №18.3

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №18.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый блок
	</div>	
	
	<div id="second">
		Второй блок
	</div>
		
</body>
</html>
	
	
	
	
div{
position: absolute;
top: 30px;
box-sizing: border-box;
width: 250px;
height: 100px;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

div:hover{
transform: scale(1.1);
}

#first{
left: 30px;
}

#second{
left: 310px;
}

Решение задачи №18.3

Модуль CSS Flexbox

19.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для решения задачи используйте свойство display, а также свойства модуля CSS Flexbox align-content, justify-content и flex-wrap. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №19.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">

		<div id="log">Логотип</div>

		<div id="header_content">
			Другое содержимое шапки сайта
		</div>    

	</div>    


	<div id="main_block"> 

		<div id="aside_block">

			<div id="aside_adv_1">
				Рекламный блок №1
			</div>

			<div id="aside_adv_2">
				Рекламный блок №2
			</div>

		</div>


		<div id="content_block">
			Блок с основным содержимым страницы
		</div>

	</div>
	
</body>
</html>
*{
padding: 0px;
margin: 0px;
}

body, #header, #main_block{




}
 
div{
box-sizing: border-box;
border: 1px solid grey;
padding: 0em;
}
 
#header, #main_block{
width: 90vw;
}
 
#log, #header_content, #content_block, 
#aside_adv_1, #aside_adv_2{
padding: 1em;
}
 
#header{
height: 100px;
background-color: orange;
}
 
#log{
width: 15vw;
height: 70px;
}
 
#header_content{
width: calc(90vw - 45px - 15vw);
height: 70px;
}
  
#main_block{
min-height: 1200px;
margin-top: 5px;
background-color: green;
}
 
#aside_block{
width: 260px;
height: calc(100% - 30px);
}
 
#aside_adv_1, #aside_adv_2{
width: 240px;
height: 400px;
margin: auto;
margin-top: 15px;
}
 
#content_block{
width: calc(90vw - 305px);
height: calc(100% - 30px);
text-align: center;
}

Условие задачи №19.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №19.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">

		<div id="log">Логотип</div>

		<div id="header_content">
			Другое содержимое шапки сайта
		</div>    

	</div>    


	<div id="main_block"> 

		<div id="aside_block">

			<div id="aside_adv_1">
				Рекламный блок №1
			</div>

			<div id="aside_adv_2">
				Рекламный блок №2
			</div>

		</div>


		<div id="content_block">
			Блок с основным содержимым страницы
		</div>

	</div>
	
</body>
</html>
*{
padding: 0px;
margin: 0px;
}

body, #header, #main_block{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
}
 
div{
box-sizing: border-box;
border: 1px solid grey;
padding: 0em;
}
 
#header, #main_block{
width: 90vw;
}
 
#log, #header_content, #content_block, 
#aside_adv_1, #aside_adv_2{
padding: 1em;
}
 
#header{
height: 100px;
background-color: orange;
}
 
#log{
width: 15vw;
height: 70px;
}
 
#header_content{
width: calc(90vw - 45px - 15vw);
height: 70px;
}
  
#main_block{
min-height: 1200px;
margin-top: 5px;
background-color: green;
}
 
#aside_block{
width: 260px;
height: calc(100% - 30px);
}
 
#aside_adv_1, #aside_adv_2{
width: 240px;
height: 400px;
margin: auto;
margin-top: 15px;
}
 
#content_block{
width: calc(90vw - 305px);
height: calc(100% - 30px);
text-align: center;
}

Решение задачи №19.1

Вставка генерируемого контента

20.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для создания счетчиков тела документа <body> и заголовков <h2> используйте свойство counter-reset, а для вставки значений счетчиков свойства content и counter-increment. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №20.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<h2>Введение в HTML</h2>
	
		<h3>Что такое HTML?</h3>
		
		<h3>Отображение веб-документа браузером.</h3>
		
		<h3>Понятие тега HTML и его синтаксис.</h3><br>
	
	
	<h2>Форматирование текста</h2>
	
		<h3>Блочные и строчные элементы.</h3>
		
		<h3>Разбиение текста на абзацы. Применение заголовков.</h3>
	
</body>
</html>
/* Создаем счетчик для тела документа */
body{
: parag_1;   
}

/* Создаем счетчик для заголовка 'h2' */
h2{
: parag_2;   
}

/* Считаем в элементе 'body' все 'h2' */
/* Вставляем перед каждым 'h2' контент: строка+текущее значение 
счетчика+строка */
h2:before{ 
: parag_1 1; 
: "§" counter(parag_1) ". ";
}

/* Считаем в элементе 'h2' все 'h3' */
/* Вставляем перед каждым 'h3' контент: текущее значение счетчика 
parag_1+строка+текущее значение счетчика parag_2+строка */
h3:before{ 
: parag_2 1; 
: counter(parag_1) "." counter(parag_2) ". "; 
}
	

Условие задачи №20.1

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №20.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<h2>Введение в HTML</h2>
	
		<h3>Что такое HTML?</h3>
		
		<h3>Отображение веб-документа браузером.</h3>
		
		<h3>Понятие тега HTML и его синтаксис.</h3><br>
	
	
	<h2>Форматирование текста</h2>
	
		<h3>Блочные и строчные элементы.</h3>
		
		<h3>Разбиение текста на абзацы. Применение заголовков.</h3>
	
</body>
</html>
/* Создаем счетчик для тела документа */
body{
counter-reset: parag_1;   
}

/* Создаем счетчик для заголовка 'h2' */
h2{
counter-reset: parag_2;   
}

/* Считаем в элементе 'body' все 'h2' */
/* Вставляем перед каждым 'h2' контент: строка+текущее значение 
счетчика+строка */
h2:before{ 
 counter-increment: parag_1 1; 
 content: "§" counter(parag_1) ". ";
}

/* Считаем в элементе 'h2' все 'h3' */
/* Вставляем перед каждым 'h3' контент: текущее значение счетчика 
parag_1+строка+текущее значение счетчика parag_2+строка */
h3:before{ 
  counter-increment: parag_2 1; 
  content: counter(parag_1) "." counter(parag_2) ". "; 
}
	

Решение задачи №20.1

Практическая верстка на HTML и CSS

1. Для начала полистайте странички основного учебного сайта №1, загрузите и внимательно изучите его код, после чего сверстайте сайт самостоятельно (без комментариев, только код).

2. Для получения дополнительной практики по верстке сайтов посмотрите учебный сайт №2, загрузите и при помощи комментариев изучите его код, а затем, используя готовый макет и графические заготовки, сверстайте сайт самостоятельно.
  Таблицу стилей для больших разрешений постарайтесь сделать сами. Если вы работаете на ноутбуке, то для моделирования больших разрешений измените в медиазапросах разрешения с 1366px, например, на 1266px, чтобы сработала таблица стилей для больших разрешений экранов. При создании таблицы стилей опирайтесь на коэффициент увеличения размеров 1.3. А далее смотрите на результат отображения в браузере и корректируйте.
  Размеры изображений можно изменить либо в графическом редакторе, либо растянуть при помощи соответствующего свойства CSS (см. пример и справочник).