2020-09-24
120
В HTML5 у тега div появилась альтернативная замена несколькими по функциональности схожими тегами, но имеющими разное название и предназначение:
Header – все, что находится в данном теге, будет считаться шапкой сайта. Является вводным элементом перед основным содержанием страницы. Здесь могут содержаться заголовки, элементы навигации, логотип фирмы, форма поиска и т.п.;
Footer – информация между данными тегами будет считаться футером всего сайта, либо отдельного раздела сайта (например, для размещения имени автора статьи и даты ее создания);
Article – в данном теге нужно размещать отдельные статьи, новости, записи блога и другие целостные блоки текста. Один элемент article может включать несколько элементов article, например, статья в блоге содержится в одном элементе, а комментарии к этой статье в другом элементе;
Nav – контейнер для размещения элементов навигации по сайту. Как правило – это ненумерованный список с набором ссылок. На одной странице можно использовать несколько элементов nav, например, один элемент навигации для перехода по страницам на сайте, а другой – для перехода внутри html – документа;
|
|
|
Section – контейнер для разбиения сайта на отдельные секции, например элемент section может включать набор вкладок на странице, новости, объединенные по категориям и т.д. Элемент section может содержать несколько элементов article, выполняя их группировку. Так и элемент article может содержать несколько элементов section;
Aside – контейнер для создания левой или правой боковой панели сайта. Представляет содержимое, которое косвенно связано с остальным контентом веб – страницы и которое может рассматриваться независимо от него. Часто используется для сайдбаров, для рекламных блоков и т.д.
Address – предназначен для отображения контактной информации, которая связана с ближайшим элементом article или body. Часто размещается в футере.
Main – элемент представляет основное содержимое веб – страницы, т.е. содержит уникальный контент, в который не следует включать повторяющиеся на разных веб – страницах элементы сайдбаров, навигационные ссылки, логотипы и т.п.
<body>
<header>
..............
</header>
<main>
.................
</main>
<footer>
.................
</footer>
</body>
Элемент main не может быть вложен в такие элементы как article, aside, footer, header, nav. На веб – странице допустимо только наличие одного элемента main.
Раздел 2. Каскадные таблицы стилей CSS
Тема 2.1 Введение в таблицы стилей и язык CSS
Язык HTML предназначен для структурирования информации. Он позволяет расположить блоки информации в нужной последовательности. За визуальное оформление отвечает другой язык – CSS. С его помощью можно:
|
|
|
- указать размер, начертание, цвет и другие параметры шрифта, который будет использоваться для вывода текста;
- расположить блок информации в нужном месте веб – страницы;
- оформить блок информации фоновой картинкой, границей и другими визуальными элементами.
Язык CSS представляет собой набор правил, которые применяются к определенному объекту веб – страницы, чтобы задать особенности его вывода на экран. Пример:
div {
background-color: red;
width: 100px;
height: 60px;
}
Правило CSS состоит из двух частей: селектора и определения. Селектором обычно является элемент HTML (в данном случае это элемент div), форматирование которого вы хотите изменить. Каждое определение состоит из свойства и его значения.
Свойство — это атрибут стиля, который вы хотите изменить. Каждое свойство имеет значение.
Объявление свойства и его значения CSS должно заканчиваться точкой с запятой (;), а группы объявлений пишутся в фигурных скобках.
Селектор {
свойство: значение;
}
Селекторы id и class
Кроме форматирования обычных HTML элементов, CSS позволяет вам указать свои собственные селекторы, называемые " id " и " class ", которые позволяют применять свойства CSS к элементам определенного блока страницы. Например, вы можете присвоить класс всем ссылкам в блоке навигации и другой класс блоку содержимого страницы. После этого при помощи CSS вы можете присвоить различный стиль ссылкам в блоке навигации и блоке контента.
Селектор id используется для определения стиля единственного, уникального элемента страницы.
Селектор id использует атрибут HTML-элемента и определяется знаком " # ".
Стилевое правило в примере ниже будет применено к элементу с id="para1":
Пример:
HTML
< p id="para1" >К этому параграфу будет применен стиль id para1, то есть текст параграфа будет выровнен по центру и будет окрашен в красный цвет.</p>
CSS
#para1 {
text-align:center;
color:red;
}
Селектор class используется для определения стиля группе элементов. Это позволяет вам задавать одинаковый стиль для любого html-элемента с одинаковым классом.
Селектор class использует атрибут HTML и определяется знаком "."
В примере ниже, текст всех html-элементов с class="center" будет выровнен по центру:
Пример:
HTML
<h1 class="center" > Текст этого заголовка будет выровнен по центру</h1>
<p class="center" > Текст этого параграфа также будет выровнен по центру.</p>
CSS
.center {
text-align:center;
}
В имени класса или идентификатора разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинаться имя должно с буквы. Также следует учитывать регистр символов.
Идентификаторы в большей степени относятся к структуре веб – страницы, для стилизации преимущественно используются классы.
Можно указать, что стиль класса должен применяться только к одному элементу HTML. В примере ниже, текст всех элементов p (параграф) с class="center" будет выровнен по центру:
Пример:
p.center {
text-align:center;
}
Вес селектора
В CSS каждый тип селектора имеет свой вес:
- Название тега имеет вес в 1 балл;
- Присвоение тегу класс – 10 баллов;
- Идентификатор тега – 100 баллов.
Если два селектора, идентифицирующих один и тот же тег, имеют одинаковый вес, для CSS – свойства будет взято значение из того селектора, который стоит ниже в коде. Однако если вес одного селектора больше, чем вес других, то значение для CSS свойства будет взято именно из него. В CSS существует свойство !important, с помощью которого можно повысить вес конкретного CSS – свойства, чтобы независимо от веса селекторов применялось именно оно.
