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

Цветовое выделение информации и фон, на котором она размещена, пожалуй, первое, что бросается в глаза при загрузке веб - страницы, поэтому с них мы и начнем знакомство с 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), может принимать следующие значения:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

o none – тени нет;

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

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

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

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

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

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

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

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

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

Не нашли, что искали? Воспользуйтесь поиском: