Четверг, 24 Мая 2012 13:29

Базовая стилизация текста

Written by 
Оцени эту запись
(0 Голоса)

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

 

 

 

Основные типы данных на странице - это абзацы, ссылки, списки, таблицы, заголовки. Также могут быть особенные блоки с текстом - определения, блоки с важной информацией и т.д. Если в каком-то месте нужны нестандартные стили, это можно будет сделать непосредственно в коде статьи. Но важно залать стандарты, чтобы на красном сайте не появились синие ссылки или чтобы у списков в статьях не отображались маркеры и отсутсвовали отступы (это обычно убирается в reset.css).

 

На любой странице, куда должен выводиться текст с админки, есть определенный блок, в который нужный текст выводится. Задаем ему определенный класс - content, text, page или как-то еще. И для этого класса задаем стили.

 

Стилизация абзацей

Для абзаца нужно определить выравнивание текста text-align - право, лево, центр или на всю ширину(justify).

Следующий пункт - это сама величина абзаца, то есть не размер <p>, а отступ слева первой строки. Он задается свойством text-indent.

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

Вспомним еще одни отступы - расстояние между абзацами. Можно задать каждому абзацу нижний отступ margin-bottom:10px или даже margin-bottom:20px, тогда пользователю будет удобнее вести взглядом по тексту.

 

Стилизация ссылки

Ссылкам нужно задавать такие стили:

  • цвет ссылки - a {color: #000}
  • подчеркивание (есть или нету) - text-decoration: underline (none)
  • цвет ссылки при наведении - a:hover {color: #222;}
  • цвет посещенной ссылки a:visited {color: #555;}

 

Главное, чтобы было интуитивно понятно где текст, а где ссылка.

 

Списки

Спискам нужно задать тип маркера ul {list-style-type: square(disc, circle)}. При желании можно маркер задавать в виде картинок, они могут меняться при наведении и т.д. Это уже по дизайну. Я говорю о необходимом минимуме. 

Часто списки бывают вложенными: пункт 1, пункт 2, пункт 2.1, пункт 2.2, пункт 3 и т. д. Для таких случаев можно/ нужно задавать разные маркеры - внешнему квадратик, внутреннему диск.

Для выделения списка в тексте, нужно задавать отступ слева. И, опять таки,  внутреннему списку нужно задать больший отступ:

ul {margin-left: 20px;}

ul li ul {margin-left: 40px;}

При желании можно задать межстрочный интервал и небольшой отступ снизу для каждого пункта списка - ul li {margin-bottom: 3px}

 

Таблицы

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

Например,

 

table {width: 100%; margin: 20px 0; border: 0px;}

table tr td {padding: 2px 5px; border: 1px solid #ccc; text-align: left; vertical-align: middle;}

 

Обратите внимание, что если задать <table style="border: 1px solid #ccc">, то рамочка будет только вокруг таблички. Она не будет прорисовываться вокруг ячеек. При этом, если такую же рамочку задать ячейке, то между ячейками будет рамочка в 2px. А на дизайне обычно рисуют рамку в один пиксель. Для того, чтобы реализовать это стилями, можно задать таблие границу слева и сверху, а ячейкам снизу и справа. Тогда вся рамка будет равномерной:

 

table {border-left: 1px solid #ccc; border-top: 1px solid #ccc;}

table tr td {border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}

 

Строке нельзя задать рамку. Если хотите, чтобы границы были только внизу ячеек, нужно границу задавать ячейкам, а не строкам:

table tr td {border-bottom: 1px solid #ccc;}

У таблицы есть отдельный тег для заголовка таблицы. Можно, например, верхнюю строку с обозначениями колонок прописать в <th>:

 

<table>

<tr><th>Колонка 1</th><th>Колонка 2</th></tr>

... 

 

И для тега <th> задать свой стиль, например, другой размер и цвет текста. Кстати, по умолчанию, у этого тега текст задан жирным.

 

Заголовки

Думаю, все знают, что html предполагает шесть типов заголовков h1-h6. Где h1 - самый главный. На странице должен бять только один главный заголовок. Заголовком второго уровня может быть 2 штуки и т.д. Если мы имеем дело со страницей статьи (материала), то название статьи нужно взять в заголовок h1. Но часто он используется в основной стилизации, например, в названии сайта. Это нужно учитывать.

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

При желании, у заголовков можно убрать жирность h1 {font-weight: normal;}. У заголовков есть отступ, он обычно достаточно большой. Но его часто убирают в reset.css или просто вначале файла стилей. Это нужно для кроссбраузерности. В любом случае, лучше задать для заголовков в тексте свои отступы, чтобы точно знать как они будут отображаться на странице.

 

 

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов