- •Синтаксис
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Примеры использования css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Примеры
- •Параметры фона в css: подробное рассмотрение
- •Параметр 'background'
- •Параметр 'background-attachment'
- •Параметр 'background-color'
- •Параметр 'background-image'
- •Параметр 'background-position'
- •Параметр 'background-repeat'
- •Примеры
- •Параметр 'text-align'
- •Параметр 'text-decoration'
- •Параметр 'text-indent'
- •Параметр 'text-transform'
- •Параметр 'white-space'
- •Параметр 'word-spacing'
- •Параметры границы в css
- •Границы в css: подробное рассмотрение Параметр 'border'
- •Параметр 'border-bottom'
- •Параметр 'border-bottom-color'
- •Параметр 'border-bottom-style'
- •Параметр 'border-bottom-width'
- •Параметр 'border-color'
- •Параметр 'border-left'
- •Параметр 'border-left-color'
- •Параметр 'border-left-style'
- •Параметр 'border-left-width'
- •Параметр 'border-right'
- •Параметр 'border-right-color'
- •Параметр 'border-right-style'
- •Параметр 'border-right-width'
- •Параметр 'border-style'
- •Параметр 'border-top'
- •Параметр 'border-top-color'
- •Параметр 'border-top-style'
- •Параметр 'border-top-width'
- •Параметр 'border-width'
- •Примеры
- •Отступы в css
- •Отступы в css: подробное рассмотрение Параметр 'margin'
- •Параметр 'margin-bottom'
- •Параметр 'margin-left'
- •Параметр 'margin-right'
- •Параметр 'margin-top'
- •Примеры
- •Параметры полей в css
- •Поля в css: подробное рассмотрение Параметр 'padding'
- •Параметр 'padding-bottom'
- •Параметр 'padding-left'
- •Параметр 'padding-right'
- •Параметр 'padding-top'
- •Примеры:
- •Параметры списков в css
- •Списки в css: подробное рассмотрение Параметр 'list-style'
- •Параметр 'list-style-image'
- •Параметр 'list-style-position'
- •Параметр 'list-style-type'
- •Пример:
- •Параметры размеров элементов css
- •Размеры элементов в css: подробное рассмотрение Параметр 'height'
- •Параметр 'line-height'
- •Параметр 'max-height'
- •Параметр 'max-width'
- •Параметры форматирования в css: подробное рассмотрение Параметр 'clear'
- •Параметр 'cursor'
- •Параметр 'display'
- •Свойство 'float'
- •Параметр 'position'
- •Параметр 'visibility'
- •Примеры:
- •Параметры позиционирования в css
- •Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
- •Параметр 'clip'
- •Параметр 'left'
- •Параметр 'overflow'
- •Параметр 'position'
- •Параметр 'right'
- •Параметр 'top'
- •Параметр 'vertical-align'
- •Параметр 'z-index'
Комментарии css
Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:
/* Первый комментарий. */
table
{
/* Второй комментарий. */
margin-left: 10pt;
font-family: "sans serif"
/* Третий комментарий. */
border-style:outset;
}
Примеры использования css
Рассмотрим несколько примеров использования CSS:
Технология CSS позволяет связываться с внешней таблицей стилей. Для этого в файле HTML применяют тег <link>:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://www.intuit.ru/image/style.css">
</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}
Следующий файл HTML связывается с внешней таблицей стилей с помощью тега <link>:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://www.intuit.ru/image/style2.css">:
</head>
<body>
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
<a href="http://www.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}.
Подключение таблицы стилей
Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой таблицей. Существует три способа подключения таблицы стилей.
Подключение внешней таблицы стилей
Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн 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".
Подключение внутренней таблицы стилей
Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <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>
Встроенные стили
Данный способ используется в том случае, если необходимо применить стиль к одному появлению элемента. Метод обладает существенным недостатком, т.к. он смешивает содержимое документа с его представлением и теряет, соответственно, многие преимущества таблиц стилей.
Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.
Пример:
<body style="background-color: blue" >
<h1 style="color: yellow" >Заголовок H1</h1>
</body>
В примере показано, как задать цвет фона документа и цвет заголовка h1.