Сборник упражнений и задач по основам 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/
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №1.1</title> </head> <body> Здесь будет располагаться содержимое документа. </body> </html>
1.2. Добавьте в начало и конец представленной таблицы стилей комментарии «Внешняя таблица стилей» и «Конец таблицы стилей». Далее, закомментируйте второе и третье объявления в стиле (они должны стать одним комментарием), а в строки с первым и четвертым объявлениями добавьте комментарии «Первое объявление в блоке» и «Четвертое объявление в блоке». Показать решение.
htmlCodes
span{
color: red;
font-weight: bold;
text-align: center;
padding-right: 10px;
overflow: hidden;
font-style: italic;
}
htmlCodes
/* Внешняя таблица стилей */
span{
color: red; /* Первое объявление в блоке */
/* font-weight: bold;
text-align: center; */
padding-right: 10px; /* Четвертое объявление в блоке */
overflow: hidden;
font-style: italic;
}
/* Конец таблицы стилей */
1.3. Отформатируйте исходный код представленной таблицы стилей. Показать решение.
htmlCodes
span{color:red;/*
Первое объявление в блоке */
font-weight:bold;text-align: center;
padding-right:10px;/*Четвертое
объявление в блоке */
overflow:hidden;font-style:italic;}
htmlCodes
span{
color: red; /* Первое объявление в блоке */
font-weight: bold;
text-align: center;
padding-right: 10px; /* Четвертое объявление в блоке */
overflow: hidden;
font-style: italic;
}
1.4. Исправьте в исходном коде представленной таблицы стилей три ошибки. Показать решение.
htmlCodes
span{
color: red; /* Первое объявление в блоке /
font-weight: bold;
text-align: center
padding-right: 10px; /* Четвертое объявление в блоке */
overflow hidden;
font-style: italic;
}
htmlCodes
span{
color: red; /* Первое объявление в блоке */
font-weight: bold;
text-align: center;
padding-right: 10px; /* Четвертое объявление в блоке */
overflow: hidden;
font-style: italic;
}
Подключение CSS к html-документу
2.1. Воссоздайте код представленной веб-страницы (нажмите кнопку «Результат»). Для абзаца используйте внутреннюю таблицу стилей (тег <style>) и селектор элементов <p>, а для элемента <span> встроенный стиль (универсальный атрибут style). Также используйте css-свойства color и width. Ширину абзаца установите в 300px. Цвета используйте red и blue. Показать решение.
htmlCodes
...... Восстановите исходный код страницы, чтобы получить требуемый результат! ......
htmlCodes
<!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.2. Используйте условие второй задачи, но разместите все стили во внешней таблице стилей в файле css/styles_1.css. Для подключения внешней таблицы стилей, используйте служебный тег <link>. Показать решение.
htmlCodes
<!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.3. Используйте условие третьей задачи, но внешнюю таблицу стилей подключите при помощи правила @import, разместив его в служебном элементе <style>. Показать решение.
htmlCodes
<!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.4. Используйте условие второй задачи, но разместите правило для абзаца во внешнем файле css/styles_1.css, а правило для тега <span> во внешнем файле css/styles_2.css. Подключите один из этих файлов при помощи служебного тега <link>, а второй при помощи правила @import, разместив его в служебном теге <style>. Во всех четырех задачах результат должен быть одинаковым! Показать решение.
htmlCodes
<!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
}
Селекторы CSS
3.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы по идентификатору, классу и атрибуту, а также свойства color (значения цвета red, blue и green), width (ширину абзаца установите в 300px) и font-weight (используйте для насыщенности шрифта значение bold). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только универсальный селектор, дочерние селекторы и соседние селекторы. Для установки нужного цвета текста используйте свойство color (значения цвета red, blue и orange). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы по типу и селекторы потомков. Для установки нужного цвета текста используйте свойство color (значения цвета red, blue и orange). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы родственных элементов. Для установки нужного цвета текста используйте свойство color (значения цвета blue и orange). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.5. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы по атрибуту, а также свойство color (значения цвета red, blue и orange). Показать решение.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.5</title> <link rel="stylesheet" href="css/styles_1.css"> </head> <body> <p class="red_text"> Первая строчка абзаца.<br> <em title="1-й em">Синий «em».</em><br> <em title="2-й em">Оранжевый «em».</em> </p> </body> </html>
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.5</title> <link rel="stylesheet" href="css/styles_1.css"> </head> <body> <p class="red_text"> Первая строчка абзаца.<br> <em title="1-й em">Синий «em».</em><br> <em title="2-й em">Оранжевый «em».</em> </p> </body> </html>
/* Селекторы по атрибуту */
[class="red_text"]{
color: red;
}
[title="1-й em"]{
color: blue;
}
[title^="2-й"]{
color: orange;
}
3.6. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Подключите к элементам имеющийся класс format_block, сделайте их редактируемыми и отключите в универсальном блоке проверку орфографии (используйте соответствующие универсальные атрибуты). При получении фокуса цвет текста абзаца должен становиться синим, а при наведении курсора мыши на универсальный блок его цвет должен становиться оранжевым. Используйте селекторы псевдоклассов :focus и :hover, а также свойство color (значения цвета blue и orange). Показать решение.
htmlCodes
<!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>
.format_block{
width: 300px;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid black;
cursor: pointer;
}
/* Допишите недостающие стили */
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.6</title> <link rel="stylesheet" href="css/styles_1.css"> </head> <body> <p class="format_block" contenteditable> Редактируемый абзац. </p> <div class="format_block" spellcheck="false" contenteditable> Редактируемый универсальный блок «div». </div> </body> </html>
.format_block{
width: 300px;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid black;
cursor: pointer;
}
p:focus{
color: blue;
}
div:hover{
color: orange;
}
3.7. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Подключите к элементам имеющийся класс format_block (используйте соответствующий универсальный атрибут) и добавьте стили для цвета текста абзацев. Разрешается использовать только селекторы псевдоклассов :first-child, :last-child и :nth-child. Также используйте свойство color и значения цвета blue, orange и red. Показать решение.
htmlCodes
<!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>
.format_block{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
/* Допишите недостающие стили */
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.7</title> <link rel="stylesheet" href="css/styles_1.css"> </head> <body> <p class="format_block"> Первый абзац. </p> <p class="format_block"> Второй абзац. </p> <p class="format_block"> Третий абзац. </p> <p class="format_block"> Четвертый абзац. </p> </body> </html>
.format_block{
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.8. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Разрешается использовать только селекторы псевдоклассов :first-of-type и :nth-of-type. Также используйте свойство color и значения цвета blue и orange. Показать решение.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.8</title> <link rel="stylesheet" href="css/styles_1.css"> </head> <body> <p class="format_block"> Первый абзац. </p> <div class="format_block"> Первый универсальный блок. </div> <p class="format_block"> Второй абзац. </p> <div class="format_block"> Второй универсальный блок. </div> </body> </html>
.format_block{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
/* Допишите недостающие стили */
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.8</title> <link rel="stylesheet" href="css/styles_1.css"> </head> <body> <p class="format_block"> Первый абзац. </p> <div class="format_block"> Первый универсальный блок. </div> <p class="format_block"> Второй абзац. </p> <div class="format_block"> Второй универсальный блок. </div> </body> </html>
.format_block{
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;
}
Наследование, каскадирование и приоритетность стилей CSS
4.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы псевдоклассов :hover, :active и :visited (не забываем о приоритете стилей!). Также создайте в папке pages страницу page_1.html с обратной ссылкой на индексную страницу (если вы не используете локальный сервер, не забудьте использовать систему относительной адресации с двумя точками). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.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?
Показать решение.
htmlCodes
/* Определяем специфичности и сравниваем */ /* т.к. (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.3. Ниже представлен код html-страницы, в которой присутствует внутренняя таблица стилей. Также к странице подключена внешняя таблица стилей. Определите цвета текста абзацев на странице. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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) < (0,2,0), <br>т.е.
(.green) < ([class][title]),
следовательно, цвет текста будет синим.
</p>
<p class="format red orange" id="violet">
Считаем специфичности: (0,2,0) = (0,2,0) < (1,0,0), <br>т.е.
([class].red) = ([class].orange) < (#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.4. Ниже представлен код html-страницы, в которой присутствует внутренняя таблица стилей, а также встроенные стили. Определите цвета текста абзацев на странице. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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>
Единицы измерения и цветовые модели в CSS
5.1. Решите несколько примеров на перевод одних
единиц измерения в другие. При этом будем считать, что область просмотра окна браузера
имеет размеры 1000х800 пикселей (ширина и высота), а размер шрифта по умолчанию составляет
16px.
Показать решение.
1. Переведите 17in ⇨ cm (дюймы в сантиметры).
2. Переведите 1.7em ⇨ px.
3. Переведите 70vw ⇨ px.
4. Переведите 20% от высоты области просмотра окна браузера в пиксели.
5. Переведите 35deg ⇨ rad (градусы в радианы).
6. Переведите 2.3rad ⇨ deg (радианы в градусы).
7. Переведите 2.3turn ⇨ deg (обороты в градусы).
htmlCodes
1. 17in = 17x2.54cm = 43.18cm.
2. 1.7em = 1.7x16px = 27.2px.
3. 70vw = 1000x0.7px = 700px.
4. 800x0.2px = 160px.
5. 35deg ≈ 35x0,01745rad ≈ 0.61075rad.
6. 2.3rad ≈ 2.3x57,296deg ≈ 131.7808deg.
7. 1.5rad = 2.3x360deg = 828deg.
5.2. Допишите исходный код представленной html-страницы таким образом, чтобы первый и второй абзацы, а также третий и четвертый абзацы имели одинаковый фон. Для решения задачи вам понадобится перевести числа из шестнадцатеричной системы счисления в десятичную и наоборот. Для перевода чисел используйте наш калькулятор для перевода чисел из одной СС в другую. Показать решение.
htmlCodes
<!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;
}
.dark_red_16{
background-color: #FEC9D5;
}
/* Допишите значение цвета в 10-й СС */
.dark_red_10{
background-color: rgb(254,);
}
/* Допишите значение цвета в 16-й СС */
.dark_blue_16{
background-color: #E7;
}
.dark_blue_10{
background-color: rgb(231,249,253);
}
</style>
</head>
<body>
<p class="format dark_red_16">
Светло-красный фон в RGB с использованием
значения в 16-ной системе счисления.
</p>
<p class="format dark_red_10">
Тот же светло-красный фон RGB, но с
использованием значения в 10-ной СС.
</p>
<p class="format dark_blue_16">
Светло-голубой фон в RGB с использованием
значения в 16-ной системе счисления.
</p>
<p class="format dark_blue_10">
Тот же светло-голубой фон RGB, но с
использованием значения в 10-ной СС.
</p>
</body>
</html>
htmlCodes
<!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;
}
.dark_red_16{
background-color: #FEC9D5;
}
/* FE->254, C9->201, D5->213 */
.dark_red_10{
background-color: rgb(254,201,213);
}
/* 231->E7, 249->F9, 253->FD */
.dark_blue_16{
background-color: #E7F9FD;
}
.dark_blue_10{
background-color: rgb(231,249,253);
}
</style>
</head>
<body>
<p class="format dark_red_16">
Светло-красный фон в RGB с использованием
значения в 16-ной системе счисления.
</p>
<p class="format dark_red_10">
Тот же светло-красный фон RGB, но с
использованием значения в 10-ной СС.
</p>
<p class="format dark_blue_16">
Светло-голубой фон в RGB с использованием
значения в 16-ной системе счисления.
</p>
<p class="format dark_blue_10">
Тот же светло-голубой фон RGB, но с
использованием значения в 10-ной СС.
</p>
</body>
</html>
Оформление внешнего вида текста
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. Сравните результат форматирования обоих абзацев. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet), также задайте для абзацев идентификаторы id, через которые и привяжите к ним стили. Текст первого абзаца должен выравниваться по левой стороне, а второго - по правой (свойство text-align). Для подчеркивания первых слов предложений используйте соответствующие значения свойства text-decoration для установки декоративной линии. При этом в первом абзаце стили к ним привяжите через универсальный атрибут class, а во втором - через селекторы псевдоклассов :nth-of-type (оберните в обоих абзацах первые слова в спаны). Не забывайте, что селекторы в таблице стилей, которые используются с одним и тем же стилем, можно записать через запятую, а не дублировать впустую повторяющийся код. Сравните результат форматирования обоих абзацев. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid grey. Также задайте для второго абзаца идентификатор, через который и привяжите к нему стиль. Первый абзац дополнительно не форматируйте. Во втором абзаце установите для текста серую (grey) тень с размытием в 2px и смещением в 1px как по горизонтали так и по вертикали. Кроме того, интервал между символами установите в 1.3px, а способ обработки пробельных символов задайте такой же, как и в элементе <pre> (это позволит расположить слова нужным образом). Для решения задачи используйте свойства white-space, letter-spacing, text-shadow. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.4. Найдите пять ошибок в исходном коде представленной таблицы стилей. Показать решение.
htmlCodes
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;
}
htmlCodes
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 */
}
Определение характеристик шрифтов
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. Обратите внимание, как изменятся размеры и положение абзацев на странице (это связано с различным итоговым абсолютным размером шрифтов абзацев в пикселях). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid. Для всех абзацев установите шрифт "times new roman" размером в 1.2em. Далее, для первого абзаца установите нормальные начертание и стиль шрифта, для второго - курсивный стиль шрифта, а для третьего - жирное начертание шрифта. Для решения задачи используйте свойства font-size, font-family, font-style, font-weight. Сравните результат форматирования абзацев. Обратите внимание, что размеры и положение абзацев на странице одинаковы, что связано с равнымым итоговым абсолютным размером шрифтов абзацев в пикселях. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid. Для всех абзацев установите шрифт gabriola размером в 1.2em. Далее, для первого абзаца установите нормальные начертание и стиль шрифта, для второго - курсивный стиль шрифта, а для третьего - используйте капитель. Для решения задачи используйте свойства font-size, font-family, font-style, font-weight, font-variant. Сравните результат форматирования абзацев. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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;
}
Оформление внешнего вида списков
8.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) списков установите 500px, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet). Для решения задачи используйте свойства для оформления списков list-style-type и list-style-position. Сравните результат форматирования обоих списков. Показать решение.
htmlCodes
<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>
htmlCodes
<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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) списка установите в 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid, высоту строки в 1.3em. Маркеры списка расположите внутри. В качестве пунктов списка используйте изображения кружков в условии (скопируйте их себе в папку test/images/). При наведении курсора мыши на пункты списка маркер должен менять свой цвет на оранжевый. Для решения задачи используйте свойства для оформления списков list-style-image, list-style-position, а также псевдокласс :hover. Не забывайте про относительную адресацию при указании пути к файлам изображений. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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");
}
Оформление внешнего вида таблиц
9.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) таблиц установите в 70%, внешние отступы (margin) в 3em, границу (border) в 1px solid green. Также для заголовков и ячеек таблиц внутренние отступы (padding) задайте в 0.5em. Заголовки таблиц расположите слева над таблицами (нужно применить к заголовкам выравнивание текста по левому краю), границы первой таблицы оставьте раздельными, а у второй таблицы границы объедините. Для решения задачи используйте свойства для оформления таблиц border-collapse и caption-side. Сравните результат форматирования обоих таблиц. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.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. Сравните результат форматирования обоих таблиц. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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;
}
Оформление внешнего вида колонок
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. Сравните результат форматирования обоих абзацев. Показать решение.
htmlCodes
<!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"> В данном абзаце текст верста­ется в 2 колонки. Ширина (width) абзацев уста­новлена в 80%, внешние отступы (margin) в 3em, внут­ренние отступы (padding) в 0.7em, высота строки в 1.3em, текст растягивается по ширине колонки, расстояние между колонками в 1.4em, граница (border) в 1px solid green, граница между колонками в 1px dashed green. </p> <p class="p_2"> В данном абзаце текст верста­ется в 3 колонки. Ширина (width) абзацев уста­новлена в 80%, внешние отступы (margin) в 3em, внут­ренние отступы (padding) в 0.7em, высота строки в 1.3em, текст растягивается по ширине колонки, расстояние между колонками в 1.4em, граница (border) в 1px solid green, граница между колонками в 1px dashed green. </p> </body> </html>
htmlCodes
<!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"> В данном абзаце текст верста­ется в 2 колонки. Ширина (width) абзацев уста­новлена в 80%, внешние отступы (margin) в 3em, внут­ренние отступы (padding) в 0.7em, высота строки в 1.3em, текст растягивается по ширине колонки, расстояние между колонками в 1.4em, граница (border) в 1px solid green, граница между колонками в 1px dashed green. </p> <p class="p_2"> В данном абзаце текст верста­ется в 3 колонки. Ширина (width) абзацев уста­новлена в 80%, внешние отступы (margin) в 3em, внут­ренние отступы (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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите в 90%, внешние отступы (margin) в 1em, внутренние отступы (padding) в 0.7em, границу (border) в 1px solid green, высоту строки в 1.3em, текст растяните по ширине. Заголовки расположите по середине, верстку оформите в две колонки. Для решения задачи используйте свойство для многоколоночной верстки column-count. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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;
}
Установка размеров элементов
11.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 80%, высоту – в 40%. Каковы размеры абзацев в пикселях? Показать решение.
htmlCodes
<!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>
htmlCodes
<!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> высота – (400/100)*40px=160px. </p> <p> Ширина абзацев равна (500/100)*80px=400px,<br> высота – (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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 70%, высоту – в 50%. Также задайте для первого абзаца минимально допустимую ширину в 400px, минимально допустимую высоту в 150px. Для второго абзаца задайте максимально допустимую ширину в 400px, максимально допустимую высоту в 150px. Для решения задачи используйте свойства для определения размеров элементов max-height, max-width, min-height и min-width. Рассчитайте конечные размеры абзацев в пикселях и объясните свое решение. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 70%, высоту – в 50%. Задайте для первого абзаца алгоритм расчета размеров со значением content-box, а для второго - border-box (используйте свойство box-sizing). Рассчитайте размеры области содержимого каждого абзаца, а также их полные размеры вместе с внутренними отступами. Объясните свое решение. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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;
}
Установка границ и теней элементов
12.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для таблицы внешние отступы (margin) установите в 3em, для заголовка таблицы внешний отступ снизу (margin-bottom) установите в 0.2em, для ячеек таблицы внутренние отступы (padding) установите в 0.5em. Границы таблицы и ячеек установите через сокращенное свойство для границ. Для ссылок используйте отдельные свойства для установки нижних границ, но ширину нижней границы укажите в одном стиле сразу для всех ссылок в таблице. Не забудьте отменить подчеркивание ссылок, чтобы у них визуально не отображались сразу две линии подчеркивания. Для решения задачи используйте свойства для определения параметров границ border, border-bottom-width, border-bottom-style, border-bottom-color. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для родительского блока внешние отступы (margin) установите в 3em, а ширину в 100px. Также установите ему черную сплошную границу в 2px и задайте скругление углов в 10px. Для дочерних блоков внешние отступы (margin) установите в auto (чтобы они выравнивались по центру), а внешние нижние и верхние отступы (margin-top и margin-bottom) установите в 20px. Ширину и высоту дочерних блоков установите в 80px. Границы им не устанавливайте, однако задайте скругление углов в 40px (делим размеры пополам, чтобы получить окружность). Чтобы применить к ним полученный стиль, используйте псевдокласс :not (селектор будет иметь вид div:not([id="main"])). Также установите для каждого из блоков соответствующий цвет фона (background-color). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для блока внешние отступы (margin) установите в auto, а верхний отступ (margin-top) в 7em. Ширину и высоту установите в 60px. Границы не устанавливайте, однако задайте скругление углов в 30px. Для установки теней используйте свойство box-shadow, задав нулевые смещения и размытие, но установив им растяжение в 30px, 60px и 90px. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите для формы внешние отступы (margin) в auto, верхний отступ (margin-top) в 3em, внутренние отступы (padding) в 1em, ширину и высоту, соответственно, в 250px и 110px. Границы не устанавливайте, однако задайте скругление углов в 0.5em и установите тень с параметрами 4px 3px 8px 3px grey. Для полей ввода обнулите границы и установите сплошной серый контур шириной 1px (используйте свойство outline). При получении полями фокуса ширина контура должна увеличиваться до 2px. Обратите внимание на то, что при увеличении ширины контура, размеры поля ввода остаются прежними. Попробуйте убрать контур и проделать все тоже самое с границами. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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;
}
Установка отступов и полей элементов
13.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину родительских блоков в 70%, внешние отступы в auto, верхний внешний отступ в 3em, нижний внешний отступ в 5em, внутренние отступы в 1em. Для всех элементов установите сплошную границу в 1px. Для абзацев внешние отступы установите в значение auto. Для абзацев первого блока переопределите внешние верхние отступы на 0.5em и установите внутренние отступы в 0.5em. Для абзацев второго блока внешние верхние отступы переопределите на 1.5em, а внутренние отступы установите в 1.5em. Каким должен получиться итоговый интервал по вертикали между родительскими блоками и почему? Какими будут интервалы между верхними границами первых дочерних абзацев и верхними сторонами родительских блоков и почему? Показать решение.
htmlCodes
<!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>
htmlCodes
<!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;
}
Установка фона элементов
14.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину абзацев в 300px, внешние отступы в auto, верхние внешние отступы в 0px (абзацы должны идти вплотную друг к другу), внутренние отступы в 0.5em, внутренние левые отступы в 1.5em. Оформите шрифт: используйте жирный Gabriola размером в 1.5em. Также установите абзацам границу, но цвет не задавайте. Для первого абзаца переопределите верхний внешний отступ на 1em (чтобы он не прилипал к окну фрейма). Для этого используйте соответствующий псевдокласс (хотя можно было бы переопределить его и в классе red). Далее, установите для каждого из абзацев соответствующий цвет фона и границы (граница должна сливаться с фоном). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину абзаца в 500px, внешние отступы в auto, верхний внешний отступ в 1em, внутренние отступы в 1em. Также установите абзацу серую сплошную границу в 1px и тень с параметрами 2px 1px 5px 3px grey. Размер шрифта заголовка установите в 0.9em и разместите его по центру. Для изображений во втором абзаце установите автоматические внешние отступы, ширину в 240px, высоту в 200px и сплошную черную границу в 1px. Что касается фонов, то для тела документа установите в качестве фона первое изображение, а для абзаца - второе (скопируйте их в папку images). При этом имейте в виду, что второе изображение можно использовать в качестве бесшовного фона, а вот первое придется масштабировать, чтобы покрыть весь элемент (используйте для этого свойство background-size и значение 300%, что позволит перекрыть область тела документа с излишком). Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой частично нужно восстановить. Требуется установить кнопке сброса формы линейный градиент слева направо от #CCC до #FFF. При наведении курсора мыши градиент должен быть темнее - от #999 до #FFF. Для решения задачи используйте функцию linear-gradient(). Поэкспериментируйте со значениями цвета и величиной угла. Показать решение.
htmlCodes
<!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{
}
htmlCodes
<!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.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой частично нужно восстановить. Используйте функцию linear-gradient() и ключевые слова для установки цвета red, green и blue. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.5. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой частично нужно восстановить. Требуется установить блоку радиальный круговой градиент с использованием цветовой гаммы от красного до оранжевого цвета. Используйте функцию radial-gradient() и ключевые слова для установки цвета red и orange. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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>
Использование анимации и переходов
15.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой нужно частично восстановить. Параметры анимации привяжите к элементу при помощи класса anim. Имя анимации установите в example_1, длительность - в 3s, плавность - в ease-in-out, задержку - в 0.5s, повторение - в бесконечность, направление - в alternate, режим заполнения анимации - в backwards. Анимировать нужно ширину элемента от нуля до 500px. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой нужно частично восстановить. Параметры перехода привяжите к элементу при помощи класса trans. При наведении курсора мыши на элемент цвет фона должен меняться от #EEE до черного, а цвет шрифта наоборот. Длительность перехода установите в 0.3s, плавность - в ease. Показать решение.
htmlCodes
<!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>
htmlCodes
<!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>
Форматирование элементов
16.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать так, чтобы блоки расположились в одной строке. Прозрачность блоков установите в 0.5. При наведении на блоки курсора мыши они должны становиться полностью непрозрачными. При этом курсор над первым блоком должен иметь вид указующего перста, а над вторым блоком вид перекрестья. Для решения задачи используйте свойства форматирования элементов display, opacity и cursor. Поэкспериментируйте с прозрачностью элементов и видами курсора. Показать решение.
htmlCodes
<!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{
}
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Сделайте блоки плавающими, но третьему блоку запретите обтекание верхних блоков. Далее, первому блоку включите автоматическую прокрутку по вертикали, а у второго содержимое, которое не вмещается в доступную область элемента, скройте. Для решения задачи используйте свойства форматирования элементов float, clear, overflow и overflow-y. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Требуется сверстать макет страницы при помощи плавающих блоков. Для решения задачи используйте свойства форматирования элементов float и clear. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и универсальный прием обнуления отступов всех элементов. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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;
}
Позиционирование элементов
17.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать так, чтобы блоки расположились в одной строке при помощи абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, top, left и right. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать макет страницы при помощи фиксированного и абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, z-index, top, left и right. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и обнуление отступов тела документа. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать макет страницы при помощи относительного и абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, top, left. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и универсальный прием обнуления отступов всех элементов на странице. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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;
}
Трансформация элементов
18.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для решения задачи используйте свойство для трансформации элементов transform и функцию rotate() в качестве значения. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично изменить. Требуется заменить смещение абсолютно позиционированных элементов через свойства top и left на смещение при помощи функций трансформации. Для решения задачи используйте свойство для трансформации элементов transform, а также функции трансформации rotate() и translate(). После решения задачи измените порядок следования функций трансформации в свойстве transform и добейтесь первоначального эффекта от трансформаций. Объясните полученный результат. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Требуется сделать так, чтобы при наведении курсора мыши на блоки они увеличивались в размере в 1.1 раза. Для решения задачи используйте свойство для трансформации элементов transform, а также функцию трансформации scale(). Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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;
}
Модуль CSS Flexbox
19.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для решения задачи используйте свойство display, а также свойства модуля CSS Flexbox align-content, justify-content и flex-wrap. Показать решение.
htmlCodes
<!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;
}
htmlCodes
<!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;
}
Вставка генерируемого контента
20.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для создания счетчиков тела документа <body> и заголовков <h2> используйте свойство counter-reset, а для вставки значений счетчиков свойства content и counter-increment. Показать решение.
htmlCodes
<!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) ". ";
}
htmlCodes
<!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) ". ";
}
Верстка сайтов на HTML и CSS
1. Для начала внимательно полистайте наш сайт «Ок, Python!». Затем посетите странички основного учебного сайта №1. Заметили что-нибудь общее? Правильно! На всех сайтах использованы элементы одного и того же css-шаблона, который вам и предстоит сверстать. Для этого загрузите и внимательно изучите код учебного сайта, после чего сверстайте сайт самостоятельно (без комментариев, только код!).