2010-12-01

Семантический CSS

howto, вебмастеринг, css

Если вы когда либо занимались HTML версткой, то вам наверняка доводилось  слышать от клиентов фразы типа: "сделай эту надпись больше", "этот заголовок должен быть красным",  все синие заголовки сделать светлее" и т. п...
Подобные задачи наиболее часто приходится решать HTML верстальщику при работе с текстом. Само собой разумеется, все эти задачи должны рещаться использованием стилей — хороший верстальщик будет использовать внешние стили прописанные в CSS файле, плохой - нагородит кучу inline стилей.

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

Кстати, в Microsoft Word, почему-то, используется прямо противоположный подход — там проще изменить атрибуты самого текста, чем стиля на котором этот текст основан. С каждой новой версией панель инструментов в этой программе увеличивается и увеличивается, вынуждая разработчиков придумывать все новые способы, чтобы уместить на экране все больше и больше кнопочек форматирования. Они даже изобрели новый вид меню, которое назвали "Меда-Лента" (правильно да?). Но с введением нового интерфейса дело еще более ухудшилось. Поэтому, редактирование документов в этом редакторе частенько вызывает приступ острой зубной боли у людей которым довелось поработать в профессиональных программах.

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

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

На деле, для форматирования текстов нужно совсем немного стилей:

- стили для заголовков h1, h2, h3, h4
- стили для тегов форматирования: b, i, em
- стили для выделения теста цветом: .red, .blue, .gray, .green
- стили для эффектов форматирования: .bold, .italic, .higlight
- стили для выделения размером: .small, .big, .bigger, .smaller
- вспомогательные стили для форматирования: .left, .right, .center, .middle

Речь идет именно о стилях форматирования, стили текста по умолчанию для элеметов body table ul td и других я в этом посте не рассматриваю.
 
В принципе, этого набора стилей хватает чтобы получить большое количество различных текстовых стилей. Остальные эффекты можно получить комбинируя эти стили между собой.

Допустим, нам нужно сделать слово в тексте красным и полужирным:

Это <b class="red">слово</b> будет полужирным.

Или нам потребовался нестандартный заголовок H2 выровненный по правому краю и зеленого цвета:

<h2 class="right green">Заголовок H2</h2>

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

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

 

комментарии:

 
RSS комментариев

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

Имя*

разрешены только теги br, font, span, p, strong, u, p, blockquote, a, div, img - остальные будут безжалостно удаляться

разное (187)
howto (124)
программирование (108)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (28)
гондураша (28)
юмор (25)
полезное (21)
Android (17)
движок (17)
софт (15)
деньги (14)
кино (14)
видео (13)
музыка (10)
интернет (10)
путешествия (10)
беспредел (10)
diy (9)
книги (9)
занимательная физика (8)
ztools (8)
умный дом (8)
языки (7)
хостинг (7)
Nokia 5800 (7)
css (6)
вебдизайн (6)
lifehack (6)
связной (5)
apple (5)
oDesk (5)
arduino (5)
козлы (5)
прелоадер (5)
svn (4)
движек (4)
кухня (4)
Python (4)
аниме (4)
занимательная юриспруденция (4)
рестораны (3)
software (3)
энергия (3)
synphony (3)
webmastering (2)
Java (2)
Берлин (2)
Ruby on Rails (2)
фото на документы (2)
гитара (2)
bash (2)
спорт (2)
восстановить (1)
дурдом (1)
авторское право (1)
SEO (1)
сайты (1)
наука (1)
годнурас (1)
C++ (1)
технологии (1)
programming (1)
микросервисы (1)
Поиск по блогу:

Valid XHTML 1.0 Strict