HTML
.pdf
Списки определения
Помимо обычных списков, существуют также списки-определения, задаваемые элеиентом DL. Состоят они из двух частей: определения(DT) и описания (DD)
Синтаксис
<dl>
<dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> <dt>Термин 3</dt> <dd>Определение термина 3</dd> <dt>Термин 4</dt> <dd>Определение термина 4</dd> </dl>
Закрывающий тег
Обязателен.
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
<p>Текст <b>жирный </b> текст <i>наклонный</i> текст <tt>моноширинный</tt></p>
Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.
Соседние селекторы
<html>
<head>
<title>Соседние селекторы</title> <style type="text/css">
B + I {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Параграф <b>жирный </b> обычный текст <i>курсивный красный</i> обычный текст</p>
<p>Параграф обычный <i>курсив, цвет по умолчанию</i> обычный текст</p>
</body>
</html>
Контекстные селекторы
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.
<Тег1> <Тег2> ... </Тег2> </Тег1>
P B {
font-family: Times, serif; /* Семейство шрифта */ font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */
}
<dl><dt>Термин 1</dt>
<dd>Жирное начертание текста</dd> </dl>
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>
Контекстные селекторы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Контекстные селекторы</title> <style type="text/css">
P B {
font-family: Times, serif; /* Семейство шрифта */
font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */
}
</style>
</head>
<body> <dl><dt>Термин 1</dt>
<dd>Жирное начертание текста</dd> </dl>
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p> </body>
</html>
Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента.
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
UL#menu {
background: #b3d9d2; /* Цвет фона */
}
UL#menu > LI {
list-style: none; /* Убираем маркеры списка */ background: #b3d9d2; /* Цвет фона */
color: #333; /* Цвет текста */
}
LI > UL {
list-style: none; /* Убираем маркеры списка */ border-bottom: 1px solid #666; /* Граница внизу */
}
LI > A {
background: #fff; /* Цвет фона */
}
<ul id="menu"> <li>Правка <ul>
<li><a href="#">Копировать</a></li> <li><a href="#">Вставить</a></li> </ul>
</li>
<li>Начертание
<ul>
<li><a href="#">Жирное</a></li> <li><a href="#">Курсивное</a></li> </ul>
</li>
</ul>
Дочерние селекторы
UL#menu {
background: #b3d9d2; /* Цвет фона */
}
UL#menu > LI {
list-style: none; /* Убираем маркеры списка */ background: #b3d9d2; /* Цвет фона */
color: #333; /* Цвет текста */
}
LI > UL {
list-style: none; /* Убираем маркеры списка */ border-bottom: 1px solid #666; /* Граница внизу */
}
LI > A {
background: #fff; /* Цвет фона */
}
.....................
<ul id="menu"> <li>Правка <ul>
<li><a href="#">Копировать</a></li> <li><a href="#">Вставить</a></li>
</ul>
</li>
<li>Начертание
<ul>
<li><a href="#">Жирное</a></li> <li><a href="#">Курсивное</a></li>
</ul>
</li>
</ul>
Задание
1. Добавьте на страницу blog.html блок «Комментарии», выполненный в виде вложенного списка. Строка комментария должна содержать:
●аватар(изображение выровненное по левому краю строки и обтекаемое текстом);
●имя комментатора;
●текст комментария;
●дату внесения комментария.
Отформатируйте строку комментария так, чтобы составляющие ее элементы имели разное начертание.
2.Форматирование текста, списков и изображений необходимо выполнить в виде таблицы стилей CSS в блоке <style> тега <head>.
3.Проверьте на валидность полученный код.
Таблицы
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Синтаксис
<table>
<tr> <td>...</td> </tr>
</table>
Атрибуты
●align - Определяет выравнивание таблицы.
●background - Задает фоновый рисунок в
таблице.
●bgcolor - Цвет фона таблицы.
●border - Толщина рамки в пикселах.
●bordercolor - Цвет рамки.
●cellpadding - Отступ от рамки до содержимого ячейки.
●cellspacing - Расстояние между ячейками.
●height - Высота таблицы.
●width - Ширина таблицы.
cols - Число колонок в таблице. frame - Сообщает браузеру, как отображать границы вокруг таблицы. rules - Сообщает браузеру, где отображать границы между ячейками.
summary - Краткое описание таблицы.
Атрибуты тега <tr>
Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor Цвет фона ячеек. bordercolor Цвет рамки.
char Выравнивание содержимого ячеек относительно заданного символа. charoff Смещение содержимого ячеек относительно указанного символа.
valign Выравнивание содержимого ячеек по вертикали.