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

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

 

Советую прочитать!

Шрифты Все о работе с ЦВЕТОМ в WEB

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

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

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

Свойства CSS для произвольного участка текста…

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

 

Цвет: color и background-color…

С помощью CSS можно придать определенный цвет тексту и фону под ним, используя для этого свойства color и background-color.


внимание!

color — цвет текста
background-color — цвет фона

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

  • color: #xxxxxx;

  • background-color: #хxxххх;

Значения цветов лучше всего указывать в стандартной шестнадцатертной модели RGB (Red-Green-Blue).

#хххххх - здесь вместо каждого символа х должна стоять шестнадцатеричная цифра (от 0 до f). Первые две цифры отвечают за красную (red) составляющую цвета, вторые — за зеленую (green), третьи — за синюю (blue). Чем больше число в каждой из трех позиций, тем ярче эта составляющая в данном цвете. Зная это, можно строить многие цвета «из головы». Например, код #000000 означает, что яркость каждой составляющей равна 0 — следовательно, это черный цвет. Соответственно, белый цвет получается, если все составляющие будут максимальны: #ffffff.

Если взять максимальное значение красной составляющей и оставить 00 в двух остальных, получится ярко-красный цвет: #ff0000. Таким же образом можно получить ярко-синий и ярко-зеленый цвет. Смешивая основные цвета друг с другом, можно получить дополнительные цвета. Например, если смешать ярко-красный и ярко-синий, получится ярко-фиолетовый: #ff00ff.

Для цвета текста, фона и рамок рекомендуется использовать цвета из так называемой безопасной палитры (или веб-палитры, Web colors). Эти цвета характеризуются тем, что каждая из трех составляющих цвета может иметь только одно из следующих значений: 00, 33, 66, 99, cc, ff. Например, цвета #ccff66 и #000099 относятся к безопасной палитре, а цвета #808080 и #f3f3f3 — не относятся.

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

  • браузеры используют разные алгоритмы для преобразования кода в цвет, который пользователь видит на экране. Один и тот же код (если он не относится к безопасной палитре) может привести к немного разным оттенкам в разных браузерах;

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

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

В веб-палитру входит 216 цветов. Этого более чем достаточно: в самом деле, если на странице для текста, фона и рамок применяется больше 10 различных цветов — это чаще всего выглядит слишком пестро и некрасиво. Так что даже 10 цветов вам должно хватить, не говоря уж о 216.


внимание!

Некоторые начинающие разработчики хотят использовать тот или иной «небезопасный» цвет, объясняя это тем, что их художественный замысел требует именно этого цвета. Такой подход уместен в печатных изданиях, но если вы разрабатываете сайт, вы должны понимать, что разные мониторы будут отображать совершенно разные оттенки, и большинство пользователей все равно не увидят «тот самый» цвет. Во-первых, у разных мониторов разная «цветовая температура», во-вторых, пользователи по-разному настраивают яркость и контрастность мониторов, в-третьих, видимый цвет в немалой степени зависит от освещения, падающего на экран. Разница между цветами, которые видят при этом разные пользователи, обычно значительно больше, чем между «тем самым» цветом и ближайшим к нему оттенком из безопасной палитры. Поэтому всегда лучше выбирать цвета из безопасной палитры.

