Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Знакомство с CSS
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Свойство color описывает цвет переднего плана элемента.
Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.
h1 {
color: #ff0000;
}
Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).
Свойство background-color описывает цвет фона элемента.
В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.
Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.
CSS-свойство background-image используется для вставки фонового изображения.
Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
В таблице указаны четыре значения background-repeat.
|
Значение |
Описание |
|
Background-repeat: repeat-x |
Рисунок повторяется по горизонтали |
|
background-repeat: repeat-y |
Рисунок повторяется по вертикали |
|
background-repeat: repeat |
Рисунок повторяется по горизонтали и вертикали |
|
background-repeat: no-repeat |
Рисунок не повторяется |
Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.
|
Значение |
Описание |
|
Background-attachment: scroll |
Изображение прокручивается вместе со страницей - разблокировано |
|
Background-attachment: fixed |
Изображение блокировано |
Например, следующий код фиксирует изображение.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:
В примере кода фоновое изображение располагается в правом нижнем углу экрана:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Значение Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
Проценты Задает размер фоновой картинки в процентах от ширины или высоты элемента.
Auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
Cover Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Contain Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
Поля и заполнение
У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа).
В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <body>. На иллюстрации показано, какие поля нам нужны.
CSS-код для этого примера выглядит так:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Или вы можете написать более элегантно:
body {
margin: 100px 40px 10px 70px;
}
Вы можете установить поля примерно таким же образом почти для любого элемента. Например, мы можем определить поля для всех параграфов <p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.
Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.
Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.
Family-name
Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".
Generic family
Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".
При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.
Список шрифтов может выглядеть так:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.
Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.
Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:
Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Размер шрифта устанавливается свойством font-size.
Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:
h1 {
h3 {
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:
p {
text-indent: 30px;
}
CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred илиjustify.
В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.
Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:
capitalize
Капитализирует каждое слово. Например: "john doe" станет "John Doe".
uppercase
Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
lowercase
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none
Трансформации нет - текст отображается так же, как в HTML-коде.
Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.
Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:
<p>Виноград для белого вина:</p>
<ul>
<li><a href="ri.htm">Рислинг</a></li>
<li><a href="ch.htm">Шардонэ</a></li>
<li><a href="pb.htm">Пино Блан</a></li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li><a href="cs.htm">Кабернэ Совиньон</a></li>
<li><a href="me.htm">Мерло</a></li>
<li><a href="pn.htm">Пино Нуар</a></li>
</ul>
Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.
Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Попробуем установить классы для предыдущего примера:
<p>Виноград для белого вина:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Рислинг</a></li>
<li><a href="ch.htm" class="whitewine">Шардонэ</a></li>
<li><a href="pb.htm" class="whitewine">Пино Блан</a></li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li><a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li>
<li><a href="me.htm" class="redwine">Мерло</a></li>
<li><a href="pn.htm" class="redwine">Пино Нуар</a></li>
</ul>
Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.
Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:
<h1>Глава 1</h1>
...
<h2>Глава 1.1</h2>
...
<h2>Глава 1.2</h2>
...
<h1>Глава 2</h1>
...
<h2>Глава 2.1</h2>
...
<h3>Глава 2.1.2</h3>
...
Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:
<h1 id="c1">Глава 1</h1>
...
<h2 id="c1-1">Глава 1.1</h2>
...
<h2 id="c1-2">Глава 1.2</h2>
...
<h1 id="c2">Глава 2</h1>
...
<h2 id="c2-1">Глава 2.1</h2>
...
<h3 id="c2-1-2">Глава 2.1.2</h3>
...
Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:
#c1-2 {
color: red;
}
Задание