Руководство по форматированию текста в CSS

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

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

Ниже приведено подробное руководство по каждому свойству форматирования текста, а также примеры для каждого свойства.

 

Цвет шрифта

Параметр: значение цвета, которое может быть названием цвета(например, red), шестнадцатеричным кодом(например, "#FF0000"), значением RGB(например, "rgb(255, 0, 0)") или значением RGBA(например,, "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Размер шрифта

Параметр: значение размера, которое может быть в пикселях(например, "16px"), единицах em(например, "1em"), единицах rem(например, "1.2rem"), единицах ширины окна просмотра(например, "10vw")., единицы высоты области просмотра(например, "5vh") или другие единицы измерения.

h1 {  
  font-size: 24px;  
}  

 

Семейство шрифтов

Параметр: список семейств шрифтов, указанный в предпочтительном порядке. Вы можете указать имя шрифта(например, Arial) или заключить имена шрифтов, содержащие специальные символы, в двойные кавычки(например, " Times New Roman).

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

 

Вес и стиль шрифта

Параметр font-weight: normal(default), bold, bolder, lighter, или числовые значения от 100 до 900.

Параметр font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

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

Параметр: "none"(default), "underline", "overline", "line-through"  или комбинация значений, разделенных пробелами.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

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

Параметр: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Высота строки и поля

Параметр line-height: числовое значение или процент от текущего размера шрифта.

Поле параметра: значение измерения, например, пиксели(px), единицы em(em), единицы rem(rem) и т. д.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Многоколоночный текстовый макет

Параметр: положительное целое число или "auto"(default).

.container {  
  column-count: 2;  
}  

 

Изменение цвета текста при наведении

Нет конкретного параметра, используйте только псевдокласс :hover.

a:hover {  
  color: red;  
}  

 

Изменение цвета текста в зависимости от состояния(активен, посещен)

Никаких конкретных параметров, используйте только псевдоклассы :active  и файлы :visited.

a:visited {  
  color: purple;  
}  

 

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