Для основного текста на сайте нельзя придумать ничего лучше, чем черный текст (#000000) на белом фоне (#ffffff). Это наиболее привычная и удобочитаемая цветовая гамма. С помощью CSS вы можете раскрасить текст в какой угодно цвет, но удобочитаемость текста от этого пострадает, и глаза пользователя будут быстрее уставать.

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


внимание!

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

В CSS существуют и другие способы указания цвета, среди которых:

  1. стандартное имя цвета, например: color: green; background-color: yellow. Этот способ устарел и не рекомендуется еще и потому, что большинство «стандартных» цветов не входят в безопасную палитру;

  2. сокращенный шестнадцатеричный код: например, вместо #33сс99 можно написать просто #3с9, а вместо #999999 — просто #999;

  3. десятичный код в модели RGB, например: color: rgb(255,0,0). Здесь в каждой позиции может находиться целое число от 0 до 255.

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

 

Гарнитура шрифта: font-family…


внимание!

font-family — гарнитура (вид) шрифта.

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

  • font-family: шрифт, стандартное семейство;

  • font-family: шрифт1, шрифт2, . . . , шрифтN, стандартное семейство;

Свойство font-family задает гарнитуру шрифта — то, что многие привыкли называть просто словом «шрифт».

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


внимание!

Когда лучше использовать шрифты с засечками, а когда — без засечек? Шрифты с засечками лучше всего подходят для основного текста страницы, шрифты без засечек — для заголовков и панелей ссылок. Засечки помогают направлять внимание читателя вдоль строки; шрифт без засечек обращает на себя больше внимания, но плохо подходит для долгого чтения. Впрочем, если шрифт имеет маленький размер (что допустимо в примечаниях и других небольших текстах вспомогательного характера) — то он также лучше воспринимается без засечек.

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


внимание!

Для оформления текста почти всегда следует использовать пропорциональные шрифты, так как они выглядят аккуратнее и читаются легче. Моноширинные шрифты допустимы только для создания каких-то особых эффектов оформления — например, в этой книге моноширинным шрифтом набраны фрагменты кода HTML и CSS.

Моноширинные шрифты когда-то использовались в пишущих машинках и телетайпах, а теперь их используют в основном программисты и кодировщики для набора и редактирования в своем текстовом редакторе исходных текстов программ, файлов HTML и CSS и других подобных данных.

Одинаковая ширина всех символов обеспечивает наглядность кода — особенно это касается горизонтальных отступов.

Разнообразие операционных систем и браузеров приводит к тому, что вы не всегда можете задать в CSS какой-то определенный шрифт. Например, на компьютерах под управлением операционной системы Linux часто не бывает шрифта Arial, а на компьютерах под управлением Windows редко встречается шрифт Helvetica. Поэтому в CSS определено несколько так называемых стандартных семейств шрифов. Вместо того чтобы указывать конкретный шрифт, можно указать одно из стандартных семейств. Браузер сам подберет доступный шрифт из этого семейства.

Наиболее употребительны три стандартных семейства шрифтов:

  • serif — пропорциональный шрифт с засечками. Шрифтом из этого семейства большинство графических браузеров по умолчанию отображают текст, для которого не задано никакой конкретной гарнитуры шрифта. В Windows самым распространенным шрифтом из этой группы является Times New Roman;

  • sans-serif — пропорциональный шрифт без засечек. В Windows самым распространенным шрифтом из этой группы является Arial.

    Обозначения «serif» и «sans-serif» происходят из французской полиграфии: слово «serif» по-французски и на некоторых других языках обозначает «засечка», предлог «sans» — «без»;

  • monospace — моноширинный шрифт (обычно с засечками, но в общем случае зависит от системы и браузера). В Windows самым распространенным шрифтом из этой группы является Courier New.

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

Многие шрифты относятся к так называемым акцидентным — они предназначены для заголовков и специальных выделений, но не годятся для набора сплошного текста. Если основной текст набран акцидентным шрифтом, скорость его чтения становится - медленнее и глаза читателя быстрее устают. К акцидентным шрифтам относятся, например, Arial Black, Impact и Comic Sans.

 

Размер (кегль) шрифта: font-size…


внимание!

font-size — размер (кегль) шрифта.

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

  • font-size: Xem;

(X — целое или дробное число)

Свойство font-size позволяет установить размер шрифта (в типогафском деле размер шрифта называется кеглем). Значение этого свойства лучше всего указывать в условных единицах, называющихся em.

Обычный размер шрифта равен 1em. Следовательно, если указать размер 2еm, то шрифт станет в два раза крупнее, а если 0.5еm — в два раза мельче.

Существуют и другие единицы измерения, которые можно использовать в значении свойства font-size. Однако все они по разным причинам менее предпочтительны, чем em.

  1. Фиксированные единицы: рх(пикселы), pt(типографские пункты), cm(сантиметры). Во многих браузерах(например, в Internet Explorer) указание размера шрифта в фиксированных единицах приводит к тому, что пользователь не может средствами браузера масштабировать шрифт, если он кажется ему слишком мелким или слишком крупным. Это вызывает неудобства при чтении. С другой стороны, некоторые другие браузеры(например, Mozilla) позволяют масштабировать шрифт в любом случае, так что указание конкретного размера в пикселах или пунктах становится просто бессмысленным.

  2. Стандартные обозначения: large, medium, small, x-smail и др. Браузеры по-разному обрабатывают эти размеры: например, при указании любого из них шрифт в Mozilla будет отображаться мельче, чем в Internet Explorer. Такой способ указания кегля шрифта следует считать устаревшим.

  3. Проценты, например: font-size: 110%. Этот способ тоже менее универсален, чем указание кегля с помощью em. В некоторых случаях он, как и стандартные обозначения, может приводить к различному отображению текста.

 

Насыщенность шрифта: font-weight…


внимание!

font-weight — насыщенность шрифта.

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

  • font-weight: bold;

  • font-weight: normal;

Насыщенность шрифта — то же самое, что его «жирность». Чтобы сделать шрифт полужирным, нужно написать: font-weight: bold;


внимание!

Иногда требуется, наоборот, сделать обычным (светлым) шрифт, который по умолчанию отображается полужирным — например, шрифт элемента th или strong. В этом случае нужно написать: font-weight: normal;

Иногда удается регулировать насыщенность шрифта более детально. В качестве значения font-weight можно указать любое из чисел 100, 200, 300, 400, 500, 600, 700, 800, 900. Для того чтобы это сработало, нужно, чтобы и сам шрифт, и браузер поддерживали разные степени насыщенности. В большинстве случаев значения от 100 до 500 (в некоторых браузерах до 600) эквивалентны normal, а от 600 (в некоторых браузерах от 700) до 900 эквивалентны bold. Но иногда при значении 500 или 600 браузеры жают насыщенность, «промежуточную» между normal и bold.


внимание!

Полужирный шрифт подходит для заголовков и выделения отдельных слов в тексте. Он совершенно не годится для сплошного текста.

 

Начертание шрифта: font-style…


внимание!

font-style — начертание шрифта.

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

  • font-style: italic;

  • font-style: normal;

Свойство font-style позволяет выделить текст курсивом. Для этого надо написать: font-style: italic; (слово «italic» во многих европейских языках обозначает «курсив»).

Иногда требуется, наоборот, сделать обычным (прямым) шрифт, который по умолчанию отображается курсивом — например, шрифт элемента caption или em. В этом случае нужно написать: font-style: normal;

Курсив, как и полужирный шрифт, не годится для сплошного текста. Чаще всего он используется для выделения в тексте отдельных слов.

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

 

Межбуквенный интервал: letter-spacing…


внимание!

letter-spacing — межбуквенный интервал.

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

  • letter-spacing: Хеm;

  • letter-spacing: normal;

Свойство letter-spacing позволяет регулировать межбуквенный интервал, т. е. «прижимать» или «раздвигать» соседние буквы.


внимание!

Увеличенный межбуквенный интервал называется разрядкой. Разрядка используется для выделения отдельных слов в тексте, а также для заголовков «в подбор» (как в начале этого примечания). Ни в коем случае не нужно применять разрядку для выделения сплошного текста — это смотрится очень некрасиво и плохо читается.

Значения letter-spacing лучше всего указывать, как и размер шрифта, в em. Отрицательные значения приводят к уплотнению набора, положительные — к разрядке. Рекомендуется указывать очень малые значения: в случае разрядки они не должны превышать ¼ кегля шрифта, иначе слово перестанет восприниматься как единое целое. (Например, если кегль равен 1em, текст можно разрежать до 0.2еm; 0.25еm — это уже предел.) Обычному межбуквенному интервалу соответствует значение 0 или normal.

 

Межстрочный интервал: line-height…


внимание!

line-height — межстрочный интервал.

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

  • line-height: X%;

  • line-height: Хеm;

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

Величину line-height можно указывать в em или в процентах. По умолчанию она обычно равна 1.2еm (то есть 120 %). Высота строки занимает 1em, и еще 0.2еm отводится на промежуток между строками.


внимание!

Уменьшать межстрочный интервал не рекомендуется никогда. Иногда для достижения определенных эффектов оформления его можно увеличить, но не более, чем до 150%.

 

Обобщенное свойство font…


внимание!

font — свойства шрифта.

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

  • font: font-style font-weight font-size/line-height font-family;

Обратите внимание: все значения разделяются пробелами, кроме пары значений font-size и line-height, между которыми ставится косая черта. В свойстве font обязательно указывать только два значения: font-size и font-family. Остальные значения необязательны.

Однако все значения, которые присутствуют, должны идти друг за другом строго в указанном порядке: font-style, font-weight, font-size, line-height, font-family.

 
Запомнить эту страницу в 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

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

Оглавление

Цвет…

Гарнитура шрифта…

Размер (кегль) шрифта…

Насыщенность шрифта…

Начертание шрифта…

Межбуквенный интервал…

Межстрочный интервал…

Обобщенное свойство font…

 

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

 

наверх

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

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

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

Copyright (©) 2004— by Yuriy Korovenkov