css - Sergunik

Жов

8

reset css

категорія: css

Пост присвячений верстальщикам.

Файл reset.css – це обнулятор стилів.

У кожного браузера є свої настройки для різних тегів, наприклад для параграфів чи інпутів. А підключивши reset.css можна полегшити процес верстки.

Отже, є багато варіантів.

Особисто я завжди використовував

* {
margin: 0;
padding: 0;
}

Але цього мало

YUI 2

reset.css від yahoo

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;
}

meyers css

reset.css від meyer

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;
}

Вибираємо для себе підходящий.

Вер

9

Як прибити футер до низу сторінки?

категорія: css

Сьогодні зіткнувся з проблемою розташування футера.

Задача полягала в тому щоб виставити відповідний блок внизу вікна.

Багато переглянув прикладів з position: absolute, але це все не те.

Вихід знайшов, причому, як завжди, надзвичайно простий.

Ось приклад html-коду:

<html>
<head>
<title>footer panel</title>
<style>
   .header { height: 50px; border:dotted 1px silver;}
   .content { height: 100px; border:dotted 1px blue;}
   .footer { height: 30px; border:dotted 1px black; width: 100%; position: fixed; bottom: 0;}
</style>
</head>
<body>
<div>header</div>

<div>content</div>

<div>footer</div>
</body>
</html>

В результаті, футер буде постійно знизу.

Чер

9

пріоритети стилів або ієрархія в CSS

категорія: css

Питання на засипку:
Якого кольору буде текст? якщо:

<html>
<head>
   <style type="text/css">
      .text_class {color: Red;}
      #text_id {color: Green;}
      div {color: Blue;}
   </style>
</head>
<body>
   <div id="text_id" class="text_class"><b>CSS Specificity</b></div>
</body>
</html>

Блог

Фрілансера

reset css

YUI 2

meyers css

Як прибити футер до низу сторінки?

пріоритети стилів або ієрархія в CSS