Помощничек
Главная | Обратная связь


Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

Стили и таблицы стилей



На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств, значения которых определяют его вид при выводе браузером. Так, например, у большинства тегов (<P>, <TD>, и т. д.) есть свойство COLOR, значение которого определяет цвет, используемый для отображения содержимого тега.

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

· управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..);

· управляющие форматированием абзаца (отступ красной строки, выравнивание, интерлиньяж, расстояние между словами,..);

· управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока в документе, видимость блока,..);

· другие (цвет ссылок, изменение внешнего вида курсора,..).

Использование стилей

Одним из способов подключения стиля к HTML-странице (остальные способы рассматриваются в параграфе "Каскадные таблицы стилей") является использование в заголовке документа контейнера <STYLE>:

<HEAD>...<STYLE TYPE="text/css"> ... описание стилей ...</STYLE>...</HEAD>

Включение в этот контейнер атрибута TYPE="text/css" указывает браузеру, что в нем содержится описание стилей. В настоящее время атрибут TYPE может принимать только указанное значение, однако если он будет опущен, то некоторые браузеры могут проигнорировать всю таблицу стилей.

Само описание стиля включает селектор тега, указывающий имя тега, на который распространяется правило стиля, и фигурные скобки, содержащие одну или более пар объявлений вида "свойство_стиля:значение", разделенных точкой с запятой:

селектор_тега{ свойство_стиля1:значение1; свойство_стиля2:значение2; свойство_стиля3:значение3;}

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


Пример

<HTML><HEAD><TITLE>Первый пример использования стилей</TITLE><STYLE TYPE="text/css"><!-- H1 {text-align: center}--></STYLE></HEAD><BODY><H1>Заголовок</H1><P>Какой-то текст</BODY></HTML>

В данном примере в секции заголовка документа <HEAD> ... </HEAD> задан стиль (правило), согласно которому браузер должен выравнивать по центру страницы содержимое контейнера <H1> ... </H1>: свойству text-align присвоено значение center.

Обратите внимание на использование тегов комментария (<!-- и -->). Все содержимое контейнера <STYLE> находится между ними. Это позволяет скрыть информацию о стиле от браузеров, которые не распознают тег <STYLE> (в противном случае они могут принять правила за текст и вывести их на экран).

В таблицах стилей также можно использовать комментарии, позволяющие описать то или иное свойство: текст, расположенный между символами /* и */ не обрабатывается браузером и не рассматривается, как элемент таблицы стилей (не путайте теги комментария и комментарии таблиц стилей, они имеют разный синтаксис и разное назначение).


Пример
Рассмотрим пример оформления текста. Установим белый цвет фона документа (свойство background-color), затем задействуем свойства управления шрифтом: color (цвет), font-family (гарнитура шрифта) и font-size (размер шрифта), например,

· цвет -- серый;

· семейство шрифта (гарнитура) -- Times, шрифт с засечками;

· размер шрифта -- 14 пунктов.

Добавим свойства, связанные с форматированием абзаца: text-indent (отступ красной строки), text-align (выравнивание), padding-left (отступ слева), например,

· дополнительный отступ красной строки -- 10pt;

· выравнивание -- по ширине документа;

· отступ от левого края -- 20pt.

Установим темно-красный цвет (свойство color) заголовков с первого по третий уровень.

Документ примет вид:

<HTML><HEAD><TITLE>Второй пример использования стилей</TITLE><STYLE TYPE="text/css"><!-- BODY {background-color: white} H1, H2, H3 {color: red} P { /* шрифт */ color: gray; font-family: Times, serif; font-size: 14pt; /* абзац */ text-indent: 10pt; text-align: justify; padding-left: 20pt; }--></STYLE></HEAD><BODY>...</BODY></HTML>

Задание значений

Для задания значений в правилах таблиц стилей важно использовать корректный синтаксис.

Задание цвета (color), также как и в тегах HTML, возможно двумя способами: наименованием и численным значением. Спецификация CSS1 ("Спецификации каскадных таблиц стилей, уровень 1"), разработанная Консорциумом World Wide Web (W3C), перечисляет только 16 наименований цветов, которые можно использовать в таблицах стилей:

aqua gray navy silverblack green olive tealblue lime purple whitefuchsia maroon red yellow

Другие наименования из полного списка цветов, приведенного ниже, также могут поддерживаться некоторыми браузерами.

Web-цвета по оттенкам
black white Нейтральные/холодные darkgray ghostwhite silver darkslategray gray slategraydimgray lightgrey snowgainsboro lightslategray Нейтральные/теплые antiquewhite ivory papayawhipcornsilk linen seashellfloralwhite oldlace Коричневые/бронзовые beige chocolate rosybrownbisque khaki siennablanchedalmond moccasin tanbrown navajowhite wheatburlywood peru

 

Розовые coral lightcoral mistyrose darksalmon lightpink pinkdeeppink lightsalmon salmonhotpink magenta Оранжевые darkorange orange orangered peachpuff Желтые darkgoldenrod lemonchiffon palegoldenrodgold lightyellow yellowgoldenrod lightgoldenrodyellow Зеленые aquamarine greenyellow olivechartreuse honeydew olivedrabdarkgreen lawngreen palegreendarkkhaki lime seagreendarkolivegreen limegreen springgreen darkseagreen mediumseagreen yellowgreenforestgreen mediumspringgreen green mintcream Фиолетовые blueviolet lavenderblush plumdarkmagenta mediumorchid purpledarkorchid mediumpurple thistledarkviolet mediumvioletred violetfuchsia orchidlavender palevioletred Сине-зеленые aqua darkturquoise mediumauqamarinecyan lightcyan mediumturquoisedarkcyan lightseagreen Синие aliceblue deepskyblue mediumslateblueazure dodgerblue midnightblueblue indigo navycadetblue lightblue powderbluecornflowerblue lightskyblue skybluedarkblue lightsteelblue slatebluedarkslateblue mediumblue steelblue

 

Красные crimson firebrick maroondarkred indianred red

При задании цвета численным значением используют либо шестнадцатеричное значение, либо тройку вида rgb(red, green, blue), где red, green и blue являются числами в диапазоне от 0 до 255, либо процентными величинами, определяющими яркость каждой составляющей цвета в RGB. Значения 255 или 100% указывают, что соответствующая составляющая цвета имеет максимальную яркость; значения 0 или 0% -- соответствующая составляющая полностью отсутствует.


Пример

H1 {color: #0000FF}H1 {color: #00F}H1 {color: rgb(27, 119, 207)}H1 {color: rgb(50%,75%, 0%)}

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

При задании единиц длины (length) используют число, за которым без пробелов следует двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.) Обозначения единиц измерения еm и ех относятся к общей высоте шрифта и высоте буквы "х" соответственно. Единица измерения рх соответствует величине пиксела на экране, а in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро соответственно. В дюйме 25,4 миллиметра или 72,27 пункта, а в цицеро -- 12 пунктов. Если значение равно нулю, обозначение единицы измерения можно опустить.


Пример

P {font-size: 12pt}H3 {text-indent: 20em}

Некоторые значения могут быть заданы в процентах (percent). При этом они вычисляются как процент от другого свойства элемента, обычно его размера.


Пример

P {line-height: 120%}

Для указания местоположения ресурса используется его URL-адрес. В этом случае после ключевого слова url сразу (без пробелов) следует открывающая круглая скобка, а за ней - URL, заключенный, при желании, в одиночные или двойные кавычки, и закрывающая правая скобка.


Пример

BODY { background: url(http://www.image.ru/image/pic1.gif) }

Наконец, некоторые значения являются последовательностью (list) других величин и описываются как "список" некоторых значений. Список состоит из одного или более допустимых значений, разделяемых запятыми.


Пример

P {font-family: Times, serif}

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

Свойство и его описание Браузер
background: list Составное свойство, определяющее привязку фона (background-attachment), цвет фона (background-color), изображение для фона (background-image), положение фона и повторение фона (background-position, background-repeat); list представляет собой значения этих свойств, указанные в любом порядке N, IE
background-attachment: scroll Указывает, должно ли фоновое изображение фиксироваться или прокручиваться вместе с документом. Допустимые значения: fixed (фиксированный), scroll (прокручиваемый) IE
background-color: transparent Устанавливает цвет фона для элемента. Допустимые значения: color, transparent (прозрачный) N, IE
background-image: none Указывает фоновое изображение элемента. Допустимые значения: url, transparent (прозрачный), none N, IE
background-position Устанавливает исходное положение фонового изображения элемента; как правило, указываются парные значения для определения координат х, у. Положение по умолчанию 0%,0%. Допустимые значения: length, percent, top, center, bottom, left, right IE
background-repeat: repeat Определяет, каким образом фоновое изображение заполняет элемент. Допустимые значения: repeat, repeat-x, repeat-y, no-repeat N, IE
border: list Устанавливает все четыре границы элемента; значением может быть одна или более величин цвета, ширины границы и стиля границы N, IE
border-bottom: list Устанавливает нижнюю границу элемента; значением может быть одна или более величин цвета, ширина нижней границы и стиль границы IE
border-bottom-width: medium Устанавливает толщину нижней границы элемента. Допустимые значения: length, medium, thin, thick N, IE
border-color: list Устанавливает цвет всех четырех границ элемента; значением по умолчанию является цвет элемента N
border-left: list Устанавливает левую границу элемента; значением может быть одна или более величин цвета, ширина левой границы и стиль границы IE
border-left-width: medium Устанавливает толщину левой границы элемента. Допустимые значения: length, medium, thin, thick N, IE
border-right: list Устанавливает правую границу элемента; значением может быть одна или более величин цвета, ширина правой границы и стиль границы IE
border-right-width: medium Устанавливает толщину правой границы элемента. Допустимые значения: length, medium, thin, thick N, IE
border-style: none Устанавливает стиль всех четырех границ элемента. Допустимые значения: none (отсутствует), dashed (штриховая), dotted (пунктир), double (двойная), groove (канавка), inset (утопленная), outset (возвышающаяся), ridge (гребень), solid (сплошная) N, IE
border-top: list Устанавливает верхнюю границу для элемента; значением может быть одна или более величин цвета, ширина верхней границы и стиль границы IE
border-top-width: medium Устанавливает толщину верхней границы элемента. Допустимые значения: length, medium, thin, thick N, IE
border-width: medium Устанавливает толщину всех четырех границ элемента. Допустимые значения: length, medium, thin, thick N, IE
clear: none Определяет, какие поля элемента не должны примыкать к плавающему элементу. Элемент будет перемещен вниз на такую величину, чтобы это поле оказалось свободным. Допустимые значения: none (нет), both (оба), left (левое), right (правое) N, IE
color: color Задает цвет элемента N, IE
display: block Управляет отображением элемента. Допустимые значения: block (блок), inline (внутристрочный), list-item (элемент списка), none (нет) N
float: none Определяет, является ли элемент плавающим с выравниванием по левому или правому краю, позволяя тексту обтекать его, либо выводится внутристрочно (при указании none). Допустимые значения: left (слева), right (справа), none (нет) N, IE
font: list Определяет все атрибуты шрифта для элемента; значениями могут быть стиль шрифта, тип шрифта, насыщенность, размер, высота строки и семейство шрифтов в указанном порядке N, IE
font-family: список имен шрифтов Определяет шрифт, используемый в элементе. Значение может быть как специфическим именем, так и одним из родовых шрифтов serif, sans-serif, cursive, fantasy или monospace N, IE
font-size: medium Определяет размер шрифта. Допустимые значения: length, percent, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller N, IE
font-style: normal Определяет начертание шрифта как нормальное или один из видов наклонного. Допустимые значения: italic (курсив), oblique (наклонный), normal (нормальный) N, IE
font-variant: normal Указывает, должен ли шрифт выводиться маленькими прописными буквами. Допустимые значения: smallcaps, normal IE
font-weight: normal Определяет насыщенность начертания шрифта. Если используется число, оно должно быть кратным 100 и находиться между 100 и 900; 400 соответствует нормальному шрифту, а 700 равносильно ключевому слову bold (полужирный). Допустимые значения: number, bold, bolder, lighter, normal N, IE
height: auto Задает высоту элемента. Допустимые значения: length, auto N
letter-spacing: normal Вставляет дополнительные промежутки между символами текста. Допустимые значения: length, normal IE
line-height: normal Устанавливает расстояние между базовыми линиями соседних строк. Допустимые значения: length, number, percent, normal N, IE
list-style: list Определяет стили списка с использованием любых значений для изображения, положения и типа списка - list-style-image, list-style-position, list-style-type N, IE
list-style-image: none Определяет изображение, используемое в качестве маркера элемента списка вместо устанавливаемого типом списка list-style-type. Допустимые значения: url, none IE
list-style-position: outside Устанавливает отступ или выступ (по умолчанию) маркера элемента списка относительно его содержания. Допустимые значения: inside (отступ), outside (выступ)  
list-style-type: disk Определяет маркер элемента списка для неупорядоченных списков (circle, disc, square - окружность, круг, квадрат соответственно) или упорядоченных списков (все остальные). Допустимые значения: circle (окружность), square (квадрат), decimal (десятичные цифры), disc (круг), lower-alpha (строчные буквы), lower-roman (строчные римские цифры), none (нет), upper-alpha (прописные буквы), upper-roman (прописные римские цифры) N, IE
margin Определяет все четыре поля элемента. Допустимые значения: length, percent, auto IE
margin-bottom Определяет нижнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto N IE
margin-left Определяет левое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto N, IE
margin-right Определяет правое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto N, IE
margin-top Определяет верхнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto N, IE
padding: list Задает величину всех четырех отступов вокруг элемента IE
padding-bottom Указывает величину отступа от элемента снизу; значением по умолчанию служит 0. Допустимые значения: length, percent N, IE
padding-left Указывает величину отступа от элемента слева; значением по умолчанию служит 0. Допустимые значения: length, percent N, IE
padding-right Указывает величину отступа от элемента справа; значением по умолчанию служит 0. Допустимые значения: length, percent N, IE
padding-top Указывает величину отступа от элемента сверху; значением по умолчанию служит 0. Допустимые значения: length, percent N, IE
text-align: стиль Определяет тип выравнивания для элемента. Значение по умолчанию зависит от элемента. Допустимые значения: center (по центру), justify (по всей доступной области), left (к левому краю), right (к правому краю) N, IE
text-decoration: none Определяет виды украшения текста; значения можно объединять. Допустимые значения: blink (мерцание), none (нет), line-through (перечеркнутый), overline (надчеркивание), underline (подчеркивание)  
text-indent Задает отступ первой строки в элементе; значением по умолчанию служит 0. Допустимые значения: length, percent N, IE
text-transform: none Преобразует указанным образом текст в элементе. Допустимые значения: capitalize (прописные буквы), lowercase (нижний регистр), none (нет), uppercase (верхний регистр) N, IE
vertical-align: позиция Выравнивание элемента по вертикали. Значение по умолчанию зависит от элемента. Допустимые значения: percent, baseline (базовая линия), bottom (низ), middle (середина), sub (подстрочный), super (надстрочный), text-bottom (низ текста), text-top (верх текста), top (верх) N, IE
word-spacing: normal Вставляет дополнительный промежуток между словами. Допустимые значения: length, normal  
white-space: normal Определяет, как обрабатываются символы пробелов, табуляции и пустой строки в элементе. Допустимые значения: normal, nowrap (без переноса), pre N
width: auto Определяет ширину элемента. Допустимые значения: length, percent, auto N, IE

Классы стилей

При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.

Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P>), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.

Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора класса CLASS.

<HTML>...<BODY>...<P CLASS="ask">Вопрос журналиста</P><P CLASS="answer">Ответ интервьюируемого</P>...</BODY></HTML>

В разделе HEAD документа зададим стиль каждого класса.

P.ask{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; text-align: justify; color: gray; margin-left: 100px; font-weight: bold;} P.answer{ font-family: Times, serif; font-size: 14pt; color: black; text-align: justify; margin-left: 20px;}

Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.

Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.




©2015 studopedya.ru Все права принадлежат авторам размещенных материалов.