Този уеб сайт вече не се обновява. Посетете новото ми портфолио на адрес http://skirilov.com/
Switch to english

CSS Reset

Публикувано на 2 юни, 2009 в CSS с етикети , ,

CSS Reset

Всеки браузър има някакви настройки по подразбиране. За да се обедите в това, примерно инсталирайте Web Developer Toolbar-а на Mozilla Firefox, заредете някоя страница и отидете на CSS -> Disable Styles -> Browser Default Styles. Това ще покаже страницата без абсолютно никакви margin, padding, font-style, font-weight зададени по-подразбиране от Firefox.
Абсолютно всички браузъри имат такъв лист със стилове по подразбиране и всеки е различен от останалите.
За да избегнем повечето от тези настройки по-подразбиране се използва CSS reset. Това е stylesheet който може да бъде вмъкнат(@Import) в основния ни или просто написан в него. Той се грижи да премахне всички неща, които биха възпрепятствали или усложнили писането на код за нашия дизайн. Освен, че може да разгледате тази огромна колекция от най-различни CSS reset стилове, ще ви предоставя два CSS stylesheet-а, които аз използвам.

Първия е на Ерик Мейер и се прави reset на абсолютно всичко.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Втория е master stylesheet и добавя основните неща, разделени в категории, които трябва да се допълнят и напаснат.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

/* Table of Contents:
	Global Settings
	Wrapper
	Headings
	Common Formatting
	Links
	Forms
	Tables
	Global Classes	
*/
/********** Global Settings **********/
html, body {
	border:0;
	margin:0;
	padding:0;
}
body {
	font:100%/1.25 Arial, Helvetica, sans-serif;
}
/********** Wrapper **********/
#wrap {
	width:960px;
	margin:0 auto;
}
/********** 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;
}
/********** 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; }

Един коментар Добави коментар

  1. toni 29 юни, 2010

    полезно :)

Вашият коментар



Личният блог на Станислав Кирилов се задвижва с Wordpress 3.3. (CC) Някои права запазени!

Валиден xHTML & CSS код.

RSS