Оформление текста в CSS

Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.

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

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

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration , который может принимать следующие значения:

• blink — мерцающий текст;
• none — значение по умолчанию, оформление отсутствует;
• overline — линия расположена над текстом;
• underline — подчеркнутый линией текст;
• line-through — текст, зачеркнутый линией;
• inherit — в данном случае text-decoration наследует значение родительского элемента.

Текст ссылки Текст ссылки Текст ссылки Текст ссылки Текст ссылки

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

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color .

Способы задания могут быть следующими:

• При помощи названия цвета (например, red, green, blue, white);
• При помощи значения RGB (например, rgb(221,102,212));
• При помощи шестнадцатеричного цветового значения (например, #ff00aa).

    
Текст 1 Текст 2 Текст 2
 
Текст 2 Текст 2 Текст 2
 
Текст 3 Текст 3 Текст 3
  

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

Размер текста в CSS

CSS свойство font-size позволяет задать размер текста.

Единицами измерения могут быть:

• Пиксели (например, 14px);
• Пункты (например, 20pt);
• Проценты (например, 50%);
• Ключевые слова small, large и т.п.

  p p.big 
Текстовая строка размером 14 пикселей.
 

Визуальное представление приведенного выше кода выглядит следующим образом:

Отступ текста в CSS
Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.
Однако в CSS данная проблема решается с помощью свойства text-indent .
   
Текст без отступа.
 
Текст с отступом слева 110 пикселей
 
 
Визуальное отображение кода:
 
 
Жирный и наклонный текст в CSS
 
С помощью атрибута CSS font-weight определяется жирность шрифта.
 
Данный атрибут может принимать следующие значения:
 
 
normal — обычный;
 
lighter — более светлый;
 
bold — жирный;
 
от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.
 
 
    
текст текст текст текст
 
текст текст текст текст
 
текст текст текст текст
  
 
В браузере данный код выглядит следующим образом:
 
 
Тень текста в CSS
 
CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.
 
В том случае, если цвет тени не задан, используется цвет текста.
 
    
Текст с тенью
 
 
Представленный выше код в браузере выглядит следующим образом:
 
 
Выравнивание текста в CSS
 
Выравнивание текста по горизонтали задаётся свойством text-align , которое может принимать следующие значения:
 
 
left — выравнивание по левому краю;
 
right — выравнивание по правому краю;
 
center — выравнивание по центру;
 
justify — выравнивание по всей ширине.
 
 
С помощью свойства vertical-align выполняется выравнивание текста по вертикали.
 
Данное свойство может принимать следующие значения:
 
 
baseline — выравнивание линии элемента по базовой линии родительского элемента;
 
middle — выравнивание средней элементной точки по базовой линии родительского элемента;
 
text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
 
top — выравнивание верха элемента по верхней части самого высокого элемента строки;
 
sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.
 
 
   
 
Текст 1
 
Текст 2
 
Текст 3
 
 
 
 
Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.
 
Желаем удачи в изучении веб-дизайна!
 
Источник
 
CSS: Отступ текста
 
Стандартный вид текста не всегда подходит, как по внешнему виду, так и по цвету, CSS предоставляет обширные возможности, с помощью которых, вы можете кардинально изменить ваш текст, например задав ему цвет, меняя межстрочный интервал, расстояние между буквами или размер текста и многое другое.
 
Отступ текста
 
Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.
 
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
 
Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
 
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
 
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
 
     p 
У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).
  
 
Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.
 
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
 
     .test1 < text-indent: 25px; >.test2 
Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.
 
Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.
  
 
Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
 
     .test1  
Первая строка текста элемента div будет иметь отступ равный 15% ширины его родительского элемента или ширины окна браузера. 
Первая строка текста элемента p будет иметь отступ, который был унаследован от его родительского элемента.
 
  
 
Форматирование
 
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
 
     p.class1 < text-transform: uppercase; text-decoration: overline; >p.class2 < text-transform: lowercase; text-decoration: line-through; >p.class3 
Первый абзац.
 
Второй абзац.
 
Третий абзац.
 
Расстояние между символами в тексте изменено с помощью свойства letter-spacing.
  
 
Копирование материалов с данного сайта возможно только с разрешения администрации сайта 
и при указании прямой активной ссылки на источник. 
2011 – 2023 © puzzleweb.ru
 
Источник
 
Читайте также:  Заголовок