Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 19801 / 2044 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 8:

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

< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Аннотация: Единицы измерения в CSS. Работа с цветом и фоном. Работа с шрифтом. Работа с текстом.

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

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

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

Таблица 7.1.
Единица измерения Обозначение
Пиксели 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}
 Иллюстрация управления шрифтами в CSS

Рис. 7.2. Иллюстрация управления шрифтами в CSS
< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Таня Михайлова
Таня Михайлова
Россия
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990