www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы CSS (ЦСС) > контент

контент

контентовая версия  

С помощью CSS (ЦСС) можно определять стиль и вид контента. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код ШТМЛ.

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS (ЦСС), которые описаны в табл. 1.

Табл. 1. Атрибуты CSS (ЦСС) для управления шрифтами
Свойство Значение Описание Пример
font-family имя шрифта Задает список шрифтов P {font-family: Arial, serif}
font-style normal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P {font-style: italic}
font-variant normal
small-caps
Капитель
(особые прописные буквы)
P {font-variant: small-caps}
font-weight normal
lighter
bold
bolder
100-900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100-светлый шрифт,
900-самый жирный
P {font-weight: bold}
font-size normal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS (ЦСС)

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Шрифт</title>
<style type="text/CSS (ЦСС)">
H1 {
 font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
 font-size: 150%; /* Размер контента */
 font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Обычный контент</p>
</body>
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1

Рис. 1. Вид контента после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с контентом и результат их применения.
Табл. 2. Результат использования различных параметров шрифтов
Пример Пример Пример Пример Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light font-size: large; font-weight: bold font-family: Arial, sans-serif; font-size: x-small; font-weight: bold font-variant: small-caps font-style: italic; font-weight: bold

Свойства контента

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

Табл. 3. Свойства CSS (ЦСС) для управления видом контента
Свойство Значение Описание Пример
line-height normal
множитель
точно
%
Интерлиньяж (межстрочный интервал) line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decoration
none
underline
overline
line-through
blink
Убрать все оформление
нижняя полоска в контенте
Линия над контентом
Перечеркивание
Мигание контента
text-decoration: none
text-transform
none
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: capitalize
text-align left
right
center
justify
Выравнивание контента text-align: justify
выравнивание по ширине
text-indent точно
%
Отступ первой строки text-indent:15px;
text-indent:10%

Ниже, в табл. 4 приведены некоторые параметры контента и результат их применения.

Табл. 4. Результат использования различных параметров контента
Пример: и это все о нем Пример: контент по центру Пример: Это не ссылка, а просто контент Пример: отступ первой строки Пример: полуторный межстрочный интервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5
Статья опубликована: 13.09.2009 Последнее обновление: 16.04.2009
Поиск по сайту
Основы CSS (ЦСС)
Разделы
CSS (ЦСС) по теме

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

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

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

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

font-weight
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Также допустимо использование ключевых слов.

line-height
Устанавливает интерлиньяж (межстрочный интервал) контента, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

text-decoration
Добавляет оформление контента в виде его подчеркивания, перечеркивания, линии над контентом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-indent
Устанавливает величину отступа первой строки блока контента (например, для параграфа P). Воздействия на все остальные строки не оказывается.

text-transform
Управляет преобразованием контента элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного контента будет изменен.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект