Здравствуйте уважаемые начинающие веб-мастера.
В этой статье изучим просто замечательное свойство CSS, здорово упрощающего нам жизнь – сокращение записей.
Начнём со свойства форматирования текста — font
p{
font-style: italic;
font-weight: bold;
font-size: 20px;
font-family: "Comic Sans MS" cursiv";
}Как видим, это курсив, жирный текст, размер шрифта, и его название. Запись довольно таки громоздкая, и чтобы её сократить, не потеряв при этом требуемых значений, запишем ее следующим образом.
p{
font: italic bold 20px "Comic Sans MS" cursiv;
}Все значения, которые сначала были записаны каждое со своим свойством, теперь записаны в одну строку через пробел с одним только свойством font. Лучше? Конечно лучше.
И одно правило, которое нужно соблюдать при таком варианте – это последовательность написания свойств. То есть сначала пишется, если нужно italic, затем, опять-же если нужно — bold, потом размер шрифта, и его название и семейство.
Если какое-то из значений пропустить, то отобразится заданное по умолчанию.
Сокращение свойства background
p {
background-color: #cc212d;
background-image: url(images/zvon.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}Сокращённый вариант:
p {
background: #cc212d url(images/zvon.png) no-repeat fixed top right;
}Сокращение свойства border.
p {
border-width: 30px;
border-style: solid;
border-color: #cc212d;
}Сокращённый вариант:
p{
border: 30px solid #cc212d;
}Сокращение свойства list-style. (Установка картинки маркера для списка)
ul{
list-style-type: square;
list-style-position: inside;
list-style-image: url(images/zvon.png);
}Сокращённый вариант:
ul{
list-style:square inside url(images/zvon.png);
}Сокращение записи для свойств имеющих своими значениями отступы сверху, справа, снизу, и слева — margin и padding.
p{
margin-top: 20px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 40px;
}Сокращённый вариант:
p{
margin: 20px 10px 30px 40px;
}Значения ставятся по часовой стрелке, начиная с верха. А если нужно сделать отступ со всех сторон одинаковым, то достаточно поставить только одно значение в свойстве margin.
p{
margin: 40px;
}Сокращение шестнадцатеричных значений свойств color и background.
Если в значении свойств color и background все шесть цифр одинаковые, то можно в коде оставлять только три цифры.
p{
color: #ffffff;
}Сокращённый вариант:
p{
color: #fff;
}Желаю творческих успехов.
Перемена
-Женщина — это тайна.
-Да. От жены.
Выравнивание и красная строка в CSS < < < В раздел > > > Создание рамок средствами CSS
Здравствуй Максим. Если честно — не знаю. Не пробовал. Но скорее всего получится. Рамка делится по сторонам: border-top, border-right, border-bottom и border-left, и каждой стороне задаются свои значения. Попробуй.
Доброго времени суток. Подскажите пожалуйста. Можно ли для каждой стороны рамки задать индивидуальное направление градиента?