Лабораторная работа 7. Работа со стилями
Стиль – это правило, указывающее браузеру, как выводить на экран содержимое какого-то определенного тега (у каждого тега есть ряд присущих ему свойств, значения которых определяют, как этот тег воспроизводится браузером). Правило приписывает определенное значение одному или нескольким свойствам тега или нескольким тегам, например: цвет, шрифт, интервал между строками, отступы в таблицах, фон и т.д.
Стили из этих различных источников применяются к документу, сочетаясь и определяя свойства результирующего стиля, которые подобно каскаду водопадов, ступенчато ниспадают, начиная с внешних таблиц, продолжаясь на уровне документа и оканчивая свой путь во встроенных стилях тегов. Этот каскад свойств и стилевых правил и дал название стандарту каскадных таблиц стилей - CSS. Одно из основных преимуществ CSS – это возможность легко применять набор стилей ко всем однотипным элементам. Кроме того, отредактировав всего одну строку CSS – файла, можно поменять вид всех заголовков или таблиц сайта. Это позволяет разработчику сосредоточиться на дизайне, а не на рутинной работе.
Таблицы стилей предназначены для:
изменения расстояний между строками, словами и отдельными символами,
установки левого, правого, верхнего и нижнего полей элемента (блока текста контейнера HTML),
установки отступа элемента,
изменения размера, стиля, других атрибутов шрифта элемента,
установки рамки вокруг элемента,
включения фонового изображения и фонового цвета в элемент.
Большим преимуществом таблиц стилей является возможность отделить операцию форматирования от содержания документа. Сначала определяется, как должен выглядеть текст в том или ином месте страницы, а затем вводится сам текст. Если позже необходимо заменить цвет шрифта заголовка на синий, например, для этого достаточно поменять только стиль этих заголовков. Делать изменения в тексте не нужно.
Способы применения таблицы стилей:
связывание (linking) - можно связать документ с таблицей стилей, хранящейся в отдельном файле;
встраивание (embedding) - можно встроить таблицу стилей в документ с помощью контейнера <STYLE>;
задание стиля для отдельного фрагмента документа - можно определять элементы стиля «на лету», т.е. указывать их в тегах, например, в теге абзаца;
импорт (import) - можно использовать зарезервированное слово @import для импортирования таблицы стилей в документ
Рассмотрим отдельные способы.
Связывание документа с таблицей стилей
Создание таблицы стилей в виде отдельного файла для применения его ко всем страницам сайта. Этот метод упрощает создание сайта. Можно разработать единую таблицу стилей, которую бы использовали различные пользователи.
Внешние таблицы стилей – это отдельные текстовые файлы с расширением css, в которых записаны правила оформления тегов:
my_styles.css
H1 {COLOR: red;}
BODY {BACKGROUND: black; FONT: medium helvetica;}
Этот файл содержит два правила.
В файле .css могут быть только правила и комментарии вида:
/ * текст комментария * /
Для связывания таблицы стилей с документом используется тег <LINK> следующим образом:
<LINK REL=stylesheet
HREF=http://www.myserver.com/mysheet.css
TYPE=“text/css”>
В атрибуте HREF указан URL-адрес таблицы стилей. Значение атрибута TYPE позволяет программам просмотра, не поддерживающим таблицы стилей, игнорировать указанный адрес.
Тег LINK должен располагаться в заголовке документа. Обязательные атрибуты тега:
REL=“stylesheet” – отвечает за установку взаимосвязи HTML-документа и CSS-таблицы
TYPE=“text/css” – описывает тип данных в таблице стилей
HREF=“url” – адрес может быть относительным или абсолютным, например: HREF=“my_styles.css” или HREF=“http://www.meyrweb.com/sheett.css”
MEDIA – указывает устройство, на которое будет выводится страница: all – все доступные устройства, screen – монитор, print – принтер, tv – экран телевизора. Например, MEDIA=“all”, MEDIA=“screen, print”
TITLE=“ название таблицы стилей “
Пример:
<HTML>
<HEAD>
<TITLE> Заголовок страницы </TITLE>
<LINK REL=“stylesheet” TYPE=“text/css” HREF=“my_styles.css” MEDIA =“screen”>
<LINK REL=“stylesheet” TYPE=“text/css” HREF=“my_styles1.css” MEDIA=“print” >
</HEAD>
Встраивание таблицы стилей в документ
Таблицу стилей необязательно хранить в виде отдельного файла. Ее можно встроить непосредственно в документ, однако в этом случае она будет действовать только внутри соответствующего файла документа. Для распространения таблицы на другие документы ее необходимо скопировать в каждый из них.
Таблицы стилей на уровне документа задаются с помощью тега <STYLE>. Этот тег должен находиться в заголовке документа:
<HTML>
<HEAD> <TITLE> Текст с синими заголовками </TITLE>
<STYLE TYPE=“text/css”>
H1 {COLOR: blue; FONT-STYLE: italic;}
</STYLE>
</HEAD>
<BODY>
…
Атрибут TYPE=“text/css” указывает, что используются стили каскадных таблиц стилей.
Импортирование таблиц стилей в документ
В одном HTML-документе можно подключать несколько таблиц стилей. При этом браузер загрузит обе таблицы, комбинируя их правила. Для этого используется тег <STYLE> с директивой @import:
<HTML>
<HEAD> <TITLE> Заголовок страницы </TITLE>
<STYLE TYPE=“text/css” >
@import url(“my_styles.css”)
H1 {COLOR: red}
</STYLE>
</HEAD>
Директива @import должна находиться в контейнере <STYLE> перед всеми остальными правилами – иначе она игнорируется. Можно использовать несколько директив @import – в этом случае загружается несколько таблиц. Директиву @import допустимо использовать в файле .css - получаем вложенные таблицы стилей.
Синтаксис таблиц стилей (применение селекторов и объявлений)
Таблицы стилей хранятся в текстовых файлах, удобных для редактирования. Их легко создавать вручную, однако существуют специальные редакторы таблиц стилей, например, MS FrontPage.
Таблицы стилей позволяют определять стиль для одного или нескольких тегов. Например, можно создать таблицу стилей для тегов <H1>, <P>, <EM>. Каждое определение называется правилом (rule). Структура правила:
Правило содержит селектор (тег HTML) за которым следует декларация (определение стиля).
Селектор – это чаще всего (но не всегда) – элемент HTML типа H1, P, EM, TABLE:
P {COLOR: silver;}
EM {BACKGROUND: red;}
Селектор является связующим звеном между определением и тегом. Ниже приведен пример правила, указывающего стиль для каждого из тегов заголовка <H1>:
H1 {COLOR: blue}
В блок объявлений (декларацию) входит одно или несколько объявлений. После знаков : и ; может быть произвольное количество пробелов.
Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и его значение, разделенные двоеточием. Каждое свойство может принимать несколько значений, одно из которых присваивается ему по умолчанию.
Значение – это либо одно ключевое слово, либо несколько допустимых ключевых слов, разделенных пробелами:
P{FONT:mediumhelvetica; }
Если указать неверное свойство или значение – все объявление будет проигнорировано целиком.
Допустимо группировать селекторы и объявления, например:
H1, H2, H3 {COLOR: purple;}
H4, P {COLOR: silver; BACKGROUND: green;}
Селекторы разделяются “ , ”, а объявления - “ ; ”
H1,P{
FONT: helvetica;
COLOR: purple;
BACKGROUND: aqua;
}
Применение группировок и наследования
Группировка – удобный способ, помогающий обеспечить небольшой объем, выразительность и простоту обслуживания таблиц стилей
Наследование - это механизм, с помощью которого стили применяются не только к самим элементам, но также к их потомкам.
Например, если цвет применяется к элементу <OL> , то этот цвет будет применен также и к элементам <IL> в этом списке:
OL { COLOR: gray;}
Параметры CSS:
параметры шрифта: FONT-WEIGHT: [ bold | normal | number] - жирность шрифта FONT-STYLE: [normal | italic | oblique] - наклон шрифта FONT-SIZE: number - размер шрифта FONT-FAMILY: name - гарнитура шрифта COLOR: number - цвет шрифта BACKGROUND-COLOR: number - цвет подложки BACKGROUND: url - текстурная подложка
параметры абзаца: TEXT-ALIGN: [ left | right | center | justify] - выравнивание TEXT-INDENT: number - отступ красной строки LINE-HEIGHT: number - интерлиньяж LETTER-SPACING: number - трекинг PADDING-LEFT: number - отступ от текста слева PADDING-RIGHT: number - отступ от текста справа PADDING-TOP: number - отступ от текста сверху PADDING-BOTTOM: number - отступ от текста снизу MARGIN-LEFT: number - отступ от границы слева MARGIN-RIGHT: number - отступ от границы справа MARGIN-TOP: number - отступ от границы сверху MARGIN-BOTTOM: number - отступ от границы снизу
Единицы измерения в CSS
Абсолютные единицы измерения:
Дюймы in2,54 см
Сантиметры cm
Миллиметры mm
Пункты pt1/72 дюйма
Пики pc1/6 дюйма или 12 пунктов
Пиксели px
К относительным единицам измерения относятся:
Один em - это значение свойства font-size заданного текста: если для элемента font-size равен 14 пикселам, то 1em равен 14 пикселов; 1.5em равно 21 пиксел. Величина em зависит от того, к каким элементам применяется.
Ex - это высота строчной буквы х заданного шрифта.
В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:
относительный размер в процентах (%)
относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)
абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)
абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)
абсолютный размер в пикселях (px)
Задание цвета в CSS
Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:
при помощи названия цвета: yellow, red, green, grey,..
шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..
десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..
Можно задать повторение стиля в определенном направлении. Для этого используется свойство BACKGROUND-REPEAT. Значения свойства: repeat / repeat-x / repeat-y / no-repeat/. Начальное значение: no-repeat.
Можно задать расположение фонового изображения с помощью свойства BACKGROUND-POSITION. Значения: top / center / bottom / left / right. Например:
DIV {BACKGROUND-COLOR: blue;
BACKGROUND-IMAGE: url(fon.gif);
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-POSITION: bottom;}
При использовании блоков внутри HTML-документы можно моделировать их свойства. На рисунке показаны основные элементы блоков:
Свойства WIDTH и HEIGHT позволяют определить ширину и высоту блоков. Значения свойства: длина / %-ое значение /auto. Начальное значение – auto. Наследование отсутствует.
Поля определяются свойством MARGIN. Значения: длина /%-ое значение/auto. Наследование отсутствует. Начальное значение не определено. %-ое значение вычисляется относительно ширины родительского элемента. В свойстве MARGIN можно использовать единицы длины - дюймы, пиксели, см.
Абсолютные значения и поля:
а) P { BACKGROUND–COLOR : silver; margin: 10px; } - поле в 10px со всех сторон абзаца.
б) разные поля:
P { MARGIN : 10px 20px 15px 5px; }
При разных полях порядок очень важен - 1Top– 2Right– 3Bottom– 4Left:
в) Допускаются различные единицы измерения:
H2 { MARGIN : 14px 5em 1.0in 3ex;}
Некоторые элементы (например, абзацы <Р>) имеют поля снизу и сверху по умолчанию. Свойство MARGIN может отменить их.
Пример определения поля с одной стороны:
MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, MARGIN-LEFT
H2 { MARGIN-LEFT: 3 em; }= MARGIN : 0 0 0 3 em
В одном правиле можно задать несколько этих свойств (в данном случае удобно просто MARGIN с несколькими значениями):
P { MARGIN : 10% 20%; } – сверху и снизу по 10%, справа и слева – по 20%
Отрицательные и свернутые поля
Отрицательные поля позволяют переместить элемент за границы его родительского элемента.
DIV {BACKGROUND: silver;
BORDER:1px solid;
MARGIN: 0 3em 0 3em;
}
P.A { BACKGROUND: #f00;
MARGIN:1em -2em 1em 25%;
BORDER:1px solid;
BORDER-RIGHT: none;
TEXT-ALIGN: justify;
}
Поля и строковые элементы
В строковых незамещаемых элементах (<А>, <STRONG>, <EM> и т. п.) браузеры устанавливают поля только слева и справа. Высоту строк вокруг таких элементов можно выставить с помощью свойств LINE – HEIGHT, FONT – SIZE и VERTICAL – ALIGN.
В строковых замещаемых элементах (<IMG>) поля выставляются и сверху, и снизу (относительно базовой линии, если не использовали VERTICAL – ALIGN).
Рамки
Рамки рисуются поверх фона элемента. Чтобы зарисовать рамку, нужно задать ее стиль с помощью свойства BORDER-STYLE. Значения:
none – нет (это значение по умолчанию)
hidden – скрытая
dotted – в виде точек
dashed – в виде тире
solid – сплошная
double – двойная
inset – вдавленная
outset – выпуклая
Ширина рамки
Определяется свойством BORDER-WIDTH. Значения: thin / medium / thick / длина. По умолчанию ширина – medium = 2-3 px. Процентные значения для рамок не допускаются.
Цвета рамок
Определяется свойством BORDER-COLOR. Значения свойства: цвет / transparent. Если цвет не объявлен, то будет применяется основной цвет элемента или его родителя.
Сложная рамка
H1 { BORDER-LEFT: 3px solid gray;
BORDER-RIGHT: black 0.5em dotted;
BORDER-TOP: thick silver solid;
BORDER-BOTTOM: double #oo88ff 10 px; }
Можно применять каскад:
H1 { BORDER : thick silver solid;
BORDER-LEFT-WIDTH : 20 px; }
Рамки и строковые элементы
Ширина рамки для строкового незамещаемого элемента не меняет высоту строки, следовательно рамка может «залезать» за строки выше и ниже. Левая и правая рамки «раздвигают» текст и хорошо видны. Рамки в замещаемых строковых элементах работают хорошо.
Отступы
Определяются свойством PADDING. Отступ – это расстояние между рамкой и областью содержимого. Свойство BACKGROUND элемента закрашивает область содержимого этого элемента вместе с отступами. Отступы могут быть разными с разных сторон, как и поля и рамки:
P { PADDING : 10 px 0.25em 3ex 3 cm; }
%-ое содержание отступа определяется относительно ширины родительского элемента.
Практическая часть
Задание 7.1.
В программе блокнот создайте следующие файлы, сохраните их все в папке Primer_6_1.Просмотрите результат в браузере.
|
Файл S1.css |
Файл PR_6_1.html |
|
P.BIG { FONT-SIZE: 16px; FONT-WEIGHT: bold; COLOR: #ff0000; } |
<HTML> <HEAD> <TITLE> Пример использования css </TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="S1.css"> </head> <P CLASS=big> Накладываем стиль на этот текст </P> </HTML> |
Задание 7.2.
В программе блокнот создайте следующие файлы, сохраните их все в папке Primer_6_2. Просмотрите результат в браузере.
Файл STLS.CSS
<STYLE>
<!--
P {FONT: 10pt times; COLOR: black; TEXT-INDENT: 0.4in; MARGIN-RIGHT: 0.5in}
H1 {FONT: 30pt arial; COLOR: red}
H2 {FONT: 20pt arial; COLOR: gray}
H3 {FONT: 12 pt arial; COLOR: #225522; FONT-STYLE: italic}
-->
</STYLE>
Файл Pr_6_2.html
<HTML>
<HEAD>
<TITLE>примеры работы со стилями</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="stls.css">
</HEAD>
<BODY>
<H1 ALIGN=center>основной заголовок по центру</H1>
<H2 ALIGN=right>подзаголовок, по правому краю</H2>
<P ALIGN=center>обычный текст</P>
<HR SIZE=2>
<H3 ALIGN=center>путь к мудрости</H3>
<P ALIGN=center><I><B>(пример использования тега <pre>)</I></B></P>
<PRE><FONT SIZE=3>К мудрости путь - по ухабам ошибок;
иди же и носа не вешай:
ушибы,
ушибы
и снова ушибы,
но реже,
и реже,
и реже...
<I>Из собрания груков Пита Хэйна</I>
</PRE>
<HR SIZE=2>
<P ALIGN=center>
<FONT SIZE=3>© Dmitry Usencow, 2000</FONT></P>
</BODY>
</HTML>
Задание 7.3.
Создайте WEB - страницу, которая содержит следующие элементы, форматирование их определите через CSS- файл:
заголовок (16 размер, название шрифта - verdana, курсив);
основной текст документа (14 размер, красный цвет, полужирный, по центру, отступы со всех сторон по 20 мм);
таблицу, 2 строки на 2 столбца (13 размер, синий, обычный, слева от границы листа)
Текст страницы: