Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Как повысить находимость сайта?

Основы кодирования

Основные конструкции CSS

Замечания о кодировании CSS

Виды селекторов CSS

Преимущества и недостатки CSS

 
Разработка сайтов под ключ

Ссылки по теме

CSS Blast галерея css-сайтов и проектов Web 2.0

XHTML, CSS, JavaScript, DOM. Советы, секреты, хитрости и тонкости

CSS, HTML в примерах и статьях

Учебники HTML и CSS

HTML справочник

Справочники HTML и CSS

Основные ошибки юзабилити

Для тех, кто делает сайты!

Справочник по CSS

CoffeeCup - HTML редактор

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

CSE HTML Validator Lite — редактор-анализатор (валидатор)

W3C - стандарты HTML

W3C - стандарты CSS

Справочная информация

Lynx Viewer

 

Свойства блоков текста

Главная « CSS - каскадные таблицы стилей « Свойства блоков текста

версия для печати

Свойства CSS для применения к блокам текста…

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

 

Выравнивание (выключка): text-align…

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


внимание!

text-align — выключка (выравнивание) текста в блоке.

Использование:

  • text-align: значение;

(значение — одно из следующих: left, right, center, justify)

Для выключки текста в блоке применяется свойство text-align, которое может иметь одно из следующих значений:

  1. left — в левый край;

  2. right — в правый край;

  3. center — в красную строку (по центру);

  4. justify — по формату (по ширине).


внимание!

По умолчанию большинство браузеров отображают текстовые блоки с выключкой в левый край, поэтому значение text-align: left; практически никогда не требуется указывать.

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

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

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

Для Сети также плохо подходит выравнивание основного текста по ширине. Здесь отличия от печатных изданий таковы:

  • в печатных изданиях набор «подгоняется» под заданную ширину полосы. А в Сети ширина, которую займет текстовый блок на экране, зависит от конечного пользователя и может варьироваться в самых широких пределах;

  • в печатных изданиях контролируется ширина междусловных пробелов. По правилам отечественной типографики отимальная ширина пробела составляет ½ кегельной (т. е. 0.5еm) и может изменяться в пределах от ¼ до ¾ кегельной. Кроме того, верстальщик следит за тем, чтобы междусловные пробелы в соседних строках не сильно отличались друг от друга. А при отображении текста на веб-странице браузер не будет отслеживать этих тонкостей, в результате чего многие строки получаются чрезмерно разреженными и образуется существенная разница в ширине пробелов в соседних строках. Из-за этого текст становится неудобочитаемым и некрасиво смотрится;

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

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

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


внимание!

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

Выравнивание по центру иногда подходит для заголовков, но никогда — для основного текста.

 

Абзацный отступ: text-indent…


внимание!

text-indent — величина абзацного отступа.

Использование:

  • text-indent: Xеm;

  • text-indent: X%;

Абзацный отступ употребляется в крупных текстах — например, в длинных статьях или литературных произведениях. Отступ обычно неуместен в тексте объемом менее 3 абзацев, особенно если эти абзацы короткие. Чтобы сделать абзацный отступ, применяется свойство text-indent.

Оптимальная величина абзацного отступа — от 1em до 2еm. Для обычного текста его рекомендуется устанавливать равным 1.5еm.

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

Но применять одновременно такой «зарубежный» стиль и отечественный абзацный отступ не рекомендуется. Оформляйте абзацы либо с помощью отступа, либо с помощью увеличенного интервала, но не тем и другим способом одновременно.

 

Обработка пробельных символов: white-space…


внимание!

white-space — режим отображения пробельных символов.

Использование:

  • white-space: pre;

  • white-space: nowrap;

Напомним, что к пробельным символам в XHTML относятся пробел, табуляция, возврат каретки (CR) и перевод строки (LF). Если в тексте какого-либо элемента присутствуют несколько любых пробельных символов подряд (одинаковых или разных), браузеры по умолчанию отображают всю эту последовательность как один пробел.

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

CSS также предоставляет средство для контроля над пробельными символами — свойство white-space. Оно может иметь следующие значения:

  • pre — пробельные символы в тексте обрабатываются так же, как в элементе pre. Но, в отличие от элемента pre, текст при этом автоматически не выделяется моноширинным шрифтом;

  • nowrap — пробельные символы, как в обычном режиме, «сжимаются» в один пробел, но при этом внутри текстового блока не происходит переводов строк. Если текст слишком длинный, он уходит за границу экрана, но не разбивается на строки.

 

Рамки: border и другие свойства…

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

Чтобы задать стиль для рамки с какой-то одной стороны, нужно использовать свойства CSS:

  • border-top-style — сверху;

  • border-bottom-style — снизу;

  • border-left-style — слева;

  • border-right-style — справа.

Чтобы задать толщину рамки, используются следующие свойства:

  • border-top-width — сверху;

  • border-bottom-width — снизу;

  • border-left-width — слева;

  • border-right-width — справа.

Чтобы рамка с какой-то стороны блочного элемента действительно появилась, для нее надо задать и стиль, и толщину.


внимание!

Обратите внимание, что минимально допустимая толщина рамки зависит от ее стиля. Например, для обычной сплошной рамки (solid) минимальная толщина составляет 1рх. А для двойной рамки (double) требуется как минимум 3рх: хотя бы по одному пикселу на каждую линию и хотя бы один пиксел между ними. Если задать для двойной рамки ширину 1рх или 2рх — появится обычная сплошная рамка.

Браузеры по-разному поддерживают различные стили рамок. Многие браузеры (включая Internet Explorer 5) не поддерживают стилей dotted и dashed, более современные версии поддерживают, но отображают немного по-разному, не всегда красиво и аккуратно.

Прежде чем задавать какой-либо стиль рамки, отличный от solid и double, тщательно проверьте результат в различных браузерах.

Чтобы задать цвет рамки, используются следующие свойства:

  • border-top-color — сверху;

  • border-bottom-color — снизу;

  • border-left-color — слева;

  • border-right-color — справа.

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

  • border-top — сверху;

  • border-bottom — снизу;

  • border-left — слева;

  • border-right — справа.

 

Поля и отступы: margin и padding…

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

Расстояние от содержания текстового блока до рамки и от текстового блока до соседних блоков можно регулировать, изменяя свойства margin и padding для этого блока.

Можно установить разные размеры полей и отступов с разных сторон. Для отступов (расстояния от содержания блока до окружающей его рамки) применяются следующие свойства:

  • padding-top — сверху;

  • padding-bottom — снизу;

  • padding-left — слева;

  • padding-right — Справа.

Для полей (расстояние от рамки до соседних блоков) применяются следующие свойства:

  • margin-top — сверху;

  • margin-bottom — снизу;

  • margin-left — слева;

  • margin-right — справа.


внимание!

Горизонтальные поля и отступы (слева и справа) рекомендуется задавать в em или в процентах. Проценты при этом отсчитываются от ширины внешнего блока. Так, если элемент h1 находится непосредственно внутри элемента body, то margin-left: 5%; для h1 будет означать отступ величной 5 % от ширины всей страницы. Вертикальные поля и отступы (сверху и снизу) рекомендуется задавать только в em. В исключительных случаях можно указывать поля и отступы в пикселах (рх).

Поля и отступы могут быть отрицательными, например: margin-left: -2.5em;. Это позволяет совмещать блоки и накладывать их друг на друга. Такой возможностью, как и указанием полей и отступов в пикселах, следует пользоваться очень осторожно, убедившись, что это не вызывает проблем с просмотром страницы в разных браузерах под разными операционными системами, с разным разрешением экрана и разной шириной окна браузера.

 

Ширина блока: width…


внимание!

width — ширина блока.

Использование:

  • width: X%;

По умолчанию любой блочный элемент занимает всю доступную ему ширину. Если бы не было средств преодолеть это свойство, то было бы невозможно расположить два или несколько блоков рядом друг с другом. Чтобы узнать, как разместить блоки рядом и добиться других эффектов относительного расположения, обратитесь к официальной документации Консорциума W3C и к книгам по CSS. Тем не менее, считаю полезным упомянуть об употреблении свойства width. Это свойство позволяет задавать конкретную ширину блока.


внимание!

В CSS также есть свойство height (высота блока), но употреблять его обычно не следует. Очевидно, если для блока задано свойство width, то высота этого блока однозначно определяется его содержанием. Если задать высоту блока «насильственно», она будет конфликтовать с высотой, рассчитанной по содержанию. Один из редчайших случаев, когда высоту требуется указывать, — это ситуация, когда в блочный элемент заключено растровое изображение или другой объект, имеющий собственные жестко определенные размеры.

 

Оформление таблиц…

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

border-collapse — режим отображения рамок вокруг ячеек таблицы Использование:

  • border-collapse: collapse; — рамки соседних ячеек сливаются;

  • border-collapse: separate; — рамки соседних ячеек разделены.

При оформлении таблиц следует учитывать ряд типографских правил:

  1. таблицы обычно набираются шрифтом меньшего кегля, чем основной текст. Рекомендуемый размер шрифта — от 0.8еm до 0.9еm;

  2. заголовки граф таблицы обычно набираются полужирным шрифтом и выравниваются по центру;

  3. если в ячейке таблицы находится текст, точка после него не ставится (так же, как в заголовках и других подобных надписях);

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

 

Оформление перечней…


внимание!

list-style-type — тип маркера перечня.

Использование:

  • list-style-type: тип;


внимание!

list-style-position — положение маркера перечня.

Использование:

  • list-style-position: outside; — снаружи

  • list-style-position: inside; — внутри

CSS позволяет управлять внешним видом маркеров перечня. Для этого существует свойство list-style-type, которое применяется к элементам li и может принимать следующие значения:

  1. disc;

  2. circle;

  3. square;

  4. decimal;

  5. lower-roman;

  6. upper-roman;

  7. lower-latin;

  8. upper-latin;

  9. none;

Расположение маркера относительно перечня можно регулировать с помощью свойства list-styie-position, которое также задается для элемента н и может иметь следующие значения:

  1. outside (по умолчанию) - мapкер расположен снаружи от перечня;

  2. inside - маркер расположен в первой строке перечня;


внимание!

К сожалению, CSS не позволяет маркировать перечни буквами русского алфавита. Также современные браузеры еще не поддерживают свойства CSS, позволяющие организовать более гибкую нумерацию — например, начинать нумерацию пунктов перечня с произвольного числа или создавать вложенные нумерованные перечни с многоуровневой нумерацией (т. е. «1», «1.1», «1.1.1» и т. д.).

 
Запомнить эту страницу в google.com Запомнить эту страницу в bobrdobr.ru Запомнить эту страницу в news2.ru Запомнить эту страницу в Memori.ru Добавить в МоёМесто.ru сохранить на RUmarkz Добавить страницу к Мистеру Вонгу Запомнить эту страницу в del.icio.us Запомнить эту страницу в technorati.com Запомнить эту страницу в linkstore.ru Добавить на Ваау!
Valid XHTML 1.0! Valid CSS!
Как повысить находимость сайта?

Свойства CSS

Свойства шрифта

Теги DIV и SPAN

 
Заголовки разделов текущей страницы…

Оглавление

Выравнивание (выключка)…

Абзацный отступ…

Обработка пробельных символов…

Рамки…

Поля и отступы…

Ширина блока…

Оформление таблиц…

Оформление перечней…

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov