22 декабря 2015
21 апреля 2008
21
Глобальный сброс в CSS
Глобальный сброс CSS обычно применяют для более-менее одинакового отображения сайтов в различных браузерах. По умолчанию разные браузеры имеют различные значения для margin, padding и line-height. Глобальный сброс позволяет установить одинаковые значения этих величин во всех браузерах.
Глобальный сброс Эрика Мэйера
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Yahoo! UI Library: CSS сброс
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Глобальный сброс стилей CSS (Kyle Neath)
*
{
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }
Глобальный сброс (Павел Марковнин)
html
{
color: #2d2d2d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.4em;
background: #f7f4ea url(../images/bodyBg.gif) top left repeat-x;
}
*
{
padding: 0;
margin: 0;
outline: none;
font-size: 100%;
line-height: inherit;
_line-height: 1.4em;
}
input, textarea
{
padding: 0.2em;
}
img, a:link img, a:visited img, a:hover img, a:active img
{
border: 0;
}
a:link
{
font: inherit;
color: #0e8db7;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}
a:active
{
font-size: 100%;
color: #0e8db7;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}
a:hover
{
font-size: 100%;
color: #cc4e4e !important;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}
a:visited
{
font-size: 100%;
color: #9268b5;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}
a.dashed:link, a.dashed:active, a.dashed:visited
{
color: #0e8db7;
text-decoration: none;
border-bottom: 1px dashed;
}
a.dashed:hover
{
text-decoration: none;
border-bottom: 1px dashed;
}
h1
{
font-size: 1.8em;
margin: 0.2em 0 0.6em 0;
font-weight: normal;
color: #0e8db7;
}
h2
{
font-size: 1.7em;
margin: 0.8em 0 0.5em 0;
font-weight: normal;
color: #0e8db7;
}
h3
{
font-size: 1.6em;
margin: 0.7em 0 0.5em 0;
font-weight: normal;
}
h4
{
font-size: 1.3em;
margin: 0.5em 0 0.4em 0;
font-weight: normal;
}
h5
{
font-size: 1.2em;
margin: 0.5em 0 0.4em 0;
font-weight: normal;
}
h6
{
font-size: 1.1em;
margin: 0.5em 0 0.4em 0;
}
p
{
margin: 0.8em 0 0.9em 0;
}
table
{
border: 0;
border-collapse: collapse;
}
table td, th
{
padding: 0;
vertical-align: top;
text-align: left;
}
ul, ol
{
margin: 0.2em 0 1.4em 0;
padding: 0 0 0 2em;
}
ul li, ol li
{
}
small, sup, sub
{
font-size: 0.8em;
}
big
{
font-size: 1.2em;
}
ul li
{
margin: 0.5em 0;
padding: 0 0 0 15px;
list-style-type: none;
background: url(../images/bullet.gif) 0 0.5em no-repeat;
}
Мастер стили
html, body {
border:0;
margin:0;
padding:0;
}
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
/***** Headings *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
h3 {
font-size:1em;
font-weight:bold;
}
/***** Common Formatting *****/
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
ul, ol {
padding:0 0 1.25em 2.5em;
}
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
small {
font-size:0.85em;
}
img {
border:0;
}
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
/***** Links *****/
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
textarea {
width:100%;
line-height:1.25;
}
label {
cursor:pointer;
}
/***** Tables *****/
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
table tr td {
padding:2px;
}
/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}
/***** Global Classes *****/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.wrap { width:960px;margin:0 auto; }
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }
.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
Если я правильно понял, то сначала подключаем css с этим "сбросом", а потом основной. Так?
Спасибо! Буду пробовать. :)
* { margin: 0; padding: 0; font-size: 100%; }
html { height: 100%; }
body { font-family: Arial, Tahoma, Verdana, sans-serif; height: 100%; font-size: 1em; }
a { color: #000000; outline: none; text-decoration: underline; }
a:link { color: #000000; }
a:hover { color: #000000; }
a:visited { color: #000000; }
h1, h2, h3, h4, h5, h6 { padding: 0; font-size:100%; font-weight: normal; }
input { vertical-align: middle; font-size: 1%; margin: 0; padding: 0; }
ol, ul, li { padding: 0; }
b { font-weight: normal; }
i { font-style: normal; }
p { margin: 0 0 18px; }
img { border: none; }
h1 { font-size: 245%; font-weight: normal; }
h2 { font-size: 210%; font-weight: normal; }
h3 { font-size: 180%; font-weight: normal; }
h4 { font-size: 150%; font-weight: normal; }
h5 { font-size: 130%; font-weight: normal; }
h6 { font-size: 110%; font-weight: normal; }
правда это здесь процентный размер шрифта, те кому не нравится может остановится на емах
отличается от "*" ?
/* сбрасываем что нужно,
* например глобальный стиль фрифтов..
*/
}
Получается сначала надо к странице подключить reset.css(сброс Эрика Мэйера) а потом свой стиль?
Заранее спасибо!
http://divhack.com/node/30