ZODIOS.net

Некоторые полезности от Мейера

12.14.2008  –  Рубрика: HTML&CSS

Не так давно прочитал одну очень полезную и интересную книгу по верстке, которая называется «CSS — Каскадные таблицы стилей. Подробное руководство» Э. Мейер. Книгу стоит отнести в раздел «must read» для любого человека, который занимается версткой. Единственное о чем пожалел после ее прочтения, что мне раньше не посоветовали прочитать эту «библию верстальщика».

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

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

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

Ни для кого не секрет информация о существовании тега 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, также допускается значение заданное в процентах.

Tags: CSS, HTML