4. Атрибуты стиля (CSS attributes)

Размеры и цвета

Единицы размеров

Шрифт и текст

Рамки, поля, отступы, фон

Размещение и размер. Переполнение и обрезка

Наследование. Разбивка на страницы

Наследование элементами свойств контейнеров

Свойства, относящиеся к представлению документа на печатном носителе

Таблицы стилей CSS позволяют контролировать все аспекты представления документа в браузере (или другом клиентском приложении, поддерживающим стили), включая выбор шрифта, форматирование абзацев, позиционирование элементов, многие динамические эффекты и т.д. на экране монитора и вплоть до выбора актера, "рассказывающего" документ в голосовом синтезаторе.

Рассмотрим соответствующие свойства CSS.

Размеры и цвета

Единицы размеров

Все размеры и позиционные расположения в CSS задаются в размерных единицах. Internet Explorer и другие браузеры поддерживают как абсолютные, так и относительные единицы. Абсолютные единицы задают точный размер, например, в сантиметрах или дюймах, относительные единицы вычисляются относительно каких-либо других свойств (например, размера монитора или листа бумаги) или размеров других элементов.

Допустимые абсолютные единицы:

    in – дюймы (2,54 см)

    cm – сантиметры

    mm – миллиметры

    pt – пункты (points, 1pt = 1/72in)

    pc – пики (picas, 1pc = 12pt)

Относительные единицы:

    em – размер на основе размера шрифта (атрибута font-size). В типографии em - это единица измерения, которая представляет высоту заглавной буквы М шрифта. В веб-дизайне 1 em - это высота базового шрифта в браузере, которая обычно составляет 16 пикселов (но пользователь может изменять ее). Если эта единица применяется для определения размера шрифта, то она имеет смысл относительной величины по отношению к размеру шрифта в родительском элементе. Пример: left: 2.5em

    ex – размер буквы x

    px – вычисляется на основе разрешения монитора или принтера

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

Абсолютные единицы хороши для определения размеров элементов в версии для печати. Для отображения на экране, как правило, применяются пикселы, проценты и em. Выбирая, какую единицу измерения использовать, следует исходить из согласованности размеров элементов веб-страницы (текста, блоков, изображений и т.п.). Фактический размер элементов предсказать невозможно (это зависит от разрешения монитора, который пользователь может менять), поэтому речь идет именно о согласованности, т.е. о совместном изменении размеров элементов страницы при ее масштабировании. Если пользователь считает текст слишком мелким, то он должен иметь возможность увеличить его (и наоборот). Современные браузеры позволяют масштабировать страницу как единое целое - все элементы увеличиваются и уменьшаются пропорционально. Однако более старые браузеры (например, IE6-) не предоставляли такой возможности - вместо этого разрешалось регулировать только размер шрифта (т.е. масштабировался текст, а остальные элементы не меняли своих размеров). Существенное изменение размера шрифта текста без изменения размера контейнера этого текста, как правило, нежелательно. Здесь на помощь приходит такая единица длины как em: когда меняется размер шрифта, меняется и величина em, и размеры блоков удается согласовать таким образом со шрифтом. Измерение размера в процентах (от соответствующего размера контейнера) позволяет поддерживать согласованность другого рода - между размерами блоков и размером окна браузера. В большинстве же случаев измерение длины в пикселах - достаточно хорошее решение.

border: 1px solid black;

Ширина этой секции указана в пикселах

Ширина этой секции указана в процентах

Ширина этой секции указана в em

Листинг 4.1. Использование различных единиц измерения для задания ширины (html, txt)

Упражнение. Откройте пример в новом окне браузера и измените а) масштаб страницы; б) размер шрифта; в) ширину окна. Проследите за шириной блоков.

Цвета

Цвет в CSS может быть задан по имени или в виде шестнадцатеричного числа, определяющего интенсивности красного, зеленого и синего цветов (RGB схема). Стандарт HTML 4.01 определяет только 16 цветов, спецификация CSS 2.1 добавляет еще один цвет; RGB схема позволяет задать свыше 2,000,000 цветов, от черного (#000000) до белого (#FFFFFF).

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

p { color: red; }

/* стандартный цвет */

p { color: #f00; }

p { color: #ff0000; }

p { color: rgb(255,0,0); }

/* целые в диапазоне 0 – 255 */

p { color: rgb(100%, 0.0%, 0%); }

/* диапазон 0.0% - 100.0% */

Internet Explorer и некоторые другие браузеры распознают множество других именованных цветов, однако нет гарантии, что выбранный именованный цвет (в отличие от RGB схемы) поддерживается всеми браузерами.

Шрифт и текст

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

Font-family (гарнитура) задает название используемого шрифта. Поскольку нет полной уверенности, что указанный шрифт установлен и доступен в любом браузере и на любой клиентской машине, разработчик может задать список альтернативных шрифтов в порядке убывания предпочтительности, разделив список запятыми. Если название шрифта содержит пробелы, оно должно быть заключено в кавычки. Пример:

p {font-family: "Times New Roman", Times, serif;}

Font-size (кегль) задает размер шрифта в абсолютных или относительных единицах или относительно пользовательских предпочитаемых размеров.

font-size: small;

/* варианты: xx-small, x-small, small, medium, large, x-large, xx-large */

font-size: larger;

/* варианты: larger, smaller */

font-size: 10pt;

/* абсолютный размер 10 пунктов */

font-size: 10px;

/* размер 10 пикселей. Зависит от разрешения экрана или принтера */

font-size: 120%;

/* 120% от размера шрифта родительского элемента */

Font-style (начертание) переключает между обычным (normal) и курсивным (italic).

h3 {font-style: italic;} /* курсив */

Font-weight задает насыщенность (жирность) шрифта. Возможные значения:

normal – обычный

bold – жирный

bolder – жирнее родительского

lighter – светлее родительского

100 – самый светлый

400 – то же что normal

700 – то же что bold

900 – самый жирный

Установки жирности зависят от установленных на пользовательской машине шрифтов. Часто пользователь не может увидеть различий между близкими значениями жирности.

li {font-weight: bold;}

Font-variant переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps).

p:first-line {font-variant: small-caps;}

Line-height задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта.

p {line-height: 8mm;}

Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family.

Пример:

font: italic normal 400 12px/14px Arial;

/* выделенные жирным значения обязательны, остальные могут быть опущены */

Эквивалентно

font-style: italic;

font-variant: normal; /* значение по умолчанию можно опустить*/

font-weight: 400; /* значение по умолчанию можно опустить*/

font-size: 12px;

line-height: 14px;

font-family: Arial;

Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.

Text-decoration допускает следующие значения: none (без декорирования), underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), а также их сочетания.

li {text-decoration: underline line-through;}

Text-transform задает преобразование текста следующим образом: none (нет преобразования, по умолчанию), capitalize (делает первую букву каждого слова заглавной), uppercase (все заглавные), lowercase (все строчные).

h1 {text-transform: capitalize;}

Text-align задает выравнивание текста внутри блока влево (left), вправо (right), по центру (center) или по ширине (justify). Text-indent определяет отступ первой строки текста от левой границы блока.

text-align: justify;

text-indent: 20px;

/* допускаются положительные и отрицательные значения */

letter-spacing регулирует расстояние между буквами. Значения: любая единица измерения CSS (обычно em или px), хотя проценты для этого свойства не работают в большинстве браузеров. Допускаются отрицательные значения. Значение normal сбрасывает letter-spacing в стандартное значение.

Vertical-align устанавливает базовую линию элемента относительно базовой линии окружающего содержимого. С помощью этого свойства можно немного поднять или опустить символ относительно окружающего текста. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки.

color устанавливает цвет текста. Значение: любое корректное значение цвета.

font: 14px Verdana;

Ко всем абзацам данного примера применено стилевое правило, устанавливающее

кегль 14px и гарнитуру Verdana. Данный абзац демонстрирует эти свойства

в чистом виде.

Текст этого абзаца крупнее, поскольку к нему применен встроенный стиль

со значением свойства font-size:larger.

В этом абзаце увеличен межстрочный интервал путем задания свойста стиля

line-height: 200%, что означает удвоенную высоту строки. Кроме того, тексту

назначен красный цвет.

Эффект разреженного текста достигается

путем применения свойства letter-spacing.

Пример 4.2. Свойства шрифта и текста (html , txt )

Рис. 4.1. Свойства шрифта и текста

Упражнение . Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.

Рамки, поля, отступы, фон

Рамки

border-style определяет стиль для всех границ блока. Допустимые значения: solid, dotted, dashed, double, groove, ridge, inset, outset, none, и hidden.

Пример : p { border-style: solid; }

Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения.

Пример : p { border-top-style: double; }

border-width определяет толщину для всех границ блока, указанную в любой из единиц измерения CSS, кроме процентов (как правило, в пикселах). Пример: p { border-width: 2px; }

То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.

border-color определяет цвет границ блока. Значение цвета указывается любым допустимым способом.

Пример : p { border-color: Green; }

Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color.

border - сокращенное свойство, объединяющее border-width, border-style и border-color.

Пример : p { border: 2px solid #f33; }

Поля

Пустое пространство между содержимым блока и его рамкой (или если, рамки нет, то границей фона) - поле - задается свойством padding. Его размер можно указать в любых единицах измерения.

Свойства padding-top, padding-right, padding-bottom и padding-left задают соответственно верхнее, правое, нижнее и левое поля. Пример: p { padding-left: 20px; }

Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left.

Примеры:

p { padding: 20px; }

/* все поля равны 20 пикс */

p { padding: 5px 20px; }

/* вертикальные поля равны 5 пикс, а горизонтальные 20 пикс */

p { padding: 5px 20px 5px 10px; }

/* сверху 5, справа 20, снизу 5, а слева 10 пикс */

Отступы

Пустое пространство между границей блока и другими блоками задается свойством margin. Оно полностью аналогично свойству padding, с тем отличием, что пространство добавляется не внутри блока, а снаружи.

Пример : p { margin: 20px; }

Цвет фона блока устанавливается при помощи свойства background-color.

Пример : p { background-color: #765; }

padding: 5px 10px;

border: 5px solid gray;

background-color: #2ae;

В данном примере к элементу body применены свойства margin, padding, border

и background-color. В упражнении предлагается назначить эти же свойства

другим элементам страницы - абзацу, списку (и его элементам), а также

изображению.

  • margin - отступ

  • padding - поле

  • border - рамка

  • background-color - цвет фона

    • Листинг 4.3. Поля, рамки, отступы и фон (html, txt)

    Рис. 4.2. Поля, отступы, рамки и фон

    Упражнение. В данном примере все свойства применены к элементу body. Примените их вместо этого поочередно к остальным имеющимся в примере элементам (div, p, ul, li и т.д.). Попробуйте задавать различные значения для разных границ, разных полей и отступов.

    Размещение и размер. Переполнение и обрезка

    top, left, right и bottom управляют положением элемента относительно контейнера: top устанавливает расстояние верхней границы элемента от верхней границы контейнера; bottom - нижней границы элемента от нижней границы контейнера и т.д. Эти свойства работают только тогда, когда элемент позиционирован абсолютно (а контейнером, относительно которого ведется отсчет, считается тот контейнер, которые позиционирован абсолютно, относительно или фиксированно). Позиционированию посвящена отдельная лекция.

    width и height устанавливают ширину и высоту элемента. Следует иметь в виду, что фактическая высота элемента на экране - это общая сумма высоты, верхнего и нижнего полей, верхнего и нижнего отступов, а также верхней и нижней границ. То же относится и к ширине.

    max-width и max-height , а также min-width и min-height определяют соответственно максимальные и минимальные размеры элемента.

    overflow определяет, как отображать содержимое элемента, если оно не вмещается внутри него - такое может произойти, если размеры элемента ограничены при помощи одного из описанных в данном разделе свойств. Значения: visible, hidden, scroll, auto. Значение visible позволяет показать не поместившееся содержимое вне области элемента (IE6- просто увеличивает в этом случае саму область); hidden скрывает любое содержимое за пределами отведенной ему области; scroll добавляет полосы прокрутки к элементу, auto добавляет полосы прокрутки, только когда они необходимы.

    position: absolute;

    border: 2px solid black;

    overflow: scroll;

    overflow: hidden;

    overflow: visible;

    max-width: 150px;

    max-height: 100px;

    Эта секция имеет свойство стиля overflow: scroll - поэтому полосы прокрутки

    показаны (хотя и не нужны).

    Эта секция имеет свойство стиля overflow: hidden - поэтому не поместившийся

    в нее текст остается невидим. sed ultrices sed, malesuada pulvinar metus.

    Эта секция имеет свойство стиля overflow: visible - поэтому часть текста

    (если его много) может выходить за ее границы.

    Листинг 4.4. Применение свойства overflow (html, txt)

    Рис. 4.3 . Задание позиции, размера и поведения при переполнении блоков

    Упражнения . Измените значение scroll на auto. Добавьте в блок, на который влияет это свойство, столько текста, чтобы появился скроллер. Чем ограничена высота блока?

    clip создает прямоугольное окно, которое показывает часть элемента. Значения: rect(y1, x2, y2, x1), причем вырезанная область будет представлять собой прямоугольник с левым верхним углом в (x1; y1) и левым нижним в (x2; y2). Порядок координат легко запомнить, если заметить, что x1 перенесено в конец списка. Данное свойство влияет только на абсолютно позиционированные элементы.

    position: absolute;

    background-image: url(clipped.png);

    clip: rect(10px 240px 280px 20px);

    background-color: Blue;

    Листинг 4.5. Обрезка абсолютно позиционированных блоков (html, txt)

    Рис. 4.4. Обрезка блока

    Упражнение. Модифицируйте значение свойства clip так, чтобы показать а) верхнюю половину; б) левую половину; в) правую нижнюю четверть прямоугольника.

    display позволяет вариант отображения элемента: строчный сделать блочным (что вызывает разрыв линии над и под элементом, как у абзаца и секции), а блочный - строчным (что заставит элемент отображаться на той же линии, что и окружающие элементы, как якорь или изображение). Значения: block, inline, none (всего 17 значений, большинство из которых не дают никакого эффекта в современных браузерах). Значение none заставляет элемент полностью исчезнуть со страницы.

    display: inline;

    Этому заголовку назначено стилевое свойство display: inline

    и поэтому он располагается в одной строке с соседними элементами.

    сделаны блочными элементами

    и поэтому они располагаются на отдельных строках.

    Листинг 4.6. Изменение варианта отображения элемента при помощи свойства display (html, txt)

    Упражнение. Пронаблюдайте влияние свойства display, устанавливая его значения поочередно в block, inline и none.

    visibility определяет, отображает ли браузер элемент. В отличие от значения none свойства display, установка которого скрывает элемент и удаляет его из потока страницы, значение hidden свойства visibility оставляет пустое пространство в том месте, где был бы элемент.

    cursor позволяет изменять вид указателя мыши, когда он передвигается над определенным элементом. Значения: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress.

    Рис. 4.5. Применение свойства display

    Наследование. Разбивка на страницы

    Наследование элементами свойств контейнеров

    Наследование - это механизм, с помощью которого свойства, относящиеся к какому-либо элементу страницы, распространяются и на вложенные в него элементы. Например, поскольку элемент р (абзац) всегда находится внутри элемента body (тело документа), то атрибуты, применяемые к body, наследуются и р. Например, задав CSS-свойство color элементу body, вы тем самым установите цвет для всего текста документа (на каком бы уровне вложенности текст ни находился - в абзаце, списке или заголовке). Таким образом, механизм наследования экономит время: без него дизайнеру пришлось бы заботиться отдельно о секциях, абзацах, выделениях и т.п.

    С другой стороны, естественно, что большинство CSS-свойств вообще не наследуется, например border - иначе бы рамка, заданная, например, для body, появилась бы и во всех списках (в каждом пункте и подпункте), абзацах и других блоках. Как правило, свойства, которые затрагивают размещение элементов на странице (отступы, поля, рамки элементов), не наследуются.

    Обычно наследуются следующие основные свойства: color, font, letter-spacing, line-height, list-style, text-align, text-decoration, text-indent, text-transform, visibility, word-spacing. Но и здесь возможны исключения: задание свойств color и font-size для body не повлияет на цвет гиперссылок, а размеры заголовков, хотя и изменятся, но останутся больше размера обычного текста - это вытекает из здравого смысла.

    font-size: 20px;

    border: 5px double blue;

    Заголовок 1 уровня

    Текст в абзаце. В данном примере элементу body назначены следующие стилевые

    свойства: цвет текста, размер шрифта, рамка и поле. Как видите, вложенные

    элементы наследуют эти свойства выборочно.

    Листинг 4.7. Наследование стилей (html , txt )

    Рис. 4.6. Наследование стилей

    Упражнение. Какие свойства элемента и какими элементами унаследованы в данном примере от свойств body ?

    Свойства, относящиеся к представлению документа на печатном носителе

    page-break-before и page-break-after управляют разрывом страниц. Если применить одно из этих свойств со значением always к какому-либо элементу страницы, то при печати документа будет произведен переход на новую страницу соответственно до или после этого элемента. Существует и ряд других свойств, относящихся к печатному носителю, но они пока не получили единой поддержки во всех браузерах.