• О блоге

    Блог был задуман как сайт для дизайнеров и всех, кто изучает и интересуется компьютерной графикой.

    К его созданию подтолкнуло желание создать место для общения и обмена опытом в изучении компьютерной графики и дизайна.

    Уроки Blender 3d   Текстуры   Уроки Photoshop   3d max   html/css

 
 
В процессе
 
 

Опанасенко Сергей (sergey@opanasenko.com.ua / sadesign)
Обнулятор css
27 марта 2009

обнулятор css
Полезная вещь для верстки — сбрасываем все параметры под ноль и становимся «богами» отступов :-)

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
/* Обнуляем все под нуль */
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;
}
 
/* использовать :focus */
:focus {
	outline: 0;
}
 
/* элементы, которым добавляем несколько классов: class="menu_item del" */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* Но все равно у таблиц надо ставить 'cellspacing="0"', без этого никак. */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Обнулятор от Yahoo ©

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,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%;}
q:before,q:after{content:'';}

Спасибо Юревич Сергею за предоставленную инфу

              ,





9 комментариев на “Обнулятор css”

  1. А для чего он используется этот обнулятор?

  2. Он нужен для обнуления отступов и всех значений по-умолчанию, уставливаемыми браузером.

    Падинги и маржины для списков, заголовков, абзацев и так далее, чтобы ничего не плюсовалось и таким образом достигалась максимальная точность с макетом где вымеряется каждый пиксель :-)

  3. А клево получилось. Мне нравится. Айс. :)

  4. Тьфу ты. хотел про новый вид написать. А попал про обнулятор. :) ПОшел я спать лучше.

  5. Хорошая вещь, для верстальщика )

  6. Уважаемый, а специикацию css вы читали? На всякий случай напомню о существовании дригих типов селекторов и в частности *. на мой взгляд * { margin: 0; border: 0; } куда лучше и как правило хватает только их.

  7. Все мы читали. А padding, line-height, outline атрибуты по-умолчанию у браузеров разные. По-этому их тоже следует обнулять.

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

  8. Полезно.

    Использую обнуляторы везде, только на каждом сайте разный, в зависимости от потребностей.

Оставить комментарий


В другом формате

Введите email для автоматического получения новых статей на почту: