С помощью нескольких свойств, предоставляемых CSS, можно очень легко и эффективно определить различные стили текста, такие как цвет, выравнивание, интервал, оформление, преобразование и т. д.
Обычно используемые текстовые атрибуты включают в себя: выравнивание текста, украшение текста, преобразование текста, отступ текста, высоту строки, интервал между буквами, интервал между словами и т. д. Эти свойства дают вам точный контроль над внешним видом символов, слов, пробелов и т. д.
Давайте подробнее рассмотрим, как установить эти текстовые свойства для элементов.
1.text-align выравнивание текста
Атрибут text-align используется для установки горизонтального выравнивания текста в элементе. Необязательные значения атрибута следующие:
Пример:
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*Чтобы более интуитивно отразить выравнивание текста, вот граница, установленная для тега p*/}.text1{text- выравнивание: по левому краю;}.text2{text-align:right;}.text3{text-align:center;</style></head><body><pclass=text1>Выравнивание по левому краю</p><pclass= text2> Выровнять по правому краю</p><pclass=text3>Выровнять по центру</p></body></html>Отображаемые результаты следующие:
2. текст-оформление
Атрибут text-decoration используется для установки или удаления оформления текста. Наиболее распространенным методом является использование атрибута text-decoration для удаления подчеркивания по умолчанию в теге <a>. Конечно, вы также можете использовать атрибут text-decoration, чтобы добавить немного украшения к тексту в элементе там, где это необходимо для достижения эффекта выделения.
Необязательные значения атрибута text-decoration следующие:
Пример:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>text-decoration</title><style>h1.under{text-decoration:underline;}h1.over{text-decoration:overline ;}p.line{text-decoration:line-through;}p.blink{text-decoration:blink;}a.none{text-decoration:none;}p.underover{text-decoration:underlineoverline;</ style></head><body><h1class=under>Подчеркивание</h1><pclass=line>Зачеркивание</p><pclass=blink>Мигающий эффект, но браузер его не отображает</p><h1class =over>Подчеркивание</h1><p>Это <aclass=nonehref=#>ссылка</a>. По умолчанию ссылка подчеркнута. Здесь мы ее удалим. </p><pclass=underover>Перечеркивание и подчеркивание</p></body></html>Отображаемые результаты следующие:
3.текст-преобразование
Атрибут text-transform используется для управления регистром английских букв в тексте. С помощью этого атрибута вы можете единообразно изменять английские буквы в тексте на строчные, прописные или заглавные первые буквы, не изменяя исходный текст.
4.текстовый отступ
Атрибут text-indent используется для добавления эффекта отступа первой строки к тексту в элементе. Необязательные значения атрибута следующие:
5.line-height высота строки
Это свойство влияет на расположение линейного блока. При применении к элементу уровня блока он определяет минимальное расстояние между базовыми линиями в этом элементе, а не максимальное расстояние.
Вычисленная разница между высотой строки и размером шрифта (межстрочным интервалом) делится на две половины и добавляется вверху и внизу строки текстового содержимого. Самый маленький блок, который может содержать это содержимое, — это линейный блок.
Пример:
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;</style></head><body><p> Это стандартная высота строки по умолчанию<br>Это стандартная высота строки по умолчанию<br>Это стандартная высота строки по умолчанию<br></p><pclass=small>Используйте цифры, чтобы определить меньшую высоту строки<br> >Используйте цифры, чтобы определить меньшую высоту строки<br>Используйте цифры, чтобы определить меньшую высоту строки<br></p><pclass=big>Используйте проценты, чтобы определить большую высоту строки<br>Используйте проценты Используйте форму, чтобы определить увеличить высоту строки<br>Для определения большей высоты строки используйте процентную форму<br></p></body></html>Отображаемые результаты следующие:
6. межбуквенный интервал
Интервал между текстом. Значение может быть отрицательным. Значение по умолчанию — обычное. Все браузеры поддерживают атрибут межбуквенного интервала.
Пример:
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>Атрибут CSS-интервала</title><style>*{margin:0; дополнение:0;}body{ширина:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px</style></ head><body><pclass=p01>css тест интервала между текстом! </p><pclass=p02>Тест проверки интервала между текстом CSS! </p></body></html>Отображаемые результаты следующие:
7.межсловный интервал
Атрибут word-spacing используется для установки интервала между словами, но он недействителен для китайского языка. Необязательные значения атрибута следующие:
8.text-shadow тень текста
text-shadow добавляет тень к тексту. Вы можете добавить несколько теней к тексту и оформлению. Значения теней разделяются запятыми. Каждое значение тени состоит из смещения элемента в направлениях X и Y, радиуса размытия и значения цвета.
9.вертикальное выравнивание
Атрибут вертикального выравнивания задает вертикальное выравнивание элемента.
Атрибут вертикального выравнивания в CSS можно использовать только для встроенных и смещенных элементов (таких как изображения и поля ввода форм). Этот атрибут не наследуется.
Сначала давайте посмотрим на картинку. Верхняя линия, средняя линия и базовая линия текста. Базовая линия — это нижний край буквы x.
Упоминаются такие понятия, как базовая линия, нижняя линия, верхняя линия и средняя линия. Что они означают?
(1) Верхняя линия: верхний край китайских иероглифов;
(2) Центральная линия: линия, проходящая через середину строчной английской буквы x;
(3) Базовая линия: нижний край строчной буквы x;
(4) Нижняя строка: нижний край китайских иероглифов;
(5) Область содержимого: относится к области, заключенной между нижней и верхней строками;
(6) Высота строки: включает в себя область содержимого и пустую область, которая симметрично расширяется в зависимости от области содержимого. Мы называем это высотой строки, которую также можно рассматривать как расстояние между базовыми линиями соседних текстовых строк;
(7) Межстрочный интервал: относится к расстоянию между соседними текстовыми строками между нижней строкой предыдущей текстовой строки и верхней строкой следующей текстовой строки;
(8) Встроенное поле: это концепция в модели рендеринга браузера, и его нельзя отобразить, но оно существует, и его высота равна высоте строки;
(9) Линейный блок: концепция, аналогичная внутреннему блоку той же строки. Линейный блок относится к виртуальному прямоугольному блоку этой линии и также является концепцией в режиме рендеринга браузера. Высота линейного блока равна наибольшему значению встроенного блока среди всех элементов в этой строке (в качестве эталона используется строковый блок с наибольшим значением высоты строки, а остальные встроенные блоки выравниваются по эталону с использованием собственных методы выравнивания и, наконец, рассчитывается высота линейного блока).
10.white-space обрабатывает пробельные символы
В следующей таблице обобщено поведение атрибута пробелов:
11.направление направления текста