Шаг 6
Web-страница оформление внешнего вида (продолжение)
- Продолжаем задавать стиль нашей web страницы.
- После правила элемента body с новой строки пишем правило для селектора
content, в который мы вставим изображения и всю текстовую информацию и сразу после
этого правила напишем правило для абзацев p и для заголовков: для заголовка
h1, который будет главным заголовком нашего документа и для заголовков
h2 и h3.
#content {
width: 750px;
background-color: #ede8da;
margin:10px auto;
text-align: left;
}
p {
font-size: 80%;
margin: 20px;
}
h1{
font-size: 115%;
color: #006600;
margin: 20px;
}
h2{
font-size: 105%;
color:#003366;
margin: 20px;
}
h3{
font-size: 95%;
color:#cc0000;
margin: 20px;
}
- Позвольте Вам прокомментировать то, что у нас получилось.
- Элемент #content – селектор содержания веб страницы.
Правило этого селектора распространяются на все элементы структуры страницы, которые будут заключены в
отделении контента, между парой тэгов
<div id="content"></div>.
Селекторам, перед которыми стоит символ решетки (#) в отделении «тела»
документа, будет присвоено значение с помощью идентификатора id.
- Строка width:750px; - ширина контента: 750 пикселей.
- Строка background-color: #ede8da; - цвет фона нашей страницы.
- Строка margin:10px auto; - размер полей внешнего отступа элемента
content, со всех четырех сторон составляет 10 пикселей (auto – в
зависимости от объема наполнения страницы текстовой и визуальной информацией).
- Строка text-align: left; - выравнивание текста по левому краю.
- Селектор элемента p – определяет стиль текстовых абзацев, которые размещаются на
странице между тэгами <p></p>.
- Строка font-size: 80%; - размер шрифта абзаца.
- Строка margin: 20px; - размер полей внешнего отступа элемента p
составляет 20 пикселей со всех четырех сторон.
- Элемент h1 – определяет стиль заголовка h1, главного заголовка
сайта. Я не буду комментировать параметры и размеры этого правила, прочитайте это правило самостоятельно.
- Вам не кажется, что Вы уже начинаете читать кодовую разметку шаблонов сайта и
понимать прочитанное?
- Шаг 7 >>>
Карта сайта
