Как сделать текст в css
Перейти к содержимому

Как сделать текст в css

  • автор:

CSS текст, примеры форматирывания текста

Селектору body задан color:#000066
– это значит, что весь текст страницы будет темно-синий, за исключением параграфа с идентификатором id=»example» , где цвет определен как зеленый. Атрибут со значением text-decoration:underline выводит подчеркнутый текст. letter-spacing:5px устанавливает пространство между символами в 5 пикселей. text-indent:50px определяет отступ строки слева величиной в 50 пикселей. Атрибут word-spacing:20px определяет дополнительное расстояние между словами.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS шрифт Наклонный, жирный, подчеркнутый CSS текст О CSS тексте

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Текст в CSS? – Не вопрос!

Свойства текста в CSS

Наряду с несколькими свойствами font- *, CSS предлагает множество свойств text-*.

text-align

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

body

Наиболее используемые значения:

Эти значения соответствуют тем же кнопкам выравнивания, что вы найдёте в Microsoft Word или Photoshop:

Не рекомендуется использовать значение justify . Хотя это может выглядеть визуально привлекательно, поскольку формируется прямоугольник текста, но усложняет чтение.

Значение text-align по умолчанию равно start . В принципе, start может быть как left , так и right , в зависимости от направления текста, заданного direction для HTML-документа.

direction — это свойство CSS, которое может быть ltr (слева направо) или rtl (справа налево):

  • если выбран ltr , start равен left ;
  • если выбран rtl , start равен right .

text-decoration

Свойство text-decoration применяется для добавления линии к вашему тексту.

Значение по умолчанию: none .

.deleted
  • overline
  • underline
  • line-through

text-indent

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

Значение по умолчанию: 0 (ноль).

blockquote

Обратите внимание, что отступ есть только в первой строке. Если вы хотите сдвинуть весь блок текста, используйте padding .

Как и для свойства font-size , вы можете использовать px, em или даже %.

text-shadow

Если вы когда-либо использовали Photoshop, то, вероятно, применяли инструмент для добавления тени. В CSS вы можете добавить тень к тексту, чтобы сделать его более причудливым или удобным для чтения.

  • х — горизонтальное смещение;
  • у — вертикальное смещение;
  • размытие;
  • цвет.

Обязательны только значения х и у. Размытие тени по умолчанию 0 (ноль), а цвет по умолчанию совпадает с цветом текста.

Это свойство сложное, так что используйте его осторожно и не сходите с ума!

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

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

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

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

Обновлено: 2014-03-10 10:19:47 АМ Антон Малахов автор материала

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

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

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

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

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

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

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

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

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

  CSS цвет  

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

Текст 2 Текст 2 Текст 2

Текст 3 Текст 3 Текст 3

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

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

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

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

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

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

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

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

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

Отступ текста в CSS

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

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

 Отступ текстовой строки  

Текст без отступа.

Текст с отступом слева 110 пикселей

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

Отступ текста в CSS

Жирный и наклонный текст в CSS

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

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

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

  Стили шрифта  

текст текст текст текст

текст текст текст текст

текст текст текст текст

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

Жирный и наклонный текст в CSS

Тень текста в CSS

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

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

  тень текста в CSS  

Текст с тенью

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

Тень текста в CSS

Выравнивание текста в CSS

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

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

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

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

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

Выравнивание текста в CSS

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

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

2.12. CSS content

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

Содержимое, вставляемое с помощью свойства content , появляется внутри элемента, до или после его содержимого. С помощью CSS можно генерировать содержимое следующими способами:
— с помощью свойства content в сочетании с псевдоэлементами ::before и ::after ;
— с помощью свойств counter-increment и counter-reset .

Добавление генерируемого содержимого на веб-страницу

  • Содержание:
  • 1. Свойство content
  • 1.1. Добавление специального символа
  • 1.2. Добавление текста
  • 1.3. Добавление изображения
  • 1.4. Добавление блочного содержимого
  • 1.5. Добавление значения атрибута
  • 1.6. Добавление кавычек
  • 2. Форматирование кавычек: свойство quotes

1. Свойство content

Поддержка браузерами

IE: 9.0, не поддерживает анимацию и переходы псевдоэлементов
Firefox: 4.0
Chrome: 4.0, анимация и переходы псевдоэлементов — с 26.0
Safari: 4.0, не поддерживает анимацию и переходы псевдоэлементов
Opera: 4.0, не поддерживает анимацию и переходы псевдоэлементов
iOS Safari: 7.1
Opera Mini: 8
Android Browser: 4.1
Chrome for Android: 44

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

h1:before, h1:after

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

content
Значения:
normal Значение по умолчанию, означает отсутствие добавляемого содержимого.
none Не добавляет содержимое. Используется в случае, когда нужно удалить генерируемое содержимое для одного элемента из группы элементов (например, элементы списка), для которых уже задано это свойство.
counter() Даёт возможность создавать счётчики, задавая для них точку отсчёта и приращение на некоторую величину с помощью свойства counter-reset . Для прямого увеличения счёта необходимо использовать свойство counter-increment .
attr() Добавляет до или после элемента значение атрибута, заключённого в скобки. Чтобы вставить пробел между основным содержимым и генерируемым, нужно добавить пробел перед скобкой или после нее, например, content: attr( href);
» « Текст, который добавляется на веб-страницу, должен быть заключен в двойные или одинарные кавычки. Пустые кавычки можно использовать для добавления блочного содержимого.
open-quote Добавляет к содержимому открывающую кавычку.
close-quote Добавляет к содержимому закрывающую кавычку.
no-open-quote Удаляет открывающую кавычку, при этом уровень их вложенности продолжает учитываться.
no-close-quote Удаляет закрывающую кавычку.
url() Добавляет медиа-содержимое, например, изображение, звук, видео. В качестве значения атрибута в скобках указывается адрес внешнего ресурса, который вставляется в выбранное место документа.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
1.1. Добавление специального символа

Можно оживить текст с помощью добавления специальных символов. В качестве значения используется символ Юникода.

h1 < font-family: 'Niconne', cursive; font-size: 50px; color: #e12527; >h1:before, h1:after < content: "\2746"; display: inline-block; font-size: 60px; color: #38afaa; -webkit-animation: my 4s infinite alternate; animation: my 4s infinite alternate; >h1:before < margin-right: 0.5em; >h1:after < margin-left: 0.5em; >@-webkit-keyframes my < 0% 25% 50% 75% 100% > @keyframes my < 0% 25% 50% 75% 100% >
1.2. Добавление текста

content_text

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

h1:before, h1:after < content: "Yay!"; font-family: 'Dancing Script', cursive; color: #f7b21c; text-shadow: 1px 1px 2px grey; >h1:before < margin-right: 30px; >h1:after
1.3. Добавление изображения

content_image

h1:before < content: url(https://html5book.ru/images/left-twig.png); display: inline-block; margin-right: 10px; >
1.4. Добавление блочного содержимого

content_block

* div < position: relative; width: 680px; height: 100px; border: 1px solid #C2C9D5; margin-top: 40px; background: linear-gradient(to top,#D7DFED, #F5FCFD, #D7DFED) >/*Кружок*/ div:nth-child(1):before < content: ""; display: inline-block; position: absolute; left: calc(50% - 11px); left: -webkit-calc(50% - 11px); top: -11px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #AC170E; background: orangered; box-shadow: 0 2px 4px #292825; >/*Треугольник*/ div:nth-child(2):before < content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent hotpink transparent; position: absolute; left: calc(50% - 15px); left: -webkit-calc(50% - 15px); top: -21px; >/*Зебра*/ div:nth-child(3):before < content: ""; display: inline-block; position: absolute; height: 10px; width: 100%; background: repeating-linear-gradient(45deg, turquoise, turquoise 10px, #D7DFED 10px, #D7DFED 20px); >/*Треугольник с обводкой*/ div:nth-child(4) < border: 3px solid #3E3A40; >div:nth-child(4):before
1.5. Добавление значения атрибута

Функция attr() позволяет добавить любое значение атрибута, например, url-адрес ссылки, который будет выводиться при печати текста.

a:after
1.6. Добавление кавычек

content_quotes

С помощью значений open-quote и close-quote можно генерировать открывающие и закрывающие кавычки. Внешний вид кавычек указывается в свойстве quotes . Если оно не задано, то будут использованы значения браузера по умолчанию.

Some text
blockquote < quotes: "\2039" "\203A"; font-size: 40px; font-family: 'Sigmar One', cursive; >blockquote:before < content: open-quote; color: mediumvioletred; margin-right: 10px; >blockquote:after

2. Форматирование кавычек quotes

Свойство задаёт тип кавычек, используемых в документе для вложенных цитат. По умолчанию кавычками оформляется текст, заключенный в тег . Также кавычки можно сгенерировать помощью свойства content , задав ему значения open-quote и close-quote . В качестве значения используется специальный символ HTML или символ Юникода. Наследуется.

quotes
Значения:
[символ символ]+ Определяет вид открывающей и закрывающей кавычек. Первая пара используется для отображения внешнего уровня цитирования, вторая и последующие — для вложенных уровней цитирования.
none Текст отображается без кавычек.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
Таблица 1. Кавычки в HTML

Описание Внешний вид Юни код HTML- код
Двойная кавычка « \0022 "
Апостроф \0027 '
Открывающая одинарная кавычка \2018
Закрывающая одинарная кавычка \2019
Закрывающая двойная кавычка \201C
Правая двойная кавычка \201D
Двойная нижняя кавычка \2E42
Открывающая левая кавычка «ёлочка» « \00AB «
Закрывающая правая кавычка «ёлочка» » \00BB »
Нижняя одинарная открывающая кавычка \201A
Верхняя одинарная обратная кавычка \201B
Нижняя двойная открывающая кавычка \201E
Двойная верхняя обратная кавычка \201F
Одинарная открывающая (левая) французская угловая кавычка \2039
Одинарная закрывающая (правая) французская угловая кавычка \203A

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *