CSS3. Работа с текстом и фонами

Показывать лекцию целиком

Как и в случае с HTML мы начнем рассматривать CSS с точки зрения работы с текстовой информацией.

Единицы измерения в CSS

При задании значений атрибутов стиля в CSS могут использоваться следующие единицы измерения:

Единица измерения	Обозначение
Пиксели	px
Пункты	pt
Размер литеры `'m'` текущего шрифта	em
Размер литеры `'x'` текущего шрифта	ex
Дюймы	in
Сантиметры	cm
Миллиметры	mm
Проценты	%
Способы определения значений цвета
Цвет	`rgb(r.g.b)`
	`#rrggbb`
	`#rgb`
Константы задания размеров шрифта
Размеры шрифта	`xx-large`
	`x-large`
	`large`
	`medium`
	`small`
	`x-small`
	`xx-small`

Работа с цветом и фоном

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

За управления цветом и фоном в CSS отвечают следующие атрибуты стилей, поддерживаемые абсолютным большинством элементов:

color – задает цвет переднего плана (color: #00FF00);

background-color – задает цвет фона элемента (background-color: brown);

background-image – задает фоновое изображение для элемента (background-image: url("image.gif"));

background-repeat – задает тип повторения изображения, установленного при помощи атрибута стиля background-image (background-repeat: no-repeat), может принимать следующие значения:

repeat-x – изображение повторяется по горизонтали;

repeat-y – изображение повторяется по вертикали;

repeat – изображение повторяется по горизонтали и вертикали;

no-repeat – изображение не повторяется (значение по - умолчанию).

background-attachment – определяет будет ли фоновое изображение прокручиваться вместе с элементом (background-attachment: fixed), может принимать следующие значения:

scroll – изображение будет прокручиваться вместе с элементом;

fixed – прокрутка изображения заблокирована.

background-position – определение координат позиционирования фонового изображения, содержит два значения: положение по горизонтали и положение по вертикали (background-position: 5cm 4cm). Помимо числовых, может принимать следующие значения:

left – горизонтальное позиционирование "по левому краю";

center – горизонтальное позиционирование "по центру";

right – горизонтальное позиционирование "по правому краю";

top – вертикальное позиционирование "сверху";

center – вертикальное позиционирование "по центру";

bottom – вертикально позиционирование "снизу".

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

background: #00FF00  url("image.gif") no-repeat fixed 5cm 4cm

В качестве примера, добавим следующую таблицу стилей веб-странице, на которой прежде была размещена информационная таблица о настоящем курсе ():

thead { color: Gold }
table { background-image: url("image.gif")}
tfoot { color: Chartreuse }

Получим следующий результат:

(рис 7.1) Работа со стилями цвета и фона

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

Работа со шрифтом

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

Атрибуты стиля CSS, отвечающие за управление шрифтами:

font-family – задает семейство используемого шрифта (font-family: arial) Для задания шрифта может быть использовано два типа имен: имя семейства (family-name) и родовое имя (generic family). К именам семейства относятся, собственно, названия шрифтов (Camria, Arial и т.д.) Количество родовых имен поскромнее:

serif – шрифты с засечками;

sans-serif – рубленые шрифты;

cursive – курсивные шрифты;

fantasy – декоративные шрифты;

monospace – моноширинные шрифты.

font-style – задает стиль шрифта (font-style: normal). Соответственно принимает значения:

normal – обычный шрифт;

italic – курсивный шрифт;

oblique – наклонный шрифт.

font-variant – задает тип представления строчных букв (font-variant: normal). Принимает следующие значения:

normal – строчные буквы представляются в исходном регистре;

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

font-weight – определяет насыщенность шрифта (font-weight: bold). Принимает следующие значения:

normal – стандартная насыщенность шрифта;

bold – полужирное начертание.

Ряд браузеров поддерживает числовые значения насыщенности шрифта в пределах от 100 до 900, где 100 – сверхсветлое насыщение шрифта, 400 – стандартное, 700 – полужирное.

font-size – определяет размер шрифта (font-size: 12pt). Может быть представлен в виде констант, абсолютных, или относительных значений.

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

font: normal bold 10pt camria

Рассмотрим на примере работы со шрифтами, изменим созданную ранее таблицу стилей:

thead { color: Chartreuse; font: normal small-caps 14pt Arial }
tbody { font-size: 12pt}
table { background-image: url("image.gif")}
tfoot { color: DarkBlue; font: italic normal 14pt Georgia}
caption {font-size: 16pt; font-style: oblique; font-variant:small-caps}

(рис 7.2) Иллюстрация управления шрифтами в CSS

Работа с текстом

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

За управление текстом в CSS отвечают следующие атрибуты стилей:

text-align – определяет горизонтальное выравнивание текста элемента (text-align: center). Может принимать следующие значения:

center – выравнивание по центру;

left – выравнивание по левому краю;

right – выравнивание по правому краю;

justify– выравнивание по ширине;

auto – тип выравнивания не изменяется;

start – в случае, если направление текста слева - направо, то выравнивает по левому краю; если направление текста справа - налево – по правому краю;

end – в случае, если направление текста слева - направо, то выравнивает по правому краю; если направление текста справа - налево – по левому краю;

text-align-last – задает тип выравнивания последней строки элемента, при условии что значение атрибута стиля text-align равно justify (text-align-last: left). Принимает значения аналогичные атрибуту text-align;

text-decoration – добавляет эффекты для текста (text-decoration: none). Может принимать следующие значения:

blink – мигающий текст;

line-through – зачеркнутый текст;

overline – линия над текстом;

underline – линия под текстом (подчеркивание);

none – эффектов нет.

text-indent – задает величину отступа для первой строки текста (text-indent: 10%). Могут быть указаны конкретные значения и процентные.

text-overflow – задание параметра видимости текста (text-overflow: clip). Может принимать два значения: clip – текст обрезается, если выходит за границы элемента; ellipsis – при выходе текста за границы добавляется многоточие;

text-shadow – добавляет тень тексту и определяет ее параметры (text-shadow: red 5 5). Могут быть заданы следующие параметры тени:

none – тени нет;

цвет – любой поддерживаемый цвет;

сдвиг по горизонтали – положительное значение сдвигает тень вправо, отрицательное – влево;

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

радиус размытия – большее значение сглаживает тень, по - умолчанию параметр равен 0.

text-transform – преобразование текста в заглавные или прописные буквы (text-transform: lowercase). Принимает следующие значения:

none – символы не меняются;

capitalize – первая литера каждого слова становится заглавной;

lowercase – символы текста преобразовываются в нижний регистр;

uppercase – символы текста преобразовываются в верхний регистр.

Вертикальное выравнивание фрагмента

При необходимости смещения по вертикали определенного элемента относительно текста применяется атрибут стиля vertical-align, принимающий значения:

baseline – выравнивание базовой линии по соответствующей линии родительского элемента, в случае с ячейкой таблицы происходит выравнивание по базовой линии первой текстовой строки;

bottom – выравнивание элемента по нижней части родительского элемента, в случае с ячейкой таблицы происходит выравнивание по нижнему краю;

middle – выравнивание по центру родительского элемента, в случае с ячейкой таблицы происходит выравнивание по середине;

sub – выравнивание базовой линии элемента по базовой линии нижнего индекса родительского элемента;

super – выравнивание базовой линии по базовой линии верхнего индекса родительского элемента;

text-bottom – выравнивание нижнего края фрагмента по нижнему краю текста родителя;

text-top – выравнивание верхнего края фрагмента текста по верхнему краю текста родителя;

top – выравнивание верхнего края фрагмента по верхнему краю текста родителя, в случае с ячейкой таблицы происходит выравнивание по верхнему краю.

Для примера добавим следующую строку к таблице стилей, созданной ранее, задающую параметры выравнивания текста в ячейках секции <tbody>:

tbody tr td { vertical-align:top; text-align: center }

(рис 7.3) Результат выравнивания текста в ячейках таблицы

Разрыв строк

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

white-space – задает способ отображения пробелов между словами (white-space: pre). Принимает следующие значения:

normal – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер самостоятельно разрывает текст и переводит его на новые строки;

nowrap – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер не осуществляет разрыв и перевод строк;

pre – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно не выполняет разрыв и перенос строк. Фактически, текст выглядит образом, определенным разработчиком, без каких - либо изменений;

pre-line – несколько пробелов преобразуются в один, символы перевода строк сохраняются, браузер самостоятельно разрывает текст и переводит его на новые строки;

pre-wrap – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно выполняет разрыв и перенос строк;

word-wrap – указывает места, где браузер может осуществить перевод строки (word-wrap: normal). Может принимать следующие значения:

normal – строки разрываются только по пробелам;

break-word – браузер может выполнять разрыв строк внутри слов.

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

Краткие итоги

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

Управление более сложными элементами дизайна веб - страниц будет рассмотрено в рамках следующих лекций, касающихся CSS.