Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17359 / 1606 | Оценка: 3.91 / 4.09 | Длительность: 12:32: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 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Фёдор Гусев
Фёдор Гусев
Россия, г. Москва
Андрей Квартник
Андрей Квартник
Россия, Ростов-на-Дону, РАНХиГС, 2004