Воскресенье, 09 Сентября 2012 02:34

Сброс стилей для элементов HTML5

Written by 
Оцени эту запись
(1 Голос)

В данной статье речь пойдет об аналоге reset.css, только для тегов HTML5. 

 

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

 

Шаг первый:

 

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

 

Тут совсем не страшно, этот набор стилей с обнулениями является стандартным, только к списку тегов нужно добавить новые.

 

Идем дальше:

 

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display:block;

}

 

Здесь другая история. Дело в том, что старые браузеры на знают этих новых тегов и не знают че с ними делать. Потому присущих тегам стилей они не добавляют. Но браузеры считают все неизвестные им теги строчными, что может негативно повлиять на отображение страницы. Во-первых, может изменить стилизация страницы. Во-вторых, внутри строчных элементов не могут располагаться блочные:

 

<footer>

       <p>

             ...

       </p>

</footer>

 

 

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

 

А дальше по мелочи:

 

 

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

 

Поскольку <mark> - это отмеченный текст, то некоторые брайзеры окрашивают его в желтый цвет, потому вам нужно будет это изменить.

 

Рекомендую подробнее узнать о стандартных стилях элементов в статье - Стандартные стили WebKit

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов