Popularigu vian ruslingvan paĝon pri Esperanto
Немного о CSS
Cascading style sheets (Таблицы каскадных стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML-документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента страницы, что проще и гораздо функциональнее использования обычного набора HTML-тегов. Приведем пример: Вам нужно создать жирный красный подчеркнутый текст.
ПРИМЕР HTML:
<font color="red"><strong><u> Какой-то текст </u></strong></font>
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот тут нам и поможет СSS. Рассмотрим два вида таблиц стилей: глобальные таблицы стилей и связанные таблицы стилей. Глобальные (Global style sheets) определяют стиль элементов во всем документе. Связанные (linked style sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле. Подробнее обо всем этом написано ниже.
Структура и правила
Селекторы (Selectors):
Синтаксисис:
селектор {свойства}
Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.
ПРИМЕР:
h1 {color:red; size:20pt}
Все элементы h1 в документе будут красного цвета, размером в 20 точек (pt, point).
Классовые селекторы (class Selectors):
Синтаксис:
селектор.класс {cвойства}
class - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
ПРИМЕР:
h1.blue {color:blue; size:20pt;}
Все элементы h1 с атрибутом class="blue" станут синими.
Классы могут так же быть описаны без явного привязывания их к определенным элементам.
Синтаксис:
.класс {свойства}
ПРИМЕР:
.green {color:green;}
В данном случае все элементы с атрибутом class="green" станут зелеными.
Придание нескольким элементам одинаковых свойств:
Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В этом случае при определении селекторы перечисляутся через запятую перед блоком свойств.
ПРИМЕР:
h1, h2, h3, p, strong {color:green; font-style:italic;}
Все элементы h1, h2, h3, p и strong будут зелеными.
Детали работы с оформлением ссылок:
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:green}
a:hover {text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на зеленый. И при подведении указателя мышки исчезнет подчеркивание.
Примечание: описания нескольких свойств для одного селектора, отделяются друг от друга точкой с запятой ";".
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <style type="text/css">. Он размещается в заголовке документа.
ПРИМЕР:
<html>
<head> <title> Пример глобальных таблиц стилей </title>
</head>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
</style>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
Вот <span class="blue"> это </font> слово - синeе.
</body>
</html>
В данном примере все элементы h1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими. Для простоты вместо <style type="text/css"> можно использовать просто тег <style>, что менее граммотно.
Связанные таблицы стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень удобно, когда нужно выдержать сайт в одном общем стиле, не утруждая себя составлением таблиц для каждого документа. Впоследствии достаточно будет только внести изменения в один файл стилей, чтобы изменить дизайн всего сайта.
ПРИМЕР:
Файл stildosiero.css
<style type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
</style>
В самих же HTML-документах делается ссылка на этот файл при помощи тега <link>: <link rel="stylesheet" TYPE="text/css" href="путь до файла">
ПРИМЕР:
Файл Index.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eo" lang="eo">
<head><title> Nur simpla ekzemplo </title>
</head>
<link rel="stylesheet" type="text/css" href="stildosiero.css">
<body> Teksto de la dokumento... </body>
</html>
Свойства шрифта
Возможные значения:
[1] любой шрифт
*Применимо для: всех элементов
Описание: это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя
ПРИМЕР:
font-family:Arial Black URL('arialblack.ttf')
Возможные значения:
[1] normal - без изменений
[2] italic - курсив
*Применимо для: всех элементов
Описание: стиль элемента. Курсивный или обычный
ПРИМЕР:
font-style:italic
Возможные значения:
[1] normal - без изменений
[2] bold - жирный
[3] bolder - очень жирный (в MSIE не отличается от bold, в Нетскейпе от нормал)
[4] lighter - тонкий (не отличается от normal)
[5] любое значение от 100 до 900
*Применимо для: всех элементов
Описание: выделение (жирность) элемента
ПРИМЕР:
font-weight:bold
Возможные значения:
[1] размер (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений
[3] smaller, larger - любое из этих значений
*Применимо для: всех элементов
Описание: размер шрифта
ПРИМЕР:
font-size:30pt
Возможные значения:
[1] none - нет
[2] underline - подчеркнутый
[3] overline - надчеркнутый (не поддерживается в Нетскейпе)
[4] line-through - перечеркнутый
[5] blink - мигающий (не поддерживается в IE)
*Применимо для: всех элементов
Описание: "украшение" текста
ПРИМЕР:
text-decoration:line-through
Возможные значения:
[1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
*Применимо для: inline элементов
Описание: изменение текста. Не работает в Нетскейпе
ПРИМЕР:
text-transform:Capitalize
Возможные значения:
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст "растянут"
*Применимо для: block-level элементов
Описание: положение текста
ПРИМЕР:
text-align:right
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: block-level элементов
Описание: абзацный отступ ("красная строка")
ПРИМЕР:
text-indent:30 em
Возможные значения:
[1] normal - без изменений
[2] длина (+)
[3] процент
*Применимо для: всех элементов
Описание: отступ перед абзацем (сверху), по сути может задавать интервал между абзацами.
ПРИМЕР:
line-height:100%
Возможные значения:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Применимо для: всех элементов
Описание: определяет отступ справа
ПРИМЕР:
margin-right:100%
Возможные значения:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Применимо для: всех элементов
Описание: определяет отступ слева. В частности, можно задать для абзаца.
ПРИМЕР:
margin-left:100ptА вот еще, что можно делать при помощи этого свойства: Edmond Privat, "Lasta Kiso".
Свойства цвета и фона
Возможные значения:
[1] цвет (+)
*Применимо для: всех элементов
Описание: цвет
ПРИМЕР:
color:#f00000
Возможные значения:
[1] цвет (+)
*Применимо для: всех элементов
Описание: цвет фона элемента
ПРИМЕР:
background-color:#f00000
Возможные значения:
[1] none - нет
[2] URL (+)
*Применимо для: всех элементов
Описание: фоновое изображение
ПРИМЕР:
background-image:URL(cool.gif)
Возможные значения:
[1] цвет (+)
*Применимо для: всех элементов
Описание: Цвет border'а. Не работает в Нетскейпе
ПРИМЕР:
border-color:green
Возможные значения:
[1] none
[2] dotted, dashed, solid, double, groove, ridge, inset, outset
*Применимо для: всех элементов
Описание: стиль border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре - то задаются индивидуальные стили для всех сторон
ПРИМЕР:
border-style: dotted groove
Возможные значения:
[1] border-top-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для верхнего border'а
ПРИМЕР:
border-top: 100em red groove
Возможные значения:
[1] border-right-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для правого border'а
ПРИМЕР:
border-right: 5pt magenta solid
Возможные значения:
[1] border-left-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для левого border'а
ПРИМЕР:
border-left: 15pc coral inset
Возможные значения:
[1] border-bottom-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для нижнего border'а
ПРИМЕР:
border-bottom: 30 orange outset
Меры длины
Синтаксис: "+" (можно опустить) или "-" затем [число] плюс [единица измерения] (без пропусков)
ПРИМЕР:
-566pt
Единицы длинны :
em - высота используемого элементом шрифта
ex - x-height, ширина буквы "x" используемого элементом шрифта
px - pixels, пикселы
in - inches, дюймы
cm - centimeters, сантиметры
mm - millimeters, миллиметры
pt - points, точка (1pt = 1/72in)
pc - picas (1pc = 12pt)
Процентные меры
Синтаксис : "+" или "-" затем [число] плюс "%" (без пропусков)
ПРИМЕР :
-566%
Цвета
Значением цвета может быть его название (red , lightgreen, navy, coral и т. д.) или RGB значение
Способы выразить цвет в RGB (red green blue) :
Все примеры отображают один и тот же цвет
Ссылки
Синтаксис: "URL" , потом в скобках приводится ссылка. Ссылку также можно помимо круглых скобок заключить в одинарные или двойные кавычки (без пропусков)
ПРИМЕР :
URL("cool.gif")Под MSIE и Нетскейпом подразумиваются Microsoft Internet Explorer 4.0+ и Netscape Navigator 4.0+ соответственно.
Ĉi-dokumento estas verkita surbaze de iom pli detala ruslingva artikolo verke de Sergej Ŝĉerbakov.