создание сайтов

Шаг 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 >>>

     карта сайтаКарта сайта