Основы работы с CSS Информация о курсе

Основы работы с CSS
Курс посвящен практике применения языка гипертекстовой разметки с применением каскадных
таблиц стилей (Cascade Style Sheets). На большом количестве примеров рассматриваются
основные приемы использования CSS.
Дополнительные курсы
Спецификация CSS2
Применение каскадных таблиц стилей (CSS)
Спецификация языка HTML
Введение в HTML
Основы работы с HTML
Введение в JavaScript
Практикум по программированию на JavaScript
Основы программирования на JavaScript
Лекции
1. Общая информация. Дается общая информация о каскадных таблицах стилей, рассматривается
их предназначение и область применения.
2. Синтаксис CSS и примеры использования. Рассматривается грамматика CSS, способы
подключения таблиц стилей, приводятся примеры использования CSS.
3. Параметры CSS для фона. На примерах подробно рассматривается синтаксис, методы и
свойства задания фона.
4. Параметры текста в CSS. Описываются механизмы представления текстовой информации:
оформление, выравнивание, отступы и др.
5. Шрифты в CSS. Приводятся примеры работы со шрифтами, общие способы и методы
применения шрифтов, их характеристики и атрибуты.
6. Границы в CSS. Рассматриваются параметры границ в CSS и способы описания рамок вокруг
элементов.
7. Отступы в СSS. Определяются методы и свойства, необходимые для описания пространства
вокруг элементов.
8. Поля в CSS. Приводятся способы определения пространства между границей элемента и его
содержимым.
9. Списки в CSS. Рассматриваются параметры списков в CSS и способы задания маркеров для
элементов списка.
10. Размеры элементов в CSS. Рассматриваются параметры размеров элементов и параметры
интервалов между элементами.
11. Параметры форматирования в CSS. Определяются способы управления видимостью,
положением и позиционированием элементов.
12. Позиционирование в CSS
Подробно рассматриваются методы определения положения
элемента.
13. Псевдо-классы CSS. Определяются способы создания специальных эффектов для элементов.
14. Псевдо-элементы CSS. Рассматриваются методы создания специальных эффектов для
селекторов.
15. Типы носителей информации в CSS2. Даются спецификации таблиц стилей, зависимых от
типа носителя и приводятся описания этих типов.
16. Мы познакомились с CSS, что дальше? Подведение итогов.
17. Печать в CSS2
18. Использование звука в CSS2
19. Единицы измерения в CSS
20. Цвета в CSS /* аналогично как в HTML */
Литература
1. Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. Основы web-технологий. Интернетуниверситет информационных технологий - ИНТУИТ.ру, 2003
Лекция 1: Общая информация
Дается общая информация о каскадных таблицах стилей, рассматривается их предназначение и
область применения.
Технология CSS: общий взгляд
Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets,
аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения
представления элементов HTML и решения проблем представления документов. Стили обычно
хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в
специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей,
можно существенно сократить объем работы. Также можно определить несколько стилей,
которые, подчиняясь существующим правилам, будут каскадно задавать один определенный
стиль.
Пример использования CSS
С помощью CSS документы HTML можно выводить, используя различные стили вывода.
Пример. Возьмем несколько таблиц стилей:
Style1
p
{
color: blue; font-style: italic;
margin-left: 20pt;
}
ol,ul,li
{
list-style: circle;
font-family: arial;
}
a:link
{color:black}
a:visited {color:black}
body
{
background-image: url("http://www.intuit.ru/departament/picture.gif")
}
Style2
h1,h3,h6
{
margin: 20pt;
}
h1,h2,h3,h4,h5,h6,p,ol,li
{
font-family: arial, "sans serif";
}
p,table,td,ol,ul
{
font-style: oblique;
}
:link {COLOR: blue;}
:visited {COLOR: blue;}
a:active {COLOR: black;}
a:hover {COLOR: black;}
a.myln:link {COLOR: olive;}
a.myln:visited {COLOR: olive;}
a.myln:active {COLOR: teal;}
a.myln:hover {COLOR: teal;}
Style3
p,ol,ul
{
font-style: italic;
margin-right: 20pt;
}
p,h1,h6
{
font-family: "comic sans ms", arial, "sans serif";
}
p,th
{
font-size: 20%
}
table {background-color: blue}
body {background-color:#FFF000}
p,ol,ul
{
color:green;
}
:link
:visited
:active
:hover
{color:blue}
{color:blue}
{color:green}
{color:green}
Style4
:link
:visited
:active
:hover
{
{
{
{
color:red }
color:red }
color:yellow }
color:yellow }
body
{
background-color: #FAD123;
}
h1,h2,h6
{
margin-left: 20pt;
color: blue;
}
h3,h4,h5
{
margin-left: 10pt;
color: green;
}
p,h1,h3
{
font-size: 150%;
}
p,h1,h2,h3,h4,h5,h6,table
{
font-family: arial;
}
p
{
margin-left: 30pt;
}
Style5
p,h1,h2,h3
{
font-size: 75%;
}
table,h4,h5,h6,li
{
font-family: arial, "sans serif";
margin-left: 20pt;
}
body
{
background-color: #F2FF2F;
}
ol,ul {color: 12a45d;}
:link
:visited
:active
:hover
{color:brown}
{color:brown}
{color:blue}
{color:blue}
При последовательном применении этих стилей к одному и тому же документу можно
менять его представление.
Предназначение стилей
Язык HTML был создан для описания содержимого документа. Его теги были
предназначены для определения "заголовка", "параграфа", "таблицы" (<h1>, <p>, <table> и т.д.).
Первоначально для представления документов не было предусмотрено каких-либо тегов
форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.
Но это породило процесс создания своих тегов и атрибутов к исходной спецификации
HTML-браузерами Netscape и Internet Explorer ((такие, например, как тег <font> и атрибут color),
что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко
отделено от уровня представления документа.
В этой ситуации консорциум W3C (World Wide Web Consortium) — некоммерческая
организация, ответственная за стандартизацию HTML — создала при разработке стандарта HTML
4.0 каскадные таблицы стилей.
Таким образом, необходимость разделения содержимого документа и его представления
привела к созданию технологии CSS.
Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla
Firefox, Opera и др.).
Таблицы стилей могут существенно сократить объем работы
Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут
color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних
файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и
компоновку всех необходимых страниц в Web, редактируя только один, единственный документ
CSS.
Еще раз заострим внимание: CSS стали прорывом в Web-дизайне. Основой для него
послужило то, что технология позволяет разработчикам одновременно управлять стилем и
компоновкой множества Web-страниц, определять стиль для каждого элемента HTML и
применять его к любому количеству Web-страниц. Также CSS дает возможность из одного
документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать
глобальное изменение, надо просто изменить стиль, и все элементы в Web будут автоматически
изменены.
Разработчик может определять стили следующими способами:

внутри единственного элемента HTML;

внутри элемента <head> страницы HTML;

во внешнем файле CSS.
Приоритет использования стилей
Для каскадных таблиц стилей определен приоритет использования. Если для элемента
HTML определено более одного стиля, то все стили будут последовательно "каскадированы" в
новую "виртуальную" таблицу стилей, согласно следующим правилам:
1.
стили, используемые по умолчанию браузером;
2.
стили, хранящиеся во внешней таблице;
3.
стили, хранящиеся во внутренней таблице стилей (внутри тега <head>);
4.
встроенный стиль (внутри элемента HTML).
Эти правила определяют порядок увеличения приоритета стилей.
Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет,
т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или
в браузере (значение по умолчанию).
Лекция 2: Синтаксис CSS и примеры использования
Рассматривается грамматика CSS, способы подключения таблиц стилей, приводятся примеры
использования CSS.
Синтаксис
Синтаксис CSS состоит из трех частей: селектора, свойства и значения:
селектор {свойство: значение}
Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут,
который желательно изменить. Каждое свойство может принимать значение. Существует ряд
правил и рекомендаций, которые необходимо запомнить.
1.
Свойство и значение разделяются двоеточием и помещаются внутри фигурных
скобок:
p {font-size: 75%}
2.
кавычки:
Если значение состоит из нескольких слов, то необходимо поместить значение в
h1 {font-family: "lucida calligraphy"}
3.
Если требуется определить более одного свойства, то необходимо разделить
свойства точкой с запятой:
table { font-family: arial, "sans serif"; border-style: dotted}
4.
Чтобы определения стилей было удобно читать, можно каждое свойство писать на
отдельной строке:
h2
{
font-family: arial;
margin-right: 20pt;
color:#ffffff }
5.
При определении правил допускается группировка селекторов, при этом в качестве
разделителя селекторов используется запятая. В следующем примере в группу были объединены
все элементы заголовков. Все элементы заголовков будут выведены шрифтом sans serif:
p,table,li
{
font-family: "sans serif";
}
Селектор класса (class)
При Web-разработке часто возникает необходимость в задании различных стилей для
одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.
Предположим, что в документе требуется два типа заголовков: более крупный заголовок
должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с
помощью стилей:
h1.stepleft {margin-left: 10pt}
h2.stepright {margin-left: 20pt}
Для применения этих стилей в документе HTML необходимо будет использовать атрибут
класс:
<h1 class="stepleft">
Заголовок с внешним отступом 10 пунктов.
</h1>
<h2 class="stepright">
Заголовок с внешним отступом 20 пунктов.
</h2>
В тоже время не допускается следующее определение атрибута class:
< h1 class="stepleft" h2 class="stepright">,
т.е. можно определить только один атрибут class
Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет
использоваться всеми элементами HTML, имеющими определенный class.
.left {margin-left: 40pt}
В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний
отступ, равный 40 пунктам.
В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента
будут следовать правилам в селекторе ".left":
<table class="left">
Эта таблица будет иметь внешний отступ, равный 40 пунктам.
</table>
<p class="left">
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
</p>
Для корректности обработки кода браузерами не рекомендуется начинать имя класса с
числа, т.к. это не будет работать в Mozilla/Firefox.
Селектор идентификатора (id)
Стили элементов HTML можно определить также с помощью селектора идентификатора,
который определяется символом #.
Следующее правило стиля будет применимо к элементу, который имеет атрибут id со
значением "fontsz":
#fontsz{font-size: 50%}
Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со
значением "first":
ul#first
{
list-style: disc;
color: #ffffff
}
Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа,
т.к. это не будет работать в Mozilla/Firefox.
Комментарии CSS
Для пояснения кода и для последующего его редактирования используются комментарии,
которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается
символом "*/", как в примере ниже:
/* Первый комментарий. */
table
{
/* Второй комментарий. */
margin-left: 10pt;;
font-family: "sans serif";
/* Третий комментарий. */
border-style:outset
}
Примеры использования CSS
Рассмотрим несколько примеров использования CSS:
1. Технология CSS позволяет связываться с внешней таблицей стилей. Для этого в файле
HTML применяют тег <link>:
<html>
<head>
<link rel="stylesheet" type="text/css"
style="color:#666666;"
href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru%2Fimage%2Fstyle.css"
onMouseOver="menuSetHelpText('intuit');return false;"
onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">
</head>
<body>
<ol><!—Список имеет внешний отступ в 10 пунктов -->
<li>для этого элемента списка будет задан шрифт "arial"</li>
<li>для этого элемента списка будет задан шрифт "arial"<li>
</ol>
<ul><!—Список имеет внешний отступ в 20 пунктов -->
<li>для этого элемента списка будет задан шрифт "arial"</li>
<li>для этого элемента списка будет задан шрифт "arial"<li>
</ul>
</body>
</html>
Внешний файл содержит следующее описание стилей (style.css):
ol {margin-left: 10pt}
ul {margin-right: 20pt}
li {font-family: arial}
2. Следующий файл HTML связывается с внешней таблицей стилей с помощью тега <link>:
<html>
<head>
<link rel="stylesheet" type="text/css"
style="color:#666666;"
href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru%2Fimage%2Fstyle2.css"
onMouseOver="menuSetHelpText('intuit');return false;"
onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">:
</head>
<body>
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
<a style="color:#666666;"
href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru"
onMouseOver="menuSetHelpText('intuit');return false;"
onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">Здесь размещена
ссылка</a>
</body>
</html>
Внешний файл содержит следующее описание стилей (style2.css):
body {background-color: #FFFFFF)}
table {margin-left: 10pt;}
td {font-size:10pt; color: blue}
a:link
{color:blue}
a:visited {color:brown}
a:hover
{color:lime}
a:active
{color:gray}.
Подключение таблицы стилей
Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой
таблицей. Существует три способа подключения таблицы стилей.
1.
Подключение внешней таблицы стилей
Этот способ обычно применяется в ситуациях, когда один стиль определяется для
множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идельно
подходит – редактируется только один файл с таблицей стилей. Для подключения внешней
таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:
<head>
<link rel="stylesheet" type="text/css"
href="first.css" />
</head>
Данный код указывает браузеру на то, что определение стиля хранятся в файле first.css.
Последний, в свою очередь, выполнит форматирование документа согласно с этим определением
стиля.
Некоторые замечания:
- внешнюю таблицу стилей можно создать в любом текстовом редакторе;
- файл с внешней таблицей стилей не должен содержать никаких тегов html;
- файл с внешней таблицей стилей необходимо сохранить с расширением .css.
Пример:
ul {margin-left: 10pt}
li {font-family: arial}
body {background-color: blue}
Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы
между значением свойства и единицами измерения, т.к. это будет работать правильно только в
IE6, но не в Mozilla/Firefox или Netscape.
Пример с пробелом — "margin-left: 20 px";
пример без пробела — "margin-left: 20px".
2.
Подключение внутренней таблицы стилей
Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для
определения внутренних стилей используют тег <style>, который размещается в разделе
заголовка:
<head>
<style type="text/css">
li {font-family: arial}
p {font-size: 25%}
h1 {margin-right: 10pt}
</style>
</head>
В соответствии с определениями стиля браузер форматирует документ. Однако если он
встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не
поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на
странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария
HTML:
<head>
<style type="text/css">
<!-body {background-color: green}
table {border-style: dotted}
-->
</style>
</head>
3.
Встроенные стили
Данный способ используется в том случае, если необходимо применить стиль к одному
появлению элемента. Метод обладает существенным недостатком, т.к. он смешивает содержимое
документа с его представлением и теряет, соответственно, многие преимущества таблиц стилей.
Для определения встроенных стилей в соответствующем теге применяют атрибут style,
который может содержать любое свойство CSS.
Пример:
<body style="background-color: blue" >
<h1 style="color: yellow" >Заголовок H1</h1>
</body>
В примере показано, как задать цвет фона документа и цвет заголовка h1.
Несколько таблиц стилей
В случае объединения или использования нескольких таблиц стилей могут возникнуть
ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах
стилей; тогда будут использованы значения из более конкретной таблицы стилей.
Например, внешняя таблица стилей имеет следующие свойства для селектора p:
p
{
font-family: "sans serif";
margin-left: 10pt;
font-style: italic;
font-weight: bold
}
А внутренняя таблица стилей имеет для селектора p следующие свойства:
p
{
margin-left: 20pt;
font-style: normal;
font-weight: bolder
}
Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут
определены следующие свойства:
font-family: "sans serif";
margin-left: 20pt;
font-style: normal;
font-weight: bolder
Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль,
вес и внешний отступ параграфа определяются внутренней таблицей стилей.
Лекция 3: Параметры CSS для фона
На примерах подробно рассматривается синтаксис, методы и свойства задания фона.
Параметры CSS для фона определяют фоновые эффекты элемента.
Примеры
1.
Данный пример показывает, как задать фоновый цвет элемента.
<html>
<head>
<style type="text/css">
ul {background-color: rgb(200,10,200)}
ol {background-color: #00FFFF}
li {background-color: transparent}
p {background-color: blue}
</style>
</head>
<body>
<ul>
<li>this is ul</li>
</ul>
<ol>
<li>this is ol</li>
</ol>
<p>This is a paragraph</p>
</body>
</html>
2.
Данный пример показывает, как задать в качестве фона изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg)
}
</style>
</head>
<body>
В документе в качестве фона использовано изображение
</body>
</html>
3.
Данный пример показывает, как использовать повторяющееся фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat
}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение
</body>
</html>
4.
Данный пример показывает, как использовать повторяющееся только по вертикали
фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat-y
}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение,
которое размножается только вертикально
</body>
</html>
5.
Данный пример показывает,
горизонтали фоновое изображение.
как
использовать
повторяющееся
только
по
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat-x
}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение,
которое размножается только горизонтально.
</body>
</html>
6.
Данный пример показывает, как разместить на странице фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
repeat;
background-position:
bottom;
}
</style>
</head>
<body>
</body>
</html>
7.
Данный пример показывает, как задать фиксированное фоновое изображение, т.е.
изображение, которое не будет перемещаться вместе со всей остальной страницей.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<body>
Определено фиксированное фоновое изображение<br>
Определено фиксированное фоновое изображение<br>
Определено фиксированное фоновое изображение<br>
</body>
</html>
8.
Данный пример показывает, как задать прокручивающееся фоновое изображение,
т.е. изображение, которое будет прокручиваться вместе с документом.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
no-repeat;
background-attachment:
scroll
}
</style>
</head>
<body>
Определено прокручивающееся фоновое изображение<br>
Определено прокручивающееся фоновое изображение<br>
Определено прокручивающееся фоновое изображение<br>
</body>
</html>
9.
Данный пример показывает, как использовать свойство сокращения записи для
задания всех свойств фона в одном объявлении.
<html>
<head>
<style type="text/css">
body
{
background:
blue
url(http://www.intuit.ru/departament/picture.jpg)
scroll center;
}
</style>
</head>
<body>
Это документ, для которого свойства фона заданы в одном объявлении<br>
Это документ, для которого свойства фона заданы в одном объявлении<br>
Это документ, для которого свойства фона заданы в одном объявлении<br>
</body>
</html>
repeat
Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение,
повторяющееся изображение, повторяющееся изображение (только вертикально или только
горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно
использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
Параметры фона в CSS: подробное рассмотрение
Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона
элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение
вертикально или горизонтально и позиционировать изображение на странице.
Данные свойства поддерживаются следующими браузерами (в скобках сокращенный
вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE),
Firefox (F), Netscape(N).
Параме
Значени
Описание
тр
я
E
background
Служит для задания всех параметров фона в одном backgroundобъявлении
color
backgroundimage
backgroundrepeat
backgroundattachment
backgroundposition
backgroundЗадает
для
изображения
фиксированное scroll
attachment
расположение или перемещающееся вместе с fixed
остальной страницей
backgroundcolor
Задает цвет фона элемента
I
W
FN
3C
4 1 6 1
*
4 1 6 1
color-rgb
4 1 4
color-hex
color-name
transparent
backgroundЗадает в качестве фона изображение
url
4 1 4
image
none
backgroundЗадает
начальное
положение
фонового top left
4 1 6
position
изображения
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
backgroundОпределяет, будет ли и каким образом будет repeat
4 1 4
repeat
повторяться фоновое изображение
repeat-x
repeat-y
no-repeat
(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен
параметр (CSS1 или CSS2)).
Параметр 'background'
Этот параметр предназначен для задания всех свойств фона в одном объявлении.
Наследование: нет.
Примеры:
body
{
background: url(picture.gif)
}
1
1
1
1
body
{
background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll
}
body
{
background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x bottom
}
Может принимать следующие значения:
Значение
Описание
background-color
В этом объявлении можно задать от одного до пяти свойств фона
background-image
background-repeat
background-attachment
background-position
Рассмотрим их подробнее.
Параметр 'background-attachment'
Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном
месте или будет перемещаться вместе со всей страницей.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Scroll
Фоновое изображение перемещается, когда перемещается страница
Fixed
Фоновое изображение не перемещается, когда перемещается страница
Пример:
body
{
background-attachment: fixed;
background-repeat: repeat
}
Параметр 'background-color'
Этот параметр задает фоновый цвет элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
color
Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или
шестнадцатеричным числом (#ff0000)
transparent Фоновый цвет является прозрачным
Пример:
h1
{
background-color: gray;
font-family: arial
}
Параметр 'background-image'
Данный параметр задает изображение в качестве фона.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
url
Путь доступа к изображению
none
Фонового изображения нет
Пример:
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: repeat;
background-attachment: fixed
}
В тех случаях, когда изображение недоступно, необходимо задать цвет background-color,
который будет использован.
Параметр 'background-position'
Этот параметр задает начальное положение фонового изображения.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
top left Если определить только одно ключевое слово, то вторым значением подразумевается
top
"center"
center
top right
center
left
center
center
center
right
bottom
left
bottom
center
bottom
right
Первое значение является горизонтальной координатой, второе значение —
вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%.
Если определено только одно значение, то вторым значением подразумевается 50%.
x-pos y-pos Первое значение является горизонтальной координатой, второе значение —
вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели
(0px 0px) или любые другие единицы измерения CSS. Если определено только одно
значение, то вторым значением подразумевается 50%. Можно смешивать % и эти
координаты.
Пример:
x-% y-%
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-position: right top;
background-attachment: fixed
}
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
background-attachment: fixed
}
Параметр 'background-repeat'
Этот параметр определяет, каким образом будет повторяться фоновое изображение.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
repeat
Фоновое изображение будет повторяться по вертикали и по горизонтали
repeat-x Фоновое изображение будет повторяться по горизонтали
repeat-y Фоновое изображение будет повторяться по вертикали
no-repeat Фоновое изображение будет выведено только один раз
Пример:
body
{
background-image: url(http://www.intuit.ru/departament/image.gif);
background-repeat: repeat;
background-attachment: fixed
}
Лекция 4: Параметры текста в CSS
Описываются механизмы представления текстовой информации: оформление, выравнивание,
отступы и др.
Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет
текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять
текст, делать отступ для первой строки текста и т.д.
Поддержка браузеров: Internet Explorer, Firefox, Netscape.
Параметр
color
Описание
Задает цвет текста
direction
Задает направление текста
Значения
Color
ltr
rtl
letter-spacing Увеличивает или уменьшает интервал между символами normal
length
text-align
Выравнивает текст в элементе
Left
right
center
justify
text-decoration Дополнительное оформление текста
none
underline
text-indent
text-shadow
Делает отступ для первой строки текста элемента
IE F N W3C
3 1 4 1
6 1 6 2
4 1 6 1
4 1 4 1
4 1 4 1
overline
line-through
blink
length
4 1 4 1
%
none
color
length
text-transform Управляет символами элемента
none
capitalize
uppercase
4 1 4 1
lowercase
unicode-bidi
unicode-bidi 5
2
normal
embed
bidi-override
white-space
Задает способ обращения с пробелами внутри элемента normal
5 1 4 1
pre
nowrap
word-spacing Увеличивает или уменьшает пробел между словами
normal
6 1 6 1
length
Примеры
1.
Этот пример показывает, как задать цвет текста.
<html>
<head>
<style type="text/css">
p {color: green}
ul {color: #dda0dd}
ol {color: rgb(0,0,255)}
</style>
</head>
<body>
<ul>
<li>список ul<li>
</ul>
<ol>
<li>список ol</li>
</ol>
<p>это параграф</p>
</body>
</html>
2.
Этот пример показывает, как задать фоновый цвет части текста.
<html>
<head>
<style type="text/css">
span.back
{
background-color: gray
}
</style>
</head>
<body>
<p>
Данный текст содержит определение, фон которого выделен. <span class="back">Это
определение.</span>
</p>
</body>
</html>
3.
Данный пример показывает, как увеличить или уменьшить интервал между
символами.
<html>
<head>
<style type="text/css">
p {letter-spacing: 1cm}
li {letter-spacing: 5px}
</style>
</head>
<body>
<p>параграф</p>
<ol>
<li>элемент списка</li>
</ol>
</body>
</html>
4.
Данный пример показывает, как выравнивать текст.
<html>
<head>
<style type="text/css">
ol {text-align: center}
ul {text-align: left}
dl {text-align: right}
</style>
</head>
<body>
<ol>
<li>список ol</li>
<li> список ol</li>
<li> список ol</li>
</ol>
<ul>
<li> список ul</li>
<li> список ul</li>
<li> список ul</li>
</ul>
<dl>
<dt> список <dd>dl dl dl</dd></dt>
<dt> список <dd>dl dl dl</dd></dt>
<dt> список <dd>dl dl dl</dd></dt>
</dl>
</body>
</html>
5.
Этот пример показывает, как можно оформить текст.
<html>
<head>
<style type="text/css">
a {text-decoration: underline}
ul {text-decoration: overline}
ol {text-decoration: line-through}
</style>
</head>
<body>
<ol>
<li>первое</li>
<li>второе</li>
<li>третье</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p><a style="color:#666666;"
href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru%2F"
onMouseOver="menuSetHelpText('intuit');return false;"
onMouseOut="menuClearHelpText()" title="ссылка на
INTUIT.ru">www.intuit.ru</a></p>
</body>
</html>
6.
Этот пример показывает, как сделать отступ для первой строки параграфа.
<html>
<head>
</head>
<body>
<p>
параграф<br>
<p style="text-indent: 2cm;">
параграф<br>
<p style="text-indent: 4cm;">
параграф<br>
</p>
</body>
</html>
7.
Данный пример показывает, как управлять регистром символов в тексте.
<html>
<head>
</head>
<body>
<pre style="text-transform: uppercase;">Верхний регистр</pre>
<p style="text-transform: lowercase;">Нижний регистр</p>
<pre style="text-transform: capitalize;">первые буквы в словах заглавные</p>
</body>
</html>
Параметры текста в CSS: подробное рассмотрение
Параметр 'color'
Этот параметр задает цвет текста.
Наследование: да.
Может принимать следующие значения:
Зн
Описание
ачение
col
Значением color может быть название цвета (red), значение rgb (rgb(255,0,0)) или
or
шестнадцатеричное значение (#ff0000).
Пример:
h1
{
color: green
}
Параметр 'direction'
Параметр задает направление текста.
Наследование: да.
Может принимать следующие значения:
Зн
Описание
ачение
ltr
Направление текста слева
направо
rtl
Направление текста справа
налево
Пример:
p
{
direction: rtl
}
Параметр 'letter-spacing'
Данный параметр увеличивает или уменьшает интервал между символами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
Зн
Описание
ачение
no
Определяет
обычный
пробел
между
rmal
символами
Le
Определяет фиксированный пробел между
ngth
символами
Примеры:
pre
{
letter-spacing: -2px
}
pre
{
letter-spacing: 20px
}
Параметр 'text-align'
Этот параметр задает выравнивaние текста в элементе.
Наследование: да.
Может принимать следующие значения:
Зн
Описание
ачение
lef
Выравнивает текст
t
слева
rig
Выравнивает текст
ht
справа
ce
Центрирует текст
nter
jus
tify
Пример:
h1
{
text-align: right
}
чение
Параметр 'text-decoration'
Данный параметр задает дополнительное оформление текста.
Наследование: нет.
Примечание: цвет оформления должен быть задан свойством "color".
Может принимать следующие значения:
Зна
Описание
Определяет
Non
Определяет линию под
текстом
Ove
Определяет линию над
Und
erline
обычный
текст
e
текстом
lineОпределяет
through
через текст
rline
Определяет мигающий
Blin
k
линию
текст
Пример:
h1
{
text-decoration: overline
}
Параметр 'text-indent'
Данный параметр создает отступ для первой строки текста элемента.
Наследование: да.
Примечание: допускаются отрицательные значения, для которых первая строка будет
сдвинута влево.
Может принимать следующие значения:
Зн
ачение
Le
ngth
%
Описание
Определяет фиксированный отступ
Определяет отступ в % от ширины родительского
элемента
Примеры:
pre
{
text-indent: -10px
}
p
{
text-indent: 10px
}
Параметр 'text-transform'
Этот параметр управляет регистром символов в элементе.
Наследование: да.
Может принимать следующие значения:
Зн
Описание
ачение
No
Определяет обычный текст с символами нижнего регистра и заглавными
ne
буквами
Ca
Каждое слово в тексте начинается с заглавной буквы
pitalize
Up
Определяет только заглавные буквы
percase
Lo
Определяет только символы нижнего регистра
wercase
Примеры:
h1
{
text-transform: capitalize
}
pre
{
text-transform: lowercase
}
Параметр 'white-space'
Параметр задает способ обработки пробелов внутри элемента.
Наследование: да.
Может принимать следующие значения:
Зн
Описание
ачение
no
Браузер игнорирует пробел
rmal
pr
Браузер сохраняет пробел. Действует как тег <pre> в HTML
e
no
Текст не будет переноситься на другую строку, пока не встретится
wrap
тег <br>
Пример:
pre
{
white-space: pre
}
Параметр 'word-spacing'
Данный параметр увеличивает или уменьшает пробел между словами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
Зн
Описание
ачение
no
Определяет
обычный
пробел между
rmal
словами
len
Определяет фиксированный пробел между
gth
словами
Примеры:
pre
{
word-spacing: -10px
}
h1
{
word-spacing: 35px
}
Лекция 5: Шрифты в CSS
Приводятся примеры работы со шрифтами, общие способы и методы применения
шрифтов, их характеристики и атрибуты.
Параметры шрифтов в CSS определяют шрифт текста.
Примеры:
1.
Этот пример показывает, как задать шрифт текста.
<html>
<head>
<style type="text/css">
h1 {font-family: courier}
h2.font {font-family: sans-serif}
pre {font-family: times}
</style>
</head>
<body>
<pre>применяется шрифт "times"</pre>
<h1>заголовок h1</h1>
<h2 class="font">заголовок h2</h2>
</body>
</html>
2.
Этот пример показывает, как задать размер шрифта.
<html>
<head>
</head>
<body>
<ol style="font-size: 200%">
<li>first</li>
<li>second</li>
</ol>
<p style="font-size: 80%">текст параграфа</p>
<ul style="font-size: 60%">
<li>first</li>
<li>second</li>
</ul>
</body>
</html>
3.
Этот пример показывает, как задать стиль шрифта.
<html>
<head>
<style type="text/css">
ol {font-style: normal}
ul {font-style: oblique}
p {font-style: italic}
</style>
</head>
<body>
<p>Текст параграфа. Текст параграфа. Текст параграфа.</p>
<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>
<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>
</body>
</html>
4.
Этот пример показывает, как задать вариант шрифта.
<html>
<head>
</head>
<body>
<h1 style="font-variant: small-caps">Заголовок h1</h1>
<h2 class="font-varinat: small-caps">Заголовок h2</h2>
</body>
</html>
5.
Этот пример показывает, как задать степень жирности шрифта.
<html>
<head>
<style type="text/css">
h1.first {font-weight: 800}
h2.second {font-weight: bold}
h3.third {font-weight: 900}
</style>
</head>
<body>
<h1 class="first">заголовок h1</h1>
<h2 class="second">заголовок h2</h2>
<h3 class="third">заголовок h3</h3>
</body>
</html>
6.
Этот пример показывает, как использовать сокращенную запись для задания всех
свойств шрифта в одном объявлении.
<html>
<head>
<style type="text/css">
p
{
font: oblique small-caps bold -5px serif
}
</style>
</head>
<body>
<p>параграф параграф параграф параграф параграф параграф</p>
</body>
</html>
Параметры шрифта в CSS
Параметры шрифта в CSS позволяют изменить семейство шрифта, степень жирности,
размер, и стиль текста. Обратите внимание на то, что в CSS1 шрифты идентифицируются
названием шрифта. В случае, если браузер не поддерживает данный шрифт, будет использоваться
шрифт по умолчанию.
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox,
Netscape.
Параметр
font
font-family
Описание
Значения
IE F N W3C
Параметр для задания всех свойств шрифта в одном font-style
4 1 4 1
объявлении
font-variant
font-weight
font-size/lineheight
font-family
caption
icon
menu
message-box
small-caption
status-bar
Определяет для элемента список имен семейств шрифтов family-name 3 1 4 1
font-size
и/или имен порождающих семейств в порядке их genericприоритета
family
Задает размер шрифта
xx-small
3 1 4 1
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
Определяет значение аспекта для элемента, которое none
будет сохранять x-height выбранного шрифта
number
font-stretch Делает текущее семейство шрифтов более узким или normal
более широким
wider
narrower
ultracondensed
extracondensed
condensed
semicondensed
semiexpanded
expanded
extraexpanded
ultraexpanded
font-style
Задает стиль шрифта
normal
italic
font-sizeadjust
oblique
font-variant Выводит текст малыми прописными буквами или normal
обычным текстом
small-caps
font-weight Задает степень жирности шрифта
normal
bold
bolder
lighter
100
200
-
- - 2
-
- - 2
4 1 4 1
4 1 6 1
4 1 4 1
300
400
500
600
700
800
900
Шрифты в CSS: подробное рассмотрение
Параметр 'font'
Параметр font предназначен для сокращенной записи, позволяющей задать все свойства
шрифта в одном объявлении (за исключением некоторых системных шрифтов).
Наследование: да.
Может принимать следующие значения:
Значение
Описание
font-style
Задает свойства шрифта. Значение line-height задает расстояние между строками.
Это значение может быть числом, % или размером шрифта
font-variant
font-weight
font-size* /lineheight
font-family
Caption
Определяет шрифт для элементов управления с заголовком (таких, как кнопки,
раскрывающиеся меню и т.д.)
icon
Определяет шрифты, которые используются метками пиктограмм приложений
menu
Определяет шрифты, которые используются для раскрывающихся меню.
message-box
Определяет шрифты, которые используются в диалоговых окнах.
small-caption
status-bar
Определяет шрифты, которые используются в строке состояния окна
(*это свойство имеет также шестое значение: "line-height", которое задает расстояние
между строками)
Примеры:
pre
{
font: oblique arial
}
h1
{
font: italic 200 arial
}
p
{
font: italic small-caps 10px/12px serif
}
p
{
font: status-bar
}
Параметр 'font-family'
Данное свойство определяет для элемента список имен семейств шрифтов и/или имен
порождающих семейств в порядке их приоритета. Если специфицировано несколько значений, то
браузер будет использовать первое распознанное значение.
Существует два типа значений font-family:
1.
family-name: имя семейства шрифтов ("times", "courier", "arial", и т.д.);
2.
generic-family: имя порождающего семейства, ("serif", "sans-serif", "cursive", "fantasy",
"monospace").
В качестве разделителя используется запятая. Для последнего варианта желательно
определять имя порождающего семейства. Если же имя семейства содержит пробел, то его
необходимо поместить в кавычки. При использовании в HTML атрибута "style" применяются
одиночные кавычки.
Наследование: да.
Может принимат следующие значения:
Значе
Описание
ние
family
Определяет для элемента имен семейств шрифтов
-name
и/или имен
generi
порождающих семейств в порядке их приоритета.
c-family
Примеры:
h1
{
font-family: Garamond, serif
}
<p style="font-family:
Courier, Prestige, sans-serif">
Параметр 'font-size'
Параметр задает размер шрифта.
Наследование: да.
Может принимат следующие значения:
Зн
Описание
ачение
xx
Задает размер шрифта от xx-small до xx-large
-small
xsmall
sm
all
me
dium
lar
ge
xlarge
xx
-large
Задает размер шрифта меньше, чем у порождающего
элемента
lar
Задает размер шрифта больше, чем у порождающего
sm
aller
ger
элемента
len
Задает фиксированный размер шрифта
gth
%
Задает размер шрифта в % от порождающего элемента
Примеры:
p
{
font-size: small
}
pre
{
font-size: 5pt
}
i
{
font-size: 3em
}
p
{
font-size: 120%
}
Параметр 'font-size-adjust'
Отношение между высотой буквы "x" нижнего регистра в шрифте и высотой "font-size"
называется значением аспекта шрифта. Если значение аспекта большое, то шрифт будет легче
читаться, когда его размер уменьшается. Например, Verdana имеет значение аспекта, равное 0.58,
т.е. если размер шрифта равен 100px, то высота буквы x нижнего регистра будет равна 58px. Times
New Roman имеет значение аспекта 0.46. Таким образом, чем больше значение аспекта шрифта,
тем легче он читается при уменьшении. В данном случае шрифт Verdana при уменьшении будет
читаться лучше, чем Times New Roman.
Свойство font-size-adjust определяет значение аспекта для элемента, которое будет
сохранять высоту буквы x нижнего регистра выбранного шрифта.
Наследование: да.
Возможные значения:
Зн
Описание
ачение
no
Не сохранять высоту буквы x шрифта, если шрифт недоступен
ne
nu
Определяет значение аспекта для шрифта
mber
Используемая формула:
размер выбранного шрифта * (font-size-adjust/значение аспекта доступного
шрифта) = размер шрифта для доступного шрифта
Пример:
Если 14px Verdana (значение аспекта 0.58) недоступен, а доступный шрифт
имеет значение аспекта 0.46, то размер шрифт для подстановки будет 14 * (0.58/0.46) =
17.65px.
(А здесь звездочка есть, но нет текста сноски… - Ред.)
Пример:
p
{
font-size-adjust: none
}
p
{
font-size-adjust: 0.50
}
Параметр 'font-stretch'
Данный параметр сжимает или расширяет текущее семейство шрифтов.
Необходимо отметить, что семейство шрифтов сжимается или расширяется только
горизонтально.
Наследование: да.
Возможные значения:
Знач
Описание
ение
norm
Задает масштаб сжатия или расширения как обычный
al
wider
Задает масштаб расширения как следующее расширенное значение
narro
Задает масштаб сжатия как следующее сжатое значение
wer
ultraЗадает масштаб сжатия или расширения семейства шрифтов. "ultra-condensed"
condensed
является самым сжатым значением, а " ultra-expanded" — самым широким
extracondensed
conde
nsed
semicondensed
semiexpanded
expan
ded
extraexpanded
ultraexpanded
Пример:
colspan="2"
p
{
font-stretch: extra-expanded
}
Параметр 'font-style'
Данный параметр задает стиль шрифта.
Наследование: да.
Возможные значения:
Зн
Описание
ачение
no
Браузер выводит обычный
rmal
шрифт
ita
Браузер выводит шрифт
lic
курсивом
ob
Браузер выводит наклонный
шрифт
lique
Пример:
p
{
font-style: oblique
}
h1
{
font-style: italic
}
Параметр 'font-variant'
Этот параметр используется для вывода текста капителью: все символы нижнего регистра
преобразуются в символы верхнего регистра, при этом все символы шрифта капители имеют
меньший размер по сравнению с остальным текстом.
Наследование: да.
Может принимат следующие значения:
Зн
Описание
ачение
no
Браузер выводит обычный
rmal
шрифт
sm
Браузер выводит шрифт
all-caps
капитель
Пример:
pre
{
font-variant: small-caps
}
p
{
font-variant: normal
}
Параметр 'font-weight'
Данный параметр определяет степень жирности символов в тексте при выводе.
Наследование: да.
Возможные значения:
Зн
Описание
ачение
no
Определяет обычные символы
rmal
bo
Определяет жирные символы
bo
Определяет более жирные символы
lig
Определяет более тонкие символы
ld
lder
hter
10
0
20
Определяет степень жирности символов. 400 соответствует normal, 700
соответствует bold
0
30
0
40
0
50
0
60
0
70
0
80
0
90
0
Пример:
h1
{
font-weight: 200
}
h2
{
font-weight: bold
}
Лекция 6: Границы в CSS
Рассматриваются параметры границ в CSS и способы описания рамок вокруг элементов.
Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько
примеров использования границ.
1.
Пример в котором показано, как задать стиль для четырех сторон границы.
<html>
<head>
<style type="text/css">
pre.inset {border-style: inset}
li.outset {border-style: outset}
h1.dotted {border-style: dotted}
h2.dashed {border-style: dashed}
h3.solid {border-style: solid}
h4.double {border-style: double}
h5.groove {border-style: groove}
h6.ridge {border-style: ridge}
</style>
</head>
<body>
<pre class="inset">рамка inset </pre>
<ol>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
</ol>
<h1 class="dotted">рамка dotted</h1>
<h2 class="dashed">рамка dashed</h2>
<h3 class="solid">рамка solid</h3>
<h4 class="double">рамка double</h4>
<h5 class="groove">рамка groove </h5>
<h6 class="ridge">рамка ridge</h6>
</body>
</html>
2.
элемента.
Пример в котором показано, как задать различные стили границы на каждой стороне
<html>
<head>
<style type="text/css">
h1.styleh1 {border-style: dashed ridge solid}
h2.styleh2 {border-style: solid dashed}
h3.styleh3 {border-style: dashed groove}
h4.styleh4 {border-style: double solid dashed groove}
</style>
</head>
<body>
<h1 class="styleh1">заголовок заголовок заголовок</h1>
<h2 class="styleh2"> заголовок заголовок заголовок </h2>
<h3 class="styleh3"> заголовок заголовок заголовок </h3>
<h4 class="styleh4"> заголовок заголовок заголовок </h4>
</body>
</html>
3.
Пример, в котором показано, как задать цвет границы — она может иметь свой цвет
для каждой стороны.
<html>
<head>
<style type="text/css">
h1.styleh1
{
border-style: dashed;
border-color: green
}
h2.styleh2
{
border-style: dotted;
border-color: #ff00ff blue
}
h3.styleh3
{
border-style: solid;
border-color: red yellow rgb(12,200,30)
}
h4.styleh4
{
border-style: dashed;
border-color: green blue red yellow
}
</style>
</head>
<body>
<h1 class="styleh1">одноцветная рамка</h1>
<h2 class="styleh2">рамка из двух цветов</h2>
<h3 class="styleh3">рамка из трех цветов</h3>
<h4 class="styleh4">рамка из четырех цветов</h4>
<pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
4.
Пример, в котором показано, как задать толщину нижней стороны границы.
<html>
<head>
<style type="text/css">
h1
{
border-style: dashed;
border-bottom-width: 7px
}
</style>
</head>
<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
Пример, в котором показано, как задать толщину левой стороны границы.
<html>
<head>
<style type="text/css">
h2
{
border-style: dotted;
border-left-width: 7px
}
</style>
</head>
<body>
<h2>fdgfgdf</h2>
<pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
6.
Пример, в котором показано, как задать толщину правой стороны границы.
<html>
<head>
<style type="text/css">
h1
{
border-style: dashed;
border-right-width: 7px
}
</style>
</head>
<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если
используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
7.
Пример, в котором показано, как задать толщину верхней стороны границы.
<html>
<head>
<style type="text/css">
h4
{
border-style: dotted;
border-top-width: 7px
}
</style>
</head>
<body>
<h4>заголовок h4</h4>
<pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью
</body>
</html>
свойства <b>"border-style"</b>.</pre>
8.
Пример, в котором показано, как задать все свойства для нижней стороны границы в
одном объявлении.
<html>
<head>
<style type="text/css">
h1
{
border-bottom: thick double blue
}
</style>
</head>
<body>
<h1> Заголовок h1.</h1>
</body>
</html>
9.
Пример, в котором показано, как задать все свойства для левой стороны границы в
одном объявлении.
<html>
<head>
<style type="text/css">
pre
{
border-left: thin ridge #f0ffff
}
</style>
</head>
<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>
</html>
10.
Пример, в котором показано, как задать все свойства для правой стороны границы в
одном объявлении.
<html>
<head>
<style type="text/css">
h4
{
border-right: thick solid rgb(0,200,200)
}
</style>
</head>
<body>
<h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4
Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
</body>
</html>
11.
Пример, в котором показано, как задать все свойства для верхней стороны границы в
одном объявлении.
<html>
<head>
<style type="text/css">
pre
{
border-top: thin dashed yellow
}
</style>
</head>
<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>
</html>
12.
Пример, в котором показано, как задать толщину всех четырех сторон границы в
одном объявлении. Допускается определение от одного до четырех значений.
<html>
<head>
<style type="text/css">
h1.styleh1
{
border-style: dotted;
border-width: 7px 12px
}
h2.styleh2
{
border-style: dashed;
border-width: 3px 6px 8px
}
h3.styleh3
{
border-style: outset;
border-width: 7px
}
h4.styleh4
{
border-style: inset;
border-width: 3px 6px 8px thick
}
</style>
</head>
<body>
<h1 class="styleh1">Заголовок h1</h1>
<h2 class="styleh2">Заголовок h2</h2>
<h3 class="styleh3">Заголовок h3</h3>
<h4 class="styleh4">Заголовок h4</h4>
<pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает,
используется в одиночку.
Сначала задайте границы с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
если
13.
Пример, в котором показано, как задать задания свойства всех четырех сторон
границы в одном объявлении. Допускается определение от одного до трех значений.
<html>
<head>
<style type="text/css">
h1
{
border: thin dotted #ff00ff
}
</style>
</head>
<body>
<h1>Заголовок h1</h1>
</body>
</html>
Параметры границы в CSS
Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если
в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать
границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в
CSS расширены.
Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox,
Netscape.
Параметр
Описание
Значения
IE F N W3C
border
Параметр для задания свойств всех четырех сторон border-width 4 1 4 1
границы в одном объявлении
border-style
border-color
border-bottom Параметр для задания всех свойств нижней стороны border4 1 6 1
границы в одном объявлении
bottom-width
border-style
border-color
borderЗадает цвет нижней стороны границы
border-color 4 1 6 2
bottom-color
borderЗадает стиль нижней стороны границы
border-style 4 1 6 2
bottom-style
borderЗадает толщину нижней стороны границы
thin
4 1 4 1
bottom-width
medium
thick
border-color
border-left
border-leftcolor
border-leftstyle
border-leftwidth
border-right
border-rightcolor
border-rightstyle
border-rightwidth
length
Задает цвета четырех сторон границы, может иметь от color
одного до четырех значений
Параметр для задания всех свойств левой стороны border-leftграницы в одном объявлении
width
border-style
border-color
4 1 6 1
4 1 6 1
Задает цвет левой стороны границы
border-color
4 1 6 2
Задает стиль левой стороны границы
border-style
4 1 6 2
Задает толщину левой стороны границы
thin
medium
thick
length
Параметр для задания всех свойств правой стороны border-rightграницы в одном объявлении
width
4 1 4 1
4 1 6 1
Задает цвет правой стороны границы
border-style
border-color
border-color
4 1 6 2
Задает стиль правой стороны границы
border-style
4 1 6 2
Задает толщину правой стороны границы
thin
medium
thick
length
4 1 4 1
border-style
border-top
border-topcolor
border-topstyle
border-topwidth
border-width
Задает стили четырех сторон границы, может иметь от none
одного до четырех стилей
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Параметр для задания всех свойств верхней стороны border-topграницы в одном объявлении
width
border-style
4 1 6 1
4 1 6 1
Задает цвет верхней стороны границы
border-color
border-color
4 1 6 2
Задает стиль верхней стороны границы
border-style
4 1 6 2
Задает толщину верхней стороны границы
thin
medium
thick
length
Параметр для задания толщин четырех сторон границы thin
в одном объявлении, может иметь от одного до medium
четырех значений
thick
length
4 1 4 1
4 1 4 1
Границы в CSS: подробное рассмотрение
Параметр 'border-bottom'
Данный параметр позволяет определить все свойства четырех сторон границы в одном
объявлении. Но это свойство не может определить различные значения для каждой стороны
границы, как, например, "margin" и "padding".
Наследование: нет.
Может принимать следующие значения:
Знач
Описание
ение
bord
Задает свойства для четырех сторон
er-width
границы
bord
er-style
bord
er-color
Примеры:
h1
{
border: medium solid #FFFF00
}
h2
{
border: dotted green
}
Параметр 'border-bottom'
Этот параметр позволяет определить все свойства нижней стороны границы в одном
объявлении.
Наследование: нет.
Возможные значения:
Значение
Описание
borderЗадает свойства для нижней стороны
bottom-width
границы
border-style
border-color
Примеры:
span
{
border-bottom: thick solid #800080
}
li
{
border-bottom: dotted #800000
}
Параметр 'border-bottom-color'
Данный параметр задает цвет нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Co
Значение для цвета может быть названием цвета (red), значением rgb
lor
(rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)
Примеры:
p
{
border-bottom-color: rgb(20,200,250)
}
span
{
border-bottom-color: blue
}
Параметр 'border-bottom-style'
Этот параметр задает стиль нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
None
Определяет отсутствие границы
Hidden
То же самое, что "none", за исключением разрешения конфликта границ для элементов
таблицы
Dotted
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной
линией
Dashed
solid
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров
сплошной линией
Определяет сплошную границу
Определяет двойную границу. Толщина двойной границы будет соответствовать
значению border-width
groove
Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset
Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset
Определяет 3D-границу (outset). Результат зависит от значения цвета границы
Пример:
double
p
{
border-bottom-style: dotted
}
Параметр 'border-bottom-width'
Данный параметр задает толщину нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
thi
Определяет тонкую нижнюю границу
n
me
Определяет нижнюю границу средней
dium
толщины
thi
Определяет толстую нижнюю границу
ck
Позволяет определить толщину нижней
границы
Примеры:
len
gth
p
{
border-bottom-width: 1px
}
p
{
border-bottom-width: thick
}
Параметр 'border-color'
Данный параметр задает цвет четырех сторон границы. Допускается определение от одного
до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к.
элемент должен иметь границу, прежде чем для нее будет задан цвет.
Наследование: нет.
Возможные значения:
Значение Описание
Color
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или
шестнадцатеричным числом (#FF0000)
Transparent Граница является прозрачной
Примеры:
p {border-color: blue}
все четыре стороны границы будут синие.
p {border-color: blue yellow}
верхняя и нижняя стороны границы будут синие,
левая и правая стороны границы будут желтые.
p {border-color: blue yellow green}
верхняя стороны граница будет синей,
левая и правая стороны границы будут желтые,
нижняя сторона границы будет зеленая.
p {border-color: blue yellow green red}
верхняя сторона границы будет синей,
правая сторона границы будет желтой,
нижняя сторона границы будет зеленой,
левая сторона границы будет красной.
Параметр 'border-left'
Данный параметр позволяет определить все свойства левой стороны границы в одном
объявлении.
Наследование: нет.
Может принимать следующие значения:
Значени
Описание
е
borderЗадает свойства левой стороны
left-width
границы
borderstyle
bordercolor
Примеры:
p
{
border-left: medium dashed green
}
p
{
border-left: thin dotted #FF00FF
}
Параметр 'border-left-color'
Данный параметр задает цвет левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Co
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0))
lor
или шестнадцатеричным числом (#FF0000)
Примеры:
h1
{
border-left-color: green
}
h2
{
border-left-color: #00FF00
}
Параметр 'border-left-style'
Данный параметр задает стиль левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
None
Определяет отсутствие границы
Hidden
То же самое, что "none", за исключением разрешения конфликта границ для элементов
таблицы
Dotted
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной
линией
Dashed
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров
сплошной линией
solid
Определяет сплошную границу
double
Определяет двойную границу. Толщина двойной границы будет соответствовать
значению border-width
groove
Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge
inset
outset
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
Определяет 3D-границу (inset). Результат зависит от значения цвета границы
Определяет 3D-границу (outset). Результат зависит от значения цвета границы
Пример:
p
{
border-left-style: dotted
}
Параметр 'border-left-width'
Данный параметр задает толщину левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
thi
Определяет тонкую левую сторону границу
n
me
Определяет левую сторону границы средней
dium
толщины
thi
Определяет толстую левую сторону границы
ck
len
Позволяет определить толщину левой стороны
gth
границы
Примеры:
p
{
border-left-width: 7px
}
p
{
border-left-width: thick
}
Параметр 'border-right'
Этот параметр используется для определения всех свойств правой стороны границы в
одном объявлении.
Наследование: нет.
Может принимать следующие значения:
Значение
Описание
borderЗадает свойства правой стороны
right-width
границы
borderstyle
bordercolor
Примеры:
h1
{
border-right: medium dotted #FFFF00
}
h2
{
border-right: thin dashed green
}
Параметр 'border-right-color'
Данный параметр задает цвет правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
col
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0))
or
или шестнадцатеричным числом (#FF0000)
Примеры:
p
{
border-right-color: rgb(250,200,250)
}
p
{
border-right-color: blue
}
Параметр 'border-right-style'
Данный параметр задает стиль правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
None
Определяет отсутствие границы
Hidden
Dotted
Dashed
solid
double
То же самое, что "none", за исключением разрешения конфликта границ для элементов
таблицы
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной
линией
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров
сплошной линией
Определяет сплошную границу
Определяет двойную границу. Толщина двойной границы будет соответствовать
значению border-width
Определяет 3D-границу (groove). Результат зависит от значения цвета границы
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
Определяет 3D-границу (inset). Результат зависит от значения цвета границы
groove
ridge
inset
outset
Определяет 3D-границу (outset). Результат зависит от значения цвета границы
Пример:
p
{
border-right-style: dashed
}
Параметр 'border-right-width'
Данный параметр задает толщину правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
thi
Определяет тонкую правую сторону границу
n
me
Определяет правую сторону границы средней
dium
толщины
thi
Определяет толстую правую сторону границы
ck
len
Позволяет определить толщину правой стороны
gth
границы
Примеры:
h1
{
border-right-width: 2cm
}
h2
{
border-right-width: medium
}
Параметр 'border-style'
Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до
четырех стилей.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
None
Определяет отсутствие границы
Hidden
Dotted
Dashed
solid
double
groove
То же самое, что "none", за исключением разрешения конфликта границ для элементов
таблицы
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной
линией
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров
сплошной линией
Определяет сплошную границу
Определяет двойную границу. Толщина двойной границы будет соответствовать
значению border-width
Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge
inset
outset
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
Определяет 3D-границу (inset). Результат зависит от значения цвета границы
Определяет 3D-границу (outset). Результат зависит от значения цвета границы
Примеры:
p {border-style: dashed}
все четыре стороны границы будут
штрих-пунктирными.
p {border-style: solid double}
верхняя и нижняя стороны границы будут сплошными,
левая и правая сторона граница будут двойными.
p {border-style: solid double dotted}
верхняя сторона границы будет сплошной,
левая и правая сторона границы будут двойными,
нижняя сторона границы будет пунктирной.
p {border-style: dashed double dotted solid}
верхняя сторона граница будет штрих-пунктирной,
правая сторона границы будет двойной,
нижняя сторона границы будет пунктирной,
левая сторона границы будет сплошной.
е
Параметр 'border-top'
Данный параметр определяет все свойства верхней стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
Значени
Описание
borderЗадает свойства верхней стороны
top-width
границы
borderstyle
bordercolor
Примеры:
p
{
border-top: thick dashed green
}
p
{
border-top: dotted #FF0000
}
Параметр 'border-top-color'
Этот параметр задает цвет верхней стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
col
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0))
or
или шестнадцатеричным числом (#FF0000)
Примеры:
h1
{
border-top-color: blue
}
h2
{
border-top-color: rgb(200,10,250)
}
Параметр 'border-top-style'
Параметр задает стиль верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
Зн
Описание
ачение
No
Определяет отсутствие границы
ne
Hi
То же самое, что "none", за исключением разрешения конфликта границ для
dden
элементов таблицы
Определяет пунктирную границу. Изображается в большинстве браузеров
сплошной линией
Da
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров
сплошной линией
Do
tted
shed
sol
Определяет сплошную границу
id
Определяет двойную границу. Толщина двойной границы будет соответствовать
значению border-width
gr
Определяет 3D-границу (groove). Результат зависит от значения цвета границы
do
uble
oove
rid
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
ins
Определяет 3D-границу (inset). Результат зависит от значения цвета границы
ou
Определяет 3D-границу (outset). Результат зависит от значения цвета границы
ge
et
tset
Примеры:
p
{
border-top-style: dotted
}
Параметр 'border-top-width'
Данный параметр задает толщину верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
Зн
Описание
ачение
thi
Определяет тонкую верхнюю сторону границу
n
Определяет верхнюю сторону границы средней
толщины
thi
Определяет толстую верхнюю сторону границу
me
dium
ck
Позволяет определить толщину верхней стороны
границы
Примеры:
len
gth
p
{
border-top-width: medium
}
p
{
border-top-width: 1cm
}
Параметр 'border-width'
Данный параметр определяет в одном объявлении толщину четырех сторон границы и
может иметь от одного до четырех значений.
Наследование: нет.
Возможные значения:
Зн
Описание
ачение
thi
Определяет тонкую границу
n
Определяет границы средней
dium
толщины
thi
Определяет толстую границу
ck
len
Позволяет определить толщину
gth
границ
Примеры:
me
p {border-width: thick}
все четыре стороны границы будут толстыми.
p {border-width: thick thin}
верхняя и нижняя стороны границы будут толстыми,
левая и правая сторона границы будут тонкими.
p {border-width: medium thick thin}
верхняя сторона границы будет иметь среднее значение,
левая и правая стороны границы будут толстыми,
нижняя сторона границы будет тонкой.
p {border-width: thick thin thin medium}
верхняя сторона границы будет толстой,
правая сторона границы будет тонкой,
нижняя сторона границы будет тонкой,
левая сторона границы будет иметь среднее значение.
Лекция 7: Отступы в СSS
Определяются методы и свойства, необходимые для описания пространства вокруг элементов.
Отступы в CSS определяют пространство вокруг элементов.
Примеры
1.
Этот пример показывает, как задать для текста левый отступ.
<html>
<head>
<style type="text/css">
h1.lf {margin-left: 1cm}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов</h1>
<h1 class="lf">Заголовок h1 с отступами</h1>
</body>
</html>
2.
Этот пример показывает, как задать для текста правый отступ.
<html>
<head>
<style type="text/css">
h2.rg {margin-right: 400px}
</style>
</head>
<body>
<h2> Заголовок h2 без отступов </h2>
<h2 class="rg"> Заголовок h2 с с заданным правым отступом</h2>
</body>
</html>
3.
Этот пример показывает, как задать для текста верхний отступ.
<html>
<head>
<style type="text/css">
h1.tp {margin-top: 50px}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов </h1>
<h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1>
</body>
</html>
4.
Этот пример показывает, как задать нижний отступ текста.
<html>
<head>
<style type="text/css">
h2.btm {margin-bottom: 1cm}
</style>
</head>
<body>
<h2>Заголовок h2 без отступов</h2>
<h2 class="btm">Заголовок h2 с заданным нижним отступом</h2>
<h2>Заголовок h2 без отступов</h2>
</body>
</html>
5.
Этот пример показывает, как задать параметры всех отступов в одном объявлении.
<html>
<head>
<style type="text/css">
h1.all {margin: 1cm 2cm 1cm 2cm}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов</h1>
<h1 class="all">Заголовок h1 с заданными отступами</h1>
<h1>Заголовок h1 без отступов</h1>
</body>
</html>
Отступы в CSS
Они определяют пространство вокруг элементов. Допускают использование отрицательных
значений для того, чтобы создавать наложение содержимого. Все отступы (верхний, правый,
нижний и левый) можно изменять независимо, используя отдельные параметры, а можно
использовать параметр margin для изменения всех отступов одновременно.
Отступы заданные по умолчанию в браузерах:
Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого
использует по умолчанию поле величиной 8px.
Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно
выводились в Opera, то для body необходимо задать также поле!
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
Параметр
Описание
Значения
IE F N W3C
margin
Параметр для задания отступов в одном объявлении margin-top
4 1 4 1
margin-right
margin-bottom
margin-left
margin-bottom Задает нижний отступ элемента
margin-left
Задает левый отступ элемента
margin-right
Задает правый отступ элемента
margin-top
Задает верхний отступ элемента
auto
length
%
auto
length
%
auto
length
%
auto
4 1 4 1
3 1 4 1
3 1 4 1
3 1 4 1
length
%
Отступы в CSS: подробное рассмотрение
Параметр 'margin'
Параметр определяет все отступы в одном объявлении. Позволяет определять
отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
Значение Описание
margin-top Задают свойства отступов. Значения задаются в % (определяет отступ в % общей
высоты/ширины документа), длиной (определяет фиксированный отступ) и
marginавтоматически (отступ задает браузер)
right
marginbottom
margin-left
Примеры:
p {margin: 2px}
все четыре отступа будут иметь отступ, равный 2px.
p {margin: 5px 10%}
верхний и нижний отступ будут по 5px,
левый и правый отступ будут составлять 10% общей ширины документа.
p {margin: 5px 10% -2px}
верхний отступ будет равен 5px,
левый и правый отступ будут составлять 10% общей ширины документа,
нижний отступ будет равен 2px.
p {margin: 5px 10% -2px auto}
верхний отступ будет 5px,
правый отступ будет составлять 10% общей ширины документа,
нижний отступ будет 2px, левый отступ будет задан браузером.
Параметр 'margin-bottom'
Данный параметр задает нижний отступ элемента. Позволяет определять отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Au
Нижний отступ задает браузер
to
Le
Определяет фиксированный нижний отступ
ngth
%
Определяет нижний отступ в % от общей высоты
документа
Примеры:
p
{
margin-bottom: 5%
}
p
{
margin-bottom: auto
}
Параметр 'margin-left'
Этот параметр задает левый отступ элемента. Позволяет определять отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Au
Левый отступ задает браузер
to
Le
Определяет левый отступ фиксированной
ngth
ширины
%
Определяет левый отступ в % общей ширины
документа
Примеры:
p
{
margin-left: 2%
}
p
{
margin-left: -5px
}
Параметр 'margin-right'
Этот параметр задает правый отступ элемента. Позволяет определять отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Au
Правый отступ задает браузер
to
Le
Определяет правый отступ фиксированной
ngth
величины
%
Определяет правый отступ в % общей ширины
документа
Примеры:
p
{
margin-right: 2px
}
p
{
margin-right: 10%
}
Параметр 'margin-top'
Данный параметр задает верхний отступ элемента. Позволяет определять отрицательные
значения.
Наследование: нет.
Возможные значения:
Зн
Описание
ачение
Au
Верхний отступ задает браузер
to
Le
Определяет верхний отступ фиксированной ширины
ngth
%
Определяет верхний отступ в % от общей высоты
документа
Примеры:
p
{
margin-top: auto
}
p
{
margin-top: -5px
}
Лекция 8: Поля в CSS
Приводятся способы определения пространства между границей элемента и его содержимым.
Данные параметры определяют пространство между границей элемента и содержимым
элемента.
Примеры
1.
Этот пример показывает, как задать левое поле элементов списка.
<html>
<head>
<style type="text/css">
li {padding-left: 0.5cm}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</table>
</body>
</html>
2.
Этот пример показывает, как задать правое поле элементов списка.
<html>
<head>
<style type="text/css">
li {padding-right: 3cm}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</table>
</body>
</html>
3.
Этот пример показывает, как задать верхнее поле элементов списка.
<html>
<head>
<style type="text/css">
li {padding-top: 1cm}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</table>
</body>
</html>
4.
Этот пример показывает, как задать нижнее поле элементов списка.
<html>
<head>
<style type="text/css">
li {padding-bottom: 2.5cm}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</table>
</body>
</html>
5.
Пример показывает, как с помощью параметра padding задать все поля в одном
объявлении. Допускается определение от одного до четырех значений.
<html>
<head>
<style type="text/css">
li.first {padding: 2.5cm}
li.second {padding: 1cm 2cm}
</style>
</head>
<body>
<ol>
<li class="first">элемент списка с одинаковыми полями со всех сторон</li>
<li>элемент списка</li>
<li class="second">элемент списка, который имеет верхнее и нижнее поле, равное
1 см,
а левое и правое поля — равные 2 см</li>
</ol>
</table>
</body>
</html>
Параметры полей в CSS
Определяют пространство между границей элемента и содержимым элемента, для которого
не предусмотрены отрицательные значения. Все поля (верхнее, правое, нижнее и левое) можно
изменять независимо друг от друга. Существует также параметр padding, который позволяет
определять нескольких полей в одном объявлении.
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
Параметр
Описание
Значения
IE F N W3C
padding
Параметр для задания всех полей в одном padding-top
4 1 4 1
объявлении
padding-right
paddingbottom
padding-left
paddingЗадает нижнее поле элемента
length
4 1 4 1
bottom
%
padding-left
Задает левое поле элемента
length
4 1 4 1
%
padding-right Задает правое поле элемента
length
4 1 4 1
padding-top
Задает верхнее поле элемента
%
length
%
4 1 4 1
Поля в CSS: подробное рассмотрение
Параметр 'padding'
Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет
задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
Значение
Описание
padding-top Устанавливает поля. Значения задаются в % (определяет поле в % от ширины
ближайшего элемента) и длиной (определяет фиксированное поле)
paddingright
paddingbottom
padding-left
Примеры:
p {padding: 2px}
для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px}
верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины
ближайшего элемента.
p {padding: 2px 7px 5%}
верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего
элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px}
верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее
поле будет 7px, левое поле будет 5px.
Параметр 'padding-bottom'
Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Le
Определяет фиксированное нижнее поле
ngth
Определяет нижнее поле в % от высоты ближайшего
элемента
Пример:
%
li
{
padding-bottom: 5%
}
Параметр 'padding-left'
Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Le
Определяет фиксированное левое поле
ngth
%
Определяет левое поле в % от высоты ближайшего
элемента
Пример:
li
{
padding-left: 2px
}
li
{
padding-left: 5%
}
Параметр 'padding-right'
Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Le
Определяет фиксированное правое поле
ngth
%
Определяет правое поле в % от высоты ближайшего
элемента
Пример:
li
{
padding-right: 2px
}
Параметр 'padding-top'
Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные
значения.
Наследование: нет.
Может принимать следующие значения:
Зн
Описание
ачение
Le
Определяет фиксированное верхнее поле
ngth
%
Определяет верхнее поле в % от высоты ближайшего
элемента
Пример:
li
{
padding-top: 2px
}
Лекция 9: Списки в CSS
Рассматриваются параметры списков в CSS и способы задания маркеров для элементов списка.
Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка,
задавать изображение в качестве маркера элемента списка.
Примеры:
1.
Этот пример показывает, как задать различные маркеры элементов списка.
<html>
<head>
<style type="text/css">
ol.no {list-style-type: none}
ul.ds {list-style-type: disc}
ol.sqr {list-style-type: square}
ul.crl {list-style-type: circle}
</style>
</head>
<body>
<ol class="no">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="ds">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<ol class="sqr">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="crl">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
2.
Этот пример показывает, как задать различные маркеры элементов списка.
<html>
<head>
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="lwalph">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="upalph">
<li>Первый элемент</li>
<li>Чай</li>
<li>Третий элемент</li>
</ul>
<ol class="lwrm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="uprm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<ul class="dec">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
3.
списка.
Этот пример показывает, как задать изображение в качестве маркера элемента
<html>
<head>
<style type="text/css">
ol
{
list-style-image: url("http://www.intuit.ru/departamen/speciality/image.gif")
}
</style>
</head>
<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
</body>
</html>
4.
Этот пример показывает, как можно задать расположение маркера элемента списка.
<html>
<head>
<style type="text/css">
ol.in
{
list-style-position: inside
}
ul.out
{
list-style-position: outside
}
</style>
</head>
<body>
<ol class="in">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
<pre>Cписок имеет <i><u>list-style-position</u></i> =
"<b>inside</b>"</pre>
</ol>
<ul class="out">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
</ul>
<pre>Список имеет <i><u>list-style-position</u></i> =
"<b>outside</b>"</pre>
</body>
</html>
5.
Пример показывает, как задать все параметры списка в одном объявлении.
<html>
<head>
<style type="text/css">
ol
{
list-style: disc outside
url("http://www.intuit.ru/departament/speciality/image.gif")
}
</style>
</head>
<body>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
</body>
</html>
Параметры списков в CSS
Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять
маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
Параметр
Описание
Значения
IE F N W3C
list-style
Параметр для задания всех характеристик списка в list-style-type
4 1 6 1
одном объявлении
list-style-position
list-styleimage
list-styleposition
list-style-type
list-style-image
Задает изображение в качестве маркера элемента none
списка
url
Задает размещение в списке маркера элемента inside
списка
outside
Задает тип маркера элемента списка
none
disc
circle
square
decimal
decimal-leadingzero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
4 1 6 1
4 1 6 1
4 1 4 1
hebrew
armenian
georgian
marker-offset
е
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
auto
length
1 7 2
Списки в CSS: подробное рассмотрение
Параметр 'list-style'
Данный параметр определяет все характеристики списка в одном объявлении.
Наследование:да.
Может принимать следующие значения:
Значени
Описание
list-style
Задает характеристики
списка
list-style-
type
list-styleposition
list-styleimage
Примеры:
ol
{
list-style: square inside url("www.intuit.ru/departament/image.gif")
}
ul
{
list-style: circle inside
}
Параметр 'list-style-image'
Данный параметр позволяет заменить маркер элемента списка указанным изображением.
Необходимо определять параметр "list-style-type" на тот случай, если изображение будет
недоступно.
Наследование:да.
Может принимать следующие значения:
Зн
Описание
ачение
url
Путь
доступа
к
изображению
No
Изображение
не
ne
выводится
Пример:
ul
{
list-style-image: url("www.intuit.ru/speciality/image.gif");
list-style-type: square
}
Параметр 'list-style-position'
Параметр определяет способ размещения маркера элемента списка.
Наследование:да.
Может принимать следующие значения:
Зн
Описание
ачение
ins
Маркер смещен внутрь текста
ide
ou
Маркер располагается слева
tside
от текста
Пример:
ul
{
list-style-position: outside
}
Параметр 'list-style-type'
Данный параметр задает тип маркера элемента списка.
Наследование:да.
Может принимать следующие значения:
Значение
Описание
none
Без маркера
disc
Маркер — закрашенный круг
circle
Маркер — окружность
square
Маркер — закрашенный квадрат
decimal
decimal-leadingzero
lower-roman
Маркер — число
Маркер — число с добавленным ведущим нулем (01, 02, 03 b и т.д.)
lower-alpha
upper-alpha
lower-greek
lower-latin
Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и
т.д. )
Маркер — римске цифры, представленные прописными буквами (I, II, III, IV,
V и т.д.)
Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.)
Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.)
Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
Маркер — латинские прописные буквы (A, B, C, D, E и т.д.)
Традиционная еврейская нумерация
Традиционная армянская нумерация
Традиционная грузинская нумерация (an, ban, gan, и т.д.)
Маркер — простые идеографические числа
Маркер — a, i, u, e, o, ka, ki, и т.д.
Маркер — A, I, U, E, O, KA, KI и т.д.
Маркер — i, ro, ha, ni, ho, he, to и т.д.
upper-roman
katakana-iroha
Маркер — I, RO, HA, NI, HO, HE, TO и т.д.
Примеры:
ol
{
list-style-type: circle
}
ul
{
list-style-type: decimal
}
Лекция 10: Размеры элементов в CSS
Рассматриваются параметры размеров элементов и параметры интервалов между элементами.
Данные параметры CSS позволяют управлять высотой и шириной элемента, увеличением
интервала между двумя строками.
Пример:
В примере показано, как увеличить интервал между строками.
<html>
<head>
</head>
<body>
<div>
Стандартный интервал между строками.<br>
Стандартный интервал между строками.
</div>
<br>
<div style="line-height: 0.4cm">
Уменьшенный интервал между строками.<br>
Уменьшенный интервал между строками.
</div>
<br>
<div style="line-height: 0.9cm">
Увеличенный интервал между строками.<br>
Увеличенный интервал между строками.
</div>
</body>
</html>
Параметры размеров элементов CSS
Данные параметры позволяют управлять высотой и шириной элемента, а также изменить
межстрочный интервал.
Данные свойства поддерживаются следующими браузерами (в скобках сокращенный
вариант, который применяется далее в таблицах парметров и значений): Internet Explorer (IE),
Firefox (F), Netscape(N).
Параметр Описание
Значения IE F N W3C
height
Задает высоту элемента
auto
4 1 6 1*
length
%
line-height Задает интервал между строками
normal
4 1 4 1
number
length
%
max-height Задает максимальную высоту элемента none
length
%
max-width Задает максимальную ширину элемента none
length
%
min-height Задает минимальную высоту элемента length
%
min-width Задает минимальную ширину элемента length
%
width
Задает ширину элемента
auto
-
1 6 2
-
1 5 2
-
1 6 2
-
1 6 2
4 1 4 1
%
length
(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен
параметр (CSS1 или CSS2)).
Размеры элементов в CSS: подробное рассмотрение
Параметр 'height'
Используется для задания высоты элемента.
Наследование: нет.
Пример:
p
{
height: 50px
}
Может принимать следующие значения:
Зн
Описание
ачение
aut
Браузер вычисляет реальную высоту
o
len
Определяет высоту в px, см, и т.д.
gth
%
Определяет
высоту
в
%
от
объемлющего блока
Параметр 'line-height'
Используется для задания интервала между строками.
Наследование: Да.
Примечание: Отрицательные значения не допускаются.
Примеры:
div
{
line-height: 2.1
}
div
{
line-height: 10pt
}
div
{
line-height: 120%
}
Может принимать следующие значения:
Значение Описание
normal
Задает приемлемый интервал между строками
number
Задает число, которое при умножении на размер текущего шрифта задает интервал
между строками
length
Задает фиксированный интервал между строками
%
Задает интервал между строками в % от размера текущего шрифта
Параметр 'max-height'
Используется для задания максимальной высоты элемента.
Наследование: нет.
Пример:
div
{
max-height: 200%
}
Может принимать следующие значения:
Значение Описание
none
Отсутствие ограничений на максимальную высоту элемента
length
Определяет максимальную высоту элемента
%
Определяет максимальную высоту элемента в % от объемлющего блока
Параметр 'max-width'
Используется для задания максимальной ширины элемента.
Наследование: нет.
Пример:
h6
{
max-width: 75%
}
Может принимать следующие значения:
Значение Описание
none
Отсутствие ограничений на максимальную ширину элемента
length
Определяет максимальную ширину элемента
%
Определяет максимальную ширину элемента в % от объемлющего блока
Параметр 'min-height'
Используется для задания минимальной высоты элемента.
Наследование: нет.
Пример:
div
{
min-height: 20%
}
Может принимать следующие значения:
Значение Описание
length
Определяет минимальную высоту элемента
Определяет минимальную высоту элемента в % от объемлющего блока
%
Параметр 'min-width'
Используется для задания минимальной ширины элемента.
Наследование: нет.
Пример:
h6
{
min-width: 20%
}
Может принимать следующие значения:
Значение Описание
length
Определяет минимальную ширину элемента
%
Определяет минимальную ширину элемента в % от объемлющего блока
Параметр 'width'
Используется для задания ширины элемента.
Наследование: нет.
Пример:
hr
{
width: 20%
}
Может принимать следующие значения:
Зн
Описание
ачение
aut
Браузер вычисляет реальную ширину
o
%
Определяет ширину в % от ширины родительского
элемента
len
Определяет ширину в px, см, и т.д.
gth
Форматирование в CSS
Данные параметры позволяют определить, как и в каком месте вывести элемент.
Примеры:
1.
В примере показано, как вывести элемент.
<html>
<head>
<style type="text/css">
h1 {display: inline}
pre {display: none}
</style>
</head>
<body>
<pre>Эта информация не будет отображена</pre>
<h1>Между этими двумя элементами</h1>
<h1>нет интервала</h1>
</body>
</html>
2.
Пример показывает, как создать смещение изображения в параграфе вправо.
<html>
<head>
</head>
<body>
<p>
<img style="float:right" src="image.gif" width="100" height="70" />
В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.
</p>
</body>
</html>
3.
Пример показывает, как создать смещение изображения в параграфе вправо и
добавить к изображению границы и отступы.
<html>
<head>
</head>
<body>
<p>
<img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;"
src="image.gif" width="100" height="70" />
Изображение смещено вправо, имеет границу из сплошной линии и отступы.
</p>
</body>
</html>
4.
Пример показывает, как можно сместить изображение с заголовком вправо.
<html>
<head>
</head>
<body>
<div style="float:right; border:2px dotted blue; text-align:center;
padding:5px; margin:5 5 10px 10px; width:160px;">
<img src="image.gif" width="120" height="70" /><br />
Изучайте CSS!
</div>
<p>
В данном примере элемент div имеет ширину 160 пикселей, содержит изображение,
смещается вправо.
Для дистанцирования текста от div, к последнему добавлены отступы,
а для выделения картинки и заголовока - границы и поля.
</p>
</body>
</html>
5.
Пример показывает, как можно сместить первую букву параграфа влево.
<html>
<head>
<style type="text/css">
b
{
float:left;
line-height:95%;
font-size:500%;
font-family:Comic Sans MS;
width:1.2em;
}
</style>
</head>
<body>
<p>
<b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта,
размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic
Sans MS.
</p>
</body>
</html>
6.
Пример показывает, как создать горизонтальное меню.
<html>
<head>
<style type="text/css">
ol
{
float:left;
margin:5;
padding:5;
width:100%;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:blue;
background-color:yellow;
padding:0.4em 0.7em;
border:2px solid gray;
}
a:hover {background-color:#0F0FFF; color:yellow}
li {display:inline}
</style>
</head>
<body>
<ol>
<li><a
<li><a
<li><a
<li><a
</ol>
href="#">Ссылка
href="#">Ссылка
href="#">Ссылка
href="#">Ссылка
1</a></li>
2</a></li>
3</a></li>
4</a></li>
<p>
В примере элементы ol и a смещены влево.
У элементов li отсутствует разрыв строки перед или после элемента.
</p>
</body>
</html>
7.
Пример показывает, как создать страницы без таблиц.
<html>
<head>
<style type="text/css">
div.block
{
width:100%;
margin:0px;
border:1px solid orange;
line-height:150%;
}
div.top,div.bottom
{
padding:0.5em;
color:white;
background-color:orange;
clear:left;
}
h1.top
{
padding:0;
margin:0;
}
div.move
{
float:left;
width:160px;
margin:0;
padding:1em;
color: blue;
}
div.body
{
margin-left:190px;
border-left:1px solid orange;
padding:1em;
}
</style>
</head>
<body>
<div class="block">
<div class="top"><h1 class="top">www.Intuit.ru</h1></div>
<div class="move"><p>"Сущности, необходимые для объяснения чего-либо,
не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div>
<div class="body">
<h2>Свободно доступные пособия по созданию Web</h2>
<p>В Интернет можно найти все необходимые для создания Web пособия,
начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p>
<p>Intuit -- Сайт для разработчиков Web!</p></div>
<div class="bottom">©Copyright</div>
</div>
</body>
</html>
8.
В примере показано, как позиционировать элемент относительно его обычного
положения.
<html>
<head>
<style type="text/css">
p.left_plus
{
position:relative;
left:15px
}
p.left_minus
{
position:relative;
left:-15px
}
p.right_plus
{
position:relative;
right:35px
}
p.right_minus
{
position:relative;
right:-35px
}
</style>
</head>
<body>
<h2>Это заголовок в обычном положении</h2>
<p class="left_plus">Параграф имеет смещение относитильно
положения</p>
<p class="left_minus">Параграф имеет смещение относитильно
своего
обычного
своего
обычного
положения</p>
<p class="right_plus">Параграф имеет смещение относитильно своего
положения</p>
<p class="right_minus">Параграф имеет смещение относитильно своего
положения</p>
</body>
</html>
9.
значения.
обычного
обычного
В примере показано, как позиционировать элемент с помощью абсолютного
<html>
<head>
<style type="text/css">
p.ab
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>
<body>
<p class="ab">Параграф позиционируется с абсолютным значенгием</p>
<pre>С помощью абсолютного позиционирования элемент можно поместить в любом
месте страницы.
Параграф имеет смещение - на 50px от левого края страницы и
на 50px от верхнего края страницы.</pre>
</body>
</html>
10.
В примере показано, как сделать элемент невидимым.
<html>
<head>
<style type="text/css">
p.off {visibility:hidden}
p.on {visibility:visible}
</style>
</head>
<body>
<p class="on">Параграф виден</p>
<p class="off">Параграф не виден</p>
</body>
</html>
11.
В примере показано, как изменить курсор.
<html>
<head>
</head>
<body>
<h4 style="color:blue">Курсоры:</h4>
<div style="cursor:auto">
Auto</div>
<div style="cursor:crosshair">
Crosshair</div>
<div style="cursor:default">
Default</div>
<div style="cursor:pointer">
Pointer</div>
<div style="cursor:move">
Move</div>
<div style="cursor:text">
text</div>
<div style="cursor:wait">
wait</div>
<div style="cursor:help">
help</div>
<h4 style="color:blue">Курсоры типа resize:</h4>
<div style="cursor:e-resize">
e-resize</div>
<div style="cursor:ne-resize">
ne-resize</div>
<div style="cursor:nw-resize">
nw-resize</div>
<div style="cursor:n-resize">
n-resize</div>
<div style="cursor:se-resize">
se-resize</div>
<div style="cursor:sw-resize">
sw-resize</div>
<div style="cursor:s-resize">
s-resize</div>
<div style="cursor:w-resize">
w-resize</div>
</body>
</html>
Лекция 11: Параметры форматирования в CSS
Определяются способы управления видимостью, положением и позиционированием элементов.
Данные параметры позволяют:

управлять выводом элемента;

задавать положение изображения в другом элементе;

позиционировать элемент относительно его обычного положения;

позиционировать элемент с помощью абсолютного значения;

управлять видимостью элемента.
Данные параметры поддерживают следующие браузеры:Internet Explorer, Firefox,
Netscape.
Параметр Описание
Значения
IE F N W3C
clear
Задает стороны элемента, на которых не допускаются left
4 1 4 1
другие перемещаемые элементы
right
cursor
Задает тип выводимого курсора
both
none
url
auto
crosshair
default
pointer
move
e-resize
4 1 6 2
ne-resize
nw-resize
n-resize
Определяет, как в документе будет показан элемент
display
se-resize
sw-resize
s-resize
w-resize
text
wait
help
none
inline
block
4 1 4 1
list-item
run-in
compact
marker
table
inline-table
table-rowgroup
table-headergroup
table-footergroup
table-row
table-columngroup
table-column
table-cell
table-caption
Определяет, где в другом элементе появится изображение left
или текст
right
none
float
position
visibility
Задает статическое, относительное, абсолютное или static
фиксированное положение элемента
relative
absolute
fixed
Определяет, будет ли элемент видим или невидим
visible
hidden
collapse
Параметры форматирования в CSS: подробное рассмотрение
4 1 4 1
4 1 4 2
4 1 6 2
Параметр 'clear'
Данный параметр задает стороны элемента, где не допускаются другие плавающие
элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в
другом элементе.
Примечание: При использовании с параметром "float" не всегда работает как ожидается.
Наследование: нет.
Пример:
div
{
clear: both
}
div
{
clear: left
}
Может принимать следующие значения:
Зн
Описание
ачение
lef
Плавающие элементы не допускаются слева
t
rig
Плавающие элементы не допускаются справа
ht
bo
Плавающие элементы не допускаются ни справа,
th
ни слева
no
Плавающие элементы допускаются с любой
ne
стороны
Параметр 'cursor'
Данный параметр определяет тип курсора, который будет выводиться при указании на
элемент.
Наследование: да.
Примеры:
pre
{
cursor: pointer
}
div
{
cursor : url("general.cur"), url("other.cur"), text;
}
Может принимать следующие значения:
Значение Описание
url
url специального курсора, который будет использоваться
Примечание: Всегда определяйте базовый курсор в конце списка, который будет
использоваться, если ни один из определенных url курсоров невозможно использовать.
default
Курсор по умолчанию (часто стрелка)
auto
Курсор задает браузер
crosshair Курсор изображается как перекрестие
pointer
Курсор изображается как указатель (рука), который обозначает ссылку
move
Курсор указывает объект, который можно переместить
e-resize Курсор, определяющий перемещение края бокса вправо (east)
ne-resize Курсор, определяющий перемещение края бокса вверх и вправо (north/east)
nw-resize Курсор, определяющий перемещение края бокса вверх и влево (north/west)
n-resize Курсор, определяющий перемещение края бокса вверх (north)
se-resize Курсор, определяющий перемещение края бокса вниз и вправо (south/east)
sw-resize Курсор, определяющий перемещение края бокса вниз и влево (south/west)
s-resize
Курсор, определяющий перемещение края бокса вниз (south)
w-resize Курсор, определяющий перемещение края бокса влево (west)
text
Курсор используемый для текста
wait
Курсор, указывающий на занятость программы (часто песочные часы)
help
Курсор, указывающий, что имеется справочная информация (часто знак вопроса)
Примечания для браузеров:
Internet Explorer:
Чтобы вывести изображение руки, можно использовать нестандартное значение hand
следующим образом: {cursor: hand}
Параметр 'display'
Данный параметр определяет, как в документе будет показан элемент.
Наследование: нет.
Примеры:
pre
{
display: block
}
strong
{
display: inline
}
img
{
display: none
}
h1, h3
{
display: no
}
Может принимать следующие значения:
Значение
Описание
none
Элемент не будет выводиться
inline
Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и
после элемента
block
Элемент будет выводиться как элемент строки, без разрыва строки перед или
после элемента.
list-item
Элемент будет выводиться как список
run-in
Элемент будет выводиться на уровне блока или как внутристрочный элемент, в
зависимости от контекста.
compact
Элемент будет выводиться на уровне блока или как внутристрочный элемент, в
зависимости от контекста.
marker
table
Элемент будет выведен как таблица блока (как <table> ), с разрывом строки перед
inline-table
и после таблицы
Элемент будет выведен как внутристрочная таблица (как <table> ), без разрыва
строки перед или после таблицы.
table-row-group Элемент выводится как группа из одной или нескольких строк (как <tbody> )
table-headerЭлемент выводится как группа из одной или нескольких строк (как <thead> )
group
table-footerЭлемент выводится как группа из одной или нескольких строк (как <tfoot> )
group
table-row
Элемент выводится как строка таблицы (как <tr> )
table-columnЭлемент выводиться как группа из одного или нескольких столбцов (как
group
<colgroup> )
table-column
Элемент выводиться как столбец ячеек (как <col> )
table-cell
Элемент выводиться как ячейка таблицы (как <td> и <th> )
table-caption
Элемент выводиться как заголовок таблицы (как <caption> )
Свойство 'float'
Данное свойство определяет, где появится в другом элементе изображение или текст.
Примечания:
1.
Если в строке слишком мало места для плавающего элемента, он переносится на
следующую строку и продолжается пока строка имеет достаточно места.
2.
Перед float должны идти - содержание, фон, и границы внутристрочных элементов,
содержание блочного элемента, после - фон и границы блочного элемента.
Наследование: нет.
Пример:
p
{
float: right
}
Может принимать следующие значения:
Значение Описание
left
Изображение или текст смещается в родительском элементе влево.
right
Изображение или текст смещается в родительском элементе вправо.
none
Изображение или текст будут выводиться в том месте, где они встретились в тексте
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или
фиксированное положение.
Наследование: нет.
Пример:
p
{
position:static;
}
Может принимать следующие значения:
Значение Описание
static
Элемент помещается в обычное положение (согласно нормальному потоку). Со
значением "static" не используются параметры "left" и "top".
relative
Смещает элемент относительно его нормального положения, поэтому "left:20"
добавляет 20 пикселей к позиции LEFT элемента.
absolute С помощью значения "absolute" элемент можно поместить в любом месте страницы.
Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom"
fixed
Параметр 'visibility'
Этот параметр определяет видимость или невидимость элемента.
Примечания:
1.
Невидимые элементы занимают место на странице. Для того, чтобы создать
невидимые элементы, которые не занимают место необходимо использовать параметр "display".
2.
Этот параметр можно использовать со сценариями для создания Динамического
HTML.
Наследование: нет.
Примеры:
pre
{
visibility: hidden
}
Может принимать следующие значения:
Зн
Описание
ачение
vis
Элемент видим
ible
hi
Элемент невидим
dden
col
При использовании в табличных элементах это значение удаляет строку или
lapse
столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или
столбцом, будет доступно для другого содержимого. Если этот параметр используется с
другими элементами, он действует как "hidden"
Лекция 12: Позиционирование в CSS
Подробно рассматриваются методы определения положения элемента.
Данные параметры позволяют определить положение элемента.
Примеры:
1.
В примере показано, как позиционировать элемент относительно его обычного
положения.
<html>
<head>
<style type="text/css">
p.left
{
position:relative;
left:-20px
}
p.right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<p>Параграф</p>
<p class="left">Параграф смещен влево относительно обычного положения </h2>
<p class="right">Параграф смещен вправо относительно обычного положения</h2>
</body>
</html>
2.
значения.
В примере показано, как позиционировать элемент с помощью абсолютного
<html>
<head>
<style type="text/css">
p.ab
{
position:absolute;
left:75px;
top:200px
}
</style>
</head>
<body>
<p class="ab">Параграф имеет абсолютное местоположение и
смещен на 100px от левого края страницы и на 150px от верха страницы</p>
<p>Параграф</p>
</body>
</html>
3.
выводится.
В примере показано, как задать форму элемента, по которой он обрезается и
<html>
<head>
<style type="text/css">
p
{
position:absolute;
clip:rect(2px 250px 250px 0px)
}
</style>
</head>
<body>
<p>Обрезается параграф параграф параграф:</p>
<p></p>
</body>
</html>
4.
В примере показано, как использовать параметр overflow для определения действий,
когда содержимое элемента не помещается в указанной области.
<html>
<head>
<style type="text/css">
div
{
background-color:yellow;
width:175px;
height:70px;
overflow: auto
}
</style>
</head>
<body>
<p>Если содержимое элемента превышает заданные значения ширины и
высоты необходимо использовать параметр overflow который определдяет,
что делать в этой ситуации.</p>
<div>
В данном случае переполняется бокс элемента и overflow определяет,
что делать - установлено значение auto.
</div>
</body>
</html>
5.
В примере показано, как выравнять в тексте изображение по вертикали.
<html>
<head>
<style type="text/css">
img.first {vertical-align:text-bottom}
img.second {vertical-align:text-top}
</style>
</head>
<body>
<p>
Пара<img class="second" border="0"
src="image.gif" width="100" height="100" />
граф.
</p>
<p>
Пара<img class="first" border="0" border-color="blue"
src="image.gif" width="100" height="100" />
граф.
</p>
</body>
</html>
6.
В примере показано, как можно использовать Z-index для размещения элемента
"позади" другого элемента.
<html>
<head>
<style type="text/css">
img.index
{
position:absolute;
left:10px;
top:40px;
z-index:-1;
}
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120" height="150" border="1">
<p>Изображение с z-index равным -1 имеет меньший приоритет,
поэтому расположено "позади".</p>
</body>
</html>
7.
В примере показано, что произойдет если элементы из предыдущего примера
изменят свои значения Z-index.
<html>
<head>
<style type="text/css">
img.index
{
position:absolute;
left:10px;
top:40px;
z-index:1
}
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120" height="150" border="3">
<p>Изображение с z-index равным 1 имеет более высокий приоритет,
поэтому расположено "спереди".</p>
</body>
</html>
Параметры позиционирования в CSS
Параметры позиционирования в CSS позволяют:

определить левую, правую, верхнюю, и нижнюю позиции элемента:

задать форму элемента:

поместить элемент позади другого:

определить, что будет происходить, когда содержимое элемента слишком большое
для размещения в указанной области.
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox,
Netscape.
Параметр Описание
Значения
bottom
Задает, насколько далеко нижний край элемента находится auto
выше/ниже нижнего края родительского элемента
%
length
clip
Задает форму элемента. Элемент вырезается по форме и shape
выводится.
auto
left
Задает, насколько далеко левый край элемента находится auto
правее/левее левого края родительского элемента
%
overflow
position
right
top
verticalalign
length
Определяет, что происходит, когда содержимое элемента visible
переполняет его область
hidden
scroll
auto
Помещает
элемент
в
статическое,
относительное, static
абсолютное или фиксированное положение
relative
absolute
fixed
Задает, насколько далеко правый край элемента находится auto
левее/правее правого края родительского элемента
%
length
Задает, насколько далеко верхний край элемента находится auto
выше/ниже верхнего края родительского элемента
%
length
Задает выравнивание элемента по вертикали
baseline
sub
super
IE F N W3C
5 1 6 2
4 1 6 2
4 1 4 2
4 1 6 2
4 1 4 2
5 1 6 2
4 1 4 2
4 1 4 1
top
text-top
middle
z-index
Задает порядковый номер элемента в стеке
bottom
textbottom
length
%
auto
number
4 1 6 2
Параметры позиционирования в CSS: подробное рассмотрение
Параметр 'bottom'
Данный параметр определяет нижний край элемента.
Примечание:Если параметр "position" имеет значение "static", параметр "bottom" не
оказывает влияния.
Наследование: нет.
Примеры:
1.
В примере показано, как задать нижний край элемента pre на 50 px выше нижнего
края окна:
pre
{
position: absolute;
bottom: 50px
}
2.
края окна:
В примере показано, как задать нижний край элемента pre на 50 px ниже нижнего
pre
{
position: absolute;
bottom: -50px
}
Может принимать следующие значения:
Значение Описание
auto
Позволяет браузеру самостоятельно вычислить нижнюю позицию
%
Задает нижнюю позицию в % от положения нижнего края окна
length
Задает нижнюю позицию в px, см, и т.д. от нижнего края окна. Допускаются
отрицательные значения.
Параметр 'clip'
Данный параметр задает форму элемента.
В ситуации если, например, изображение больше того элемента в котором располагается,
параметр позволяет определить размеры изображения, обрезать по форме и вывести.
Примечание: Этот параметр нельзя использовать для элементов с параметром "overflow",
заданным как "visible".
Наследование: нет.
Пример:
p
{
position:absolute;
clip:rect(2px 175px 100px 0px)
}
Может принимать следующие значения:
Значение Описание
shape
Задает форму элемента. Допустимым значением формы является: rect (top, right, bottom,
left)
Браузер задает форму элемента
auto
Параметр 'left'
Данный параметр определяет левый край элемента.
Примечание: Если параметр "position" имеет значение "static", параметр "left" не оказывает
влияния.
Наследование: нет.
Примеры:
1.
В примере показано, как задать левый край элемента pre в 50 px справа от левого
края окна:
pre
{
position: absolute;
left: 50px
}
2.
В примере показано, как задать левый край элемента pre в 50 px слева от левого края
окна:
pre
{
position: absolute;
left: -50px
}
Может принимать следующие значения:
Зн
Описание
ачение
aut
Позволяет браузеру вычислить левую позицию.
o
%
len
gth
Задает левую позицию в % от значения для левого края окна.
Задает левую позицию в px, см и т.д. от левого края окна. Допускаются
отрицательные значения.
Параметр 'overflow'
Данный параметр определяет, что происходит, когда содержимое элемента переполняет его
область.
Наследование: нет.
Пример:
div
{
overflow: auto
}
Может принимать следующие значения:
Значение Описание
visible
Содержимое не обрезается. Оно выводится за пределами элемента.
hidden
Содержимое обрезается, но браузер не выводит полосу прокрутки для просмотра всего
содержимого.
scroll
Содержимое обрезается, но браузер выводит полосу прокрутки для просмотра всего
содержимого.
auto
Если содержимое обрезается, то браузер должен вывести полосу прокрутки для
просмотра всего содержимого.
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или
фиксированное положение.
Наследование: нет.
Пример:
p
{
position:static;
}
Может принимать следующие значения:
Значение Описание
static
Элемент помещается в обычное положение (согласно нормальному потоку). Для
значения "static" параметры "left" и "top" не используются.
relative
Перемещает элемент относительно нормального положения, так что "left:20" добавляет
20 пикселей к позиции LEFT элемента
absolute С помощью значения "absolute" элемент можно разместить в любом месте страницы.
Позиция элемента определяется параметрами "left", "top", "right", и "bottom"
fixed
Параметр 'right'
Данный параметр определяет правый край элемента.
Примечание: Если параметр "position" имеет значение "static", то параметр "right" не
оказывает влияния.
Наследование: нет.
Примеры:
1.
В примере показано, как задать правый край элемента pre на 50 px влево от правого
края окна:
pre
{
position: absolute;
right: 50px
}
2.
края окна:
В примере показано, как задать правое поле элемента pre на 50 px вправо от правого
pre
{
position: absolute;
right: -50px
}
Может принимать следующие значения:
Зн
Описание
ачение
aut
Позволяет браузеру вычислить правую позицию.
o
%
Задает правую позицию в % от значения правого края окна.
len
Задает правую позицию в px, см, и т.д. от правого края окна. Допускаются
gth
отрицательные значения.
Параметр 'top'
Данный параметр определяет верхний край элемента.
Примечание: Если параметр "position" имеет значение "static", то параметр "top" не
оказывает влияния.
Наследование: нет.
Примеры:
1.
края окна:
В примере показано, как задать верхний край элемента pre на 50 px ниже верхнего
pre
{
position: absolute;
top: 50px
}
2.
края окна:
В примере показано, как задать верхний край элемента pre на 50 px выше верхнего
pre
{
position: absolute;
top: -50px
}
Может принимать следующие значения:
Зн
Описание
ачение
aut
Позволяет браузеру вычислить верхнюю позицию.
o
%
Задает верхнюю позицию в % от значения верхнего края окна.
len
Задает верхнюю позицию в px, см, и т.д. от верхнего края окна. Допускаются
gth
отрицательные значения.
Параметр 'vertical-align'
Данный параметр задает вертикальное выравнивание элемента.
Наследование: нет.
Примеры:
img
{
vertical-align: baseline
}
Может принимать следующие значения:
Значение Описание
baseline
Элемент размещается на базовой строке родительского элемента.
sub
Выравнивает элемент как нижний индекс
super
Выраванивает элемент как верхний индекс
top
Вершина элемента выравнивается с вершиной самого высокого элемента в строке
text-top
Вершина элемента выравнивается с вершиной шрифта родительского элемента
middle
Элемент помещается в середине родительского элемента
bottom
Нижняя часть элемента выравнивается с самым нижним элементом в строке
textНижняя часть элемента выравнивается с минимальной нижней точкой родительского
bottom
элемента
length
%
Выравнивает элемент в % от значения параметра "line-height". Допускаются
отрицательные значения.
Параметр 'z-index'
Данный параметр задает порядковый номер элемента в стеке. Элемент с большим
порядковым номером стека всегда находится перед элементом с меньшим порядковым номером
стека.
Примечания:
1.
Элементы могут иметь отрицательные порядковые номера стека.
2.
Z-index работает только с теми элементами, которые были позиционированы
(например, position:absolute;)!
Наследование: нет.
Пример:
img
{
position:absolute
z-index: 1
}
Может принимать следующие значения:
Значение Описание
auto
Порядковый номер элемента в стека равен номеру родительского элемента
number
Задает порядковый номер элемента в стеке
Лекция 13: Псевдо-классы CSS
Определяются способы создания специальных эффектов для элементов.
Псевдо-классы используются для создания специальных эффектов для некоторых
элементов.
Примеры:
1.
В примере показано, как выделить гиперссылку в документе цветом.
<html>
<head>
<style type="text/css">
a:link {color: #808080}
a:visited {color: #FFFF00}
a:hover {color: #00FF00}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><a href="index.php">This is a link</a></p>
<ol><b>Примечание:</b>
<li><i>a:hover ДОЛЖЕН следовать в определении CSS после <b>a:link</b> и
<b>a: visited!!</b></i></li>
<li><i>a:active
ДОЛЖЕН
следовать
в
определении
CSS
<b>a:hover!!</b></i></li>
</ol>
</body>
</html>
2.
В примере показано, как определить для гиперссылки другой стиль.
<html>
<head>
<style type="text/css">
a.color:link {color: #808000}
a.color:visited {color: #008080}
a.color:hover {color: #C0C0C0}
a.size:link {color: #808000}
a.size:visited {color: #008080}
a.size:hover {font-size: 250%}
a.background:link {color: #808000}
a.background:visited {color: #008080}
a.background:hover {background: #C0C0C0}
после
a.family:link {color: #808000}
a.family:visited {color: #008080}
a.family:hover {font-family: sans-serif}
a.line:link {color: #808000; text-decoration: none}
a.line:visited {color: #008080; text-decoration: none}
a.line:hover {text-decoration: line-through}
</style>
</head>
<body>
<p>Наведите курсор мыши на ссылки.</p>
<p><b><a
class="line"
href="index.php">Меняем
оформление
текста
ссылки</a></b></p>
<p><b><a class="size" href="index.php">Меняем размер у
ссылки</a></b></p>
<p><b><a class="background" href="index.php">Меняем цвет фона у
ссылки</a></b></p>
<p><b><a class="family" href="index.php">Меняем семейство шрифта у
ссылки</a></b></p>
<p><b><a class="color" href="index.php">Меняем цвет у ссылки</a></b></p>
</body>
</html>
3.
В примере показано, как можно использовать псевдо-класс :first-child.
<html>
<head>
<style type="text/css">
a:first-child
{
text-decoration:underline
}
</style>
</head>
<body>
<p>Посетите <a style="color:#666666;"
href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru"
onMouseOver="menuSetHelpText('intuit');return false;"
onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">Intuit</a> там
много бесплатных курсов</p>
<p>Посетите <a style="color:#666666;"
href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru"
onMouseOver="menuSetHelpText('intuit');return false;"
onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">Intuit</a>
там есть бесплатные учебные программы</p>
</body>
</html>
4.
В примере показано, как можно использовать псевдо-класса :lang.
<html>
<head>
<style type="text/css">
b:lang(fr)
{
quotes: "'" "'"
}
</style>
</head>
<body>
<p>Просто текст<b lang="fr">Выделенные текст:</b> Сам текст.</p>
</body>
</html>
у
Синтаксис псевдо-классов:
selector:pseudo-class {property: value}
Классы CSS также можно использовать с псевдо-классами:
selector.class:pseudo-class {property: value}
Анкерные псевдо-классы
Различные ссылки или ссылки, на которые указывает курсор мыши, можно выводить
различным образом в поддерживающих CSS браузерах:
a:link {color: #808080 }
/* непосещенная ссылка*/
a:visited {color: #008000 } /* посещенная ссылка */
a:hover {color: #008080 }
/* курсор мыши указывает на ссылку*/
a:active {color: #00FF00 }
/* выбранная ссылка*/
Примечания:
1.
Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и
a:visited!!
2.
Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!!
3.
Имена псевдо-классов не зависят от регистра символов.
Псевдо-классы и классы CSS
Псевдо-классы можно объединять с классами CSS:
a.silver:visited {color: #C0C0C0 }
<a class="silver" href="index.php">Silver</a>
Если ссылка в приведенном выше примере была посещена, она будет выводиться
серебряным цветом.
CSS2 - Псевдо-класс :first-child
Псевдо-класс :first-child соответствует определенному элементу, который является первым
потомком другого элемента.
Примеры:
1.
В данном примере селектор соответствует любому элементу h1, который является
первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри
элемента div:
div > h1:first-child
{
text-indent:50px
}
Этот селектор будет соответствовать первому параграфу внутри div в следующем коде:
<div>
<h1>
Первый заголовок в div.
Имеет отступ первой строки.
</h1>
<h1>
Второй заголовок в div.
Не имеет отступа.
</h1>
</div>
но он не будет соответствовать параграфу в следующем коде HTML:
<div>
<p>
Параграф внутри div.
</p>
<h1>Первый заголовок в div.
Не имеет отступа.
</h1>
</div>
2.
В данном примере селектор соответствует любому элементу strong, который
является первым потомком элемента div, и задает font-style как italic для первого strong внутри
элемента div:
div:first-child strong
{
font-style: italic
}
В следующем коде HTML strong является первым потомком элемента div :
<div>Изучайте -- <strong>язык программирования</strong> C++.</p>
3.
В данном примере селектор соответствует любому элементу b, который является
первым потомком любого элемента, и задает text-decoration как none:
b:first-child
{
text-decoration: none
}
В следующем примере первый элемент b в коде HTML ниже является первым потомком
параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым
потомком параграфа и будет подчеркнут:
<p>
Посетите <b>www.intuit.ru</b> и выучите CSS!
Посетите <b>www.intuit.ru</b> и выучите HTML!
</p>
CSS2 - Псевдо-класс :lang
Данный псевдокласс позволяет определить специальные правила для различных языков. В
следующем примере класс :lang определяет тип кавычек для элементов b с атрибутом lang со
значением "fr":
<html>
<head>
<style type="text/css">
b:lang(fr)
{
quotes: "'" "'"
}
</style>
</head>
<body>
<p>Просто текст <b lang="fr">Выделенный текст</b>
Остальной текст</p>
</body>
</html>
Псевдо-классы
Данные параметры поддерживаются следующими браузерами: Internet Explorer,
Netscape.
ПсевдоНазначение
IE F
класс
:active
Добавляет специальный стиль активированному элементу
4 1
:focus
Добавляет специальный стиль элементу, когда элемент находится в - фокусе
:hover
Добавляет специальный стиль элементу, когда указатель мыши 4 1
находится над элементом
:link
Добавляет специальный стиль непосещенной ссылке
3 1
:visited
Добавляет специальный стиль посещенной ссылке
3 1
:first-child Добавляет специальный стиль элементу, который является первым
1
Firefox,
N W3C
8 1
- 2
7 1
4 1
4 1
7 2
потомком некоторого другого элемента
Позволяет автору определить используемый в заданном элементе язык
:lang
1 8 2
Лекция 14: Псевдо-элементы CSS
Рассматриваются методы создания специальных эффектов для селекторов.
Эти псевдо-элементы используются для добавления специальных эффектов в некоторые
селекторы.
Примеры:
1.
В примере показано, как добавить специальные эффекты к первой букве текста.
<html>
<head>
<style type="text/css">
h1:first-letter
{
color: #008080;
font-size: xx-large
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
2.
В примере показано, как добавить специальные эффекты к первой строке текста.
<html>
<head>
<style type="text/css">
p:first-line
{
color: #808000;
font-variant: normal
}
</style>
</head>
<body>
<p>
Пример испоьзования псевдо-элемента :first-line.<br>
Следующая строка в параграфе.
</p>
</body>
</html>
Синтаксис псевдо-элементов:
selector:pseudo-element {property: value}
Классы CSS также можно использовать с псевдо-элементами:
selector.class:pseudo-element {property: value}
Псевдо-элемент :first-line
Данный псевдо-элемент используется для добавления специальных стилей к первой строке
текста в селекторе:
div {font-size: 5pt}
div:first-line {color: #808000; font-variant: normal}
<div>Текст, продолжающийся на две или большее количество строк </div>
В примере выше браузер выводит первую строку (длина определяется размером окна
браузера), форматированную согласно псевдо-элементу "first-line".
Примечания:
1.
Псевдо-элемент "first-line" можно использовать только с элементами уровня блока.
2.
Следующие параметры применимы в псевдо-элементе "first-line":
- параметры шрифта
- параметры цвета
- параметры фона
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Псевдо-элемент :first-letter
Данный псевдо-элемент используется для добавления специального стиля первой букве
текста в селекторе :
div {font-size: 20pt}
div:first-letter {font-size: 150%; float: right}
<div>Первое слово имеет специальный стиль</div>
Примечания:
1.
Псевдо-элемент "first-letter" может использоваться только с элементами блочного
уровня.
2.
Следующие параметры применимы в псевдо-элементе "first-letter":
- параметры шрифта
- параметры цвета
- параметры фона
- параметры отступов
- параметры полей
- параметры границ
- text-decoration
- vertical-align (только если 'float' определен как 'none')
- text-transform
- line-height
- float
- clear
Псевдо-элементы и классы CSS
Псевдо-элементы можно объединять с классами CSS:
div.first:first-letter {color: #008080 }
<div class="first">Параграф статьи</p>
В примере выше первая буква всех элементов div, где class="first", будет красной.
Несколько псевдо-элементов
Несколько псевдо-элементов можно объединять:
div {font-size: 20pt}
div:first-letter {color: #808000; font-size: 150%}
div:first-line {color: #808080 }
<div>Текст текст текст</div>
В примере выше первая буква параграфа будет оливковой с размером шрифта 30pt.
Остальная часть первой строки будет серой, а остаток параграфа будет иметь цвет по умолчанию.
CSS2 - Псевдо-элемент :before
Данный псевдо-элемент можно использовать для вставки некоторого содержимого перед
элементом.
Следующий стиль будет воспроизводить некоторый звук перед каждым появлением
элемента заголовка h5.
h5:before
{
content: url(song.wav)
}
CSS2 - Псевдо-элемент :after
Псевдо-элемент ":after" можно использовать для вставки некоторого содержимого после
элемента.
Следующий стиль будет воспроизводить некоторый звук после каждого появления
элемента заголовка h5.
h5:after
{
content: url(song.wav)
}
Псевдо-элементы
Данные параметры поддерживаются следующими браузерами: Internet
Netscape.
Псевдо-элемент Назначение
IE F N
:first-letter
Добавляет специальный стиль к первой букве текста 5 1 8
:first-line
Добавляет специальный стиль к первой строке текста 5 1 8
:before
Вставляет некоторое содержимое перед элементом
1.5 8
:after
Вставляет некоторое содержимое после элемента
1.5 8
Explorer, Firefox,
W3C
1
1
2
2
Лекция 15: Типы носителей информации в CSS2
Даются спецификации таблиц стилей, зависимых от типа носителя и приводятся описания этих
типов.
Документ может представляться по разному на экране монитора, на бумаге, с помощью
звукового браузера, и т.д. Для определения представления на различных носителях информации
документов, используются типы носителей информации.
Типы носителей информации
1.
Некоторые параметры CSS предназначены только для определенных носителей
информации. (Например, параметр "voice-family" создан для звуковых агентов пользователей.)
2.
Некоторые другие параметры можно использовать для различных типов носителей
информации. (Например, параметр "font-size" можно использовать для экрана монитора и для
печати на бумаге, но, возможно, с различными значениями.)
Что каксается шрифтов то, документу обычно требуется на экране шрифт большего размера
чем на бумаге. Шрифты sans-serif легче читать на экране, а шрифты serif на бумаге.
Правило @media
Данное правило позволяет задать различные правила стилей для различных носителей
информации в одной таблице стилей.
Стиль в следующем далее примере определяет для браузера вывод на экране шрифтом
Times размером 30 пикселей. Но если страница будет печататься, то это будет сделано шрифтом
Verdana размером 8 пикселей Отметим, что степень жирности шрифта задана normal, как на
экране, так и на бумаге:
<html>
<head>
<style>
@media screen
{
div.test {font-family: times,serif; font-size:8px}
}
@media print
{
div.test {font-family: verdana,sans-serif; font-size:30px}
}
@media screen,print
{
div.test {font-weight:normal}
}
</style>
</head>
<body>
...
</body>
</html>
Различные типы носителей информации
Замечание: Имена типов носителей информации не зависят от регистра символов.
Тип
носителя
Описание
информации
all
Используется для всех типов устройств носителей информации
aural
Используется для синтезаторов речи и звука
braille
Используется для устройств чтения азбуки Брайля для слепых
embossed
Используется для устройств печати азбуки Брайля для слепых
handheld
Используется для маленьких или карманных устройств
print
projection
screen
tty
tv
Используется для принтеров
Используется для проецируемых изображений, таких как слайды
Используется для экранов компьютера
Используется для носителей информации, использующих шрифтовую сетку
с фиксированным шагом, таким как телетайп и экранный терминал
Используется для устройств телевизионного типа
Лекция 16: Мы познакомились с CSS, что дальше
Этот учебник учит использовать CSS для управления стилем и компоновкой множества
Web-сайтов одновременно.
Он учит использовать CSS для:
1.
создания фона;
2.
форматирования текста;
3.
создания и форматирования границ;
4.
определения полей и отступов элементов.
5.
позиционирования элементов;
6.
управления видимостью и размером элемента;
7.
задания формы элемента;
8.
размещения элемента позади другого элемента;
9.
добавления специальных эффектов в некоторые селекторы, такие как ссылки.
Чтобы лучше освоить CSS разберите приведенные примеры использования CSS и
просмотрите справочник по CSS.
Теперь после изучения CSS, что дальше?
Следующий шаг состоит в изучении XHTML и JavaScript.
XHTML
XHTML является "новым" HTML. Самой последней рекомендацией HTML является HTML
4.01. HTML будет заменен XHTML, который является более строгой и ясной версией HTML.
JavaScript
Статический Web-сайт прекрасно подходит, когда надо просто показать простой контент.
JavaScript позволяет сделать Web-сайт более динамичным, т.е. реагирующим на события и
взаимодействующим с пользователем и является самым популярным языком сценариев в
Интернет и поддерживается всеми основными браузерами.
Дополнительные материалы: Печать в CSS2
Параметры печати
Печать документов HTML всегда вызывала некоторые трудности. В CSS2 были добавлены
параметры печати, чтобы облегчить печать документов Web.
Параметр
Описание
Значения W3C
orphans
Задает минимальное число строк параграфа, которые должны быть number
2
оставлены внизу страницы
marks
Определяет, какие метки должны изображаться за пределами none
блока страницы
crop
cross
page
Задает тип страницы для использования при выводе элемента
auto
2
identifier
page-breakafter
Задает поведение разрыва страницы после элемента
page-breakbefore
Задает поведение разрыва страницы перед элементом
page-breakinside
Задает поведение разрыва страницы внутри элемента
size
widows
auto
always
avoid
left
right
auto
always
avoid
left
right
2
2
auto
2
avoid
Задает ориентацию и размер страницы
auto
portrait
landscape
Задает минимальное число строк параграфа, которые должны быть number
2
оставлены в верхней части страницы
Печать в CSS2: подробное рассмотрение
Параметр CSS 'page-break-after'
Данный параметр задает поведение разрыва страницы после элемента.
Примечания:
1.
Этот параметр нельзя использовать для элементов с абсолютным
позиционированием.
2.
Используйте параметры page-breaking как можно реже и избегайте параметров pagebreaking внутри таблиц, плавающих элементов, и блочных элементов с границами.
Наследование: нет.
Пример:
div
{
page-break-after: auto
}
Может принимать следующие значения:
Значение Описание
auto
Если необходимо, вставляет разрыв страницы после элемента
always
Вставляет разрыв страницы после элемента
avoid
Отменяет вставку разрыва страницы после элемента
left
right
Вставляет разрывы страницы после элемента, пока не будет достигнута пустая левая
страница
Вставляет разрывы страницы после элемента, пока не будет достигнута пустая правая
страница
Параметр CSS 'page-break-before'
Данный параметр задает поведение разрыва страницы перед элементом.
Примечания:
1.
Этот параметр нельзя использовать для элементов с абсолютным
позиционированием.
2.
Используйте параметры page-breaking как можно реже и избегайте параметров pagebreaking внутри таблиц, плавающих элементов, и блочных элементов с границами.
Наследование: нет.
Пример:
div
{
page-break-before: auto
}
Может принимать следующие значения:
Значение Описание
auto
Если необходимо, вставляет разрыв страницы перед элементом
always
Вставляет разрыв страницы перед элементом
avoid
Отменяет вставку разрыва страницы перед элементом
left
Вставляет разрывы страницы перед элементом, пока не будет достигнута пустая левая
страница
right
Вставляет разрывы страницы перед элементом, пока не будет достигнута пустая правая
страница
Параметр 'page-break-inside'
Данный параметр задает поведение разрыва страницы внутри элемента.
Примечания:
1.
Этот параметр нельзя использовать для элементов с абсолютным
позиционированием.
2.
Используйте параметры page-breaking как можно реже и избегайте параметров pagebreaking внутри таблиц, плавающих элементов, и блочных элементов с границами.
Наследование: нет.
Пример:
div
{
page-break-inside: avoid
}
Может принимать следующие значения:
Зн
Описание
ачение
aut
Если необходимо вставляет разрыв страницы внутри
o
элемента
av
Отменяет вставку разрыва страницы внутри элемента
oid
Дополнительные материалы: Использование звука в CSS2
Звуковые таблицы стилей
Звуковые таблицы стилей используют комбинацию синтеза речи и звуковых эффектов,
чтобы пользователь прослушивал информацию, а не читал ее.
Звуковое представление можно использовать:

слепым;

для помощи при обучении чтению;

для помощи пользователям, имеющим проблемы с чтением;

для домашних развлечений;

в автомобиле;

в сообществах, имеющих трудности с восприятем печатного текста.
Звуковое представление преобразует документ в простой текст и подает его на считыватель
экрана - программу, которая считывает все символы на экране.
Пример звуковой таблицы стилей:
h5, h6
{
voice-family: female;
richness: 70;
cue-before: url("song.au")
}
Пример выше заставит синтезатор речи воспроизвести звуковой сигнал, а затем прочитать
заголовки женским голосом.
Справочник по звуковым возможностям CSS2
Параметр Описание
azimuth
Задает
направление,
откуда
должен
(горизонтально)
идти
Значения W3C
звук/голоса angle
2
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards
cue
cue-after
cue-before
elevation
Параметр для задания cue-before и cue-after в одном объявлении
cue-before 2
cue-after
Определяет звук, который будет воспроизведен после none
2
произнесения содержимого элемента, чтобы отделить его от url
другого элемента
Определяет звук, который будет воспроизведен перед none
2
произнесением содержимого элемента, чтобы отделить его от url
другого элемента
Задает
направление,
откуда
должен
идти
звук/голоса angle
2
(горизонтально)
below
level
above
higher
lower
pause
Параметр для задания pause-before и pause-after в одном pause2
объявлении
before
pause-after
pause-after Задает паузу после произнесения содержимого элемента
time
2
%
pause-before Задает паузу перед произнесением содержимого элемента
time
2
%
pitch
pitch-range
play-during
richness
speak
Задает среднюю высоту голоса
x-low
low
medium
high
x-high
Определяет вариацию относительно средней высоты голоса number
(монотонный голос или живой)
Определяет звук, который будет воспроизводиться во время auto
произнесения содержимого элемента
none
url
Определяет насыщенность голоса (Насыщенный
бледный голос?)
Определяет, будет ли текст озвучиваться
mix
repeat
голос или number
normal
none
spell-out
speak-header Определяет, как обрабатывать заголовки таблиц. Должны ли always
заголовки произноситься перед каждой ячейкой, или только перед once
ячейкой с заголовком, отличным от заголовка предыдущей ячейки
2
2
2
2
2
2
speaknumeral
Определяет, как произносятся числа
speakpunctuation
Определяет, как произносятся символы пунктуации
digits
2
continuous
none
2
code
speech-rate Определяет скорость речи
number
x-slow
slow
medium
fast
x-fast
faster
stress
Определяет "ударение" в говорящем голосе
number
voice-family Список с приоритетом названий семейств голосов, которые specificсодержат определенные голоса
voice
genericvoice
volume
Определяет громкость голоса
number
%
silent
x-soft
soft
medium
loud
2
2
2
2
x-loud
Дополнительные материалы: Единицы измерения в CSS
Измерения
Единица
%
процент
in
дюйм
cm
сантиметр
mm
миллиметр
em
ex
pt
pc
px
Описание
один em равен размеру текущего шрифта текущего элемента
один ex равен x-height шрифта (x-height составляет обычно около половины font-size)
пункт (1 pt равен 1/72 дюйма)
пика (1 pc то же самое, что 12 пунктов)
пиксель (точка на экране компьютера)
Цвета
Единица
color_name
rgb(x,x,x)
Описание
Название цвета (например, red)
Значение RGB (например, rgb((255,0,0))
rgb(x%, x%, x%) Значение RGB в процентах (например, rgb(100%,0%,0%))
#rrggbb
шестнадцатеричное число (например, #ff0000)
Дополнительные материалы: Цвета в CSS ( аналогично как в HTML )
Цвета выводятся с помощью смешения источников:

RED (красного) цвета:

GREEN (зеленого) цвета:

BLUE (синего) цвета.
Значения цветов
Цвета в CSS определяют с помощью шестнадцатеричной записи комбинации значений
красного, зеленого и синего цветов (RGB). Наименьшее значение, которое можно задать одному
из источников равно 0 (hex #00), а максимальное - 255 (hex #FF).
Следующая таблица показывает результат объединения источников красного (R), зеленого
(G) и синего (B) источников цвета:
Ц
Цвет
Цвет
вет (HEX)
RGB
#000
rgb(0,0,0)
000
#FF0
rgb(255,0
000
,0)
#00F
rgb(0,255
F00
,0)
#000
rgb(0,0,2
0FF
55)
#FFF
rgb(255,2
F00
55,0)
#00F
rgb(0,255
FFF
,255)
#FF0
rgb(255,0
0FF
,255)
#C0C
rgb(192,1
0C0
92,192)
#FFF
rgb(255,2
FFF
55,255)
Названия цветов
Некоторая совокупность названий цветов поддерживается большинством браузеров.
Примечание: Только 16 названий цветов поддерживается стандартом W3C для CSS (aqua
(голубой), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм),
maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (сиреневый), red
(красный), silver (светло-серый), teal (сине-зеленый), white (белый), и yellow (желтый)). Для всех
других цветов необходимо использовать значение HEX цвета.
Ц
Цвет
Название цвета
вет (HEX)
#FFF
Cornsilk (кукурузные
8DC
рыльца)
#000
DarkBlue
(темно-
синий)
08B
#008
B8B
DarkCyan
голубой)
(темно-
Ivory (слоновая кость)
#FFF
FF0
LightYellow (светложелтый)
#FFA
Orange (оранжевый)
#FFF
FE0
500
RoyalBlue
#416
9E1
(ярко-
синий)
Безопасные цвета Web
Несколько лет назад, когда большинство компьютеров поддерживали только 256
различных цветов, был предложен в качестве стандарта Web список из 216 безопасных цветов
Web. Причина этого состояла в том, что операционные системы Microsoft и Mac использовали 40
различных "резервных" фиксированных системных цветов (около 20 каждая).
Трудно сказать насколько это важно сегодня, так как все больше и больше компьютеров
обладают возможностью выводить миллионы различных цветов, но такой стандарт существует, и
его при желании можно придерживаться.
216 межплатформенных цветов
Эта палитра из 216 межплатформенных безопасных для Web цветов была первоначально
создана для обеспечения правильного вывода компьютерами всех цветов при использовании
палитры из 256 цветов.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600
009900
00CC00
00FF00
330000
333300
336600
339900
33CC00
33FF00
006633
009933
00CC33
00FF33
330033
333333
336633
339933
33CC33
33FF33
006666
009966
00CC66
00FF66
330066
333366
336666
339966
33CC66
33FF66
006699
009999
00CC99
00FF99
330099
333399
336699
339999
33CC99
33FF99
0066CC
0099CC
00CCCC
00FFCC
3300CC
3333CC
3366CC
3399CC
33CCCC
33FFCC
0066FF
0099FF
00CCFF
00FFFF
3300FF
3333FF
3366FF
3399FF
33CCFF
33FFFF
660000
663300
666600
669900
66CC00
66FF00
990000
993300
996600
660033
663333
666633
669933
66CC33
66FF33
990033
993333
996633
660066
663366
666666
669966
66CC66
66FF66
990066
993366
996666
660099
663399
666699
669999
66CC99
66FF99
990099
993399
996699
6600CC
6633CC
6666CC
6699CC
66CCCC
66FFCC
9900CC
9933CC
9966CC
6600FF
6633FF
6666FF
6699FF
66CCFF
66FFFF
9900FF
9933FF
9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000
CC3300
CC6600
CC9900
CCCC00
CCFF00
FF0000
FF3300
FF6600
FF9900
CC0033
CC3333
CC6633
CC9933
CCCC33
CCFF33
FF0033
FF3333
FF6633
FF9933
CC0066
CC3366
CC6666
CC9966
CCCC66
CCFF66
FF0066
FF3366
FF6666
FF9966
CC0099
CC3399
CC6699
CC9999
CCCC99
CCFF99
FF0099
FF3399
FF6699
FF9999
CC00CC
CC33CC
CC66CC
CC99CC
CCCCCC
CCFFCC
FF00CC
FF33CC
FF66CC
FF99CC
CC00FF
CC33FF
CC66FF
CC99FF
CCCCFF
CCFFFF
FF00FF
FF33FF
FF66FF
FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
16384 различных цветов
Большинство современных мониторов способны выводить как минимум 16384 различных
цветов.
Если взглянуть на таблицу цветов, расположенную ниже, то можно увидеть результат
изменения интенсивности зеленого цвета от 0 до 255, при значениях зеленого и синего цветов
равных нулю.
Красн
H
RG
ый цвет
EX
B
#
rgb(
000000 0,0,0)
#
rgb(
080000 0,8,0)
#
rgb(
100000 0,16,0)
#
rgb(
180000 0,24,0)
#
rgb(
200000 0,32,0)
#
rgb(
280000 0,40,0)
#
300000
#
380000
#
400000
#
480000
#
500000
rgb(
0,48,0)
rgb(
0,56,0)
rgb(
0,64,0)
rgb(
0,72,0)
rgb(
0,80,0)
#
rgb(
580000 0,88,0)
#
rgb(
600000 0,96,0)
#
680000
#
700000
#
780000
#
800000
#
880000
#
900000
#
980000
#
A00000
#
A80000
#
B00000
#
B80000
rgb(
0,104,0)
rgb(
0,112,0)
rgb(
0,120,0)
rgb(
0,128,0)
rgb(
0,136,0)
rgb(
0,144,0)
rgb(
0,152,0)
rgb(
0,160,0)
rgb(
0,168,0)
rgb(
0,176,0)
rgb(
0,184,0)
#
C00000
#
C80000
#
D00000
#
D80000
#
E00000
#
E80000
#
F00000
#
F80000
#
FF0000
rgb(
0,192,0)
rgb(
0,200,0)
rgb(
0,208,0)
rgb(
0,216,0)
rgb(
0,224,0)
rgb(
0,232,0)
rgb(
0,240,0)
rgb(
0,248,0)
rgb(
0,255,0)
Оттенки серого цвета
Серые цвета выводятся при равных значениях интенсивности всех трех источников света.
Чтобы облегчить выбор правильного серого цвета ниже представлена таблица оттенков серого
цвета:
Сер
ый цвет
RGB
H
EX
RGB(0,0,0)
#0
00000
RGB(8,8,8)
#0
80808
RGB(16,16
,16)
#1
01010
RGB(24,24
,24)
#1
81818
RGB(32,32
,32)
#2
02020
RGB(40,40
,40)
#2
82828
RGB(48,48
,48)
#3
03030
RGB(56,56
,56)
#3
83838
RGB(64,64
,64)
#4
04040
RGB(72,72
,72)
#4
84848
RGB(80,80
,80)
#5
05050
RGB(88,88
,88)
#5
85858
RGB(96,96
,96)
RGB(104,1
04,104)
RGB(112,1
12,112)
RGB(120,1
20,120)
RGB(128,1
28,128)
RGB(136,1
36,136)
RGB(144,1
44,144)
RGB(152,1
52,152)
RGB(160,1
60,160)
RGB(168,1
68,168)
#6
06060
#6
86868
#7
07070
#7
87878
#8
08080
#8
88888
#9
09090
#9
89898
#
A0A0A0
#
A8A8A8
RGB(176,1
#B
76,176)
0B0B0
RGB(184,1
#B
84,184)
8B8B8
RGB(192,1
92,192)
RGB(200,2
00,200)
RGB(208,2
08,208)
RGB(216,2
16,216)
RGB(224,2
24,224)
RGB(232,2
32,232)
RGB(240,2
40,240)
RGB(248,2
48,248)
RGB(255,2
55,255)
#C
0C0C0
#C
8C8C8
#
D0D0D0
#
D8D8D8
#E
0E0E0
#E
8E8E8
#F
0F0F0
#F
8F8F8
#F
FFFFF
Названия цветов в CSS
На этой странице находится таблица названий цветов, которые поддерживаются
большинством броузеров.
Примечание: Стандарт CSS консорциума W3C поддерживает только 16 имен цветов (aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow).
Для всех остальных цветов необходимо использовать HEX (шестнадцатеричное) значение цвета.
Название цвета
HEX цвета Цвет
AliceBlue (бледно-голубой)
#F0F8FF
AntiqueWhite (античный белый)
#FAEBD7
Aqua (голубой)
#00FFFF
Aquamarine (аквамарин)
#7FFFD4
Azure (лазурный)
#F0FFFF
Beige (беж)
#F5F5DC
Bisque (бисквитный)
#FFE4C4
Black (черный)
BlanchedAlmond (светло-кремовый)
Blue (синий)
BlueViolet (сине-фиолетовый)
Brown (коричневый)
BurlyWood (старое дерево)
CadetBlue (серо-голубой)
Chartreuse (зеленовато-желтый)
Chocolate (шоколадный)
#000000
#FFEBCD
#0000FF
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
Coral (коралловый)
CornflowerBlue (васильковый)
Cornsilk (кукурузные рыльца)
#FF7F50
#6495ED
#FFF8DC
Crimson (малиновый)
Cyan (светло-голубой)
DarkBlue (темно-синий)
DarkCyan (темно-голубой)
DarkGoldenRod (темно-золотисто-коричневый)
DarkGray (темно-серый)
DarkGreen (темно-зеленый)
DarkKhaki (темный хаки)
DarkMagenta (темно-пурпурный)
DarkOliveGreen (темно-оливково-зеленый)
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
Darkorange (темно-оранжевый)
DarkOrchid (темно-лиловый)
DarkRed (темно-красный)
DarkSalmon (темно-оранжево-розовый)
DarkSeaGreen (темно-зеленое море)
DarkSlateBlue (темный серовато-синий)
DarkSlateGray (темный синевато-серый)
DarkTurquoise (темно-бирюзовый)
DarkViolet (темно-фиолетовый)
DeepPink (темно-розовый)
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
DeepSkyBlue (темно-небесно-голубой)
DimGray (тускло-серый)
DodgerBlue (тускло-васильковый)
Feldspar (полевой шпат)
FireBrick (огнеупорный кирпич)
FloralWhite (цветочно-белый)
ForestGreen (лесная зелень)
Fuchsia (фуксия)
Gainsboro (светло-серый)
GhostWhite (туманно-белый)
#00BFFF
#696969
#1E90FF
#D19275
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
Gold (золотой)
GoldenRod (золотисто-коричневый)
Gray (серый)
Green (зеленый)
GreenYellow (зелено-желтый)
#FFD700
#DAA520
#808080
#008000
#ADFF2F
HoneyDew (медовая роса)
HotPink (ярко-розовый)
IndianRed (индийский-красный)
Indigo (индиго)
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
Ivory (слоновая кость)
Khaki (хаки)
Lavender (бледно-лиловый)
#FFFFF0
#F0E68C
#E6E6FA
LavenderBlush (бледный розово-лиловый)
LawnGreen (зеленая трава)
LemonChiffon (лимонный)
LightBlue (светло-синий)
LightCoral (светло-коралловый)
LightCyan (светло-светло-голубой)
LightGoldenRodYellow (светлый коричнево-желтый)
LightGrey (светло-серый)
LightGreen (светло-зеленый)
LightPink (светло-розовый)
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
#90EE90
#FFB6C1
LightSalmon (светлый оранжево-розовый)
LightSeaGreen (светло-зеленое море)
LightSkyBlue (светло-небесно-голубой)
LightSlateBlue (светлый серовато-синий)
LightSlateGray (светлый синевато-серый)
LightSteelBlue (светлый голубовато стальной)
LightYellow (светло-желтый)
Lime (лайм)
LimeGreen (зеленый лайм)
Linen (льняной)
#FFA07A
#20B2AA
#87CEFA
#8470FF
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
Magenta (пурпурный)
Maroon (каштановый)
MediumAquaMarine (умеренно аквамариновый)
MediumBlue (умеренно синий)
MediumOrchid (умеренно лиловый)
MediumPurple (умеренно пурпурный)
MediumSeaGreen (умеренно-зеленое море)
MediumSlateBlue (умеренно серовато-синий)
MediumSpringGreen (умеренная весенняя зелень)
MediumTurquoise (умеренно-бирюзовый)
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
MediumVioletRed (умеренно фиолетово красный)
MidnightBlue (ночной синий)
MintCream (мятно-кремовый)
MistyRose (туманно-розовый)
Moccasin (песочный)
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
NavajoWhite (темно-песочный)
Navy (темно-синий)
OldLace (старые кружева)
Olive (оливковый)
#FFDEAD
#000080
#FDF5E6
#808000
OliveDrab (тускло-оливковый)
Orange (оранжевый)
OrangeRed (оранжево-красный)
#6B8E23
#FFA500
#FF4500
Orchid (лиловый)
PaleGoldenRod (бледно-золотисто-коричневый)
PaleGreen (бледно-зеленый)
PaleTurquoise (бледно-голубой)
PaleVioletRed (бледно-фиолетово-красный)
PapayaWhip (дыни)
PeachPuff (персиковый)
Peru (коричневый)
Pink (розовый)
Plum (сливовый)
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
PowderBlue (туманно-голубой)
Purple (пурпурный)
Red (красный)
RosyBrown (розово-коричневый)
RoyalBlue (ярко-синий)
SaddleBrown (старая кожа)
Salmon (оранжево-розовый)
SandyBrown (песочно-коричневый)
SeaGreen (зеленое море)
SeaShell (морская ракушка)
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
Sienna (охра)
Silver (свето-серый)
SkyBlue (небесно-голубой)
SlateBlue (серовато-синий)
SlateGray (синевато-серый)
Snow (снежный)
SpringGreen (весенняя зелень)
SteelBlue (сине-стальной)
Tan (бронзы)
Teal (сине-зеленый)
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#008080
Thistle (чертополох)
Tomato (томат)
Turquoise (бирюзовый)
Violet (фиолетовый)
VioletRed (фиолетово-красный)
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#D02090
Wheat (пшеничный)
White (белый)
WhiteSmoke (белый дым)
Yellow (желтый)
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
YellowGreen (желто-зеленый)
#9ACD32