Источник: http://spectator.ru/
У меня довольно часто воруют CSS. (Эй, кто только что сказал «А ведь это идея!»?). На том основании, что он «хорошо сделан». Основание, бесспорно, хорошее, но, увы, не убедительное. Нужно учиться самому хорошо делать.
Далее я попытаюсь просуммировать опыт и создать чеклист на тему «какие элементы надо не забыть прописать в CSS, чтобы потом не было мучительно больно».
Просто следуя по этому списку, можно легко и быстро создать 100%
текстовый дизайн.
Итак, поехали. Дано: нужно сделать страницу, на которой текстовый
контент будет смотреться
1) Цвет фона и цвет шрифта. Конечно, они могут варироваться, но базовых цвета должно быть два: это цвет страницы «вообще» и цвет шрифта «вообще». Я рекомендую оригинальное сочетания черных букв и белого фона. Даже если вы решили выбрать белый фон, не забудьте прописать его в body. Многие забывают.
2) Основной текст. Базовый шрифт, которым все будет написано. Не забудьте его же прописать в td и в body. Я обычно прописываю шрифт, размер, цвет и расстояние между строками (которое я обычно чуть увеличиваю — там лучше смотрится). Базовый принцип: не навреди. Расстояние между буквами, например, менять, скорей всего, не стоит.
3) Ссылки. Посещенные и непосещенные ссылки обязательно должны отличаться цветами. Основное требование к ссылкам: они должны быть явно обозначены и не вызывать проблем с их поиском.
3.5) Служебные ссылки (ссылки навигации). Эти ссылки могут отличаться от основных. При этом, так как навигация используется очень часто, различать посещенные и непосещенные ссылки не имеет особого смысла.
4) Заголовки. Не надо плодить дополнительных div’ов, пропишите для заголовков стили для h1, h2 и так далее. Залоговки в таком случае можно просто давать в виде <h1>заголовок</h1>. Заголовки лучше набирать рубленым шрифтом, — это классические пожелания. Мне пока больше 3х типов заголовков (h1, h2, h3) ни разу не понадобилось.
5) Цитаты. Для цитат есть замечательный тэг blockquote. Достаточно просто прописать ему стиль и давать цитаты вот так:
<blockquote>Вот это цитата</blockquote>
А в CSS прописано вот что:
blockquote {margin-left: 80px; margin-right: 0px; text-align:
justify; color: #aa4000}
6) Мелкий текст. Нужен для всяких вспомогательных надписей,
сносок* (* — батарейки
и
7) Выделение. Сам я ни разу это не использовал, но вам
советую. И для выделения есть тэги. Помимо b,i,u, — хотя
и на них можно нацепить стили. (Кстати, пошутить бы над
Итого. Не надо плодить div’ы, когда всякие полезные элементы уже есть в html’е, и осталось просто повесить на них стили в CSS. Не надо вообще плодить лишних сущностей.
А то достали уже, сущности лишние эти.
Плюсы такого подхода: компактный и понятный
Смотри так же: спецификация
html’я, а вот мой
CSS — совсем не идеальный. Но