Как задать стиль текста в html: CSS стили текста

Leave a Comment / Html / By /

CSS стили текста

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

Примеры записи стилей с заданными свойствами

font-family

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

	
font-family : Arial, Gadget, sans-serif;
font-family : Courier New, monospace;
font-family : Impact, fantasy;

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


HTML

<div>
  <div>
    font-family
  </div>
  <div>
    Выбор шрифта
  </div>
</div>



CSS

. box{
    width: 260px;
    margin: 0px auto;
    padding: 3px 20px;
    background-color: #fc0;
}
.box .title,
.box .meaning{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.box .title{
    font-size: 25px;
    font-weight: bold;
}
.box .meaning{
    font-size: 22px;
}

font-size

Для определения размера шрифта в CSS делается следующая запись:


font-size : 250%;
font-size : 30px;
font-size : 11pt;
font-size : 0.5em;

font-style

Чтобы задать наклонный шрифт или отменить курсивное отображение запись ведётся следующим образом:


font-style : normal;
font-style : italic;

normal – обычное начертание текста

italic – курсивное начертание

	
font-style : oblique;

oblique – наклонный текст.

Отличается от курсива тем, что наклоняет текст, а не выводит соответствующие символы.

font-variant

Стилями CSS можно задать вывод символов в верхнем регистре либо в исходном формате.


font-variant : normal;
font-variant : small-caps;

normal – формат символов остаётся по умолчанию

small-caps – данная опция преобразует все строчные символы как заглавные буквы с уменьшенным размером.

font-weight

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


font-weight : lighter;
font-weight : bold;
font-weight : normal;
font-weight : bolder;



font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

bold – полужирный шрифт

bolder – жирный шрифт

lighter – светлый шрифт

normal – установка стандартного начертания

100 – 900 – значение насыщенности с шагом через 100

400 – Нормальное начертание шрифта, которое установлено по умолчанию

Пример записи стилей текста в одной строке

		
font : bold italic 22px Times New Roman, serif;
font : bold italic 22px Arial, sans-serif;
font : 12pt/10pt Courier New, monospace;
font : bold italic 110% Parkavenue, cursive;
font : normal small-caps 12px/14px Impact, fantasy;

Учебник HTML 5.

Статья «Стили»

Списки

Цвета

МЕНЮ

В этой статье мы с Вами познакомимся еще с одним глобальным атрибутом style, узнаем что такое каскадные таблицы стилей, что такое CSS стиль и научимся задавать его для HTML элементов.

К этой статье у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые каскадные таблицы стилей (Cascading Style Sheets — CSS). В рамках учебника HTML мы с Вами поверхностно рассмотрим использование каскадных таблиц стилей, подробно изучить их после этого курса вы можете в разделе CSS учебник.

Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.

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

Каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style. Атрибут задает встроенный (inline) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.

Глобальный атрибут style имеет следующий синтаксис:

style = "property:value", где property это CSS свойство, а value его значение.

Допускается использование нескольких CSS свойств и значений, при этом их необходимо разделять между собой точкой с запятой.

style = "property:value; property:value; property:value"

В этой статье мы подробно рассмотрим только один пример, но от Вас потребуется максимально внимательно к нему отнестись.

В следующем примере мы используем целых пять новых для вас CSS свойств и с ипользованием глобального атрибута style применим их к различным, уже знакомым нам HTML элементам:

<!DOCTYPE html>
<html style = "text-align: center"> <!-- выравниваем текст по центру во всем документе --> 
	<head>
		<title>Пример использования глобального атрибута style</title>
	</head>
	<body style = "background-color: khaki"> <!-- задаем цвет заднего фона для элемента --> 
		<p style = "color: brown; font-size: 26px">А.С. Пушкин</p> <!-- задаем цвет текста коричневый, размер шрифта 26 пикселей --> 
		<pre style = "font-family: courier"> <!-- задаем шрифт для элемента --> 
			Я помню чудное мгновенье:
			Передо мной явилась ты, 
			Как мимолетное виденье, 
			Как гений чистой красоты.
		</pre>
	</body>
</html>

Давайте разберем, какие стили к чему были добавлены:

  1. Для тега <html> установили выравнивание текста по центру, для этого мы использовали CSS свойство text-align со значением center. Обращаю внимание, что выравнивание по центру распостраняется на все элементы в документе, аналогичный эффект можно было достичь задав этот стиль для элемента <body>. Изменяя значения свойства text-align вы можете также выровнять текст как по левому (left) и правому (right) краю, так и по ширине (justify).
  2. Для всего видимого содержимого (тег <body>) с использованием CSS свойства background-color мы задали цвет заднего фона khaki. Цвет khaki является одним из предопределенных цветов (стандартное имя цвета). Более подробную информацию по использованию цветов вы получите в следующей статье «HTML цвета».
  3. Для абзаца (тег <p>), который содержит имя автора стихотворения, мы применили два CSS свойства, первое color задает цвет текста (стандартное имя цвета brown — коричневый), второе font-size устанавливает размер текста. Мы установили размер текста равный 26 пикселям. Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя.
  4. Для элемента <pre>, который определяет предварительно отформатированный текст, мы, с использованием CSS свойства font-family установили шрифт содержимого — Courier (компьютерный шрифт, относящийся к классу моноширинных, все знаки (кегельные площадки), которого имеют одинаковую ширину).

Рис 16a Пример использования встроенных стилей.

Не расстраивайтесь если Вам на данном этапе, не понятны какие-то моменты, мы более подробно рассмотрим данный материал в следующих статьях и при изучении CSS. Главное не бросать начатое и как говорил известный в наше время экспонат: «Учиться, учиться и ещё раз учиться».


Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив с текстовым файлом:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 10.

Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana.

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


Списки

Цвета

МЕНЮ

Стиль HTML — javatpoint

следующий → ← предыдущая

Стиль HTML используется для изменения или добавления стиля к существующим элементам HTML . Для каждого элемента HTML существует стиль по умолчанию, например. цвет фона белый, цвет текста черный и т. д.

Атрибут стиля можно использовать с любым тегом HTML. Чтобы применить стиль к тегу HTML, вы должны иметь базовые знания о свойствах css, например. цвет, цвет фона, выравнивание текста, семейство шрифтов, размер шрифта и т. д.

Ниже приведен синтаксис атрибута стиля:

стиль = «свойство: значение»

Цвет стиля HTML

Свойство color используется для определения цвета текста.

Давайте рассмотрим простой пример стилизации HTML-тегов с помощью свойства цвета CSS.

Это зеленый цвет

Это красный цвет

Протестируйте сейчас

Вывод:

Это зеленый цвет

Это красный цвет

Цвет фона стиля HTML

Свойство background-color используется для определения цвета фона тега HTML.

Давайте посмотрим на пример стилизации тега html с помощью свойства css background-color

Это желтый фон

Это красный фон

Протестируйте сейчас

Вывод:

Это желтый фон

Это красный фон

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

Свойство font-family указывает семейство шрифтов тега HTML.

Давайте посмотрим пример стилизации тега html с помощью css свойство font-family

Это новое семейство романских шрифтов Times

Это семейство шрифтов Arial

Протестируйте сейчас

Вывод:

Новое семейство романских шрифтов Times

Это семейство шрифтов arial

Размер шрифта стиля HTML

Свойство font-size используется для определения размера текста тега HTML.

Давайте посмотрим на пример свойства font-size

Это тег h4 на 200%

Это тег p на 200 %

Протестируйте сейчас

Вывод:

Это 200% тег h4

Это тег 200% p

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

Свойство text-align используется для определения горизонтального выравнивания текста для элемента HTML.

Давайте посмотрим пример стилизации тега html с помощью свойства css text-align

Этот текст расположен справа

Этот текст расположен в центре сбоку

Протестируйте сейчас

Если вы хотите разместить заголовок по центру или слева, используйте «text-align:center» или «text-align:left» соответственно.

Вывод:

Этот текст расположен справа

Этот текст расположен в центре сбоку

HTML5 не поддерживает тег
, который поддерживается в более ранней версии HTML.

Поддержка браузеров

. о стилях HTML вы можете прочитать в учебнике по CSS.

Следующая темаПодтег HTML

← предыдущая следующий →

Элемент Chrome IE Firefox Opera Safari
Атрибут стиля Да

Стили HTML

Атрибут стиля — это новый атрибут HTML. Он представляет CSS в HTML.

Этот текст написан красным шрифтом Verdana

Этот текст набран шрифтом Times и зеленым цветом

Этот текст имеет высоту 30 пикселей

Попробуйте сами

Атрибут стиля HTML

Назначение атрибута стиля:

Чтобы обеспечить общий стиль все HTML-элементы.

Стили были представлены в HTML 4 как новый и предпочтительный способ оформления HTML. элементы. С помощью стилей HTML стили можно добавлять к элементам HTML напрямую, с помощью атрибута стиля или косвенно в отдельных таблицах стилей (CSS файлы).

Вы можете узнать все о стилях и CSS в нашем учебнике по CSS.

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

Примеры стилей HTML

стиль = «цвет фона: желтый»

стиль = «размер шрифта: 10 пикселей»

стиль = «семейство шрифтов: раз»

стиль = «выравнивание текста: по центру»

Устаревшие теги и атрибуты

В HTML 4 некоторые теги и атрибуты определены как устаревшие. Устаревшие означает, что они не будут поддерживаться в будущих версиях HTML. и XHTML.

Сообщение ясно: избегайте использования устаревших тегов и атрибутов.

Следует избегать следующих тегов и атрибутов:

Метки Описание
<центр> Определяет содержимое по центру
<шрифт> и <базовый шрифт> Определяет шрифты HTML
и <зачеркнуто> Определяет зачеркнутый текст
<и> Определяет подчеркнутый текст
   
Атрибуты  
выровнять Определяет выравнивание текста
бгколор Определяет цвет фона
цвет Определяет цвет текста

Для всего вышеперечисленного: вместо этого используйте стили.

Примеры стилей:

Цвет фона

<тело>

Атрибут стиля определяет стиль для элемента.

Попробуй себя: цвет фона

Новый атрибут стиля делает «старый» атрибут bgcolor устаревший.

Попробуй себя: Фон по старинке

Семейство шрифтов, цвет и размер

Атрибут стиля определяет стиль для элемента

.

Попробуйте сами: Пример шрифта

Новый атрибут стиля делает старый тег устаревшим.

Попробуйте сами: Шрифты по старинке

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

Атрибут стиля определяет стиль для элемента

.

Попробуйте сами: Заголовок по центру

Новый атрибут стиля делает старый атрибут «align» устаревший.

Попробуйте сами: Заголовок по центру по-старому


Сделайте так, чтобы ваши веб-приложения выглядели на миллион долларов

  

В настоящее время большинство веб-приложений используют скучные методы представления данных своим зрителям с помощью сеток или простых таблиц HTML.

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

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