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

Как через свойства задать текст css

  • автор:

CSS — Урок 7. Свойства — текст

Свойства текста позволяют задавать параметры слов и предложений, а также их взаимное расположение.

  • none — у текста нет оформления.
  • underline — текст подчеркивается.
  • overline — текст надчеркивается линией, расположенной над текстом.
  • line-through — текст отображается зачеркнутым.
  • blink — текст становится мигающим (не работает в IE).
  • left — выравнивание по левому краю.
  • center — выравнивание по центру.
  • right — выравнивание по правому краю.
  • justify — выравнивание по ширине.

Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). Пусть у нас есть html-страница с тремя абзацами:

Заголовок документа

Текст в параграфе, где первая строка будет с отступом.

Текст в параграфе, где первая строка будет с отступом.

Текст в параграфе, где первая строка будет с отступом.

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

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

В CSS существует огромное количество свойств. Их можно разбить на следующие группы:

  • оформление текста;
  • работа с размерами и отступами;
  • позиционирование элементов;
  • создание сеток;
  • декоративные: цвета, фон, тени;
  • другие.

В этом задании мы познакомимся с несколькими свойствами для оформления текста, а более подробно эти свойства рассмотрим в части «Оформление текста. Знакомство».

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

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

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

При оформлении текста с помощью CSS очень часто используется тег <span> с классами.

Например, можно выделять слова

И даже комбинировать классы.


.underline < >.bold < >.italic < >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

  1. Добавьте в CSS-правило для класса underline свойство text-decoration: underline; .
  2. В CSS-правило для класса bold свойство font-weight: bold; .
  3. В CSS-правило для класса italic свойство font-style: italic; .

Используемые свойства детально разобраны в части «Оформление текста. Знакомство».

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

  • Наша группа в VK
  • Наш канал на YouTube
  • Наша страница в Twitter
  • Наш канал в Telegram

CSS свойства для работы с текстом в HTML, изменение размера шрифта и прочее

26.07.18 ИТ / CSS 5607

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

css-properties-for-text

Раньше для задания различных свойств тексту использовался тег font. Этот тег представляет собой контейнер для изменения характеристик шрифта: размер, цвет, гарнитура. Этот тег до сих пор поддерживается всеми браузерами, но считается устаревшим и вместо него крайне рекомендуется использовать свойства CSS стилей.

Какие CSS свойства есть для работы с текстом в HTML? Самое главное – свойство font. Это универсальное свойство, позволяющее одновременно задать несколько характеристик для текста. Обязательными значениями данного свойства являются размер шрифта и его семейство, а остальные значения задаются при желании и являются необязательными. В общем виде свойство font можно записать следующим образом:

.class < font: font-style font-variant font-weight font-size/line-height font-family; >

Но краткая запись может быть не всегда понятна, поэтому можно записать свойства по отдельности:

  • font-style – служит для задания стиля текста, возможные значения: normal, italic, oblique, inherit;
  • font-variant – служит для задания капители текста, определяет показ строчных букв. Можно сделать их прописными уменьшенного размера или оставить без изменений. Возможные значения: normal, small-caps, inherit;
  • font-weight – служит для установки насыщенности шрифта, значение устанавливается от 100 до 900. Возможные значения: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900;
  • font-size – служит для задания размера шрифта, он определяется как высота от базовой линии до верхней границы кегельной площадки. Возможные значения: em, ex, pt, px, %, inherit. А также значения можно писать таким образом: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller;
  • line-height – служит для задания межстрочного интервала текста (интерлиньяжа), отсчет ведется от базовой линии шрифта. Возможные значения: em, ex, pt, px, %, normal, inherit;
  • font-family – служит для задания семейства шрифта, список шрифтов может включать 1 или более названий через запятую, лучше заключать название в одинарные или двойные кавычки. Возможные значения: название шрифта, inherit. В конце можно написать ключевое слово, описывающее тип шрифта — serif, sans-serif, cursive, fantasy, monospace;
  • font-stretch – служит для установки начертания шрифта: узкое, нормальное или широкое. Это позволяет уплотнять или расширять текст. Возможные значения: ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, normal, inherit.

Еще есть и другие CSS свойства, которые также можно отнести к свойствам для работы с текстом: color – для задания цвета, text-shadow – для задания тени текста, text-transform – для преобразования текста в заглавные или прописные символы, letter-spacing – для задания интервала между символами, word-spacing — для задания интервала между словами, word-break и word-wrap — для задания способа переноса текста.

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

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

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

  • text-decoration 一 оформление текста. Возможны такие значения:
  • none 一 оформление по умолчанию.
  • underline 一 подчеркивание.
  • overline 一 черта над текстом.
  • line-through 一 зачеркнутый текст.

Оформление по умолчанию.

Подчеркнутый текст.

Линия над текстом.

Зачеркнутый текст.

  • text-align 一 горизонтальное выравнивание текста. Значения: left, center, right, ustify. Например:

  • text-indent 一 отступы в абзацах. Отступы задаются как в процентах, так и в единицах измерения. Кроме того, значения могут быть положительными и отрицательными. Например, чтобы задать красную строку, добавьте в CSS текста следующее:

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

  • text-transform 一 смена регистра. Значения:
  1. capitalize 一 первая буква каждого слова заглавная.
  2. uppercase 一 все буквы заглавные.
  3. lowercase 一 все буквы строчные.
  4. none 一 по умолчанию.

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

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