Задание по CSS
Зарегистрироваться на HTML Academy
https://htmlacademy. ru/program
Пройти курсы:
- Знакомство с CSS Оформление текста, часть 1 Фоны, часть 1
Дополнительно:
- Селекторы, часть 1 Наследование и каскадирование
Задание по внешнему файлу CSS
css. html
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>This is a Heading</h1>
<div student="no">
<p id="main">This is a paragraph.</p>
</div>
<p class="colortext">This is another paragraph.</p>
<div student="yes">
<p >This is a paragraph.</p>
</div>
</div>
<div>
<div>
</div>
<div>
</div>
<p class="colortext">This is another paragraph.</p>
<div student="no">
<p class="colortext">This is also a paragraph.</p>
</div>
<div>
</div>
</body>
</html>
В секции <style> прописать css:
Сделать цвет всех элементов абзацев зеленым Сделать красным абзацы с классом colortext Сделать фон абзаца с идентификатором main синим Установить цвет фона страницы background-color Центрировать заголовок h1 используя margin: auto Задать высоту и ширину width и height равными 300px всем контейнерам div Вынести стили во внешний файл mystyle. cssКонтрольное задание по блочной верстке
Задание. Сверстать композицию web-страницы. Размеры выбрать самостоятельно с соблюдением пропорций на рисунке.
Задание выполнить ТРЕМЯ способами:
С использованием float и clearПрименять значения left, right. Размеры задавать в %. Внутри желтого блока размещать элементы через свойство margin.
С использованием flexРазмеры основным элементов задавать через flex-basis. Внутри жёлтого блока размещать элементы через свойство position.
С использованием сетки фреймворка Bootstrap v3.Следует использовать плавающй контейнер (container-fluid). Допускается использование контейнера внутри контейнера. Внутри жёлтого блока размещать элементы по своему усмотрению.
Заготовка:
<html>
<head>
<meta charset="UTF-8">
<title>Контрольное задание по блочной верстке. Вариант №</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 100px;
}
.orange {
background-color: orange;
}
.blue {
background-color: blue;
}
.pink {
background-color: lightpink;
}
.yellow {
background-color: yellow;
}
.green {
background-color: yellowgreen;
}
.purple {
background-color: purple;
}
.gray {
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<div class="orange"></div>
<div class="blue"></div>
<div class="pink"></div>
<div class="yellow"></div>
<div class="gray"></div>
<div class="purple"></div>
<div class="green"></div>
</div>
</body>
</html>
Варианты заданий:
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7
Вариант 8
Вариант 9
Вариант 10
Вариант 11
Вариант 12
Вариант 13
Вариант 14
Вариант 15
