CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 268   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Сокращения в CSS

Jemand 12968 ,
Шпаргалки

Сокращение шестнадцатеричного кода цвета
Если шестнадцатеричный код цвета имеет три пары одинаковых значений, например #FFCC00, то в CSS его можно записать как #FC0.

Т.е.

#div {background: #FFCC00;}

равно

#div {background: #FC0;}

Ноль
При указании длины, ширины, отступов и т.д. необязательно указывать в чем будет измеряться ноль, будь то пиксели, пункты или проценты, – это ведь ноль.

Т.е.

#div {width: 0px; height: 0px; border: 0px;}

равно

#div {width: 0; height: 0; border: 0;}

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

Т.е.

#div1 {width: 25px; height: 25px; background: #ff0; margin: 10px;}
#div2 {width: 25px; height: 25px; background: #ff0; margin: 10px;}

равно

#div1, #div2 {width: 25px; height: 25px; background: #ff0; margin: 10px;}

Background
В обычном виде свойство Background выглядит так:

#div {
	background-color: #FFCC00;
	background-image : url(image.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top right;
	}

в сокращенном так:

#div {background: #FFCC00 url(image.png) no-repeat fixed top right;}

Border
Обычный вид:

#div {
	border-width: 5px;
	border-style: solid;
	border-color: #f00;
	}

сокращенный:

#div {border: 1px solid #f00;}

Также можно сократить конструкцию:

#div {
	border-top: 1px solid #f00;
	border-right: 1px solid #f00;
	border-bottom: 1px solid #f00;
	border-left: 1px solid #f00;
	}

до:

#div {border: 1px solid #f00;}

Font
Полная версия свойства Font:

#div {
	font-style: italic;
	font-variant: normal ;
	font-weight: bold;
	font-size: 12px;
	font-family: Arial, Tahoma;
	}

сокращенная:

#div {font: italic normal bold 12px Arial, Tahoma;}

В данном случае порядок значений должен быть именно таким.

List-Style
Полная версия:

ul {
	list-style-type: circle;
	list-style-position: outside;
	list-style-image: url(image.png)
	}

сокращенная:

ul {list-style: circle outside url(image.png)}

Margin, Padding
Полная версия:

#div {
	margin-top: 10px;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-left: 15px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
	}

сокращаем

#div {
	margin: 10px 15px 10px 15px;
	padding: 10px 15px 10px 15px;
	}

отступы присваиваются по часовой стрелке начиная с верхнего, т.е. сверху → справа → снизу → слева.

Сокращаем

#div {
	margin: 10px 15px;
	padding: 10px 15px;
	}

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

Сокращаем

#div {
	margin: 15px;
	padding: 15px;
	}

здесь все отступы одного значения.

Рекламная пауза

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