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

Стили текста — Основы верстки контента

Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивым дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдет со страницы. CSS дает широкие возможности для стилизации текста. В этом уроке рассмотрим основные стили, которые возможно применить к тексту. Описать их все в рамках одного урока невозможно и в этом нет необходимости. В процессе получения опыта вы будете узнавать о новых свойствах, но все они базируются на нескольких основных «китах»:

• Цвет текста;
• Расположение текста;
• Отступы от текста;
• Размер текста.

Цвет текста

Каждый текст на странице имеет свой цвет. Будь то заголовки или кричащий баннер, который рассказывает о скидке. Любой текст имеет цвет. В CSS используется свойство color , чтобы управлять им. С его помощью можно установить любой цвет для разных участков текста. В качестве значения свойство принимает цвет в разных моделях цветового пространства. Распространенной является модель RGB. Она указывает, сколько красного, зеленого и синего используется в цвете. На первых порах вы можете использовать онлайн-сервисы, которые укажут выбранный цвет в этой модели. Одним из таких сервисов является HTML Colors Codes .

Первое, что настраивают разработчики во время верстки макета — цвет основного текста страницы. Так как свойство color является наследуемым, то его можно устанавливать для тега или . С помощью каскадности этот цвет будет применяться ко всему тексту, если не указано иного значения. Выберем неглубокий черный цвет, который записывается в модели HEX как #333333 .

Интересно: в макетах редко встречается максимально черный цвет, который записывается как #000000 . Дело в том, что такой цвет не встречается в природе и человеческому глазу непривычен

body  color: #333; > 

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

Контраст в меньшей степени относится к заголовкам и небольшим выделениям внутри текста. Они выделяются на общем фоне по другим характеристикам: насыщенность, размер, границы, самостоятельный фон. Такой текст тоже должен обладать достаточным контрастом, при этом он может иметь значения ниже, чем основной текст.

Для проверки контраста текста можно использовать веб-инспектор Chrome DevTools. Выбрав любой цвет на панели Styles, можно увидеть коэффициент контраста текста, автоматически выведенный браузером. Он обозначен как Contrast ratio. Если контраст находится в рамках допустимого, то будет отмечен зеленой галочкой. В противном случае будет показан красный круг.

Наследование значений свойств

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

body  color: #333; > a  color: #333; > 

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

Один из способов решения проблемы — значение inherit , с английского — наследовать. Указав color: inherit мы скажем браузеру установить цвет таким же, как у родительского элемента.

body  color: #333; > a  color: inherit; > 

Значение inherit применяется для многих свойств, но, чаще всего, используется при работе с текстом и его оформлением. В качестве значения будет использован именно ближайший родитель. Это не обязательно будет — всё зависит от структуры вашей верстки и CSS.

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

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

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

• left — выравнивание текста по левому краю. Это значение устанавливается по умолчанию.
• center — выравнивание текста по центру.
• right — выравнивание текста по правому краю.
• justify — выравнивание текста по ширине. Данное значение выравнивает текст так, чтобы поместить слова строго от начала блока до его конца. При этом возможны изменения размеров пробелов между словами.

Важно: использование значения justify является плохой практикой. Данный прием используется в оформлении книг, где есть возможность отредактировать текст так, чтобы выравнивание по ширине не создавало больших пробелов между словами. В условиях веб-страницы такое почти невозможно.

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

Насыщенность текста

Используя CSS можно гибко настраивать насыщенность шрифта. Насыщенность используется для выделения важного участка текста и придает ему «вес» относительно соседних элементов. Для управления насыщенностью в CSS используется правило font-weight . Оно принимает следующие значения:

• Значения от 100 до 900 с шагом 100
• lighter — сверхтонкое начертание. Делает текст менее насыщенным, чем текущее значение
• normal — значение по умолчанию. Соответствует числовому значению 400
• bold — жирное начертание текста. Соответствует числовому значению 700
• bolder — сверхжирное начертание. Делает текст насыщеннее, чем текущее значение

Для многих шрифтов доступны только значения normal и bold . Это связано с тем, сколько создатели шрифта включат различных начертаний.

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

Управлять размером текста можно с помощью свойства font-size . Текст с большим размером шрифта первым бросается в глаза, поэтому заголовки, помимо выравнивания по центру, имеют больший размер шрифта.

Сравните заголовки, которые создаются с помощью тегов и . Основное их визуальное отличие — размер текста. Помимо встроенных стилей, мы можем самостоятельно устанавливать размер шрифта. Для этого можно использовать единицы измерения пиксели px . В следующих уроках вы узнаете и о других единицах измерения и как с их помощью можно адаптировать контент.

.small-text  font-size: 12px; > .normal-text  font-size: 16px; > .big-text  font-size: 30px; > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега только когда он располагается внутри контейнера

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

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.

Тег1 Тег2

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример 10.1. Контекстные селекторы

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Жирное начертание текста
 
Одновременно жирное начертание текста и выделенное цветом
  

В данном примере показано обычное применение тега и этого же тега, когда он вложен внутрь абзаца

. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

Рис. 10.1. Оформление текста в зависимости от вложенности тегов

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

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

Пример 10.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Русская кухня | Украинская кухня | Кавказская кухня 
 
Другие материалы по теме
  

Результат данного примера показан на рис. 10.2.

Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A , будет действовать на всей странице, а стиль второй ссылки ( .menu A ) применяется только к ссылкам внутри элемента с классом menu .

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

Вопросы для проверки

1. Какой цвет будет у текста списка в следующем коде?

1. Зелёный.
2. Красный.
3. Синий.
4. Розовый.
5. Оранжевый.

2. В коде выше какого цвета будут маркеры перед текстом?

1. Зелёного.
2. Красного.
3. Синего.
4. Розового.
5. Оранжевого.

CSS: Обобщённое правило для шрифтов

Удобным способом задать свойства для шрифта является использование правила font , которое позволяет указать:

• font-style
• font-variant
• font-weight
• font-size / line-height (эти два правила записываются через слэш)
• font-family

Шесть разных правил внутри одного! Это помогает сократить CSS код и улучшить его читабельность. Обязательными из них являются font-size и font-family . Остальные можно не указывать.

Пример записи со всеми возможными правилами: font: italic small-caps bold 24px/1.2 Arial;

Предположим, что нам нужен жирный курсив с размером шрифта 24 пикселя из семейства шрифтов Arial, тогда правило в CSS будет выглядеть следующим образом:

.text

Жирный курсив с размером шрифта 24 пикселя из семейства Arial

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

При указании свойства font-family также рекомендуется указать универсальное семейство шрифтов. Это необходимо для того, чтобы при отсутствии шрифта у пользователя был выбран подходящий из установленных в его системе. Как и при указании одиночного свойства font-family , все шрифты должны быть отделены запятыми. Это же касается и семейства шрифта.

.text

Использование одного правила или нескольких

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

1. Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило
2. Обобщённые свойства перебивают отдельные. Если в коде вы указали font-variant: small-caps; , а потом для этого же элемента применили font: 16px/24px sans-serif; , то капитель будет сброшена в значение по умолчанию

Задание

Добавьте в редактор параграф с классом bold-text и установите следующие правила используя обобщённое свойство font :

• Жирное начертание
• Размер шрифта: 24px
• Шрифт Verdana
• Семейство шрифтов: без засечек

Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

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

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

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

Это такой цвет текста, который изначально установлен для всех(либо вами выбранных) элементов сайта и который срабатывает при загрузке страницы.

Какой цвет установлен по умолчанию?

Если вы создадите простую страницу и добавите туда текст, без указания цвета текста, то он будет отображаться как черный (black) .

Сделал специально страницу о заранее предопределенных цветах, т.е. цвета определены цветом!
Например красный — red

Как еще можно подобрать цвет текста!?

Не обязательно это может быть цвет «словом» — цвет может быть задан буквенно цифровым способом -> в онлайн генераторе цветов.

Как обозначается цвет в css?

Цвет в css пишется английское слово «color» — которое перевоимся как «цвет» и через двоеточие пишется цвет, например:

color : red ;

Как используется цвет в стилях css!?

Существует «3 способа css» задать цвет тексту через css!

Пример — как можно изменить цвет по умолчанию

На сайте установлен некий цвет текста по умолчанию — сделаем стенд, по нажатию на кнопку вы можете изменить этот цвет по умолчанию!

И! — изменится только тот цвет по умолчанию, который никак отдельным образом не прописан — чтобы это проверить нажми на кнопку:

Изменить цвет по умолчанию.

Задать цвет текста внутри тега

Цвет текста может быть задан внутри тега!

Предположим, что нам нужно задать какой то цвет тексту в теге.

Для этого нам понадобится какой-то тег, пусть это будет — span

Внутрь первого тега помещаем атрибут «style» со значением цвет -> «color» и определяем цвет, путь это будет фиолетовый -> color:violet

Здесь текст, который будет покрашен в цвет color:violet

Мы задали нашему тексту цвет фиолетовый:

Здесь текст, который будет покрашен в цвет color:violet

Как изменить цвет текста

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

После этого берем выше приведенный тег и меняем цвет внутри тега:

Здесь текст, который будет покрашен в цвет firebrick
Здесь текст, который будет покрашен в цвет color: firebrick

Задать свой собственный тег для цвета текста

Если вы часто используете изменение цвета текста на сайте, для разных целей, то вы наверное понимаете, что написать

Здесь текст, который будет покрашен в цвет red

и например цвет текста в собственном теге, намного проще. :

Здесь текст, который будет покрашен в цвет red

Результат изменения цвета текста в теге

Здесь текст, который будет покрашен в цвет red

Или же путь это будет зеленый цвет:

Здесь текст, который будет покрашен в цвет green
Здесь текст, который будет покрашен в цвет green

Как создать такой тег, для изменения цвета текста!?

записываем таким образом:

Тоже самое для любого другого цвета

Способ задать цвет тексту на странице через стили

Для того, чтобы задать цвет тексту можно воспользоваться стилями на одной странице! Этот способ подходит в тех случаях, когда требуется задать/изменить цвет текста только на это странице!

Нам понадобится тег style :

Располагаем данный стиль в любом месте на странице, лучше всего его располагать внутри тега head :

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

Внутри тега violet помещаем текст,чтобы мы могли его увидеть!

Цвет текста violet

Результат, цвет для текста задан через стили на странице:

Цвет текста violet

Задать цвет тексту через файл css

Для того, чтобы задать цвет текста через файл css -повторяем все операции, как и пункте 2, только в файле стилей!

Задать цвет тексту через class

Для того, чтобы задать цвет текста через класс, нужно создать стили для этого класса:

Класс пишется, обычно латинскими буквами и перед ним ставится точка, что и означает класс:

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

Внутри скобок прописываются цвет для текста:

Далее нужно прикрепить данный класс к тегу: