ОГЛАВЛЕНИЕ
Введение
1 Формат CSS
1.1 Свойства задания полей документа
1.2 Свойства текста
1.2.1 Свойство text-align
1.2.2 Свойство text-indent
1.2.3 Свойство text-decoration
1.2.4 Свойство word-spacing
1.2.5 Свойство letter-spacing
1.2.6 Свойство writing-mode
1.3 Свойство задания цвета
1.4 Свойства задания параметров шрифтов
1.4.1 Свойство font-style
1.4.2 Свойство font-weight
1.4.3 Свойство font-variant
1.4.4 Свойство font-size
1.4.5 Свойство font-family
1.5 Свойство вертикального выравнивания
2 Способы задания CSS в HTML-документе
2.1 Внешнее задание CSS
2.2 Внутренее задание CSS
2.3 Встроеное задание CSS
Пример №1
Введение
На данной уроке мы познакомимся с CSS стилями. Каскадные листы (таблицы) стилей CSS (Cascading Style Sheets) также, как и язык HTML, разработаны консорциумом W3C и тоже служат целям представления документов на Web-страницах. CSS стили не являются частью HTML, не используються самостоятельно, но имеется возможность их подключения в HTML-документу для совместного применения.
Каскадные листы стилей, не выполняя всех функций языка HTML, обладают расширенными возможностями при форматировании текста. Поэтому одним из современных требований на разработку Web-сайтов является рекомендация использования CSS стилей вместо тэгов HTML везде, где это возможно.
1 Формат CSS стилей
Каскадные листы стилей имеют следующий формат:
CSS-идентификатор {свойство: значение; свойство: значение; . . . }
В качестве CSS-идентификатора могут быть использованы:
- HTML-тэги (например, BODY, H1, P, ...);
- HTML-тэги с указанием класса (например, P.small - для параграфа с маленькими буквами);
- классы без указания HTML-тэга (например, .green_it - для любого тэга, с зелеными наклонными символами);
- идентификаторы (например, #zz).
Ниже приведены свойства каскадных листов стилей и их возможные значения.
1.1 Свойства задания полей документа
Поля HTML-документа могут быть заданы с помощью следующих свойств CSS, которые указывают размер :
- margin-left - левого поля;
- margin-right - правого поля;
- margin-top - верхнего поля;
- margin-bottom - нижнего поля.
Размер всех полей может быть задан с помощью одной из следующих единиц измерения (если единица измерения не задана, то предполагается, что она задана в пикселях):
- pt - в пунктах (1/72 дюйма);
- px - в пикселях;
- mm - в мм;
- cm - в см;
- in - в дюймах;
- % - в процентах размера родителя.
Например, CSS
P{margin-left:2сm}
задает размер левого поля всех параграфов текста равным 2 см.
Отметим, что в случае, когда для одного и того же свойства тэга с помощью HTML и CSS стилей задаются разные значения, приоритет отдается CSS. Например, при следующем задании верхнего поля документа:
<BODY STYLE="margin-top:50" TOPMARGIN=100>
верхнее поле будет иметь размер 50 пикселей.
1.2 Свойства текста
Для задания параметров текста на Web-страницах используются следующие свойства CSS:
- text-align - задание горизонтального выравнивания шрифта;
- text-indent - задание отступа первой строки параграфа;
- text-decoration - задание декоративного выделения текста;
- word-spacing - задание расстояния между словами в тексте;
- letter-spacing - задание расстояния между символами в слове;
- writing-mode - задание направления строк текста: горизонтальное или вертикальное.
1.2.1 Свойство text-align
Горизонтальное выравнивание текста на Web-страницах осуществляется с помощью свойства text-align, которе имеет следующие значения:
- left - по левому краю экрана (значение по умолчанию);
- right - по правому краю экрана;
- justify: текст выравнен по обеим краям (если длина текста больше длины строки экрана);
- center - по центру экрана.
1.2.2 Свойство text-indent
С помощью свойства text-indent задается величина отступа первой строки параграфа (единицы измерения - см. пункт 1.1). Значение по умолчанию 0.
1.2.3 Свойство text-decoration
Помимо указания цвета и параметров шрифта для выделения фрагментов текста может быть также использовано свойство text-decoration , которое может принимать следующие значения:
- none - декоративное выделение текста не используется (значение по умолчанию);
- underline - подчеркивание (линия снизу);
- overline - надчеркивание(линия сверху);
- line-through - перечеркивание.
1.2.4 Свойство word-spacing
Свойство word-spacing указывает расстояние между словами в тексте и может иметь следующие значения:
- normal - стандартное расстояние (значение по умолчанию);
- величина, указывающая дополнительное расстояние (единицы измерения - см. пункт 1.1).
1.2.5 Свойство letter-spacing
Свойство letter-spacing указывает расстояние между символами в слове и может иметь следующие значения:
- normal - стандартное расстояние (значение по умолчанию);
- величина, указывающая дополнительное расстояние (единицы измерения - см. пункт 1.1).
Например, CSS
.big_space{letter-spacing:5mm}
задает для всех тэгов класс текста "big_space" с увеличенным на 5 мм расстоянием между буквами.
1.2.6 Свойство writing-mode
Свойство writing-mode задает направление строк текста: горизонтальное или вертикальное и может иметь следующие значения:
- lr-tb - обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);
- tb-rl - поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.
1.3. Свойство задания цвета
Для задания цвета на Web-страницах используется свойство color . Имеется три возможности задания значения цвета (первые две такие же, как в HTML - см п. 2.1 - Форматирование HTML):
- с помощью английских названий;
- с помощью значения #RrGgBb;
- с помощью значения #RGB.
Третий вариант задания цвета отличается тем, что значения компонентов цветов изменяются в пределах от 0 до 16.
1.4. Свойства задания параметров шрифтов
Для задания параметров шрифтов на Web-страницах используются следующие свойства CSS:
- font-style - задание стиля шрифта;
- font-weight - задание жирности шрифта;
- font-variant - задание вида строчных букв;
- font-size - задание размера шрифта;
- font-family - задание семейства шрифтов.
1.4.1 Свойство font-style
Свойство стиля шрифта font-style имеет следующие значения:
- normal - обычный (значение по умолчанию);
- italic - наклонный (курсив).
1.4.2 Свойство font-weight
Свойство жирности шрифта font-weight имеет следующие значения:
- normal - обычный (значение по умолчанию);
- bold - полужирный.
1.4.3 Свойство font-variant
Свойство вида строчных букв font-variant имеет следующие значения:
- normal - обычный (значение по умолчанию);
- small-caps - делает строчные буквы заглавными, но меньшего размера.
1.4.4 Свойство font-size
Размер шрифта с помощью свойства font-size может задаваться:
- в физических единицах: pt, px, mm, cm, in, % (см. пункт 1.1);
- в условных единицах: xx-small, x-small, small, medium, large, x-large,xx-large;
- в относительных единицах:smaller, larger.
1.4.5 Свойство font-family
Свойство семейства шрифтов font-family задает типы шрифтов по их наименованию также, как это делается в HTML с помощью параметра FACE тэга <FONT> (см. пункт 2.5 - Форматирование HTML):
P{font-family:"Arial Cyr, Arial, HelvDL"}
По умолчанию задается семейство шрифтов Times.
1.5. Свойство вертикального выравнивания
Для вертикаьного выравнивания текста используется свойство vertical-align, которое может иметь следующие значения:
- baseline - выравнивание базовой линии элемента по базовой линии родителя (используется по умолчанию);
- sub - превращает текст в нижний индекс;
- super - превращает текст в верхний индекс;
- top - выравнивание верха элемента по верху родителя;
- text-top - выравнивание верха текста элемента по верху текста родителя;
- middle - выравнивание центра элемента по центру родителя;
- bottom - выравнивание низа элемента по низу родителя;
- text-bottom - выравнивание низа текста элемента по низу текста родителя.
2. Способы задания CSS в HTML-документе
CSS не только расширяет возможности HTML, но и делает форматирование текста единообразным как для отдельно взятого документа, так и для группы документов, имеющих общее назначение. В зависимости от того, насколько общим будет использование тех или иных каскадных листов стилей, применяется один из трех возможных способов использования CSS стилей в HTML-документе:
- внешнее задание CSS;
- внутреннее задание CSS;
- встроенное задание CSS.
2.1 Внешнее задание CSS
При внешнем задании каскадные листы стилей формируются в соответствии с описанными выше правилами в виде отдельного файла, так же как и HTML-документ, с помощью простого текстового редактора. В качестве расширения файла для удобства пользователей лучше указать .css, хотя можно задавать и другие расширения.
Например, следующий файл с именем my.css
H1{text-align:center; color:#D0D; font: italic small-caps 0.7in tahoma}
P{text-indent:1.5cm; color:#000080;font-size:large}
содержит два каскадных листа стилей, которые задают:
- параметры заголовка первого уровня (его выравнивание, цвет и вид шрифта);
- параметры параграфа, которые являются общими для HTML-документов (размер абзаца, цвет и размер шрифта);
Отметим, что при описании параметров заголовка использована сокращенная форма задания свойств шрифта font: italic small-caps 0.5in tahoma вместо обычной font-style:italic; font-variant:small-caps; font-size:0.5in; font-family: tahoma. В этом случае необходимо придерживаться заданного порядка указания значений свойств.
Подключение созданного файла CSS к HTML-документу осуществляется с помощью одиночного тэга <LINK>, который размещается в области заголовка HTML-документа, т.е. между тэгами <HEAD> и </HEAD>. Тэг <LINK> содержит следующие параметры:
Поскольку к HTML-документу подключается файл с каскадными листами стилей, то в качестве значения параметра REL необходимо указать STYLESHEET, а в качестве значения параметра TYPE - "text/css". Так как это значение берется браузером по умолчанию, параметр TYPE в тэге <LINK> можно не приводить. В качестве значения параметра HREF необходимо указать путь к файлу, содержащему CSS.
В примере №1 приведен HTML-документ, в котором, наряду с другими способами, показано внешнее задание CSS в HTML-документе. В этом примере в качестве внешнего файла, содержащего CSS, используется описанный выше файл my.css.
2.2 Внутренее задание CSS
При внутреннем задании каскадные листы стилей описываются так же, как и при внешнем, но оформляются не в виде внешнего файла, а задаются непосредственно в области заголовка HTML-документа внутри тэга-контейнера <STYLE> . . . </STYLE>.
В примере №1 показано внутреннее задание трех каскадных листов стилей:
Первый CSS описывает класс зеленного подчеркнутого текста для тэга P ("P.green_decor").
Второй CSS описывает класс с вертикальным расположением текста без указания тэга (".vert"), который, поэтому, можно использовать для любых тэгов. В этом случае удобно применить тэг-контейнер <SPAN>. . . </SPAN>, который с помощью параметра CLASS может быть использован для указания диапазона действия заданного класса.
Третий CSS описывает класс текста с увеличенным на 2.5 мм расстоянием между буквами, заданный для тэга с указанныи идентификатором "#razr". Идентификатор может быть задан для любого тэга с помощью параметра ID.
Если в качестве CSS-идентификатора задан HTML-идентификатор с классом или только класс, то в тэге, который использует данный класс, необходимо указывать параметр CLASS, задающий имя класса, например:
<P CLASS="green_decor">
Отметим, что для тэга с указанием класса наследуются все свойства тэга кроме тех, что описаны в свойствах класса. В вышеприведенном примере наследуется такое свойство параграфа, как отступ, но изменяются такие свойства, как цвет, размер шрифта и декоративное выделение текста (по умолчанию текст не выделяется).
2.3 Встроеное задание CSS
При встроенном задании свойства каскадных листов стилей указываются прямо в тэге после параметра STYLE. Единственное отличие в синтаксисе описания CSS заключается в том, что свойства CSS и их значения берутся не в фигурные скобки, а в двойные кавычки.
В примере (№1) приведен HTML-документ, в котором показано три способа задания CSS в HTML-документе: внешнего, внутреннего и встроенного.
Пример 1
<HTML>
<HEAD>
<TITLE> Использование CSS стилей в HTML-документе </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
P.green_decor{color:green; font:16pt; text-decoration:underline}
.vert{color:#006060; font:large; writing-mode:tb-rl}
#razr{letter-spacing:2.5mm}
</STYLE>
</HEAD>
<BODY>
<H1> Параметры заголовка заданы внешним СSS </H1>
<P CLASS="green_decor"> Параметры этого параграфа заданы с помощью внутреннего использования CSS (класс "green_decor" тэга P).
<P> Свойства абзаца, цвета и размера шрифта этого параграфа наследуются из внешнего CSS.
<CENTER>
<SPAN CLASS="vert "> Вертикальный текст: класс vert. </SPAN>
</CENTER>
<P ID="razr">
< SPAN STYLE="color: red; font-size:1cm "> В </SPAN>
строенное и внутреннее задание CSS.
</BODY>
</HTML>