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

CSS текст по центру страницы

Урок 4. CSS цвет текста, стили, фон, размер, отступ

Определяем стили текста в CSS самостоятельно

В текущем уроке мы рассмотрим свойства текстового элемента интернет-страницы.


Навигация по странице

  1. Попробуем определить CSS цвет текста
  2. Определяем CSS фон текста
  3. CSS текст и его размер в пикселях
  4. CSS текст по центру страницы
  5. Определяем CSS отступ текста слева

CSS цвет текста на конкретном примере

Определим нужный цвет:

<html>
<head>
<title>CSS цвет</title>
</head>
<body>
<h1 style="color:#ff0000">Заголовок 1-го уровня</h1>
<p style="color:#ffff00">Первый параграф</p>
<p style="color:#00ff00">Второй параграф</p>
<p style="color:#0000ff">Третий параграф</p>
</body>
</html>

Строка style="color:#000000" является линейным CSS включением → устанавливает цвет CSS текста в режиме HEX. HEX — шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue).

Результат:

cvet teksta

В примере ниже цвет текста установлен для всей страницы:

<html>
<head>
<title>CSS текст и его цвет</title>
</head>
<body style="color:#ff6c36">
<h1 align="center">Заголовок 1-го уровня</h1>
<p>Первый параграф</p>
<p>Второй параграф</p>
<p style="color:#0000ff">Третий параграф</p>
</body>
</html>

Результат:

svojstva cveta

Содержимое сектора <body> </body> по сути есть все то, что мы видим на web-странице. Таким образом, добавляя к его первому тегу строчку style="color:#ff6c36", мы делаем текст всей страницы оранжевым (черный по умолчанию), за исключением третьего параграфа, где он — текст определен как синий. Атрибут align="" определяет горизонтальное выравнивание. Возможны значения: center, left, right, justify. В следующем уроке подробно рассматриваются способы горизонтального выравнивания.

Значение #000000 определяет черный цвет, #ffffff – белый. Цвет также может быть задан словом, например, style="color:Red".

Смотрите: таблица цветов из HTML справочника.

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

Пример:

<p style="background-color:#ff9900" align="center">Параграф имеет оранжевый фон.</p>
<p style="background-color:#417ed0" align="center">Параграф имеет синий фон.</p>

Результат:

Параграф имеет оранжевый фон.

Параграф имеет синий фон.

Параграф представляет собой блочный элемент, поэтому его фон распространяется по всей ширине страницы, но CSS стили могут изменить такое положение вещей. Например, атрибут со значением width:350px сделает фон параграфа и сам параграф шириной 350 пикселей. В нашем примере содержание параграфов выровнено по центру, данное свойство рассматривается ниже.

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

Пример с изменением размера:

<head>
<style type="text/css">
p {font-size:13px}
p.big {font-size:16px}
</style>
</head>
<body>
<p>Размер текстовой строки составляет 13 пикселей.</p>
<p class="big">Размер текстовой строки составляет 16 пикселей.</p>

Результат:

Размер текстовой строки составляет 13 пикселей.

Размер текстовой строки составляет 16 пикселей.

CSS текст по центру

CSS текст по центру страницы или любого ее элемента:

<head>
<title>CSS центрирование</title>
</head>
<body style="background-color:#ffee77">
<p align="center" style="color:#ff3300">Определяем оранжевый текст по центру параграфа.</p>
<p style="text-align:center; font-size:15px">Определим текст по центру параграфа и в этом случае.</p>
</body>

Результат:

Определяем оранжевый текст по центру параграфа.

Определим текст по центру параграфа и в этом случае.

Содержимое первого параграфа было отцентрировано с помощью HTML атрибута.

В следующем уроке подробно рассматривается горизонтальное и вертикальное выравнивание.

HTML + CSS отступ текста слева

Произведем отступ текста слева двумя способами:

<html>
<title>HTMl + CSS отступ текстовой строки</title>
</head>
<body style="background-color:#ffee77">
<p><blockquote>Отступ слева с использованием тегов.</blockquote></p>
<p style="text-indent:100px">Отступ слева с использованием CSS атрибута.</p>
</body>

Результат:

Otstup teksta

Посмотреть в новом окне: CSS отступ текстовой строки

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 3. Манипуляции с текстом   CSS текст   Урок 5. CSS свойства текста

    Сохранить в сервисы и закладки