Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Тема 1.7 Семантическая структура страницы

⇐ ПредыдущаяСтр 7 из 14Следующая ⇒

В HTML5 у тега div появилась альтернативная замена несколькими по функциональности схожими тегами, но имеющими разное название и предназначение:

Header – все, что находится в данном теге, будет считаться шапкой сайта. Является вводным элементом перед основным содержанием страницы. Здесь могут содержаться заголовки, элементы навигации, логотип фирмы, форма поиска и т.п.;

Footer – информация между данными тегами будет считаться футером всего сайта, либо отдельного раздела сайта (например, для размещения имени автора статьи и даты ее создания);

Article – в данном теге нужно размещать отдельные статьи, новости, записи блога и другие целостные блоки текста. Один элемент article может включать несколько элементов article, например, статья в блоге содержится в одном элементе, а комментарии к этой статье в другом элементе;

Nav – контейнер для размещения элементов навигации по сайту. Как правило – это ненумерованный список с набором ссылок. На одной странице можно использовать несколько элементов nav, например, один элемент навигации для перехода по страницам на сайте, а другой – для перехода внутри html – документа;

Section – контейнер для разбиения сайта на отдельные секции, например элемент section может включать набор вкладок на странице, новости, объединенные по категориям и т.д. Элемент section может содержать несколько элементов article, выполняя их группировку. Так и элемент article может содержать несколько элементов section;

Aside – контейнер для создания левой или правой боковой панели сайта. Представляет содержимое, которое косвенно связано с остальным контентом веб – страницы и которое может рассматриваться независимо от него. Часто используется для сайдбаров, для рекламных блоков и т.д.

Address – предназначен для отображения контактной информации, которая связана с ближайшим элементом article или body. Часто размещается в футере.

Main – элемент представляет основное содержимое веб – страницы, т.е. содержит уникальный контент, в который не следует включать повторяющиеся на разных веб – страницах элементы сайдбаров, навигационные ссылки, логотипы и т.п.

<body>

..............

</header>

<main>

.................

</main>

.................

</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 – свойства, чтобы независимо от веса селекторов применялось именно оно.

Каскадирование стилей

Если посмотреть отображение одной и той же HTML – страницы созданной без CSS – правил, в разных браузерах, можно заметить различия в цвете ссылок, отступов и др. Это связано со стилями, которые браузер присваивает тегам HTML по умолчанию. Каждый браузер имеет свой набор правил CSS, которые называется стилем браузера.

Помимо стиля браузера, существует стиль пользователя. Каждый браузер позволяет пользователю указать файл с правилами CSS, которые должны присваиваться тегам любого открываемого HTML – документа.

Также существует стиль автора, который задает верстальщик документа.

Если какое – либо CSS – свойство не было указано для данного тега в стилях автора, его значение берется из стиля пользователя, если стиль пользователя также не содержит значение для данного свойства, браузер находит значение свойства в своих стилях.

Составные селекторы

В качестве селекторов могут выступать не только отдельные теги, но и тег с определенным классом или идентификатором: тег.класс или тег#идентификатор.

В этом случае CSS – свойства применяются только к тегу с данным классом либо с данным идентификатором.

Контекстные селекторы

Контекстными называют селекторы, в которых через пробел указано сразу несколько тегов, классов и/или идентификаторов.

Псевдоклассы

В составе селектора могут указываться псевдоклассы, позволяющие ограничить область применения CSS – свойств только теми тегами, которые в данный момент имеют определенное состояние. Псевдокласс указывается в конце селектора после двоеточия.

тег: псевдокласс;

.класс: псевдокласс;

#идентификатор: псевдокласс;

Группировка селекторов

В процессе вёрстки возникает ситуация, когда одни и те же свойства CSS имеющие одинаковые значения, присваиваются сразу нескольким селекторам. Повторение одного и того же кода увеличивает не только время верстки, но и размер будущего сайта, и время открытия страниц.

С целью уменьшения кода селекторы с одинаковым содержанием разрешено группировать. Для этого достаточно перечислить несколько селекторов через запятую, после чего указать для них нужные свойства.

⇐ Предыдущая 2 3 4 5 678 9 10 11 Следующая ⇒

Рынок недвижимости. Сущность недвижимости

Решение задач с использованием генеалогического метода

История происхождения и развития детской игры

Последнее изменение этой страницы: 2021-04-05; просмотров: 68; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.221.239.148 (0.021 с.)