Полезные шорткоды CSS


Если Вы позиционируете себя как вэб разработчик, то вы должны знать как важно создавать кросс браузерный, CSS и xHTML валидный код. Все эти приёмы хорошо описаны и многие скажут, что ничего нового я не открыл. Просто хотел освежить в голове и поделиться с тем, кто может быть этого ещё не знает. Повторение, как говорят, позволяет лучше запомнить. Обычно тратиться много времени на все эти хаки и фиксы для различных браузеров и их достаточно много. А здесь, я хочу привести лишь некоторые важные моменты при создании файла стилей, полезные хитрости CSS.

Сброс CSS

Сброс стилей это то, с чего должен начинаться любой документ CSS. Есть много способов и приёмов для выполнения сброса CSS, я приведу два приёма, которые использую сам

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;
}
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 {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

Тэг PRE

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Для корректной печати можно использовать такой код

pre {
	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */ /*
	width: 99%; */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Авто очищение предыдущих стилей

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

Выравнивание по горизонтали

<div id="container"></div>

#container {
margin:0px auto;
}

Выравнивание по вертикали

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

Табличная форма без таблиц

<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

Предотвращение изменения фиксированной ширины при превышении размера

#main{
	overflow:hidden;
}

Принудительные разделители страниц при печати вашего документа

h2{
	page-break-before:always;
}

Ссылки в одну строку

a{
	white-space:nowrap;
}

Полезно знать

@charset "UTF-8";

/* ----------------------------------------------------------------------
	WinIE7
---------------------------------------------------------------------- */
*:first-child+html selector{property:value;}

/* ----------------------------------------------------------------------
	WinIE6 & Mac IE
---------------------------------------------------------------------- */
* html selector{property:value;}

/* ----------------------------------------------------------------------
	WinIE6
---------------------------------------------------------------------- */
/*\*/
* html selector{property:value;}
/**/

/* ----------------------------------------------------------------------
	MacIE
---------------------------------------------------------------------- */
/*\*//*/
selector{property:value;}
/**/


Вот такие полезные хитрости css мне хотелось сегодня осветить. Если вы знаете ещё хорошие и полезные хитрости css, можете смело добавить их в комментариях.

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

восемнадцать − пять =