Background
Устанавливает все пять предыдущих свойств. Установите свойства в следующем порядке.
|
body { background:silver url(war.gif) no-repeat fixed center top;} | Фон страницы серебристо-серый, с непрокручивающимся рисунком, выровненным по верху страницы |
Background-color
Указывает цвет фона для любого элемента
|
table { color:white; background-color:maroon;} | Таблица отображает белый текст на темно-красном фоне |
Background-image
Указывает фоновый рисунок для страницы или другого блока (например, таблицы или ячейки). Использует формат url(imagefile), чтобы указать адрес или имя файла.
|
body { background-image:url(estar.jpg); } | Файл estar.jpg (в той же папке, что и страница) появляется в качестве фона | |
|
table {background-image: url(http://chillbot.com/bot.gif);} | Файл bot.gif (с другого веб-сервера) появляется в качестве фона таблицы |
Background-position
Устанавливает расположение рисунка относительно краев окна и других объектов. Укажите left, center или right, а затем top, middle или bottom.
|
table { background-image:url(war.gif); background-repeat:no-repeat; background-position:center top;} | Таблица отображает рисунок, выровненный сверху страницы |
Background-repeat
Определяет возможность повторения фонового рисунка, если он слишком мал, чтобы занять все пространство. Установите repeat, repeat-x, repeat-y или no-repeat.
Background-scroll
Определяет, должен ли фон прокручиваться вместе со страницей. Установите scroll или fixed.
Border
Устанавливает сразу все три предыдущих параметра.
|
.bigframe {border:4mm ridge gold;} | Элементы класса bigframe имеют широкую, золотистую границу | |
|
h1 {border:2px solid;padding:4px;} | Каждый заголовок заключен в рамку | |
|
table {border:2 solid gray;} td,th {border:1 dashed gray;} | Отображает тонкие границы вокруг таблицы и ячеек; удобно для тестирования таблиц |
Border-style
Отображает границу вокруг любого блочного элемента, вроде параграфа, рисунка, или таблицы. Бывает solid, double, ridge, groove, dashed, dotted, outset, inset, или none.
Border-width
Может быть thin, medium, thick, или exact width. (Установка этих параметров не обеспечит границу, пока вы не установите border-style.)
Clear
Если параграф или объект обтекает другие объекты на странице, установите параметр clear, чтобы он начинался со следующего открытого правого или левого поля (после других элементов). Установите как left, right, both или none.
Color
Указывает цвет текста и других элементов
|
body,p,td {color:#000066;} | Весь текст на странице темно-синий |
Display
Установите как none, чтобы элемент исчез со страницы, закрыв занимаемое им в другом случае пространство. Установите как block, чтобы отображать элемент как блок (по умолчанию) или inline, чтобы отображать его как часть конкретной строки (как в тэге <SPAN>).
Единицы длины
В CSS используется несколько единиц длины, наиболее важные – это px (пиксели), pt (пункты), in (дюймы), mm (миллиметры), em (ширина заглавной "M" в данном шрифте) и ex (высота маленькой "x" в данном шрифте).
|
body,td {font-size:16px;} | Размер шрифта для обычного текста ровно 16 пикселей в высоту | |
|
body {margin:.5in;} | Страница имеет поля в пол-дюйма | |
|
h1,h2,h3 {border:1mm solid gray; padding:.5em;} | Заголовки имеют серую границу толщиной в 1 мм, и расстояние между текстом и границами в ячейке зависит от размера шрифта |
Float
Устанавливает выравнивание и тип обтекания объекта (вроде атрибута align в тэге <IMG>, но не только для рисунков). Установите как left или right, чтобы выровнять объект с левыми или правыми полями и установить обтекание текста, или установите none (по умолчанию), чтобы предотвратить обтекание.
|
img {float:left;margin-right:10px;} | Текст обтекает все рисунки с полями в 10 пикселей с правой стороны | |
|
<div style="float:right;width:120;"> <img src="mel.jpg"width=120 height=200><br> Caption under the picture</div> | Рисунок и подпись появляются напротив правого поля в то время как остальное содержимое страницы обтекается слева |
Font
Устанавливает предыдущие пять свойств (в порядке, обозначенном ниже). Если вы устанавливаете высоту строки, это свойство должно стоять после размера шрифта, отделенное слэшем (/).
|
body,td {font:12pt/14pt "Times New Roman",Times,serif;} | Страница использует Times New Roman или другой шрифт с засечками размером 12 пунктов с высотой строки 14 пунктов | |
|
h1 {font:italic bold 18pt Arial sans-serif;} | H1-заголовки используют жирный курсивный шрифт Arial размером 18 пунктов или шрифт без засечек по умолчанию |
Font-family
Выберите семейство. Чтобы поддерживать системы с различными шрифтами, предусмотрите альтернативу (включая serif, sans-serif и monospace, используемые большинством систем).
|
body,td {font-family:Verdana, Arial,Helvetica,sans-serif;} | Страница использует шрифт Verdana, если он доступен; иначе используется Arial или Helvetica, или шрифт без засечек по умолчанию | |
|
.typewriter {font-family:"Courier New",Courier,monospace;} | Текст в элементе класса typewriter использует Шрифт New, если вoзможно; иначе используется Courier или моноширинный шрифт по умолчанию |
Font-size
Может быть xx-small, x-small, small, medium, large, x-large, xx-large; larger или smaller; или точной высоты в пикселях и пунктах; или в процентах от наследуемого размера шрифта.
|
body,td {font-size:14pt;} h1 {font-size:x-large;color:blue;} h2 {font-size:x-large;} h3 {font-size:large;} .footer {font-size:13px;} | Размер шрифта для обычного текста 14 пунктов, шрифт заголовков чуть-чуть больше, а размер шрифта в элементах класса footer-class точно 13 пикселей в высоту |
Функции полей
Поля представляют собой пространство вокруг границ объекта. Они прозрачны, поэтому их цвет соответствует цвету заднего фона объекта. Для большинства объектов поля по умолчанию равны нулю; впрочем, текстовые элементы, такие как параграфы и заголовки, имеют по умолчанию поля сверху и снизу.
Имена цветов
Если вы не любите пользоваться номерами, выберите название цвета из ста с лишним названий цветов, таких как darksalmon, seagreen и papayawhip. Но 4-ая и более ранние версии броузеров распознают очень небольшое количество имен. (Полный список имен цветов см. на msdn.microsoft.com/workshop/author/dhtml/reference/colors/colors.asp.).
|
h1,h2 {color:darkgreen;} | Оба заголовка темно-зеленые |
Каскадированость и наследственность
Стили называются каскадироваными потому, что многие из них применяются не только к указанному вами элементу, но и к под-элементам. Например, когда вы устанавливаете стиль шрифта для таблицы, ячейки и параграфы тоже приобретают этот стиль, вам не надо указывать для них стиль отдельно. (Впрочем, вы всегда можете использовать другие правила стиля для объектов внутри таблицы.)
|
table {font-size:smaller;} | Шрифт в таблице меньше чем в остальной странице |
Некоторые характеристики, такие как поля и задний фон, не наследуются.
|
table { margin:8px; } | Вокруг краев таблицы существует дополнительное пространство в 8 пикселей, но объекты внутри таблицы не имеют дополнительных полей |
Letter-spacing
Позволяет вам регулировать расстояние между символами. Указывается положительное или отрицательное значение длины, или процент от существующей разбивки.
List-style-image
Устанавливает рисунок в качестве маркера
|
ul { list-style-image: url(images/bullet.gif);} | Маркированный список использует рисунок bullet.gif в качестве маркера |
List-style-position
Определяет положение маркера в списке: inside (в составе абзаца) или outside (выдвинутый влево от абзаца).
List-style-type
Маркеры могут быть square, circle или disc. Номера могут быть decimal, lower-roman, upper-roman, lower-alpha или upper-alpha. Если нет ни того, ни другого, установите none.
Margin-top, margin-right, margin-bottom, margin-left и margin
Установите расстояние между объектом (или его границей) и смежным объектом или краем окна или ячейки. Используйте margin, чтобы установить сразу все четыре поля.
|
body {margin:0;} | Страница находится в верхнем левом углу окна броузера | |
|
.quote { margin-left:.25in; margin-right:.25in;} | Абзацы класса quote отступают на четверть дюйма от краев окна | |
|
h1,h2,h3 {margin-bottom:6px;} p { margin-top:6px; margin-bottom:6px;} ul , ol { margin-top:8px; margin-bottom:18px;} li { margin-top:0px; margin-bottom:4px;} | Страница разбита более равномерно: заголовки и абзацы ближе друг к другу, пункты списка разделены небольшими отступами | |
|
img {float:right;margin-left:10px;} | Рисунки выровнены справа; текст огибает их слева, но он отделен от них как минимум десятью пикселами |
Номера цветов
Цвета указываются так же, как в HTML, используя RGB-номера: #000000 (черный), #ffffff (белый), #006600 (темно-зеленый).
|
h1,h2 {color:#006600;} | Оба заголовка темно-зеленые |
Overflow, overflow-x и overflow-y
Определяет, способен ли абзац вместить текст и нужны ли полосы прокрутки, чтобы отобразить переполнение. Параметр по умолчанию – visible, позволяющий абзацу превысить установленную высоту.
Чтобы вырезать лишний текст, установите hidden; установите auto, чтобы отображать полосу прокрутки, если необходимо; установите scroll, чтобы всегда отображать две полосы прокрутки. Используйте параметры overflow-x и overflow-y, чтобы обеспечить разные настройки для горизонтального и вертикального переполнения и прокрутки.
|
.boxnote {width:160px;height:100px; overflow:auto;float:right;fixed-size border:2px solid navy;padding:4px; } | Параграфы класса boxnote содержатся в рамке напротив правого поля; если текст не будет помещаться, в рамке появится вертикальная полоса прокрутки | |
|
#mustfit {width:100px;height:12px; overflow:hidden;} | Элемент с ID mustfit должен быть точно 100 на 12 пикселов; не поместившийся текст вырезается |
Padding
Устанавливает расстояние между абзацем или другим элементом и его границей
Поля, заполнение и границы
Исходя из блочной модели CSS, каждый элемент блока – таблицы, ячейки, параграфы и рисунки – имеют поля, заполнение и границы, которыми вы можете управлять. Функции полей работают не во всех броузерах; в Netscape 4 лучше вообще не использовать параметры полей.
Position, top, и left
Параметр position заставляет элемент, такой как рисунок или блок <DIV>, переместиться с места, изначально занимаемого на странице. Установите position как absolute, чтобы установить элемент на определенном расстоянии от левого и верхнего краев страницы, закрывая пространство, которое он занял бы в другом случае.
Укажите position как relative, чтобы разрешить позиционирование объекта, оставляя открытым пространство, которое он занял бы в другом случае.
Параметры для top и left могут быть положительными (для движения вниз и вправо) или отрицательными (для движения вверх и налево).
Абсолютное позиционирование обычно связано с верхним левым углом страницы, но вы также можете установить его относительно других элементов. Например, если вы устанавливате position как relative к блоку <DIV>, абсолютное размещение в этом блоке будет связано с его левым верхним углом.
Абсолютное позиционирование удобно в DHTML-программировании, где вы определяете объекты на вашей странице, а затем устанавливаете расположение, содержимое и видимость, используя JavaScript.
|
<div style= "position:absolute;top:0;left:200"> <img src=spaceship.gif> </div> | Левый край рисунка отстоит на 200 пикселов от левого края окна, и рисунок касается верхнего поля | |
|
The word <span style= "position:relative;top:-8;">higher </span>is higher than the others | Слово higher выше, чем остальные |
Правила формата стиля
Одним из правил каскадированной таблицы является селектор – тэг HTML, сопровождаемый параметрами CSS в скобках, отделенный точкой с запятой.
|
body {background-color:darkblue;} | Цвет фона темно-синий |
Применение стиля к одному тэгу HTML
Чтобы установить стиль для одного тэга HTML, используют атрибут стиля.
|
<table style= "background-color:blue;color:white;"> | Текст белый на синем фоне только в этой таблице |
Применение выборочных классов или ID к тэгу
Чтобы применить класс к тэгу, используйте атрибут class; для ID используйте атрибут id.
|
<p class=quote>I hate quotations; tell me what you know.</p> | Применяет класс стилей quote к абзацу (и элементам внутри него) | |
|
<h1 id=bigred>Warning</h1> | Применяет ID bigred к заголовку |
Селекторы псевдо-элементов :first-letter и :first-line
Cелекторы псевдо-элементов используются для специального форматирования первой буквы элемента или всей первой строки.
|
p:first-letter {float:left; font-size:32pt;line-height:28pt; padding-right:5px;} | Создает буквицу (большую заглавную букву, вокруг которой размещается текст) в начале каждого параграфа | |
|
.fancy:first-line { font-size:larger; letter-spacing:1pt;} | Первая строка каждого параграфа или заголовка, относящегося к классу fancy, имеет больший размер |
Селекторы псевдоэлементов a:link, a:visited, a:active и a:hover
Используя селекторы псевдоэлементов гиперссылок, вы можете устанавливать различные параметры гиперссылок. Установите параметры a:hover, чтобы создать эффект ролловера, когда посетитель проводит мышкой по гиперссылке.
|
a : link {color:darkslateblue;} a : visited {color:steelblue;} a : active {color:hotpink;} a : hover {color:tomato;} | Гиперссылка меняет цвет, если она была использована или если посетитель проводит по ней мышью |
Смежные поля
Когда элементы, имеющие поля, следуют один за другим вертикально, пространство между ними не является суммой их верхнего и нижнего полей; оно сливается в большее из двух полей. Инструментами side-by-side поля добавляются для создания большего пространства. Вы можете указать отрицательную величину поля; таким образом, вы уменьшите пространство, занимаемое полями.
Создание выборочного класса стилей или ID
Вы можете создать выборочные классы в вашей таблице стилей и затем применять их на странице. Например, вы можете создать класс quote для квотирования. Перед классамми ставьте точку, а перед ID – значок номера (#).
|
quote { margin-left:20px; margin-right:20px;} | Создает класс quote для использования в атрибуте class вашего HTML | |
|
#bigred { text-transform:uppercase; color:red;} | Создает стиль ID с именем bigred для использования в атрибуте id вашего HTML |
Стиль шрифта ()
Устанавливает курсивный (italic), наклонный (oblique) или обычный (normal).
стилей внутри файла
Вы можете установить правила стиля для одной страницы, используя блок <STYLE> в файле HTML вашей страницы.
|
<style> <!-- body {background-color:gray;} --> </style> | Устанавливает правила стилей для этой страницы |
Text-align
Можно установить center, justify, right, или left. Используется для полей, рисунков, таблиц и других объектов также как и текст.
Text-decoration
Можно установить подчеркивание (underline), линию над текстом (overline), зачеркивание (line-through) или none.
Text-indent
Делает отступ необходимой длины в первой строке каждого параграфа.
Text-transform
Устанавливает peгистр. Можно установить capitalize, lowercase, uppercase, или none.
Толщина шрифта ()
Может быть полужирным (bold), более жирным (bolder), светлым (lighter) или обычным (normal).
Установка множественных стилей
Чтобы установить стиль для нескольких селекторов, используйте запятые.
|
h1,h2,h3,h4,h5,h6 {color:white;} | Цвет текста всех заголовков – белый |
Установка стилей гиперссылок
Чтобы управлять отображением гиперссылок на вашей странице, установите параметры тэга <A>, такие как color,font-weight и text-decoration.
|
a { color:#993300;font-weight:bold; text-decoration:none;} | Гиперссылки не подчёркнуты и отображаются полужирным, темно-красным шрифтом |
Установка стиля в контексте
Вы можете устанавливать стили, применяемые в конкретном контексте – стили объектов внутри других объектов.
|
table a {color:maroon;} | Текст гиперссылок в таблице – темно-красный |
Vertical-align
Можно установить baseline, sub, super, top, middle, bottom, text-top, text-bottom, или auto. Используется для рисунков, таблиц и других объектов также как и текст.
Visibility
Установите как hidden, чтобы элемент исчез со страницы, но все еще занимал место. Установите visible (по умолчанию), чтобы отобразить объект.
Внешняя таблица стилей
Вы можете установить правила стиля для ваших страниц, используя файл (.css) внешней таблицы стилей. Свяжите таблицу с вашим HTML, поместив тэг <LINK> в раздел <HEAD>.
|
<link rel=stylesheet href="stylesht.css"type="text/css"> | Правила стиля, содержащиеся в файле stylesht.css, применяются к этой странице |
Высота строки ()
Устанавливает высоту каждой строки текста. Указывается или конкретная высота, или процент от высоты по умолчанию.
|
compact {line-height:95%} | Строки в элементах класса compact ближе друг к другу, чем обычно |
Width и height
Устанавливает размеры объектов, таких как рисунок или абзац. Абзац всегда использует указанный параметр width. С параметром height, когда рамка меньше абзаца, текст сжимается до указанной высоты (если вы не установили параметр overflow).
Z-index
Определяет, какие позиционированные объекты накладываются друг на друга.
Большее значение элемента z-index отправляет элемент на передний план, а меньшая величина располагает его позади других элементов. Отрицательное значение отодвигает элемент за непозиционированные элементы страницы.
|
<div style= "position:absolute;top:200; left:200;z-index:2"> <img src="front.gif"></div> <div style= "position:absolute;top:250; left:250;z-index:1"> <img src="back.gif"></div> | Рисунок front.gif частично перекрывает back.gif | |
|
<div style= "position:absolute;top:250; left:250;z-index:-1"> <img src="chau.gif"></div>. | Рисунок появляется после содержимого страницы, на расстоянии 250 пикселов от верхнего и левого краев страницы |
