В этой замечательной книге детально рассматриваются практически все фундаментальные аспекты верстки, осведомленность о которых, избавит от необходимости искать подсказки на блогах и форумах и сэкономит кучу времени и нервов.

Для себя я решил записать некоторые полезные тонкости, которые нашел в этой книге и которые помогут привести верстку к более высокому уровню. Список представлен в произвольном порядке.

Подключения стилей

Ни для кого не секрет информация о существовании тега link которые позволяет подключать внешние таблицы стилей. Но вот об атрибуте media многие забывают. Этот атрибут позволяет указать браузеру для чего используется таблица стилей и может получать значения screen, print, aural, handheld, projection, tv. Таким образом, можно задать отдельные стили для оформления информации для экарана монитора или для вывода на печать. К сожалению сейчас можно говорить об адекватной поддержке только двух параметров screen и print.

Капитель в текстах

В типографике кроме прописных и строчных букв есть еще один тип начертания символов – Капитель. Капитель внешне похож на уменьшенный вариант прописных букв, но на самом деле, это совсем другое начертание букв. В ряде книг капитель рекомендуют применять для набора имён, некоторых названий и аббревиатур и шрифтовых выделений в тексте. Заголовок этого параграфа набран капителием. Для задания капители в верстке есть отдельное свойство каскадных таблиц – font-variant:small-caps;

Некоторые псевдоклассы

Кроме всем известного псевдо класса :hover(IE6 без дополнительных мер поддерживает этот псевдо класс только для ссылок), который задает стиль для объекта над которым находится курсор, и :link,: active, :visited, есть еще ряд других полезных псевдо классов. К ним относится псевдокласс :focus (выделяет активный элемент, например поле в которым находиться курсор, IE7 и ниже не поддерживают ), :first-child (стилевое оформления для первого дочернего элемента), :first-letter (стилевое оформления для первой буквы элемента), first-line(стилевое оформления для первой строки элемента), :after(псевдокласс, который используется для вывода желаемого контента после элемента IE7 и ниже не поддерживают), :before(псевдокласс, который используется для вывода желаемого контента до элемента IE7 и ниже не поддерживают).

Оформления пробелов и запрет переноса

В html 3 для того чтоб запретить переносить строку если она не помещается в контейнер использовался тег nobr, в html 3.2 и выше этот тег считается устаревшим, но его функцию заменяет параметр CSS white-space, который может принимать такие значения: nowrap (переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега br переносит текст на новую строку), pre (текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки), pre-wrap (сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку, не работает в IE6, для поддержки нужно дописать параметр word-wrap: break-word; который можно вынести в отдельный файл стилей для IE чтоб сохранить валидность).

Выравнивание текстов возле элементов формы

Если в одной строке помещать поле ввода, или другой элемент формы вместе с текстом, который указывает назначение этого поля, элементы формы будут выровнены относительно базовой линии строки, причем в разных браузерах будут визуальные отличия в расположении. Для того чтоб изменить расположения элементов формы, скажем выровнять по вертикали, нужно воспользоваться параметром vertical-align задав ему одно из допустимых значений: top, middle, bottom, baseline, также допускается значение заданное в процентах.

А вопрос приоритетности стилей решает принцип специфичности. Специфичность это что-то вроде таблицы «рангов» селекторов стилей. Стиль, который имеет приоритет выше, присваивается атрибуту, если в каскаде нет селектора, который имеет такую же специфичность и объявлен позже. Специфичность стиля записывается в виде четырех порядков (0,0,0,0). Чем больше число, тем выше специфичность, порядок который стоит левее является более значительным по сравнению с правым, таким образом, специфичность (0,1,0,0) является высшее специфичности (0,0,0,99). Значение специфичности селектора вычисляется таким образом:

• Для каждого указанного в селекторе значения идентификатора(#someID) к специфичности добавляется 0,1,0,0.
• Для каждого указанного в селекторе имени класса(.someClass), псевдокласса(:hover) или атрибута([href=”http://zodios.net”]) к специфичности добавляется 0,0,1,0
• Для каждого заданного в селекторе элемента(h1,strong,div) к специфичности добавляется 0,0,0,1

Пример расчета специфичности:

h1 {color:red}  /*специфичность — 0,0,0,1*/

p em {color:#000}  /*специфичность — 0,0,0,2 */

.color {color:#fff} /*специфичность — 0,0,1,0*/

p.bright em.dark {color:#ff0000}  /*специфичность — 0,0,2,2*/

#color {color:#333}  /*специфичность — 0,1,0,0*/

em#color {color:#666}  /*специфичность — 0,1,0,1*/

Кроме специфичности для параметров стилей есть еще дополнительный атрибут !important. Этот атрибут делает указанный параметр(не селектор) высшее чем аналогичный параметр в селекторе который имеет более высокую специфичность. Атрибут !important записывается через пробел до закрывающего знака «;».

h1#someID /*специфичность — 0,1,0,1*/{
color:green;
text-decoration: line-through;
}

h1  /* специфичность — 0,0,0,1*/{
color:red !important;
text-decoration:underline;
}

В результате тексту который будет находиться в элементе <h1 id=”someID”> будет присвоен красный цвет несмотря на то, что специфичность первого селектора выше, но начертание текста будет зачеркнутым, так как !important относится только к параметру color. Но если !important присвоено двум одинаковым параметрам, верх берет тот, специфичность селектора которого выше.

Источник — «CSS — каскадные таблицы стилей. Подробное руководство.» Э.Мейер

Метод «Раздвижных дверей»( Sliding Doors) придумал Douglas Bowman и был опубликован на A List Apart 20 октября 2003 года.

Главное назначение метода – создание резиновых блоков, которые имеют стилизированные края. Например, нужно сделать кнопочку такого вида (см. рис), можно вырезать плашку под кнопочкой и в нее добавлять текст, но нужно, чтоб кнопочка была универсальной, чтоб в нее можно было вставлять текст любой и задняя плашка от этого растягивалась. Это и помогает сделать метод раздвижных дверей (Sliding Doors).

Суть метода состоит в том, что создается блок, которому присваивается правый фоновый рисунок, который будет всегда справа, а внутрь него помещается другой блок, у которого фоновый рисунок будет всегда слева. Таким образом, при увеличении содержимого блока его боковые рисунки разъезжаются по краям. Тонкость состоит при возникновении ситуации, с неоднородным фоном. Тогда можно правый рисунок сделать максимально-допустимой ширины, или сделать еще один блок, в котором фоновый рисунок центральной части будет повторятся.

<ul>
   <li class="”menu”"><a>Статьи</a></li>
</ul>

.menu {
	display:block;
	float:left;
	height:39px;
	margin-right:10px;
	background:url(rightdoor.png) no-repeat top right;
	}
	.menu a {
	display:block;
	height:39px;
	color:#fff;
	text-decoration:none;
	font:11px Tahoma;
	text-transform:uppercase;
	line-height:33px;
	padding:0 10px;
	background:url(leftdoor.png) no-repeat top left;
	}

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

Есть еще одна вариация этого метода. Она состоит в абсолютном позиционировании. То есть родительскому элементу, который содержит контент, присваивается относительное позиционирование (position:relative) и в нем абсолютно, по углам, позиционируются боковые элементы.

Пример раздвижных дверей

Метод FIR (Fahrner Image Replacement)

Этот метод, придуманный Тоддом Фарнером, является довольно простым и оригинальным. Этот метод является наиболее популярным. Концепция метода состоит в том, что текст внутри блока берется в оболочку, которой присваивается display:none;

<h1>
	<span>Метод замены текста изображением  FIR</span>
</h1>

h1 {
width:150px;
height:150px;
background:url(images.gif) no-repeat;
}

h1 span {
display:none;
}

Недостаток метода в том, что при отключенной графике этот способ замены текста картинкой не отображает текст, который должен быть под картинкой. Таким образом, он подходит больше для поисковой оптимизации, когда необходимо продублировать текст на картинке.

Метод Phark

Майк Рандл разработал метод замены текста картинкой, в котором нет необходимости добавлять несемантические элементы. Метод Phark работает таким образом, что текст в блоке выкидывается за грани окна браузера путем присваивания тексту большого отрицательного отступа text-indent.

<h1>
	Метод замены текста изображением  Phark
</h1>

h1 {
width:150px;
height:150px;
text-indent:-5000px;
background:url(images.gif) no-repeat;
}

Так же как и предыдущий способ размещения текста под картинкой, этот не позволяет отображать текст под картинкой при отключении графики. Еще один недостаток метода в том, что браузер FireFox во время клика по ссылке выделяет ее и ссылка у которой стотит этот IR имеет рамку ширина которой выходит за грани браузера. Но эту проблему можно решить через свойство outline, подробней в заметке Три полезные мелочи для верстки.

Метод замены текста картинкой MIR

Метод похожий на Phark, только имеет чуть другу структуру.

<h1>
	Метод замены текста изображением  MIR
</h1>

h1 {
letter-spacing :-1000em;
width:200px;
height:80px;
background:url(images.gif) no-repeat;
}

Метод Leahy/Langridge.

Метод состоит в «Выпихивании» текста верхним внутренним отступом за грани блока.

<h1>
	Метод замены текста изображением  Leahy/Langridge
</h1>

h1{
padding: 80px 0 0 0;
overflow: hidden;
Background:url(images.gif) no-repeat;
height: 0px !important;
}

Метод Гилдера-Левина (Pixy)

Этот трюк замены текста картинкой, созданный Томом Гилдером и Александром Левиым, возможно, самый удобный метод. Он позволяет отобрать текст под картинкой с отключенной графики. Единственный его недостаток в том, что добавляется несемантические элементы. Суть метода состоит в том что в блоке фиксированных размеров, в котором находится текст помещается конструкция которая имеет абсолютное позиционирование и фон, таким образом перекрывает текст.

<h1>
	Метод замены текста изображением  Pixy<span></span>
</h1>

h1 {
position:relative;
width:150px;
height:150px;
text-indent:-5000px;
}
h2 span {
position:absolute;
width:100%;
height:100%;
background:url(images.gif) no-repeat;
}

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

cel-spacing задает отступ между самими ячейками таблицы, то есть расстояние от края одной ячейки до края другой ячейки. cellspacing задает отступ внутри ячейки, то есть от края ячейки до ее содержимого. Зная это легко подобрать эквиваленты в CSS. Таким образом, вместо того, чтоб задавать:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td>Содержимое ячейки</td>
  </tr>
</table>

Нужно прописать стиль таблице:

#tableId {
   border:0;
   padding:0;
   border-collapse:collapse;
}
#tableId td {
   padding:0;
}

В коде выше видно параметр border-collapse. Одно из свойств таблицы состоит в том, что параметр border, в виде атрибута тега, задает рамку не только внешней части таблицы, но и всем ячейкам. Таким образом, две ячейки подряд находятся на интервале равном двойной ширине рамки (рамка одной ячейки и потом рамка другой ячейки), чтоб этого избежать применяется этот параметр. Он указывает на то, что рамки боковых ячеек сливаются в одну рамку, таким образом, избавляются от двойного отступа. Это нехитрое свойство часто является причиной возникновение непонятных отступов в таблице при обнулении всех параметров таблицы.

Нюансом также является то, что параметр Cellspacing задает отступы между ячейками, то есть если задать ячейке border и использовать этот параметр, то между ними появится отступ равный величине этого параметра. Для того что добиться этого эффекта необходимо к таблице (НЕ ячейке) применить css параметр border-spacing:10px;, который к сожалению не кроссбраузерный, как обычно подвел Internet Explorer.

Не стоит забывать, что некоторые атрибуты таблиц уже являются не рекомендуемыми deprecated согласно стандартам. Подробней можно прочитать в заметке Не рекомендуемые (deprecated) теги

Мне известны два адекватных способа его решения. Первый – самый логический это не использовать марджин у плавающих блоков, но это крайность. Второй адекватно действующий – присвоить блоку с margin свойство – display:inline. После этого проблема с отступом исчезнет.

Можно пойти еще дальше и использовать условные комментарии (подробней об условных комментариях можно прочитать в заметке – Условные комментарии для IE), или хаки (подробней о хаках можно прочитать в заметке Хаки – краткий путь к кроссбраузерности?) для того чтоб это присвоение было воспринято только в IE6.

Таблица взята с ресурса css-class.com

Таблица величин параметров

Если задать цвет списка, или размер самому элементу li, то оно будет относиться и для содержимого всего элемента. Посему единственный выход, который я нашел, это внутрь списка поместить span, или другой элемент, которому задать стилизрование текста.

Нюанс состоит в том, что при стилизации нумерованного списка содержимое списка должно быть блочным элементом (подробней о том какие элементы блочные можно прочитать в заметке «Строчные – inline и блочные – block-level элементы«), иначе возникнет нежелательный отступ у последней строки текста в списке. Это можно увидеть на примере.

Пример стилизации списка

Если кто-то знает другой, более изящный вариант, буду признателен за подсказку!

Единицы измерения при значении параметра 0

При присвоении значения 0 какому-либо параметру писать величину измерения после 0 необязательно. Например, нет необходимости писать margin:0px; если можно написать margin:0;

Margin & Padding

Всем известно, что значении margin:10px; создаст отступ в 10px со всех сторон блока. Но этот свойство может иметь и следующее написание “margin:10px 5px;” “ margin:10px 5px 7px;” “margin:10px 5px 7px 3px;”. На чем основано такое написание. Если после свойства стоит 1 значение оно будет применено ко всем сторонам, если 2 первое будет относиться к верхней и нижней стороне, а второе к левой и правой. Если параметров 3 то первое значение будет относиться к верхней стороне, второе к левой и правой стороне, а третье к нижней стороне. Если параметров 4 то первое значение относиться к верхней стороне, второе к правой стороне, третье к нижней стороне, четвертое к левой стороне, то есть параметры присваиваются к сторонам идя по часовой стрелке начиная с верха . Аналогично можно писать и свойство padding. Таким образом, можно сэкономить на написании margin-top,margin-right,margin-bottom,margin-left.

#someSyle {
    margin:10px;
    margin:10px 5px;
    margin:10px 5px 3px;
    margin:10px 5px 3px 2px;
}

Border

Сокращенное написание параметра – border:5px solid #000. Где первый параметр свойства толщина рамки, второй тип рамки и третий цвет рамки. Стоит отметить ,что к этому свойству НЕ применимо предыдущее свойство. То есть, сожалению нельзя написать border:5px 2px 3px 4px solid #000. Но предыдущее свойство применимо к параметру border-width. Таким образом можно написать border: solid #000; border-width: 5px 2px 3px 4px; Если рамка одинаковго цвета и типа но разной ширины. Если каждая сторона разной ширины, цвета, и типа то единственный выход – писать – border-top:5px solid #0D5; border-right:3px dotted #FFD; border-bottom:4px dotted #EF7; border-right:2px dotted #C4D;

#someSyle{
    border:5px solid #000;
    border-right:6px solid #4FD;
    border-width:10px 5px 3px 6px;}

Background

Сокращенное написание – background:#CCC url(images/bg.gif) no-repeat 3px 5px;. Где первый параметр цвет фона, второй параметр – фоновый рисунок, третий – как повторяется фон(repeat,no-repeat,repeat-x,repeat-y), четвертый – позиция фона первое число –позиция относительно левого края блока, второй – верхнего края.

#someSyle{
    background:#CCC url(images/bg.gif) no-repeat 3px 5px;
}

Font

Сокращенное написание – font:italic bold 12px/24px Verdana, Arial, Helvetica; Обязательным является параметр, который указывает на название шрифта. Шрифты можно писать через запятую. Если первого указанного шрифта нет на компьютере пользователя, будет использоваться второй шрифт.Очередность параметров должна быть такой как в примере иначе не будет работать и необходимо присутствие как минимум двух параметров. Параметр который идет после / задает line-height для текста.

#someSyle{
    font:italic bold 12px/24px Verdana, Arial, Helvetica;
}

List

Сокращенный вид – list-style:square inside; Таким образом в одном свойстве можно комбинировать два параметра.

#someSyle{
    list-style:square inside;
}

Color

Цвета можно задавать названием цвета(red,green,gray). Но более рационально записывать цвета в шестнадцатеричном коде, то есть цвет вида #ffffff – white, #000000 – black. Таким образом, цвет задается в формате RBG(Red Blue Green) и можно сокращать коды цветов до вида #fff, #000

#someSyle{
    color:#000;
    background:#fff;
}

Резюме

Сокращения в каскадных таблицах стилей – инструмент которым незаслуженно пренебрегают. Не используя эти методы вы сами у себя воруете силы и время на формирования кода

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

Вариант 1 (align=”center”)

Суть метода в том, что родительскому блоку (тому, в котором нужно выровнять блок по центру) присваивается атрибут align=”center”. Этот атрибут указывает на то, что все содержимое блока должно быть выровнено по центру. Результат метода удовлетворяет ожидания. Недостатком является то что все содержимое всех внутренних блоков также будет выровнено по центру, тоесть прийдеться внутренним элементам переопределять выравнивание. Другим недостатком является то, что атрибут align недопустим при строгой(Strict) разметке (подробней о типах разметки можно прочитать в заметке «Сага о doctype») что приведет к не прохождению валидации.

Вариант 2 (margin: 0 auto;)

Этот метод метода выравнивания div по центру является более эффективным, чем предыдущий. Метод основан на том, что блоку, который нужно выровнять по центру применяется css-свойство margin:0 auto;. Метод основан на сокращенно представлении свойства (подробней читай в заметке «Сокращения при написании CSS»). Таким образом, если необходимо будет еще добавить только отступ сверху необходимо изменить на margin:10px auto 0; или на margin:10px auto; если отступ нужен сверху и снизу.

Вариант 3 (позиционирование и отрицательный отступ)

Для того чтоб выровнять блок по центру можно еще воспользоваться этим способом выравнивания блока по центру. Он заключается в том, что блок позиционируется в родительском элементе и потом сдвигается влево на 50%, но таким образом элемент будет размещен не совсем по центру и для того чтоб это изменить блоку присваивается отрицательный левый отступ равный половине ширины блока чтоб четко выровнять его по центру. Главное в этом методе не забыть присвоить блоку позиционирование.

.example3 {
    position:relative;
    left:50%;
    margin-left:-100px;
    width:200px;
    background:#FF6666;
    border:1px solid #FF0000;
}

Вариант 4 (Процентное соотношение)

Если блок, который нужно разместить по центру, имеет ширину в процентах можно воспользоваться этим легким способом выравнивания блока по центру. Метод заключается в том, что блоку применяются боковые отступы равные половине ширины, оставшиеся от 100% после отнятии ширины блока. Скажем, если есть блок шириной 40%, то боковые отступы нужно сделать по 30% и тогда блок будет сцентрированный.

Резюме

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

Реализация методов