Css какое свойство определяет дополнительное оформление текста

Источник

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

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

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

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

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

Пример:

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

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

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

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

Пример:

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

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

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

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

Пример:

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

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

Однако в CSS данная проблема решается с помощью свойства text-indent.

Пример:

Визуальное отображение кода:

С помощью атрибута CSS font-weight определяется жирность шрифта.

Данный атрибут может принимать следующие значения:

• normal — обычный;
• lighter — более светлый;
• bold — жирный;
• от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.

Пример:

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

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

В том случае, если цвет тени не задан, используется цвет текста.

Пример:

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

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

• left — выравнивание по левому краю;
• right — выравнивание по правому краю;
• center — выравнивание по центру;
• justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

Данное свойство может принимать следующие значения:

• baseline — выравнивание линии элемента по базовой линии родительского элемента;
• middle — выравнивание средней элементной точки по базовой линии родительского элемента;
• text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
• top — выравнивание верха элемента по верхней части самого высокого элемента строки;
• sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

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

Желаем удачи в изучении веб-дизайна!

Источник

В предыдущей части ‘Основы CSS’ мы рассуждали о подложках, полях и блочной модели. На этот раз я попробую описать, как и с помощью каких свойств CSS задать стиль к тексту.

Уровень 2 (CSS 2.1) предоставляет разработчику много возможностей оформить текст креативно. Уровень 3 (CSS3) позволяет использовать еще больше уникальных свойств, которые отвечают за внешний вид текста.

Итак, что мы можем сделать с текстом при помощи доступных свойств CSS? Как обеспечить кроссбраузерную совместимость? Как сделать текст привлекательным?

Свойство Font-Family

Большинство людей предполагает, что при создании сайта можно использовать всего несколько безопасных шрифтов. Однако свойство font-family предлагает разработчикам большой выбор шрифтов. С помощью font-family можно задать основной шрифт для сайта, затем указать второй, на случай, если на компьютере пользователя не установлен основной шрифт; третьим, как правило, указывают семейство шрифтов, на тот случай, если оба первых шрифта отсутствуют на компьютере пользователя.

Например, на своем сайте мы хотим использовать шрифт Helvetica. Хотя почти на всех Mac’ах этот шрифт стоит изначально, компьютеры с windows иногда игнорируют этот шрифт. На случай, если у пользователя отсутствует Helvetica, мы должны задействовать второй безопасный шрифт. К примеру, Arial достаточно похож на Helvetica, и в то же время этот шрифт установлен и в Mac и в Windows.

Для этого ваше правило должно выглядеть так:

CSS

body { font-family: Helvetica, Arial, sans-serif; }

Если ваш компьютер не имеет Helvetica, то он попытается использовать Arial, если у вас не будет и Arial (что маловероятно), компьютер задействует какой-нибудь шрифт из семейства sans-serif.

Есть три разных семейства шрифтов, куда вписываются все шрифты: serif, sans-serif и monospace.

Шрифты serif (Georgia или Garamond) имеют небольшие линии (засечки) на концах букв.

Перед вами шрифт serif.

У шрифтов sans-serif (Arial или Verdana) засечки отсутствуют.

Шрифт из семейства sans-serif.

У шрифтов Monospace (Courier) ширина букв одинакова.

Шрифт из семейства monospace.

Свойство Font-size

Свойство Font-size регулирует размер шрифта. Существует несколько разных единиц измерения.

Единица измерения Pixels

Пикселы – самый популярный способ определить размер шрифта. Наиболее распространенный размер шрифта для параграфа лежит в диапазоне от 12px до 14px.

CSS

p { font-size: 12px; }

Абзац 12 pixels – Did you know that the quick brown fox jumped over the lazy dog?

Абзац 13 pixels – Did you know that the quick brown fox jumped over the lazy dog?

Абзац 14 pixels – Did you know that the quick brown fox jumped over the lazy dog?

Еденица измерения Em

Единица измерения Em зависит от размера шрифта элемента родителя или браузера, фактически размер шрифта меняется согласно настройкам пользователя в браузере. Лично я не использую эту единицу измерения, хотя это вторая по популярности единица измерения.

Размер шрифта в процентах

Размер шрифта в процентах также зависит от элемента родителя или размера в браузере и меняется в зависимости от размера экрана.

Свойство Font-style

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

CSS

p {font-style: italic; }

Значения:

normal – Нормальный шрифт.

italic – Это стиль italic.

oblique – Это стиль oblique.

Свойство Font-weight

Свойство font-weight управляет толщиной шрифта. Вы можете просто сделать шрифт жирным (bold) или применить другие специфичные значения.

Значения:

CSS

p { font-weight: normal; }

p { font-weight: bold; }

p { font-weight: bolder; }

p { font-weight: lighter; }

p { font-weight: 900; }

Значения:

normal – Значение свойства font-weight normal

bold – Здесь значение свойства font-weight равно bold

bolder – здесь font-weight bolder

lighter – Здесь font-weight lighter

100 до 900 – Здесь font-weight 100

100 до 900 – Здесь font-weight 900

Заметьте, не все шрифты обладают определенными уровнями жирности (boldness), таким образом, вы, возможно, не увидите разницу между специфичными значениями свойства font-weight (например между bold и bolder или между 200 и 400).

Свойство Letter-spacing

Свойство letter-spacing управляет расстоянием между двумя буквами.

Здесь значение свойства letter-spacing normal

Свойства letter-spacing имеет значение 1px

Свойство Line-height

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

У этого параграфа line-height 14px. У этого параграфа line-height 14px. У этого параграфа line-height 14px. У этого параграфа line-height 14px. У этого параграфа line-height 14px. У этого параграфа line-height 14px. У этого параграфа line-height 14px.

У этого параграфа line-height 28px. У этого параграфа line-height 28px. У этого параграфа line-height 28px. У этого параграфа line-height 28px. У этого параграфа line-height 28px.

Свойство Color

Свойство color устанавливает цвет текста. Цвет может принимать любое hexidecimal значение (например: #6a5acd) или одно из 16 цветовых значений, таких как: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, и yellow. К цвету также можно применять RGB значения, где каждый цвет шифруется цифрами от 0 до 255 и цвета разделяются между собой точками (например: 106.90.205).

CSS

p { color: black;}

p {color: #000; }

Свойство color имеет значение red.

Свойство color имеет значение yellow.

Свойство Тext-align

Свойство text-align отвечает за выравнивание теста в пределах элемента.

CSS

p { text-align: center;}

Значения:

• Left
• Right
• Center
• Justify

Этот параграф выровнен по левой стороне. Этот параграф выровнен по левой стороне. Этот параграф выровнен по левой стороне. Этот параграф выровнен по левой стороне.

Этот параграф выровнен по правой стороне. Этот параграф выровнен по правой стороне. Этот параграф выровнен по правой стороне. Этот параграф выровнен по правой стороне.

Этот параграф выровнен по центру. Этот параграф выровнен по центру. Этот параграф выровнен по центру. Этот параграф выровнен по центру.

текст выровнен по ширине. текст выровнен по ширине. текст выровнен по ширине. текст выровнен по ширине. текст выровнен по ширине.

Не забывайте, что свойство text-align можно применять только к блочным элементам, например к параграфам или div’ам. В теге span свойство text-align работать не будет.

Свойство Text-decoration

Главным образом применяется для того, чтобы обозначить ссылки. Свойство text-decoration отвечает за стилевое оформление линий в тексте.

CSS

p { text-decoration: underline; }

Underline – Значение свойства text-decoration underlined.

Overline – Значение свойства text-decorationoverlined.

Line-through – Значение свойства text-decoration lined-through.

Значение свойства text-decoration normal (по умолчанию или none).

Свойство Text-transform

Свойство text-transform преобразует текст элемента в заглавные или строчные буквы.

CSS

p {text-transform: uppercase; }

Значения:

• Uppercase
• Lowercase
• Capitalize
• None

У этого текста все буквы заглавные (text-transform: uppercase)

У этого текста все буквы строчные (text-transform: lowercase)

У этого текста каждое слово начинается с заглавной буквы (text-transform: capitalize)

Текст normal

Свойство Word-spacing

Свойство word-spacing управляет интервалом между двумя словами.

CSS

p { word-spacing: 10px; }

У этого параграфа расстояние между словами равно 10px.

Text-indents

Свойство text-indent отвечает за величину выступа первой строки в тексте. Например, значение 35px сдвинет первую строку на 35px вправо.

первая строка сдвинута на 20px. первая строка сдвинута на 20px. первая строка сдвинута на 20px. первая строка сдвинута на 20px. первая строка сдвинута на 20px.

Источник