Home  >  Article  >  Web Front-end  >  HTML 5 Reset Stylesheet_HTML/Xhtml_Web page production

HTML 5 Reset Stylesheet_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:42:381687browse

This css reset is modified based on Eric Meyers' CSS reset, and especially adjusts the initialization style of the corresponding tags for HTML5.

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}

nav ul {
list-style :none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q :after {
content:”;
content:none;
}

a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

mark {
background-color:#ff9;
color:#000;
font- style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title] , dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

table {
border-collapse:collapse;
border -spacing:0;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

What to update content?
Removed those tag styles that are not supported in HTML5, such as ... Added new tag styles in HTML5, removed the default padding, margin and border, OK Specifies that the display attribute of elements that should be displayed as block-level elements is block.

uses the attribute selector

adds an attribute selector to the element. This is to specify a style for these two elements when they have the title attribute. , this is considered from an accessibility perspective.

Discussion

Adding outline:0 to the anchor point has serious accessibility issues, which directly leads to the failure of keyboard navigation.

ins, mark does not need to add a background color when the font color is not set.

For more content, click here: http://html5doctor.com/html-5-reset-stylesheet/

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn