Каскадные листы стилей. Файлы CSS.
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам HTML- страницы.В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходится каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Это напоминает использование стилей в текстовом процессоре типа Word, но имеет более широкие возможности. Главное, это позволяет значительно уменьшить объем результирующего файла, легко вносить изменения в оформление документа и придать единый стиль вашему сайту. Разработчики стандарта HTML консорциум W3C создали новый стандарт CSS – Cascading Style Sheets.
Описания стилей могут размещаться несколькими способами: внутри тегов с атрибутом style, между тэгами заголовка <head></head>в тегах </style>… </style>или в отдельном файле с расширением .css.
Селекторы.
синтаксис записи стиля: название элемента {свойство: значение;}
напр. h1 {color: blue; font-size: 20pt;} – данная директива, управляющая внешней формой отображения объектов на странице, называется селектором. То, что находится внутри фигурных скобок – определение селектора. В случае одинаковых свойств в определениях, селекторы можно группировать, т.е. перечислять через запятую,
напр. h1, h2, h3, h4 {color: red; font-size: 16pt;}
Принцип наследования свойств – вложенные теги имеют те же свойства, что и родительские теги. Напр., если стиль задан в теге <body>, то он действует на весь документ.
Классы.
Класс – уникальное имя какого-либо перечня свойств, начинающееся с точки.
Синтаксис записи класса: название.имя класса {свойство: значение;}
p.rclass {text-align:right;} Обращение к данному стилю - <p class=”rclass”>текст</p>
Есть возможность не привязывать класс к определенным элементам, тогда допустим синтаксис
.gr {color:green;}
Идентификаторы.
Это кодовые объекты CSS, позволяющие назначать свойства отдельным компонентам HTML. Обозначение - # в файле .css, или атрибут id в тегах.
Синтаксис записи идентификатора: название#имя идентификатора {свойство: значение;}. Также допустим синтаксис типа #iden{color: #FF0000;} для создания идентификатора iden, который может использовать любой элемент HTML. Напр. <h1 id=”iden”>красный текст</h1>
Поскольку стандарт CSS появился позже HTML, то не все браузеры поддерживают его в полном объеме. Рекомендуется применять ограниченный набор элементов, называемый безопасным. Стили можно использовать несколькими способами.
Первый способ- Вы можете определить стиль для любого тэга отдельно. Для этого нужно в тэг добавить атрибут style и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<h3 style="font-family:Verdana; font-size:150%; color:red"> Пример </h3>
Второй способ – включение тегов <style></style> между тэгами заголовка <head></head>
Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом:
| Описываем стили под именем example : <style><!-- .example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;} --></style> Здесь вызываем описания стилей : <div class="example"> Пример </div> |
Третий способ – Если Вы располагаете стили в отдельном файле, тогда между тэгами <head></head> каждого HTML документа нужно добавить ссылку на CSS файл:
<link rel=stylesheet type="text/css" href="example.css">
example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находится в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться тэги <style></style>. Удобно текст в файле CSS снабжать комментариями, которые записываются в виде /*текст комментария*/.
| У нас есть файл example.css, содержащий такие параметры (подчеркиваем ссылки только при наведении на них курсором): a { text-decoration: none; } a:hover { color: #FF0000; text-decoration: underline; } |
| Ссылка на него в HTML документе будет выглядеть так: <link rel=stylesheet type="text/css" href="example.css"> |
CSS можно применять на всех типах серверов без исключения. Чтобы не было проблем с работой CSS на различных клиентских машинах, надо спрятать встроенные директивы CSS внутрь комментариев. Для расположения в документе HTML это будет <!-- -->
В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
| Свойства шрифта: | |
| font-family | Используется для указания шрифта, которым будет отображаться элемент. Пример: p {font-family: Verdana, sans-serif;} |
| font-weight | Определяет степень жирности шрифта: lighter (обычный), bold (жирный), bolder (очень жирный) Пример: b {font-weight: bolder;} |
| font-size | Устанавливает размер шрифта. Параметр может указываться в %, пикселях или сантиметрах. h1 {font-size: 200%;} или h2 {font-size: 150px;} или h3 {font-size: 400pt;} |
| Свойства текста: | |
| text-decoration | Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста h4 {text-decoration: underline;} (подчеркивание) h4 {text-decoration: line-through;} (зачеркивание) |
| text-align | Определяет выравнивание элемента. Примеры: p {text-align: left} (выравнивание по левому краю) p {text-align: right} (выравнивание по правому краю) p {text-align: justify} (выравнивание по ширине) p {text-align: center} (выравнивание по центру) |
| text-indent | Устанавливает отступ первой строки текста в параграфе. Пример использования для тэга h1: h1 {text-indent: 60pt;} |
| line-height | Управляет интервалами между строками текста. Пример: p {line-height: 50 %} |
| Цвет элемента и свойства фона: | |
| color | Определяет цвет элемента I {color: yellow;} Пример использования для тэга h3: h3 {color: #0000FF;} |
| background-color | Устанавливает цвет фона для элемента. <h3 style=”background-color:gold; color:brown;”> Пример </h3> |
| background-image | Использование в качестве фона картинки Пример: background-image: url(fon1.jpg) |
| background-attachment | Используется в том случае, если задано фоновое изображение scroll - будет перемещаться вместе с документом в процессе его прокрутки. fixed - данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра. |
| background-repeat | Позволяет управлять способом размножения изображения фона. repeat - изображение будет размножена по всему экрану. repeat-x - изображение дублируется в вертикальной плоскости. repeat-y - изображение дублируется в горизонтальной плоскости. no-repeat - изображение не дублируется: отображается только одна копия изображения. |
| Свойства границ: | |
| margin-left (слева) margin-right (справа) margin-top (сверху) margin-bottom (снизу) | Устанавливают значения отступов вокруг элемента. Пример использования для рисунка: img { margin-left: 20pt} img { margin-right: 20pt} img { margin-top: 20pt} img { margin-bottom: 20pt} |
| Свойства списков: | |
| list-style-type list-style-image list-style-position | Вид маркера: none; disk; circle; square – для маркированного списка decimal; lower-roman; upper-roman; lower-alpha; upper- alpha – для нумерованного списка метка в виде картинки из файла, напр. LI {list-style-image: URL(images/marker.gif);} позиционирование outside – по умолчанию, inside – без отступа слева |
| Вспомогательные свойства | |
| height width float white-space display | высота в px, mm, sm % ширина в px, mm, sm % none; left; right – расположение объекта относительно других объектов normal; pre; nowrap – разрешен 1 пробел, несколько пробелов, запрет переноса строки block; list-item; inline; none – управляет взаиморасположением текста и других объектов |