Текст важен даже для самых причудливых и визуально требовательных веб-дизайнов. Уделите своему тексту внимание, которого он заслуживает, с помощью этих свойств CSS.
Каскадные таблицы стилей (CSS) описывают, как HTML отображает элементы на экране. CSS может управлять макетом нескольких веб-страниц с помощью нескольких строк кода.
CSS имеет свойства форматирования, которые влияют на интервалы, внешний вид и выравнивание текста. Вот некоторые свойства, которые вы можете использовать для стилизации текста на страницах вашего приложения.
1. Цвет текста
цвет свойство указывает основной цвет переднего плана вашего текста. Вы можете использовать предопределенное имя цвета, например красный, белый, или зеленый. Вы также можете использовать шестнадцатеричное значение или другие единицы, такие как RGB, HSL и RGBA.
CSS-фреймворки, такие как Попутный ветер CSS имеют встроенную цветовую функцию, отображающую различные оттенки. Это облегчит вам выбор оттенка, который вы предпочитаете. Давайте изменим цвет следующих заголовков, используя некоторые из этих свойств:
<тело>
<h1>Изменить мой цветh1><h2>Изменить мой цветh2>
<h3>Изменить мой цветh3>
<h4>Изменить мой цветh4>
тело>
CSS будет выглядеть так:
h1 {
цвет: апельсин;
}h2 {
цвет: #ff6600;
}h3 {
цвет: RGB(255, 102, 0);
}
h4 {
цвет: hsl(24, 100%, 50%);
}
И стилизованный текст будет выглядеть так:
2. Фоновый цвет
Вы можете использовать фоновый цвет собственность для создания привлекательные фоны. Используйте его, чтобы установить разные фоны для следующих заголовков:
<тело>
<h1>Изменить цвет фонаh1><h2>Изменить цвет фонаh2>
<h3>Изменить цвет фонаh3>
<h4>Изменить цвет фонаh4>
тело>
Со следующим CSS:
h1 {
фоновый цвет: апельсин;
}h2 {
фоновый цвет: #009900;
}h3 {
фоновый цвет: RGB(204, 0, 0);
}
h4 {
фоновый цвет: hsl(60, 100%, 50%);
}
Когда ваш браузер отобразит эту страницу, она будет выглядеть примерно так:
3. Выравнивание текста
выравнивание текста Свойство устанавливает горизонтальное выравнивание текста. Это значение может быть левый, верно, центр, или оправдывать.
Значение выравнивания растягивает каждую строку текста, поэтому все они занимают одинаковую ширину на правом и левом полях. Используйте следующий пример кода, чтобы изучить эти четыре значения:
<тело>
<h1>Выровнять меня по левому краюh1><h2> Выровняйте меня правильноh2>
<h3>Выровняй меня по центруh3>
<псорт="ex4"><сильный>Выровняйте меня оправданнымсильный>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam Semper Diam at Erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.п>
<п><сильный>Нет выравнивания сильный>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam Semper Diam at Erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.п>
тело>
Используйте следующий CSS для применения различных выравниваний:
h1 {
выравнивание текста: левый;
}h2 {
выравнивание текста: верно;
}h3 {
выравнивание текста: центр;
}
.ex4{
выравнивание текста: оправдывать;
}
В браузере это будет выглядеть так:
4. Направление текста
направление текста свойство определяет направление текста. Определите направление, используя свойства ртл (справа налево) или лтр (слева направо). Эти два указывают, в каком направлении вы хотите, чтобы текст текла.
Например, используйте ртл при работе с языками, написанными справа налево, такими как иврит или арабский. Ты используешь лтр для языков, написанных слева направо, таких как английский.
Давайте проиллюстрируем это кодом ниже:
<тело>
<див>
<псорт='ex1'>Этот абзац идет справа налево. Курсор
перемещается справа налево, когда вы вводите дополнительную информацию на
страница.п>
<пидентификатор="ex2">Этот абзац идет слева направо. Курсор перемещается
слева, чтобы написать, когда вы вводите больше информации на странице!п>
див>
тело>
С этим сопровождающим CSS:
.ex1 {
направление: ртл;
}
#ex2 {
направление: лтр;
}
Конечный результат будет выглядеть примерно так:
5. Оформление текста
украшение текста Свойство задает внешний вид декоративных линий в тексте. Это сокращение от строка оформления текста,цвет оформления текста,стиль оформления текста, и толщина оформления текста свойство. Если вы не хотите иметь свойство для элементов со ссылками, используйте текстовое оформление: нет;
Вам следует избегать подчеркивания обычного текста, так как этот стиль обычно указывает на ссылку. На следующем рисунке показаны некоторые примеры в коде:
<тело>
<h1>Оформление надстрочного текстаh1><h2>Сквозное оформление текстаh2>
<h3>Оформление подчеркивания текстаh3>
<псорт="бывший">Подчеркивание и подчеркивание оформления текста.п>
<п><аhref="по умолчанию.asp">это ссылкаа>п>
тело>
Вы можете применять различные эффекты украшения с помощью этого CSS:
h1 {
украшение текста: зачеркнуть;
}h2 {
украшение текста: Линия, проходящая через;
}h3 {
украшение текста: подчеркнуть;
}п.бывший {
украшение текста: зачеркнутьподчеркнуть;
}
а {
украшение текста: никто;
}
И они будут отображать что-то вроде этого:
6. Преобразование текста
преобразование текста Свойство указывает тип регистра, в котором появляются буквы. Это могут быть прописные или строчные буквы. Вы также можете использовать его, чтобы сделать первую букву каждого слова заглавной:
В следующем примере показано, как это сделать в коде:
<тело>
<h1>Примеры свойства text-transformh1><псорт="верхний регистр">Это предложение написано прописными буквами.п>
<псорт="нижний регистр">Это предложение в нижнем регистре.п>
<псорт="с большой буквы">Назовите этот текст заглавными.п>
тело>
CSS-файл:
п.верхний регистр {
преобразование текста: верхний регистр;
}п.нижний регистр {
преобразование текста: нижний регистр;
}
п.капитализировать {
преобразование текста: капитализировать;
}
Со следующим результатом:
7. Межбуквенное расстояние
Межбуквенное расстояние Свойство определяет расстояние между буквами в тексте. В следующем примере показано, как указать различные стили интервалов.
<тело>
<h1>Примеры межбуквенного интервалаh1><h2>Это заголовок 1h2>
<h3>Это заголовок 2h3>
тело>
Используйте пиксели или другие единицы измерения в файле CSS:
h2 {
Межбуквенное расстояние: 7пикс.;
}
h3 {
Межбуквенное расстояние: -2px;
}
И полученный текст будет растянут или сжат:
8. Расстояние между словами
межсловный интервал Свойство задает пробел между словами в тексте. Браузеры имеют стандартную длину пробела между словами, но вы можете установить свою собственную. В следующем примере показано, как увеличить или уменьшить расстояние между словами:
<тело>
<h1>Примеры свойства Word-spacingh1><п>Нормальный интервал между словами.п>
<псорт="ex1">Большой интервал между словами.п>
<псорт="ex2">Небольшой интервал между словами.п>
тело>
Используя этот CSS:
п.ex1 {
межсловный интервал: 1бэр;
}
п.ex2 {
межсловный интервал: -0.3рем;
}
Вы можете ясно увидеть эффект межсловного интервала:
9. Высота линии
высота линии Свойство задает интервал между строками в абзаце. Стандартная высота строки по умолчанию в большинстве браузеров составляет от 110% до 120%. Следующий код иллюстрирует, как его изменить:
<тело>
<h1>Использование высоты строкиh1><п>
Стандартная высота строки.Стандартная высота строки.
п>
<псорт="маленький">
Маленькая маленькая высота строки.Небольшая высота строки
п>
<псорт="большой">
Увеличенная высота строки.Увеличенная высота строки.
п>
тело>
Используя следующий CSS:
п.маленький {
высота линии: 0.7;
}
п.большой {
высота линии: 1.8;
}
Вы можете увидеть результаты между каждой строкой в каждом абзаце:
10. Тень текста
тень текста свойство применяет тени к тексту. Вы должны указать горизонтальную тень и вертикальную тень. Текстовая тень может включать цвет и радиус размытия. Давайте проиллюстрируем это с помощью следующего кода:
<тело>
<h1>ПримерыизТекстовая теньэффект.h1><h1сорт="ex1">Текстовая теньсцветh1>
<h1сорт="ex2">Текстовая теньсразмытиеэффект.h1>
тело>
С помощью этого CSS:
ч1 {
тень текста: 2px 2px;
}.ex1 {
тень текста: 2px 2px оранжевый;
}
.ex2 {
text-shadow: 2px 2px 10px красный;
}
Будет производить некоторые необычные и интересные эффекты:
Зачем изучать свойства стиля текста в CSS?
CSS — это основа современного веб-дизайна. Будь то ванильная форма или фреймворк, основная функция свойств CSS одинакова. Овладение свойствами форматирования текста позволяет создавать привлекательные и удобочитаемые пользовательские интерфейсы.
Последняя версия CSS, CSS3, представляет новые концепции от анимации до макетов с несколькими столбцами. Эти концепции упрощают создание профессиональных приложений и документов.
