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

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

Пару слов о задачнике

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

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

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

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

§1. Введение в 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. Показать решение.

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

1.2. Воссоздайте код представленной на рисунке веб-страницы. Используйте внутреннюю таблицу стилей, селекторы элементов p и span, css-свойства color и width. Ширину абзаца установите в 300px. Цвета используйте red и blue. Показать решение.

HTML Результат BwCodes

......

Данный html-код нужно восстановить, 
чтобы получить требуемый результат!

......

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	
	<style>
		p{
		color: red;
		width: 300px;
		}
		
		span{
		color: blue
		}
	</style>
	
</head>
<body>
	<p>
		Текст абзаца должен быть красного цвета. 
		<span> А вот и нет, т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
</body>
</html>

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

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p>
		Текст абзаца должен быть красного цвета. 
		<span> А вот и нет, т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
</body>
</html>
/* styles_1.css */

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

span{
color: blue
}




	

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

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	
	<style>
		
		/* Можно использовать разные записи правила */
		/* @import "http://localhost/test/css/styles_1.css"; */
		
		@import url("http://localhost/test/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
}




	

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

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
	
	<style>
		@import url("http://localhost/test/css/styles_2.css");
	</style>
	
</head>
<body>
	<p>
		Текст абзаца должен быть красного цвета. 
		<span> А вот и нет, т.к. содержимое элемента 
		'span' должно иметь синий цвет.</span>
	</p>
</body>
</html>
/* styles_1.css */

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


/* styles_2.css */

span{
color: blue
}

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

1.6. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы идентификаторов, классов и атрибутов. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p id="p_1">
		Первая красная строчка абзаца. <br>
		<span class="s_1"> Синий 'span'.</span><br>
		<span title="Селектор атрибута"> Зеленый 'span'.</span><br>
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p id="p_1">
		Первая красная строчка абзаца. <br>
		<span class="s_1"> Синий 'span'.</span><br>
		<span title="Селектор атрибута"> Зеленый 'span'.</span><br>
	</p>
</body>
</html>
#p_1{
color: red;
width: 300px;
}

.s_1{
color: blue;
}

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

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

1.7. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать в css-правилах только контекстные, дочерние и соседние селекторы. Показать решение.

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

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<em>Оранжевый 'em'</em>
	<p>
		Первая красная строчка абзаца. <br>
		<span> Синий 'span'.</span><br>
	</p>
</body>
</html>
em{
color: orange;
}

p{
color: red;
}

p span{
color: blue;
}



     

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

1.8. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером (посетите ссылку). К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы псевдоклассов и псевдоэлементов :hover, :visited, ::first-letter. Для абзаца используйте обычный селектор элементов. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<em title="Используйте псевдокласс">При наведении на меня курсора 
	я становлюсь оранжевым.</em>
	<p>
		Первая красная строчка абзаца. <br>
		<a href="page_1.html">
		Меня уже посетили.</a><br>
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<em title="Используйте псевдокласс">При наведении на меня курсора 
	я становлюсь оранжевым.</em>
	<p>
		Первая красная строчка абзаца. <br>
		<a href="page_1.html">
		Меня уже посетили.</a><br>
	</p>
</body>
</html>
p{
color: red;
width: 300px;
}

em:hover{
color: orange;
}

p::first-letter{
color: blue;
}

a:visited{
color: green;
}

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

1.9. Какой из селекторов имеет большую специфичность: 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{...}. Показать решение.

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

/* т.к. (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{...} 

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

§2. Свойства CSS для текста, шрифта, списков, таблиц и форм

2.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, фон (background-color), соответственно, установите желтый и фиолетовый (violet), расстояние между словами, соответственно, 3px и 12px, расстояние между отдельными буквами – 1px и 2px, высоту строк – 1.1em и 1.6em, отступ первой строки – 1% и 3%. Во втором абзаце текст нужно выровнять по правому краю. Не забудьте перечеркнуть (подчеркнуть) соответствующие строки. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		<span id="p_2">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_3">
		<span id="p_4">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		<span id="p_2">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_3">
		<span id="p_4">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
</body>
</html>
.p_1{
width: 500px;
background-color: yellow;
word-spacing: 3px;
letter-spacing: 1px;
line-height: 1.1em;
text-indent: 1%;
}

#p_2{
text-decoration: line-through
}
	
.p_3{
width: 500px;
background-color: violet;
word-spacing: 12px;
letter-spacing: 2px;
line-height: 1.6em;
text-indent: 3%;
text-align: right;
}
	
#p_4{
text-decoration: underline;
}

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

2.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, фон (background-color), соответственно, установите желтый и фиолетовый (violet). Для первого абзаца используйте шрифт Arial, а для второго – Times New Roman. Размер шрифта в обоих абзацах установите в 1em. Используйте, где потребуется, свойства font-variant, font-weight, font-style. Сравните результат форматирования текста с результатом форматирования в задаче 2.1. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		<span id="p_2">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_3">
		<span id="p_4">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		<span id="p_2">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_3">
		<span id="p_4">
		Первое предложение абзаца.</span>
		Второе более длинное предложение абзаца.
		Третье и последнее предложение абзаца.
	</p>
</body>
</html>
.p_1{
width: 500px;
background-color: yellow;
font-family: arial;
font-size: 1em;
}

#p_2{
font-variant: small-caps;
}
	
.p_3{
width: 500px;
background-color: violet;
font-family: "times new roman";
font-size: 1em;
font-weight: bold;
}
	
#p_4{
font-style: italic;
}

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

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/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>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/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>
	.list_1	{
	width: 500px;
	background-color: yellow;
	list-style-type: decimal;
	list-style-position: outside;
	}
	
	.list_2{
	width: 500px;
	background-color: violet;	
	list-style-type: square;
	list-style-position: inside;
	}

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

2.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте свойства caption-side, border-collapse border-spacing, empty-cells. Сравните результат форматирования обоих таблиц. Показать решение.

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

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №1</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table> <br>
	
	<table class="table_2" border="1">
		<caption>Таблица №2</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td></td><td>Ячейка 2.2</td>
		</tr>
	</table>
</body>
</html>
.table_1{
caption-side: top;
border-collapse: collapse;
}

.table_2{
caption-side: bottom;
border-collapse: separate;
border-spacing: 5px;
empty-cells: hide;
}

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

§3. Установка размеров, границ, отступов и полей элементов

3.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину первого абзаца установите 400px, второго – 300px. Высоту первого абзаца установите 10vh, второго – 200px. Во втором абзаце задайте минимальный предел ширины 400px, а максимальный предел высоты 100px. Используйте свойства width, height, min-width, max-height. Обратите внимание на конечные результаты ширины и величины второго абзаца из-за применения ограничений. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>
.p_1{
background-color: yellow;
width: 400px;
height: 10vh;
}

.p_2{
background-color: violet;
min-width: 400px;
max-height: 100px;
width: 300px;
height: 200px;
}





 

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

3.2. В условии задачи 3.1 представлен код html-страницы, а ниже показан внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Воспользуйтесь результатом задачи 3.1, добавив в таблицу стилей дополнительные свойства, устанавливающие соответствующие границы абзацев: border, border-top, border-bottom. Ширину всех границ установите 4px. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>
.p_1{
background-color: yellow;
width: 400px;
height: 10vh;
border: solid red 4px;
border-top: dotted blue;
border-bottom: dashed blue;
}

.p_2{
background-color: violet;
min-width: 400px;
max-height: 100px;
width: 300px;
height: 200px;
border: solid green 4px;
}

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

3.3. В условии задачи 3.1 представлен код html-страницы, а ниже показан внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Воспользуйтесь результатом задач 3.1 и 3.2, добавив в таблицу стилей дополнительные свойства, устанавливающие скругление соответствующих углов первого абзаца и внешние границы второго абзаца: border-radius, border-bottom-right-radius, border-bottom-left-radius, outline, outline-offset. Скругление границ установите 1em, а для нижних углов переопределите на 2em. Расстояние между внутренней и внешней границами установите 2px. Ширину внешней границы установите 4px. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>
.p_1{
background-color: yellow;
width: 400px;
height: 10vh;
border: solid red 4px;
border-top: dotted blue;
border-bottom: dashed blue;
border-radius: 1em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}

.p_2{
background-color: violet;
min-width: 400px;
max-height: 100px;
width: 300px;
height: 200px;
border: solid green 4px;
outline: solid blue 4px;
outline-offset: 2px;
}

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

3.4. В условии задачи 3.1 представлен код html-страницы, а ниже показан внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Воспользуйтесь результатом задач 3.1, 3.2 и 3.3, добавив в таблицу стилей дополнительные свойства, устанавливающие внутренние и внешние отступы абзацев: padding, padding-left, margin, margin-top. Внутренние поля в обоих абзацах установите 0.5em, а затем их внутренние левые отступы переопределите на 0.8em. Внешние отступы установите 30px, но во втором абзаце внешний отступ сверху переопределите на 50px. Сравните результаты всех четырех задач. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="p_1">
		Ширина абзаца равна 400px, высота &ndash; 10%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="p_2">
		Ширина абзаца будет 400px, т.к. width меньше min-width,
		а высота &ndash; 100px, т.к height превышает max-height.
	</p>
</body>
</html>
.p_1{
background-color: yellow;
width: 400px;
height: 10vh;
border: solid red 4px;
border-top: dotted blue;
border-bottom: dashed blue;
border-radius: 1em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
padding: 0.5em;
padding-left: 0.8em;
margin: 30px;
}

.p_2{
background-color: violet;
min-width: 400px;
max-height: 100px;
width: 300px;
height: 200px;
border: solid green 4px;
outline: solid blue 4px;
outline-offset: 2px;
padding: 0.5em;
padding-left: 0.8em;
margin: 30px;
margin-top: 60px;
}

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

§4. Установка цвета и фона, использование анимации

4.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Скопируйте изображение портфеля в папку images, которая находится в созданной нами ранее тестовой папке test на локальном сервере (если вы ее удалили, то посмотрите условие задачи №1.1 в начале задачника и создайте все заново). Текст первого абзаца должен быть красным, а фон – желтым, ширина абзаца должна быть равна 300px. Ширина второго абзаца должна быть равна 300px, фон установите фиолетовым. Также добавьте фоновое изображение, которое не должно повторяться, размеры должны составлять 20% от ширины и 40% от высоты абзаца, начальная позиция должна определяться координатами x=15px и y=15px. Под фон выделите только область содержимого абзаца. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="background_1 border_1">
		Текст данного абзаца должен быть красным, а фон &ndash; желтым.
		Ширина абзаца должна быть 300px.
	</p>
	
	<p class="background_2 border_1">
		Ширина абзаца должна быть 300px, фон &ndash; фиолетовым.
		Изображение не должно повторяться, размеры должны быть 
		20% от ширины и 40% от высоты абзаца. Начальная позиция 
		должна определяться координатами x=15px и y=15px. Под 
		фон выделите только область содержимого абзаца.
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="background_1 border_1">
		Текст данного абзаца должен быть красным, а фон &ndash; желтым.
		Ширина абзаца должна быть 300px.
	</p>
	
	<p class="background_2 border_1">
		Ширина абзаца должна быть 300px, фон &ndash; фиолетовым.
		Изображение не должно повторяться, размеры должны быть 
		20% от ширины и 40% от высоты абзаца. Начальная позиция 
		должна определяться координатами x=15px и y=15px. Под 
		фон выделите только область содержимого абзаца.
	</p>
</body>
</html>
.background_1{
color: red;
background-color: yellow;
}

.background_2{
background-color: violet;
background-image: 
url("http://localhost/test/images/cabinet.png");
background-repeat: no-repeat;
background-position: 15px 15px;
background-size: 20% 40%;
background-clip: content-box;
}

.border_1{
padding: 15px;
width: 300px;
border: solid 2px green;
}

 

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

4.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Текст первого абзаца должен быть черным, а фон линейно-градиентным от красного до белого цвета. Ширина абзаца должна быть 300px, а его высота – 150px. Ширина второго абзаца должна быть 300px, а его высота – 150px. Фон должен быть радиально-градиентным от зеленого до белого цвета. Градиентный эллипс должен иметь радиусы 250px и 280px, а центр располагаться в точке с координатами x=100px и y=180px. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="background_1 border_1">
		Текст данного абзаца должен быть черным, а фон линейно-градиентным 
		от красного до белого цвета. Ширина абзаца должна быть 300px, а 
		его высота &ndash; 150px.
	</p>
	
	<p class="background_2 border_1">
		Ширина абзаца должна быть 300px, а его высота &ndash; 150px. 
		Фон должен быть радиально-градиентным
		от зеленого до белого цвета. Градиентный эллипс должен 
		иметь радиусы 250px и 280px, а центр располагаться в точке 
		с координатами x=100px и y=180px. 
	</p>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="background_1 border_1">
		Текст данного абзаца должен быть черным, а фон линейно-градиентным 
		от красного до белого цвета. Ширина абзаца должна быть 300px, а 
		его высота &ndash; 150px.
	</p>
	
	<p class="background_2 border_1">
		Ширина абзаца должна быть 300px, а его высота &ndash; 150px. 
		Фон должен быть радиально-градиентным
		от зеленого до белого цвета. Градиентный эллипс должен 
		иметь радиусы 250px и 280px, а центр располагаться в точке 
		с координатами x=100px и y=180px. 
	</p>
</body>
</html>
.background_1{
color: black;
background-image: linear-gradient(90deg, #ff0000, #ffffff);
}

.background_2{
background: 
radial-gradient(250px 280px at 100px 180px, #00ff00, #ffffff );
}

.border_1{
padding: 15px;
width: 300px;
height: 150px;
border: solid 3px blue;
}






 

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

4.3. Ниже представлен код html-страницы, а также код внешней таблицы стилей styles_1.css. Наберите их в Notepad++ и поэкспериментируйте, изменяя значения анимационных свойств.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="background_1">	</p>
</body>
</html>
.background_1{
padding: 0px;
width: 450px;
height: 100px;
border: solid 3px red;
animation-name: example_1;
animation-delay: 1s;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-fill-mode: backwards;
}

@keyframes example_1{
	0%{
	background: #ff0000;
	height: 0px;
	}
			
	100% {
	background: #0000ff;
	height: 200px;
	}
}

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

4.4. Ниже представлен код html-страницы, а также код внешней таблицы стилей styles_1.css. Наберите их в Notepad++ и поэкспериментируйте, изменяя значения транзитных свойств.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Создание эффектов перехода</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<p class="background_1">	</p>
</body>
</html>
.background_1{
padding: 10px;
width: 100px;
height: 100px;
border: solid 3px blue;
background-color: #ff0000;
transition-property: width, background-color;
transition-delay: 0.2s;
transition-duration: 2s;
transition-timing-function: ease-in;
}

p:hover{
cursor: pointer;
background-color: #0000ff;
width: 450px;
}

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

§5. Отображение элементов в документе

5.1. Ниже представлен код html-страницы, а также код внешней таблицы стилей styles_1.css. Наберите их в Notepad++. Обратите внимание на поведение абзацев при прокрутке страницы, а также на изменение внешнего вида элемента 'span' при наведении на него курсора и, как следствие, изменения значения применяемого к нему свойства display.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	
	<br><br><span class="div_0">Меняем display</span>
	<p class="div_1">position: fixed;</p>
	<p class="div_2">position: absolute;</p>
</body>
</html>
.div_0{
padding: 10px;
width: 200px;
height: 200px;
border: solid 3px orange;
}

span:hover{
cursor: pointer;
display: block;	
}

.div_1{
padding: 10px;
width: 200px;
height: 600px;
border: solid 3px orange;
background: linear-gradient(180deg, #0000ff, #ffffff);
position: fixed;
top: 250px;
}

.div_2{
padding: 10px;
width: 200px;
height: 100px;
border: solid 3px red;
background: linear-gradient(90deg, #0000ff, #ffffff);
position: absolute;
top: 1100px;
left: 0px;
}

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

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<div class="div_1">
		Для основного div'а установлено фиксированное позиционирование, смещение 
		сверху &ndash; 30px, слева &ndash; 35px, ширина div'а &ndash; 300px, 
		высота div'а &ndash; 400px, внутренние отступы &ndash; 15px. <br><br>
		
		<div class="div_2">div_2</div> Для второго div'а ширина равна 70px, 
		высота &ndash; 50px, градиент (35px 35px at 10px 10px, #00ffff, #ffffff),
		внутренние отступы &ndash; 5px, ширина границы &ndash; 2px. Плавает 
		слева.<br><br>
		
		<div class="div_3">div_3</div> Для третьего div'а ширина равна 70px, 
		высота &ndash; 50px, градиент (45deg, #0000ff, #ffffff),
		внутренние отступы &ndash; 5px, ширина границы &ndash; 2px. Плавает 
		справа. При наведении курсора меняет свою прозрачность на 0.3.
	</div>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<div class="div_1">
		Для основного div'а установлено фиксированное позиционирование, смещение 
		сверху &ndash; 30px, слева &ndash; 35px, ширина div'а &ndash; 300px, 
		высота div'а &ndash; 400px, внутренние отступы &ndash; 15px. <br><br>
		
		<div class="div_2">div_2</div> Для второго div'а ширина равна 70px, 
		высота &ndash; 50px, градиент (35px 35px at 10px 10px, #00ffff, #ffffff),
		внутренние отступы &ndash; 5px, ширина границы &ndash; 2px. Плавает 
		слева.<br><br>
		
		<div class="div_3">div_3</div> Для третьего div'а ширина равна 70px, 
		высота &ndash; 50px, градиент (45deg, #0000ff, #ffffff),
		внутренние отступы &ndash; 5px, ширина границы &ndash; 2px. Плавает 
		справа. При наведении курсора меняет свою прозрачность на 0.3.
	</div>
</body>
</html>
.div_1{
padding: 15px;
width: 300px;
height: 400px;
border: dashed 5px #00ff00;
position: fixed;
top: 30px;
left: 35px;
}

.div_3:hover{
cursor: pointer;
opacity: 0.3;	
}

.div_2{
padding: 5px;
width: 70px;
height: 50px;
border: solid 2px orange;
background: 
radial-gradient(35px 35px at 10px 10px, #00ffff, #ffffff);
float: left;
}

.div_3{
padding: 5px;
width: 70px;
height: 50px;
border: dotted 2px red;
background: linear-gradient(45deg, #0000ff, #ffffff);
float: right;
}

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

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<div class="div_1">
		Для основного div'а установлено абсолютное позиционирование, смещение 
		сверху &ndash; 30px, слева &ndash; 35px, ширина div'а &ndash; 500px, 
		высота div'а &ndash; 200px, внутренние отступы &ndash; 15px. <br><br>
		
		<div class="div_2">Для второго div'а ширина равна 200px, высота &ndash; 
		100px, внутренние отступы &ndash; 5px, ширина границы &ndash; 2px. Плавает 
		слева. overflow: scroll</div> 
		
		<div class="div_3">Для третьего div'а ширина равна 200px, 
		высота &ndash; 100px, внутренние отступы &ndash; 5px, ширина 
		границы &ndash; 2px. Плавает справа. overflow: auto</div>  
	</div>
</body>
</html>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/css/styles_1.css">
</head>
<body>
	<div class="div_1">
		Для основного div'а установлено абсолютное позиционирование, смещение 
		сверху &ndash; 30px, слева &ndash; 35px, ширина div'а &ndash; 500px, 
		высота div'а &ndash; 200px, внутренние отступы &ndash; 15px. <br><br>
		
		<div class="div_2">Для второго div'а ширина равна 200px, высота &ndash; 
		100px, внутренние отступы &ndash; 5px, ширина границы &ndash; 2px. Плавает 
		слева. overflow: scroll</div> 
		
		<div class="div_3">Для третьего div'а ширина равна 200px, 
		высота &ndash; 100px, внутренние отступы &ndash; 5px, ширина 
		границы &ndash; 2px. Плавает справа. overflow: auto</div>  
	</div>
</body>
</html>
.div_1{
padding: 10px;
width: 500px;
height: 200px;
border: dashed 5px #0000ff;
background-color: yellow;
position: absolute;
top: 30px;
left: 35px;
}

.div_2{
padding: 5px;
width: 200px;
height: 100px;
border: solid 2px blue;
float: left;
overflow: scroll;
}

.div_3{
padding: 5px;
width: 200px;
height: 100px;
border: dotted 2px blue;
float: right;
overflow: auto;
}

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

§6. @-правила. Вставка контента. Печать документа.

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/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>

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

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задачи по CSS</title>
	<link rel="stylesheet" href="http://localhost/test/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{
counter-reset: parag_2;   /* Создаем счетчик для заголовка 'h2' */
}

/* Считаем в элементе '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) ". "; 
}

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

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

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

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