Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size
| Свойство | Описание значения |
| font-family | Указыватся до трех шрифтов, через запятую: serif|san-serif |cursive |fantasy | monospace. |
| font-style | начертания: normal (по умолчанию), italic (курсив), oblique (наклонный). |
| font-variant | варианты начертания: normal (по умолчанию), small-caps (все буквы заглавные уменьшенного размера). |
| font-weight | жирность шрифта: normal , bold, bolder(жирный), lighter(бледный). |
| font-size | размер шрифта в абсолютных: (константы xx-small | x-small | small | medium | large | x-large | xx-large | {Абсолютный размер} или в относительных единицах или процентах: larger | smaller | {Отн. размер}%; |
Например, вот описание свойств шрифта для <p>:
<head><style type="text/css">
p {
font-style: italic;
font-variant:normal;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<p>Это текст, выведенный с указанными фонтами</p>
<body>
Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле:
p { font: italic normal bold 30px arial, sans-serif; }
Порядок свойств font здесь таков:
font-style|font-variant|font-weight|font-size|font-family
Свойство font-family определяет название шрифта или семейства шрифтов для отображения документа. Обычно указывается несколько шрифтов, через запятые, чтобы выбрать из них тот шрифт, который установлен на компьютере клиента. Кроме названия может указываться гарнитура (семейство) шрифтов: serif(Times New Roman, Georgia); sans - serif(Arial, Verdana); monospace(моноширинные Courier, Courier New).
Пример:
<html>
<head>
<title>Установка шрифта с помощью стилей</title>
<style type="text/css">
body {
font-family: “Times New Roman”, times, serif;/* шрифты*/
font-size: 100%; /* Размер шрифта для основного текста */
font-style: oblique;}
th {
font-family: arial, sans-serif; /* Семейства шрифтов*/
font-size: 90%; /* Размер шрифта для заголовка таблицы */
font-weight: bold /* Полужирная насыщенность*/
}
h1, h2, h3 {
font-family: verdana, tahoma, arial, sans-serif /*шрифты*/
}
#cursive { font-style: italic} /* Курсивный текст */
</style>
</head>
<body>
<div id=”cursive”>Курсивный текст</div>
<h1>Заголовок1</h1>
<h2>Заголовок2</h2>
<h3>Заголовок3</h3>
<table>
<th>Таблица</th>
</table>
</html>
Результат:
Курсивный текст
Заголовок1
Заголовок2
Заголовок3
| Таблица |
Еще одно свойство @font-face - указывает список семейств или названий шрифтов, а также электронный адрес, по которому будут загружаться шрифты, если их нет на компьютере пользователя.
Пример:
body {
@font-face: Myfont;
src: url(“http://www.atlant.ru/Myfont.eot”);
}
Свойства текста.
| Свойство | Описание значения |
| text-decoration | none (по умолчанию), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание). |
| text-transform | регистр букв: none, capitalize (Первая Буква Слова Преобразуется В Заглавную), uppercase (все в заглавные), lowercase (все в строчные). |
| text-align | Горизонтальное выравнивание текста: left (по умолчанию), right (по правому краю), center центрирование, justify (по ширине колонки). |
| vertical-align | Вертикальное положение базисной линии элемента: baseline, middle, sub – элемент подстрочный, super – элемент надстрочный, text-top – выравнивает верх элемента по верху шрифта родительского элемента , text-bottom – выравнивает низ по низу шрифта родительского элемента, top – выравнивает вершину по самому высокому элементу линии, bottom – выравнивает низ элемента по самому низкому элементу. |
| text-indent | {Отступ}|{Отступ}%; Устанавливает величину отступа в первой строке параграфа абсолютной величиной или в процентах. |
| line-height | Задает вертикальное расстояние между строками текста. normal|{Y}|{Y}%; Высота может быть задана абсолютной величиной или процентом от высоты родителя. |
| word-spacing | Определяет дополнительное расстояние между словами в тексте. normal|{Величина}; Значение атрибута может быть задано либо абсолютной величиной, либо предопределенным значением normal. |
| letter-spacing | Определяет расстояние между символами в тексте: normal|{Величина}; |
| word-wrap | normal|break-word; Устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам. normal – запрещает переносить строки по словам, break-word – разрешает. |
| white-space | Устанавливает, как отображать пробелы между словами: normal, nowrap – пробелы не учитываются; pre – текст показывается с учетом пробелов и переносов, как в коде HTML; pre-line – пробелы и переносы не учитываются; pre-wrap – в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, текст автоматически переносится на следующую строку; inherit – наследует значение родителя. |
Рассмотрим пример. Свойство text-indent - определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0. Свойство text-align - выравнивает текст в блоке содержимого элемента.
<html>
<head>
<style type="text/css">
p { text-indent: 3em ;}
div { text-align: center;}
</style>
</head>
<body>
<p>Создание отступа с помощью параметра text-indent.</p>
<div>Выравнивание текста с помощью свойства text-align.</div>
</body>
</html>
В следующем примере рассматривается свойство vertical-align для создания нижних и верхних индексов
<html>
<head>
<title> Использование стилей для управления индексами </title>
<style type="text/css">
.sup {
vertical-align: super; /* Сдвигаем текст вверх */
font-size: 70% ; /* Уменьшаем размер шрифта */
}
.sub {
vertical-align: sub; /* Сдвигаем текст вниз */
font-size: 70%;
}
<p style="line-height: 1.5">
</style>
</head>
<body>
<div>
f(х) = a<span class="sub">0</span> + a<span class="sub">1</span> x + ... + a
<span class="sub">n-1</span> x<span class="sup">n-l</span> + a
<span class="sub">n</span> x<span class="sup">n</span>
</div>
<p>Полуторный интервал</p><br>
Установка полуторного межстрочного интервала.
</body>
</html>
Результат:
f(х) = a0 + a1 x + ... + a n-1 xn-l + a n xn
Полуторный интервал
Установка полуторного межстрочного интервала.
Свойство text-decoration - определяет оформление текстового элемента в виде подчеркивания (underline), надчеркивания (overline) или перечеркивания текста (line_through). По умолчанию никакого оформления текста не производится (none). Пример:
<html>
<head>
<style type="text/css">
a {
text-decoration: none /* Отменяем подчеркивание у ссылки */
}
</style>
</head>
<body>
<a href=link.html>Ссылка без подчеркивания</а>
</body>
</html>
Пример letter-spacing - определяет расстояние между текстовыми символами. По умолчанию используется стандартный интервал для текущего шрифта. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.
<html>
<head>
<title> Изменение межбуквенного интервала в тексте</title>
</head>
<body>
<р>Интервал, установленный по умолчанию</р>
<р styles ="letter-spacing: 0.3em">Очень большой интервал</р>
<р style = "letter-spacing: 0.2em"> Большой интервал </p>
<р style = "letter-spacing: 0рх">Плотный интервал</р>
<р style = "letter-spacing: -1рх">Очень плотный интервал</р>
</body>
</html>
Пример word-spacing - указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию.
<html>
<head>
<style type="text/css">
p { word-spacing: 1 em }
</style>
</head>
<body>
<р>Изменение пробелов с помощью свойства word-spacing</р>
</body>
</html>
Свойство text-transform - управляет преобразованием регистра букв. По умолчанию регистр букв не преобразуется. Пример
<html>
<head>
<title> Использование свойства text-transform </title>
<style type="text/css">
.upper { text-transform: uppercase }
.capital { text-transform: capitalize }
</style>
</head>
<body>
<div class=”upper”> Все буквы преобразуются в прописные </div>
<div class=”capital”> Первая буква каждого слова преобразуется в прописную </div>
</body>
</html>
Цвет и фон.
| Свойство | Описание |
| color | Определяет цвет элемента. |
| background | Свойства фона: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}]; |
| background-color | фоновый цвет страницы или ее элемента: {Цвет}|transparent; Предопределенное значение transparent задает "прозрачный" фон. |
| background-image | фоновый рисунок страницы или ее элемента. url({Интернет-адрес файла рисунка})|none; значение none отключает фоновый рисунок. |
| background-attachment | Fixed -позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым страницы. Применяется для тега <BODY>. |
| background-repeat | Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе: repeat|no-repeat|repeat-x|repeat-y; repeat – размножает фоновое изображение во всех направлениях (по умолчанию); repeat-x, repeat-y – размножает изображение по горизонтали/вертикали; |
| background-position | Задает местонахождение фонового рисунка и заменяет атрибуты [{background-position-x}] [{background-position-y}]; |
| background-position-x | Задает горизонтальную координату фонового рисунка. {X}|{X}%|left|center|right; |
| background-position-y | Задает вертикальную координату фонового рисунка. {Y}|{Y}%|top|center|bottom; |
Пример color - указывает цвет текста элемента.
<html>
<head>
<title> Изменение цвета символов</title>
</head>
<body>
<p><span style="color: blue">Первое</sраn> слово в строке - синие.</р>
<р style="color: rgb(49, 151, 116)"><span style="color:#fе0">Желтое</sраn> слово в строке зеленого цвета.</р>
</body>
</html>
Пример background-color - определяет цвет фона элемента.
<html>
<head>
<title> Изменение цвета фона</title>
<style type="text/css">
. inverse {
font-family: Verdana; /* Шрифт Verdana */
font-weight: bold; /* Жирное начертание */
background-color: green; /* Зеленый фон */
color: white; /* Символы белого цвета */
}
</style>
</head>
<body>
<div class=”inverse”>Белые буквы на зеленом фоне</div>
</body>
</html>
background - одновременно устанавливает свойства background-color, background-image, background-repeat, background-attachment и background-position.
Пример:
<html>
<head>
<style type="text/css">
body {
background:
white /* Цвет фона */
url(image.gif) /* Путь к файлу с рисунком фона */
left top /* Положение в левом верхнем углу */
no-repeat /* Не повторять рисунок */
fixed /* Зафиксировать фон */
}
</style> .
</head>
<body>
Использование стилей для добавления фонового рисунка на страницу
</body>
</html>
Представление документа в виде блоков
В модели форматирования каскадных таблиц стилей элементы HTML представлены в виде блоков. Каждый блок состоит из вложенных прямоугольников, в самом внутреннем из которых находится содержимого элемента. Прямоугольник содержимого окружает блок отступа (padding). Отступ задает интервал между содержимым элемента и его границей. Следующим располагается блок границы (border). Самым внешним прямоугольником является блок поля (margin), который всегда прозрачный. Поле определяет расстояние до границ блоков окружающих элементов. Все указанные прямоугольники составляют блок форматирования, т.е. видимое в окне браузера изображение элемента HTML.
Для выделения блоков часто используется тег <div > </div>. Внутреннюю часть блока может определять тег <span> </span>
Отступы, поля, позиционирование
| Свойство | Описание |
| margin | Задает поля между элементами страницы. Может быть задано от одного до четырех значений. {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}]; Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему. |
| margin-top | Задает поле сверху как абсолютной величиной, так и процентом от высоты родителя: auto|{Y}|{Y}%;. |
| margin-right | Задает поле справа: auto|{X}|{X}%; |
| margin-bottom | Задает поле снизу: auto|{Y}|{Y}%; |
| margin-left | Задает поле слева: auto|{X}|{X}%; |
| padding | Задает отступ между элементом страницы и различными границами. : {X}|{X}%; |
| padding-top | Задает отступ до верхней граници: {Y}|{Y}%; Значение по умолчанию 0, для тега <td> 1. |
| padding-right | Задает отступ до правой границы: pading-right: {X}|{X}%; |
| padding-bottom | Задает отступ до нижней границы: pading-bottom: {Y}|{Y}%; |
| padding-left | Задает Отступ до левой границы: pading-left: {X}|{X}%; |
| width | Задает ширину свободно позиционированного элемента: auto|{X}|{X}%; |
| height | Задает высоту свободно позиционированного элемента: auto|{X}|{X}%; |
| position | static – блок позиционируется в соответствии с основным потоком форматирования; relative – положение блока вычисляется. absolute - положение блока указывается с помощью свойств left, top, right и bottom, относительно контейнера данного элемента. fixed - положение блока рассчитывается по алгоритму, используемому для схемы absolute, но после позиционирования блок привязывается либо к области просмотра, либо к странице |
| top | Задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя: auto|{Y}|{Y}%; |
| bottom | Задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя. bottom: auto|{Y}|{Y}%; |
| left | Задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя. left: auto|{X}|{X}%; |
| right | Задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя. right: auto|{X}|{X}%; |
| float | Определяет обтекание элемента другими слева или справа вместо помещения под ним. float: none|left|right; |
| clear | Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон. clear: none | left | right | both | inherit |
| clip | rect(Y1, X1, Y2, X2) | auto | inherit определяет прямоугольник для позиционированного элемента, в котором будет показано его содержимое. Все, что не помещается в эту область, будет обрезано. clip работает только для абсолютно позиционированных элементов: |
| display | определяет, как элемент должен быть показан в документе: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group. none – скрыть блок, освободив место; block – начать блок с новой строки, закончить переходом на новую строку; inline – считать блок целиком одним из символов текстовой строки; inline-block – с виду inline, а внутри — block; list-item – маркированный элемент списка; run-in – начинается как block, заканчивается как inline; inline-table – таблица с внешними свойствами как inline; table – позиционируется в тексте как таблица; |
| max-height | Устанавливает максимальную высоту элемента: значение | проценты | none | inherit |
| max-width | Устанавливает максимальную ширину элемента: значение | проценты | none | inherit |
| min-height | Задает минимальную высоту элемента: значение | проценты | inherit |
| min-width | Устанавливает минимальную ширину элемента: значение | проценты | inherit |
| overflow | Управляет отображением содержания блочного элемента, если оно выходит за область заданных размеров: auto | hidden | scroll | visible | inherit. visible – отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden – отображается только область внутри элемента, остальное будет скрыто. scroll – добавляются полосы прокрутки. auto – полосы прокрутки добавляются только при необходимости. inherit – наследует значение родителя. |
| visibility | Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, место, которое элемент занимает, остается за ним: visible | hidden | collapse | inherit visible – отображает элемент как видимый. hidden – элемент становится полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. collapse – если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. inherit –наследует значение родителя. |
| z-index | Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Значение: число | auto | inherit. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. |
Рассмотрим некоторые свойства. margin - определяет размеры всех полей блока.
По умолчанию значением является 0. Пример:
<html>
<head>
h1 {margin: 10px}
<style type="text/css">
p {
margin-top: 0px /* Отступ сверху */
margin-bottom: 0px; /* Отступ снизу */
}
</style>
</head>
<body>
<p> Убираем интервалы у параграфа.</p>
</body>
</html>
padding - задает отступы контента до границы блока. Если значение свойства одно, то значение применяется ко всем отступам блока. В случае двух значений первое задает верхний и нижний отступы, а второе – левый и правый отступы. При указании четырех значений они применяются к верхнему, правому, нижнему и левому отступам. По умолчанию значением данного свойства является 0.
Пример:
<html>
<head>
<style type="text/css">
#img {
padding: 10рх; /* Поля вокруг изображения */
border: lpx solid black; /* Параметры рамки */
width: 100рх; /* Ширина */
float: left; /* Выравнивание по левому краю */
}
</style>
</head>
<body>
<div>
<img src=”image.gif” id=” img ”>
Использование стилей для создания подписи под рисунком
</body>
</html>
Пример:
<html>
<head>
<style type="text/css">
p {
text-indent: 20px; /* Выступ первой строки */
padding-left: 20px /* Отступ всего текста cлева */
padding-right: 20px /* Отступ всего текста cлева */
}
</style>
</head>
<body>
<р>Использование свойства padding-left и padding-right для создание отступов текста слева и справа.</р>
</body>
</html>
Границы элементов
| Свойство | Описание |
| border | Задает свойства границ элемента страницы: [{border-color}] [{border-style}] [{border-width}]; Значение по умолчанию medium none. |
| border-color | Задает цвет: {border-top-color} [{border-right-color}] [{border-bottom-color}] [{border-left-color}];Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней. |
| border-top-color | Задает цвет верхней границы элемента страницы: {Цвет}; |
| border-bottom-color | Задает цвет нижней границы элемента страницы: {Цвет}; |
| border-left-color | Ззадает цвет левой границы элемента страницы: {Цвет}; |
| border-right-color | Задает цвет правой границы элемента страницы. border-right-color: {Цвет}; |
| border-style | Задает тип сразу всех границ элемента страницы. border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset; none – запрещает рисование границы (по умолчанию); dotted – рисует точечную линию; dashed – рисует штриховую линию; solid – рисует сплошную линию; double – рисует двойную сплошную линию; groove – рисует трехмерную вдавленную границу; ridge – рисует трехмерную выпуклую границу; inset – рисует трехмерную "ступеньку вверх"; outset – рисует трехмерную "ступеньку вниз". |
| border-top-style | Задает тип верхней границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
| border-bottom-style | Задает тип нижней границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
| border-left-style | Задает тип левой границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
| border-right-style | Задает тип правой границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
| border-width | Задает толщину границ элемента страницы: {border-top-width} [{border-right-width}] [{border-bottom-width}] [{border-left-width}]; Если задано одно значение, оно применяется ко всем четырем границам. Если заданы два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, первое применяется к верхней границе, второе - к левой и правой, третье - к нижней. Толщина может быть задана числом или предопределенным значением : thin, medium, thick. Значение по умолчанию medium. |
| border-top-width | Задает толщину верхней границы элемента страницы. border-top-width: medium|thin|thick|{Толщина}; |
| border-bottom-width | Задает толщину нижней границы элемента страницы. border-bottom-width: medium|thin|thick|{Толщина}; |
| border-left-width | Задает толщину левой границы элемента страницы. border-left-width: medium|thin|thick|{Толщина}; |
| border-right-width | Задает толщину правой границы элемента страницы. border-right-width: medium|thin|thick|{Толщина}; |
| border-top | Задает все свойства верхней границы элемента страницы за один прием: [{border-top-color}] [{border-top-style}] [{border-top-width}]; Значение по умолчанию medium none. |
| border-bottom | Задает все свойства нижней границы элемента страницы: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}]; |
| border-left | Задает все свойства левой границы элемента: [{border-left-color}] [{border-left-style}] [{border-left-width}]; |
| border-right | Задает все свойства правой границы: [{border-right-color}] [{border-right-style}] [{border-right-width}]; |
Пример:
h1 {border-top-width: thin}
h1 {border-width: 5px}
border-top-color - указывает цвет верхней границы блока.
Пример:
p {border-top-color: black}
border-top-style - указывает стиль верхней границы блока.
Пример:
p {border-top-style: solid}
border-style - определяет стили всех границ блока. Если значение свойства одно, то значение применяется ко всем границам блока. В случае двух значений первое задает стили верхней и нижней границы, а второе – стили левой и правой границ. При указании четырех значений они применяются к верхнему, правому, нижнему и левому границам.
Пример:
<html>
<head>
<title> Использование стилей для отмены рамки изображений</title>
<style type="text/css">
img { border: none }
</style>
</head>
<body>
<img src=”image.gif”>
</body>
</html>
Визуальное форматирование
Свойства правил визуального форматирования позволяют нужным образом расположить фрагменты Web-страницы в окне браузера.
position - определяет способ позиционирования блока на странице. Значениями свойства position могут быть:
static – блок позиционируется в соответствии с естественным потоком отображения элементов. Это значение задается по умолчанию.
relative – определяет смещение блока относительно его естественного положения в потоке отображения элементов.
absolute – удаляет блок из естественного потока отображения и размещает блок на странице произвольным образом.
top - указывает смещение верхнего края блока относительно верхнего края родительского элемента.
bottom - задает смещение нижнего края блока относительно нижнего края родительского элемента.
left - определяет смещение левого края блока относительно левого края родительского элемента.
right - указывает смещение правого края блока относительно правого края родительского элемента.
Пример:
<img src=”img.gif” style=”position: absolute; top: 30px;
bottom: 30px; left: 30px; right: 30px;”>
float - изменяет положение блока. Значениями свойства могут быть: left – блок смещается влево, а его содержимое отображается вдоль правой стороны блока; right – блок перемещается вправо, а его содержимое выводится вдоль левой стороны блока; none – блок не смещается.
Пример:
<html>
<head>
<title> Использование стилей для создания буквицы</title>
<style type="text/css">
. letter {
font-size: 150%; /* Размер шрифта буквицы */
float: left; /* Выравнивание по левому краю */
color: green; /* Цвет буквицы */
padding: Зрх /* Отступ между буквицей и текстом */
}
</style>
</head>
<body>
<span class=”letter”>Б</span>уквица
</body>
</html>
clear - указывает стороны блока, где плавающие элементы не ставятся. По умолчанию плавающие элементы устанавливаются на всех сторонах. Значениями свойства могут быть:
left – все плавающие элементы на левой стороне блока будут опущены вниз.
right – все плавающие элементы на правой стороне блока будут опущены вниз.
none – плавающие элементы устанавливаются на всех сторонах блока.
Пример:
h1 {float: left }
width - указывает ширину блока содержимого элемента. По умолчанию ширина блока вычисляется браузером автоматически.
Пример:
p {width: 100px}
height -определяет высоту блока содержимого элемента. По умолчанию высота блока вычисляется браузером автоматически.
Пример:
p {height: 100px}
Визуальные эффекты
Свойство overflow - управляет поведением элемента в случае, когда его размеры не соответствуют размерам блока отображения. Значениями свойства overflow могут быть:
scroll – добавляет полосы прокрутки к блоку отображения; hidden – обрезает элемент в соответствии с размерами блока; auto – добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения; visible – принуждает элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке для рисунка или увеличивает размеры блока отображения в случае текста. По умолчанию элемент не обрезается, а сжимается или увеличивается, чтобы полностью отобразиться в заданном блоке.
Пример:
<html>
<style type="text/css">
body { overflow: hidden }
</style>
<body>
<p>Запрет полосы прокрутки на веб-странице</p>
</body>
</html>
clip - обрезает видимое изображение элемента. По умолчанию усечение не производится. Значениями свойства clip могут быть:
границы видимого прямоугольного изображения элемента в виде rect(<top>, <right>, <bottom>, <left>), где параметры <top>, <right>, <bottom>, <left> определяют верхнюю, правую, нижнюю, левую границы видимого изображения.
auto – усечение изображения элемента не производится.
Свойство visibility - определяет, будет ли отображаться элемент в окне браузера. Значениями свойства могут быть: visible – элемент будет отображаться; hidden – элемент не будет выводиться на экран.
Свойства списков
| Свойство | Описание |
| list-style | Задает параметры маркера или номера позиции списка: [{list-style-image}] [{list-style-position}] [{list-style-type}]; Значение по умолчанию disk outside none. |
| list-style-type | Задает тип маркера или номер позиции списка: disc|circle|square|decimal|lower|roman|upper-roman|lower-alpha|upper-alpha|none; disc – (по умолчанию) сплошной кружок; circle – окружность; square – сплошной квадрат; decimal – нумерует арабскими цифрами; lower-roman – малыми римскими; upper-roman – большими римскими; lower-alpha –малыми латинскими буквами; upper-alpha – большими латинскими; none – убирает маркер или нумерацию. |
| list-style-image | Задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type. : none|url({Интернет-адрес файла изображения}); Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type. |
| list-style-position | Задает местонахождение маркера позиции списка: в тексте позиции или вне: outside|inside; Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции. Значение inside заставляет Web-браузер отобразить маркер позиции в ее тексте в качестве первого символа. |
list-style-type - определяет вид маркера элемента списка, если не задано изображение в качестве маркера, либо оно не доступно.
Пример:
ol {list-style-type: lower-roman}
list-style-image - определяет графическое изображение в качестве маркера элемента списка.
Пример:
<html>
<head>
<style type="text/css">
a.outer {
list-style-image: url(image.gif);/*Путь к файлу с рисунком */
}
</style>
</head>
<body>
<ol>
<li class=”outer”>C маркером</li>
<li>Без маркера</li>
</ol>
</body>
</html>
list-style-position - определяет положение маркера в списке. По умолчанию маркеры находятся вне пространства, отведенного под список
Пример:
<html>
<head>
<style type="text/css">
ul { list-style-position: outside }
</style>
</head>
<body>
<ul>
<1i>Изменение положения маркеров </li>
<1i>Маркеры размещаются за пределами текстового блока</li>
</ul>
</body>
</html>
list-style - указывает значения сразу трех свойств: list-style-type, list-style-image и list-style-position.
Свойства таблиц
| Свойство | Описание |
| border-collapse | Задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет: separate|collapse; separate - разделяет границу таблицы и границы ее ячеек (по умолчанию); collapse - объединяет их. |
| border-spacing | Задает расстояние между границами ячеек в таблице: значение1 [значение2]. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе – вертикальное. |
| caption-side | Определяет положение заголовка таблицы, который задается с помощью тега <caption> относительно самой таблицы: top | bottom top – располагает заголовок по верхнему краю таблицы. bottom – заголовок располагается под таблицей. right – заголовок размещается справа от таблицы. left – заголовок размещается слева от таблицы. |
| empty-cells | Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется. empty-cells: show | hide. show – отображает границу вокруг ячейки и фон в ней. hide – граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. |
| table-layout | Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом: auto | fixed | inherit auto – браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и после этого отображает.fixed – ширина колонок определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. inherit – наследует значение родителя. |
Псевдоклассы
Для управления цветом ссылок с помощью стилей предлагается использовать псевдоклассы. Псевдоклассы применяются в CSS, чтобы определять стиль элемента при изменении его состояния. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и в определенном состоянии. Рассмотрим эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней. Действие стиля распространяется на определенное состояние (пользователь собирается щелкнуть по ссылке).
Общий синтаксис для ссылок будет такой:
А: псевдокласс { параметр: значение }
| Псевдокласс | Описание |
| :active | Применяется к активным гиперссылкам, на которых находится фокус ввода пользователя:active{Определение стиля}; Пример: a:active {color: lime;} |
| :first-child | Применяет стилевое оформление к первому дочернему элементу элемент:first-child { ... } |
| :focus | определяет стиль элемента, получающего фокус. Например, им может быть текстовое поле формы, элемент:focus { ... } |
| :hover | Применяется к гиперссылкам, над которыми пользователь помещает курсор мыши: hover {Определение стиля}; Пример:a:hover {color: lime; text-decoration: none;} |
| :lang | Определяет язык, который используется в документе или его фрагменте. элемент:lang(<язык>) { ... } В качестве языка могут выступать следующие: ru – русский; en – английский ; de – немецкий; |
| :link | Применяется к не посещенным еще гиперссылкам: link {Определение стиля};Пример:a:link {color: black;} |
| :visited | Применяется к уже посещенным гиперссылкам:visited{Определение стиля}; Пример:a:link {color: indigo;} |
Пример:
<html>
<head>
<title> Псевдоклассы для ссылок</title>
<style type="text/css">
a:link {color : lime}
a:visited {color: indigo }
a:hover {color: red }
a:active {color : #fe0 }
</style>
</head>
<body>
<a href=linkl.html>Ссылка 1</a>
<a href=link2.html>Ссылка 2</a>
<a href=link3.html> Ссылка 3</a>
</body>
</html>
Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль:
<style type="text/css">
a.link { text-decoration: none; color:red; }
</style>
</head>
Любой текст, который является гиперссылкой, автоматически становится красным и перестает быть подчеркнутым. Необходимо в конце странички указать копирайт, чтобы копирайт также был ссылкой но не акцентировать на этом внимание. Определять для этого дополнительный класс нецелесообразно. Достаточно локально переопределить цвет ссылки:
<a href="#"><span style="color: #000000;">Copyright (C) 1998-2001 Cherry-Design</span></a>
Псевдостили текста
Псевдостили применяются к некоторым элементам текстовых абзацев, например, к первой строке абзаца или первой букве первой строки.
first-letter - применяется к первой букве первой строки абзаца:
p:first-letter { font-size: 200%; font-weight: bold; }
Рассмотрим пример:
<html>
<head>
<style type="text/css">
p:first-letter {
color: red;
font-size: 12px
}
</style>
</head>
<body>
<р>Использование псевдокласса first-lette.</р>
</body>
</html>
first-line - применяется к первой строке абзаца.
{Задание стиля абзаца}:first-line{Определение стиля};
Пример:
p:first-line {text-decoration: underline;}
Псевдоэлементы
| Свойство | Описание |
| :after | Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. элемент:after { content: "текст" } |
| :before | Псевдоэлемент :before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content:before { content: "текст" } |
| :first-letter | Применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц:first-letter {Определение стиля}; Пример: st:first-letter {font-size: 16pt;} |
| :first-line | Применяется к первой строке абзаца:first-line{Определение стиля}; Пример: st:first-line {text-decoration: underline;} |
Различные свойства
| Свойство | Описание |
| content | позволяет вставлять генерируемое содержание в текст веб-страницы. Применяется совместно с псевдоэлементами after и before. content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit; cтрока – текст, который добавляется на веб-страницу, строка должна браться в двойные или одинарные кавычки. attr(параметр) – возвращает строку, которая является значением параметра тега указанного в скобках. Например, img:after {content:attr(href)} добавит после изображения его адрес, т.е. значение параметра href. open-quote – вставляет открывающую кавычку, close-quote – вставляет закрывающую кавычку. url –абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter – выводит значение счетчика, заданного свойством counter-reset. normal - задается как none для псевдоэлементов before и after. inherit - наследует значение родителя. |
| orphans | Свойство orphans задает минимальное число строк текста, которое остается на предыдущей странице при печати документа. Это свойство работает в том случае, если весь текст размещается на двух и более печатных страницах. orphans: число | inherit |
| page-break-after | Добавляет разрыв страницы при печати документа после заданного элемента. page-break-after: always | auto | avoid | left | right | inherit always – всегда добавляет разрыв страницы после элемента. auto – вставляет разрыв страницы при необходимости. avoid – запрещает разрыв страницы после элемента. left – пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной. right – пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной. inherit – наследует значение родителя. |
| page-break-before | Добавляет разрыв страницы при печати документа перед заданным элементом. page-break-before: always | auto | avoid | left | right | inherit always – всегда добавляет разрыв страницы перед элементом. auto – вставляет разрыв страницы при необходимости. avoid – запрещает разрыв страницы перед элементом. left – пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была четной. right – пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечетной. inherit – наследует значение родителя. |
| page-break-inside | Разрешает или запрещает разрыв страницы внутри элемента при печати: auto | avoid | inherit auto – вставляет разрыв страницы, avoid – запрещает разрыв страницы внутри элемента, inherit – наследует значение родителя. |
| windows | задает минимальное число строк текста, которое располагается на следующей странице при печати документа. widows: число | inherit |
| scrollbar-arrow-color | Задает цвет стрелок на кнопках полосы прокрутки. scrollbar-arrow-color:{Цвет}; |
| scrollbar-base-color | Задает цвет бегунка и кнопок-стрелок полосы прокрутки. scrollbar-base-color:{Цвет}; |
| scrollbar-highlight-color | Задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней). scrollbar-highlight-color:{Цвет}; |
| scrollbar-shadow-color | Задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). |
| scrollbar-track-color | Задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок. scrollbar-track-color: {Цвет}; |
Курсор
Определяет форму курсора мыши, которую он принимает при наведении на элемент.
cursor: auto|crosshair|default|hand|move|text|wait|help;
auto-указывает браузеру самому определять нужную форму курсора;
crosshair - крестообразный курсор; default - курсор по умолчанию, стрелка;
hand - "указывающий перст"; move - стрелка, указывающая "на все четыре стороны";
text - текстовой курсор; wait - "песочные часы", курсор ожидания; help - стрелка с вопросительным знаком. Пример:
<html>
<head>
<title> Курсор для разных областей веб-страницы</title>
<style type="text/css">
.cross { cursor: crosshair }
. hand { cursor: hand }
</style>
</head>
<body>
<div class="cross"> курсор примет вид перекрестья.</div>
<a href="ref.htm" class=" hand ">Ссылка</a>
</body>
</html>
CSS. Примеры
1. Двухколоночный макет сайта на HTML и css
<html>
<head>
<style>
#top{margin-top:0px;
height:100px;
margin-left:0px;
/*width:900px;*/
border:1px; /*толщина границы*/
border-style:solid;}/*обведение границы*/
#left-side {
float:left; /* разрешено обтекание элементами слева*/
width:200px; /*ширина */
height:400px;
border:1px;
border-style:solid;
}
#center {
margin-left:200px; /* поле слева*/
height:400px;
border:1px;
border-style:solid;
}
#footer {
clear:both; /* запрещено обтекание*/
border:1px;
border-style:solid;
}
#content{}
p{font-size:25px;
text-align:center;
color:red}
a:visited { color: #000000; text-decoration: none}
a:link { color: #000000; text-decoration: none}
a:hover { color: #dd4444; text-decoration: none}
</style>
</head>
<body>
<div id="top">
<p>TOP</p>
</div>
<div id="content">
<div id="left-side"><p>Left-side</p></div>
<div id="center"><p>Center</p></div>
</div>
<div id="footer"> <p>Footer</p>
</div>
</body>
</html>
2. Трехколоночный макет сайта
<html>
<head>
<style>
#left-side {
float:left;
width:200px;
}
#wrapper {
margin-left:200px;
background-color: yellow;
}
#right-side {
float:right;
width:200px;
}
#top{ margin-left:0px;
margin-top:0px;
hight:150px;}
#center {}
#footer { clear:both;}
</style>
</head>
<body>
<div id="top"> top
</div>
<div id="content">
<div id="left-side"> left-side </div>
<div id="wrapper">
<div id="right-side"> right-side </div>
<div id="center"> center </div>
</div>
</div>
<div id="footer"> footer
</div>
</body>
</html>
2. Блочная верстка сайтов
При блочной верстке каждый элемент страницы - картинка, абзац, таблица, список, форма, меню представляется как содержимого блока. Блок имеет содержимое, которое помещается в рамку, отступы и поля. Блоки можно расположить на одной линии, однако по-умолчанию блоки располагаются один под другим.
Рассмотрим основные элементы HTML и CSS, используемые для блочной верстки.
Любой документ должен в самом начале содержать элемент DOCTYPE. Определим строгие правила Strict 1.0. При этом устаревшие элементы не используются, все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем /> перед закрывающей угловой скобкой.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= windows-1251" />
<meta http-equiv="Content-Language" content="en" />
<meta name="description" content="Сайт о конференции" />
<meta name="keywords" content=" конференция, образование, веб, общество, компьютеры, моделирование." />
<title>WebConf 09</title>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
< !- -Первый мета-тэг показывает на кодировку сайта в виде кириллицы windows-1251. Второй мета-тэг — это краткое описание сайта. Именно эта строка первой покажется в результатах поиска поисковых серверов. В третьем мета-тэге ключевые слова для поисковиков. Последняя строка — это ссылка на лист стилей CSS, который создадим ниже. -->
<body>
<div id="main">
<div class="header">
<div class="headcontent">
<div class="w1"></div>
<a href="/" id="logo"><img src="img/logo.gif" alt="WEB CONF 09" /></a>
<div>
<img src="img/webconf09.gif" alt="WEB CONF 09" />
</div>
</div>
</div>
<!--
<div id="container">
<div id="header"> </div> -->
<div id="nav">
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О Секциях</a></li>
<li><a href="#">Тезисы</a></li>
<li><a href="#">Оплата</a></li>
<li><a href="#">Контакт</a></li>
</ul> </div>
<div id="text">
<img class="img1" src="pig1.jpg" alt="рисунок" />
<h2><span>Подробная информация</span></h2>
<p>Белорусский государственный университет (БГУ) и Институт математики Национальной Академии наук Беларуси организуют международную научную конференцию: <a href="">«X Белорусская математическая конференция»</a>, 3–7 ноября 2008 года в г. Минске (Беларусь). Дни приезда и отъезда – 2 и 8 ноября 2008г На пленарных заседаниях конференции будут заслушаны лекции приглашенных докладчиков продолжительностью 60 мин. </p>
<p>Продолжительность пленарных докладов на секциях – 40 мин., секционных докладов – 20 мин., кратких сообщений – 10 мин.</p>
<div id="members">
<H2>Список участников:</H2>
<ol>
</ol>
<ol>
</ol> </div>
<img class="line" src="line.gif" alt="" />
</div>
<div id="news">
<h3>Самые распоследние новости:</h3>
<ul>
<li>Новости. Малаццы!</li>
<li>Новости. Злой сильно.</li>
<li> Пляски намечаются до самого утра. будет весело.</li>
</ul>
</div>
<div class="clearfloat"></div>
<div id="footer">
<p>Главная | <a href="#">О нас</a> | </a> | <a href="#">Подружиццо</a></p>
<p>© PIG.RU, 2007 | All right reserved. |
<a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | | e-mail: <a href="mailto:[email protected]">[email protected]</a></p>
</div> </div> </body> </html>
Сохраним документ в файле index.html. Индексная страница всегда является главной.
Открываем новый документ style.css в блокноте или редакторе
* {margin : 0; padding : 0; border : 0; }
body {
padding : 2% 0 0;
background : #fff; color : #333;
font-family : "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }
#container { width : 760px; margin : 0 auto; border : 1px solid #999; }
#header {
background : url(header.jpg); width : 760px;
height : 158px; }
#nav {
background : url(navbg.jpg) repeat-x; color : #f00;
font-size : 120%; font-weight : bold;
line-height : 1.8em; text-align : center; }
#nav ul { list-style-type : none; }
#nav li { display : inline; margin : 0 8px; }
#nav li a { color : #0c0; }
#nav li a:hover { color : #f00; }
a { text-decoration : none; }
#text {
width : 545px; font-size : 0.8em; color : #333; margin : 10px auto;
float : left;
}
#text p {
text-align : justify; text-indent : 1.5em; margin : 0; padding : 0 15px; }
#text a {
color : #396; }
#text a:hover {
color : #f36;
border-bottom : 1px dotted #f36; }
.img1 { width : 200px;
height : 287px; margin : 0 0 0 15px; float : right; }
.img2 {
width : 200px; height : 200px;
margin : 10px 10px 0 15px;
float : left;
}
.venzel { width : 300px; height: 23px;
margin : 10px 10px 0 15px;
float : left;
}
#members {
width : 300px;
height : 190px; float : right;
}
#members h2 {
color : #f60; font-size : 120%;
font-weight : bold; text-align : center;
}
#members ol {
color : #999; font-size : 120%;
margin : 10px;
float : left;
}
#members li { margin : 0 5px; }
#members li a {color : #0c0;}
#members li a:hover {color : #f00;}
.line {width : 304px; height : 13px; float : right;}
#news {background : #ffc; width : 185px; color : #665; margin : 10px 5px; float : right;}
#news h3 {color : #f60; font-size : 120%; font-weight : bold; text-align : center; }
#news ul { list-style : url(marker.jpg) inside; }
#news li { font-size : 75%; padding : 5px 10px;}
#footer {
background : #665;
color : #fff; font-size : 70%;
padding : 5px; clear : both;
}
#footer a {
color : #ff0;
}
#footer a:hover {
color : #f00;
}
#footer p { padding : 2px; text-align : center; }
.clearfloat{ clear:both; }
В первом правиле звёздочка означает всю страницу разом. Браузеры применяют данные с ней правила ко всей странице. В правиле мы указали :Отступы - 0, Поля - 0, Рамка - 0. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.
Следующим правилом мы задали для тела страницы: поля — сверху 2%, с боков по нулям, снизу тоже ноль. У любого прямоугольника есть 4 стороны, значения отступов для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Так как по бокам должно быть одинаковое расстояние от края экрана, то и значений всего три — 2% 0 0. Средняя цифра в этой записи нуль означает, что она одинакова для правой, и для левой стороны.
В следующем правиле появилось слово container с решёткой (#). Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице.
Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом равна 760 пикселям.
А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css — style.css
Открываем его и следом за правилом для шапки запишем правило для блока навигации:
#nav { background: url(nav-bg.jpg) repeat-x; color: #f00;
font-size:120%;font-wight: bold; line-height: 1.8em; text-align: center; }
#nav ul { list-style-type: none; }
#navli{display:inline;margin: 0 8px; }
#nav li a { color: #0c0; }
#nav li a:hover { color: #f00; }
Панель навигации будет у нас одна — сразу под шапкой, горизонтальная (в подвале сделаем простое дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.
Данный список в HTML обозначается тэгом ul. Элементы списка (строчки) обозначаются тэгом li.
Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav-bg.jpg размером 8х35 пикселей. Это обычный такой "столбик" с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает "повторить по оси х", то есть по горизонтали (об этом уже говорилось в чуть выше).
пропишем ещё пару правил для ссылок.
#nav li a { color: #0c0; }
#nav li a:hover { color: #f00; }
В первом мы обозначили цвет ссылки в спокойном состоянии, а во втором — в активном, то есть при наведении мыши.
Ну а теперь следом добавим вот такое правило:
a {text-decoration: none;}
Это общее для всех ссылок правило. Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. А там, где нужно, мы это правило изменим.
Итак, продолжим верстать нашу Главную страницу. Следом за шапкой добавим блок навигации. Находим в коде следующее место: