вход

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

хитрости 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, можете смело добавить их в комментариях.

Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Полезные шорткоды CSS

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.