—»     —»   Структура CSS-кода для HTML5: Полезная информация
  Раздел: CSS/Style Sheets   Нет комментариев  

Структура CSS-кода для HTML5: Полезная информация

В данной статье мы бы хотели рассказать вам о том, как грамотно внедрять CSS-код в структуру разметки на языке HTML 5. Это нельзя назвать основными правилами, но некоторые советы смогут помочь вам в улучшении читаемости и общей организации CSS-кода. Особенно полезными данные советы придутся, если вы работаете над сложным запутанным CSS-файлом, в котором сложно разобраться.

Некоторые разработчики предпочитают делить CSS-код на три части: в первой части идут HTML-тэги, во второй структурные тэги, а в третьей располагаются собственные классы.

Раздел 1: HTML-тэги

В этом разделе код обычно делится на две подсекции. В первой подсекции обычно сбрасываются стандартные HTML-тэги, а во второй HTML-тэги получают новое значение.

Структура CSS-кода для HTML5: Полезная информация

Раздел 1: подсекция 1

Как вы уже, наверное, знаете, функция сброса CSS используется для того, чтобы сбросить стандартные значения в браузере (body, h1, p, ul, li, и т.д.). Самым популярным файлом, используемым для сброса, считается Eric Meyers CSS reset. Для HTML 5 мы бы посоветовали взглянуть на файл, основанный на предыдущем, но немного с другим названием - Richard Clark CSS reset. Эти файлы сбрасывают все имеющиеся HTML-тэги и поэтому в них так много CSS-кода. Из жизненной практики, чаще всего нужно сбрасывать лишь значения тэгов body, h1, h2, h3, p, li, ul, form, input, и немного реже table, tr и td. Кстати, если вам хочется, то вы можете использовать сокращенные варианты данных файлов:

/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {
border:0;
margin:0;
padding:0;
font-size:100%;
...
}

В предыдущем коде жирным текстом мы выделили некоторые HTML 5-тэги, которые вам потребуется сбросить (дальше смотрите их краткое описание)

Раздел 1: подсекция 2

Во второй подсекции мы просто задаем новые значения стандартным тэгам HTML:

/* Subsection 2: Standard HTML tags redefinition */
body,
form, input {
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}

Если нам нужно задать значение стандартного тэга (например, h1) с разными параметрами, в зависимости от местонахождения тэга на странице (h1 для заголовков статей, или h1 для заголовков разделов в меню), то можно добавить относительный CSS-код в раздел, который состоит из структурных тэгов (Раздел 2). Например, для меню:

aside {...}
aside h1 {...}

Раздел 2: Структурные тэги

В этом разделе мы задаем все CSS-элементы, которые образуют структуры страницы. Как и предвиделось, HTML 5 представляет новые тэги, которые улучшают семантику кода. Некоторые их них: "header", "nav", "article", "section", "aside", "footer"... Вы можете использовать эти тэги вместо часто используемых DIV, которые мы всегда использовали до этого времени, например:
<div id="nav">...</div>

Вкратце, картинка представляет собой простую верстку в два столбика, которая пользуется тэгами HTML 5 для образования структуры страницы.

Структура CSS-кода для HTML5: Полезная информация

CSS код очень простой:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Что практически идентично с кодом, который мы используем для слоев DIV:

#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...

Для каждого HTML-элемента вы можете указать дочерние элементы. Например, если это код навигационного меню:

<nav>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>

…то дочерний код будет таким:

nav{...}
nav ul{...}
nav ul li{...}
nav ul li a{...}

Как мы уже говорили, советуем вам использовать абзацы и алфавитный порядок во время расположения параметров элементов, дабы повысить читаемость кода:

nav ul li a{
font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;
}

Какие ярко выраженные изменения относительно HTML 4? Не очень-то их и много:

<div id="nav">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div>

Проще говоря, такой тип структурных тэгов HTML 5 – это тоже, что и DIV с указанным ID в HTML 4:

#nav{...}
#nav ul{...}
#nav ul li{...}
#nav ul li a{...}

Раздел 3: Собственные классы

В последнем разделе наших CSS-файлов мы добавляем собственные класс, которые затем можно будет повторно использовать в нескольких разделах (шапка, меню, днище страницы, и т.д.)

/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}

Вот и все! Если у вас есть какая-то свежая информация или идеи относительно данной тематики, не стесняемся, пишем комментарии!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, HTML 5
Опубликовал Mysterious Master   Прочитано (раз): 15230   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031