Margin / Padding

Для обоих свойств написания  идентичны. Поэтому покажу на примере margin. Возможны следующие варианты написания:

margin-top: 10px;

margin-right: 15px;

margin-bottom: 5px;

margin-left: 10px;

Это самый полный вариант. Вместо него возможна следующая запись (обратите внимание на порядок записей):

margin: 10px 15px 5px 10px;

Следующее возможное сокращение применимо если отступы сверху/снизу и справа/слева одинаковы (к примеру 10px и 5px соответственно):

margin: 10px 5px;

И еще один вариант сокращения если вы хотите задать одинаковыми отступы справа/слева (скажем по 10px) а сверху/снизу разные:

margin: 5px 10px 15px;

В данном случае порядок отступов следующий: верх - право/лево - низ.

Font

Рассмотрим какие свойства применимы к шрифтам:

font-style: italic;

font-variant: small-caps;

font-weight: 500;

font-size: 1em;

line-height: 24px;

font-family: Arial,Verdana,sans-serif;

Это полный список, который можно записать так:

font: italic small-caps 500 1em/24px Arial,Verdana,sans-serif;

При использовании данного порядка записи возможно задавать не все свойства а только необходимые. Остальные параметры будут приняты по умолчанию или унаследованы от родительских.

Background

Свойства применимые к фону:

background-color: #CCC;

background-image: url("bg.gif");

background-repeat: repeat-y;

background-attachment: fixed;

background-position: 50% 50%;

Краткая запись:

background: #CCC url("bg.gif") repeat-y fixed 50% 50%;

Как и у шрифтов возможно не указывать все параметры в краткой записи. Главное соблюдать порядок ;)

Border

Cписок параметров для границ:

border-top-width: 1px;

border-top-style: solid;

border-top-color: #000;

border-right-width: 2px;

border-right-style: solid;

border-right-color: #000;

border-bottom-width: 3px;

border-bottom-style: solid;

border-bottom-color: #000;

border-left-width: 4px;

border-left-style: solid;

border-left-color: #000;

В сокращенном виде будет выглядеть так:

border: solid #000;

border-width: 1px 2px 3px 4px;

List

Параметры для списков:

list-style-position: inside;

list-style-type: circle;

list-style-image: url("list.gif");

Им соответствет следующая запись:

list-style: inside circle url("list.gif");

Outline

Ну и наконец контуры:

outline-color: #EEE;

outline-style: dotted;

outline-width: 1px;

А сокращенно так:

outline: #EEE dotted 1px;

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

]]> http://boleslav.wordpress.com/?p=58 Thu, 25 Sep 2008 09:40:44 +0000 Болеслав Сивков http://boleslav.ru.wordpress.com/2008/09/25/%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-2/ Проверка отображения сайтов в различных браузерах (на данный момент вы можете получить скрины из 71 браузера Linux, Windows, BSD): https://browsershots.org/

Опыт работы 3 года в типографиях, издательском доме, рекламном агентстве, редакции журналов. Отличное знание всего специализированного программного обеспечения, знание правил верстки и художественного оформления полос.

ЦЕНЫ. Верстка (+правка), формат А4: полноцветное издание от 150 руб./полоса, одноцветное от 70 руб./полоса. Цены на дизайн договорные.
Мой опыт и профессионализм позволяют быстро и качественно выполнить свою работу!

КОНТАКТЫ: alexeykuznecof@gmail.com

Буду рад сотрудничеству с Вами!

И вот первый летний пост и первый секрет.

Как многие уж успели заметить, а некоторые покритиковать, заголовок блога – картинка. Т.к. блог построен на вордпресе в большинстве случаев заголовок помещается в контейнер тэгов h1 и замена его на картинку вызывает у моих знакомых сео-шников взрыв эмоций и нервный тик.

Так вот решение:

В css:

.h1div {
background-image: url(../images/htmllogo.gif);
margin-top:20px;
width: 406px;
height: 70px;
display: block}

.h1div h1 {display:none}

В html:

<div class=" h1div">
<h1><a href="http://www.htmlblog.ru/">Дневник неизвестного верстальщика</a></h1>
</div>

Не правда ли элементарно?

Этот метод универсален, его можно применять к любым заголовкам, он работает во всех браузерах и раскрепощает фантазию дизайнера. Пользуйтесь.

Задача (на примере пункта меню): Сверстать меню без потери текстовых ссылок и замусоривания html-кода.

Решение:
применяем к ссылке display: block, задаем нужную ширину и высоту, кладем в бакгроунд нужную нам картинку. С этим я думаю проблем ни у кого возникнуть не должно.

А теперь самое интересное – красим слова.

Оптимальное решение – это использовать тэг со специально прописанным для этого случая стилем и применить стиль к каждому новому спану

Но… В задании сказано не захламлять код, т.е. class=”название класса” – использовать нельзя.
Так вот решение:

a.free {
width: 196px;
height: 94px;
background-image: url(free.png);
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #005FC4;
}
a.free span {
font-size: 15px;
color: #DB1716;
float: left
}
a.free span + span {
font-size: 12px;
color: #005FC4;
float: left
}

Поясню: Первое правило задает размер и цвет шрифта вне тэга . Второе объясняет что происходит с первым дочерним спаном (увеличивается шрифт и красится в красный)

А последнее – третье правило содержит комбинация селекторов дочерних и сестринских элементов и означает: «Применить это правило к любому элементу span, которому непосредственно предшествует другой элемент span и который также является дочерним элементом .free». Другими словами, это все span’ы внутри .free, кроме первого.

Этот случай знаменателен тем, что дизайнер, который рисовал этот проект, то ли действительно знает, что нужно сдавать заказчику, т.е. диз снабжен достаточным количеством комментариев, то ли ему достаточно сильно уже вправил мозг руководитель проекта... Чтож это останется загадкой...

• Safari CSS Reference
• Safari HTML Reference
• Web Kit DOM Reference
• Apple Applications Schema Reference
• Sync Services Framework Reference

www.css3.ru (по-русски, обещали что «скоро будет пиздато»).