Справочник Веб-дизайнера: Учебник CSS стилей

Последняя модификация: 10.08.2014 г

Страница загружена с адреса: http://webdesign.site3k.ru/docs/css.html

C ss – каскадные таблицы стилей.

Понятие CSS – каскадной таблици ститей.
- Назначение CSS
- Размещение CSS
Синтаксис CSS
Псевдоклассы и псевдоэлементы CSS
- Псевдоклассы CSS
- Псевдоэлементы CSS
Каскадирование таблиц стилей
Форматирование содержимого
Классификационные реквизиты
Примечание

Понятие CSS – каскадной таблицы стилей.

Назначение CSS

Теги html предоставляют ограниченные возможности оформления страниц. Для их расширения, в тег может быть добавлен атрибут "style", указывающий на некоторое свойство объекта и устанавливающий значение этого свойства. При этом каждый тег может иметь несколько атрибутов "style", а каждый атрибут "style", указывать несколько свойств, заключенных в общие кавычки разделенных точкой с запятой. Например, два равносильных определения:

<P style='color: green' style='border: solid red'>
<P style='color: green; border: solid red'>

Действие указанных параметров оканчивается с окончанием действия заключающего их тега.

Наиболее часто атрибут "style" используется в элементах <BODY>, <DIV>, <P> и <SPAN>. Поскольку элемент SPAN не несет в себе перевода строки и сам по себе не отделяет каким-либо образом заключенный в него текст от остального документа, его применение имеет смысл только вместе с атрибутом "style". С другой стороны, если оформлению подлежит часть текста, не являющаяся отдельным блоком, выполнить его удобней с помощью этого элемента. Например:

<P> Это пример простого текста <span style=' color: green'>и зеленого текста </span> в одной строке.</P>

Для сокращения размера страницы, вместо указания одного и того же оформления каждому абзацу, лучше указывать оформление DIV блокам или даже, всему BODY. Однако если текст имеет много чередующихся стилей оформления, их определение стоит выделить в отдельный блок: с одной стороны это сделает более удобной корректировку оформления, с другой, позволит дополнительно сократить размер файла. Загрузка и отображение файла ускорится не только за счет уменьшения размера, но и за счет того что, определения стиля уже будет находиться в оперативной памяти и не потребует дополнительной обработки.

Размещение CSS

Блок определения стилей помещается либо в заголовок страницы, внутри элемента head, либо в отдельный файл. При размещении в разделе заголовка, блок определения стилей объявляется и заканчивается тегом STYLE, а для исключения отображения его содержимого, оно заключается в знаки комментария ():

<STYLE>
<!-- 
-->
</STYLE>

При размещении в отдельном файле, в разделе заголовка помещается ссылка типа "rel" с атрибутом Href, указывающим имя файла, содержащего блок определения стилей. Например:

<link rel="stylesheet" href="style.css">

Поскольку определение стиля возможно на различных языках, в объявлении блока STYLE и ссылке на файл с определениями стилей следует указать в атрибуте TYPE язык определения. Для языка CSS (каскадных таблиц стилей), в частности, следует указать TYPE="text/css". На сегодняшний день этот язык и тип является значением по умолчанию, но в будущем ситуация может измениться и, для предотвращения недоразумений, вышеприведенные объявление стилей и ссылку, следует уточнить:

<STYLE type="text/css">
<!-- 
-->
</STYLE>

<link rel="stylesheet" href="style.css" type="text/css">

Выбор места размещения определения стилей зависит от нескольких обстоятельств. Нет смысла выносить в отдельный файл определения стилей, если оно предназначено для единственного документа. Вынесение определения стилей в отдельный файл имеет смысл, если эти стили едины для большего числа документов, например, целого сайта – не придется вписывать определения в каждую страницу. Кроме того, ускорится загрузка: загрузив определение с первой страницей сайта, браузер не будет вновь обращаться за ним к серверу и тем сократит время загрузки следующих страниц. При этом, если на какой-то из страниц, определенный в этом файле стиль должен отображаться иначе, его можно переопределить, указав загрузку дополнительного файла определений, число которых не лимитируется или, указав новые параметры стиля в блоке STYLE после ссылки на файл определений. На худой конец, можно вставить <span style...> непосредственно в текст – иногда это целесообразней чем создание нового стиля, ради переопределения одного из множества свойств.

Однако существуют ситуации, когда вынесение определения стилей в отдельный файл даже для большого числа связанных документов оказывается нежелательным. Такая ситуация возникает, если документы могут использоваться в отрыве от остальных. Например, автор сайта приносит проект одной из своих страниц к приятелю, чтобы обсудить, в числе прочего, ее дизайн и, обнаруживает что, забыл скопировать на дискету определения стилей, в результате чего, страницы выглядит совершенно не так, как должна. Другой случай нежелательности отделения таблицы стилей обнаруживается, когда вместо всей страницы из интернета на диск сохраняется только текст. Для Internet Explorer это можно указать, для сокращения времени сохранения, а для старой Opera другой вариант вообще не предусмотрен (даже сохраняя рисунки, она не сохраняет файлы с таблицами определения стилей). В результате, увидев сохраненную страницу в Off-Line, посетитель испугается так, что больше никогда не зайдет на сайт, с которого загрузил такую глюченную страницу. Третья ситуация – недостаток квалификации пользователя. Не имея представления о каких-то там CSS и CSS-файлах, неискушенный пользователь может сам удалить, сохранившийся на жестком диске "мусор" в виде CSS-файлов, и потом долго пытаться понять, кто изуродовал закачанные им, такие красивые, изначально, страницы.

С учетом перечисленных факторов, следует сделать вывод что, если размер определения стилей не превышает 10% от общего размера документа, то его вынос в отдельный файл можно трактовать как извращение. Впрочем, на постсоветских частных сайтах, извращений хватает и без этого – повсеместным стандартом стали сайты, где в окружении огромного числа баннеров и прочей повторяющейся чепухи на каждой странице представлено всего один – два небольших абзаца уникального текста и ссылки на другие такие же бессодержательные страницы, в угоду баннерным сетям и увеличению показов баннеров, вынуждающих посетителя совершить десятки переходов для получения интересующей их информации.

Синтаксис CSS.

Структура определения стилей.

Определение оформления внутри тега с помощью атрибута STYLE имеет следующий вид: внутри угловых скобок тега, отделенный от имени тега пробелом, указывается атрибут STYLE, затем знак равенства и в кавычках перечень свойств и их значений, разделенных точкой с запятой. Свойства отделяются от значений двоеточием:

<P style='color: green; border: solid red'>

Определение стилей в заголовке страницы или отдельном файле происходит почти так же, только тег STYLE, указанный вначале определения не повторяется, а роль кавычек выполняют фигурные скобки:

P {color: green; border: solid red}

Поскольку для HTML-документа пробел и перенос строки равносильны, эту запись можно разнести на несколько строк:

P {
color: green; 
border: solid red
}

Это обычно и делается многими авторами для удобства поиска отдельных свойств, хотя при увеличении таблицы стилей, усложняется поиск начала и конца стиля. Чтобы избежать этого, атрибуты часто пишутся с отступами от края:

P {
    color: green; 
    border: solid red
}

Во внутрь определения стиля может быть помещен комментарий, заключенный между /* и */. Например:

P {/* Это пример определения стиля */
    color: green; 
    border: solid red
}
/* комментарий может быть помещен в любом месте */

Поскольку определения стиля закомментировано тегами , комментарий между /* и */ не будет отображаться в теле документа. К ошибкам интерпретации он тоже не приведет, поскольку на языке CSS это то же самое что  на языке HTML.

Для тегов имеющих одинаковые определения допускается группировка, при которой они записываются в одну строку через запятую, а затем указываются их свойства и значения свойств:

DT, DD {margin-top: 0; margin-bottom: 0}

В одном блоке STYLE может быть множество стилей. Допустимое количество самих блоков так же, неограниченно. При этом если определения стилей находятся в файлах, заданных атрибутом link, предпочтение отдается первому из них – следующий ищется только в случае невозможности загрузить или интерпретировать первый, если же одни и те же стили несколько раз определены в самом документе (что может быть вызвано только невнимательностью автора), предпочтение отдается последнему.

Пример определения стилей для нескольких тегов:

<STYLE type="text/css">
<!-- 
A:link  {color: #F30; background: transparent}
A:visited  {color: #363; background: transparent}
A:active   {color: #F30; background: transparent}
A:hover {background: #FFA}
PRE {margin-left: 2em}
P {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}
DT, DD {margin-top: 0; margin-bottom: 0} /* opera 3.50 */
-->
</STYLE>

В этом примере приведены специальные селекторы (теги) A:link, A:visited, A:active и A:hover, означающие: непосещенную гиперссылку, посещенную гиперссылку, выполняемую в данный момент гиперссылку и гиперссылку над которой находится указатель мыши. Эти теги не приходится указывать в теле документа (следует указать лишь <A> с необходимыми ему атрибутами). Браузер сам определит состояние ссылки и организует ее внешний вид соответствующим образом.

Разделение тегов на классы, понятие селектора

Вышеприведенный пример на гиперссылках показал что, CSS допускает наличие нескольких видов оформления одних и тех же тегов, таким образом, понятие тега становится слишком узким для применения в CSS и заменяется понятием селектора. Селектор это общее название стиля. Если стиль определяется для тега P, то тег P является селектором CSS, а если для A:Link, то селектором является не тег A, а именно A:Link, не являющийся тегом и требующий для своего обозначения отдельного термина. Таким образом, селектор – это имя, данное элементу страницы для которого определяется стиль отображения.

Оперирование селекторами имеет принципиальное значение для таблиц стилей, поскольку позволяет создавать различное оформления для одних и тех же тегов. Для того чтобы выделить тег в отдельный класс оформления, после его имени, через точку, записывается произвольное название класса:

<Style type="text/css"><!--
P.MyClass {margin-left:5pt; margin-top: 0.6em; margin-bottom: 0.6em}
--></STYLE>

При необходимости обращения к этому классу в объявлении тега указывается класс, на теги, имеющие то же имя, но принадлежащие к другому классу, параметры отображения указанного класса не повлияют. Например:

<P>Пример обычного абзаца
<P class='MyClass'>Пример абзаца с особыми параметрами
<P>Снова обычный абзац.

В определении классов допустима та же группировка, что и в общем определении оформления тега:

P.MyClass, Div.MyClass {margin-top: 0.6em; margin-bottom: 0.6em}

Если же произвольное имя класса является уникальным и не входит в состав других селекторов, внутри объявления стилей на него можно ссылаться, опуская имя тега, но обязательно с точки. Например, 2 следующих определения равнозначны:

Div.MyClass {margin-top: 0.6em; margin-bottom: 0.6em}
.MyClass {margin-left: 0.6em; margin-right: 0.6em}

Идентификаторы CSS

Идентификаторы пишутся не через точку, а через знак лестницы:

P#MyClass {margin-left:5pt; margin-top: 0.6em; margin-bottom: 0.6em}

Затем, внутри тегов указываются через атрибут ID:

<P>Пример обычного абзаца
<P ID='MyClass'>Пример абзаца с особыми параметрами
<P>Снова обычный абзац.

В отличие от селекторов они не привязаны к тегам и могут определяться отдельно от них, с тем, чтобы затем влиять на отображение любых элементов текста. Например:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
    #pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 ID=pastoral>Зеленый заголовок, стиль которого не определялся</H1>
<P ID=pastoral>Зеленый текст простого абзаца стиль которого не определялся
<P>Текст с цветом по умолчанию для простого абзаца стиль которого не определялся
</BODY>
</HTML>

При этом спецификация HTML определяет идентификатор как указатель уникального элемента (в этом его суть, в отличии от класса стилей). К нему может не только привязываться стиль, но и бращаться какой-то сценарий (например, на языке javascript). Поэтому использовать один и тот же идентификатор несколько раз не рекомендуется. И если стили с идентификаторами будут работать корректно независимо от того, является ли элемент с идентификатором уникальным или его использовали несколько раз, яваскрипт будет обращаться именно к первому элементу с данным идентификатором (или последнему – в зависимости от реализации интерпритатора), что наверняка будет приводить к ошибке сценария.

Контекстные селекторы

Вместо создания отдельного стиля представления содержимого, CSS позволяет определять его условное оформление, зависящее от контекста, для чего в определении стилей указывается тег, в контексте которого элемент должен иметь особое оформление, а через пробел от него, тег оформляемого элемента с перечислением параметров отображения. Например:

H1 EM {color: red}

Элемент EM, являющийся тегом HTML, будет оформлен по тексту как обычный EM, но внутри заголовка первого уровня примет указанное оформление. Фактически, контекстные селекторы мало отличаются от обычных. Единственное отличие заключается в отсутствии необходимости указывать класс элемента при его объявлении в теле документа. Вот пример оформления текста с помощью обычного селектора, идентификатора и контекстного селектора:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
     P.Red { color: red }
     .Red small { background: blue }
     #red { color: red }
    H1 EM {color: red}
  </STYLE>
 </HEAD>
 <BODY>
  <H1>Заголовок, стиль которого не определялся и <EM>красный элемент в нем </EM></H1>
<P>Текст простого абзаца стиль которого не определялся и <EM>элемент</EM>
стандартного оформления, рядом с которым <Span id=RED>красный элемент</Span>,
определенный с помощью идентификатора.
<P class=RED>Полностью красный абзац и <Small>внутри него  элемент SMALL с определенным
фоном</small>
</BODY>
</HTML>

Контекстные селекторы, практически не отличаясь от обычных, ставят одни теги в зависимость от других и позволяют менять оформление больших фрагментов документа или целых страниц (если находятся в отдельном файле), изменением только одного тега. Например:

H1, H2, H3 {text-align:center}
Div.Blue {color: Navy; background: Aqua; Padding:0 10 10; border: solid Navy thin}
Div.Red { color: Maroon; background: Fuchsia; Padding:0 10 10 ; border: solid Maroon thin}
Div.Grin { color: Green; background: Lime; Padding:0 10 10 ; border: solid Green thin}
.Blue A {color: Blue}
.Red A {color: Red}
.Grin A {color: Olive}  
.Blue H1, .Blue H2, .Blue H3 {color: Blue; border: solid Navy; margin:0 -10}
.Red H1, .Red H2, .Red H3 {color: Red; border: solid black; margin:0 -10}
.Grin H1, .Grin H2, .Grin H3 {color: Olive; border: solid red; margin:0 -10}
body {text-align:justify; margin:30; background:white}

Теперь, в зависимости от выбранного типа раздела, будет переопределяться вид гиперссылок и заголовков.

Псевдоклассы и псевдоэлементы CSS

Псевдоклассы CSS

Псевдоклассами являются селекторы, указывающие на несуществующие теги. Псевдоклассами являются уже упомянутые типы гиперссылок:

A:link – обычная гиперссылка
A:visited – посещенная гиперссылка
A:hover – гиперссылка над которой находится мышь.
A:active – активизированная гиперссылка

Поскольку других псевдоклассов не существует, CSS разрешает указывать их, опуская тег A, поэтому A:Link означает то же что и :Link. Для получения контекстного значения псевдокласса, его можно сгруппировать с любым селектором по общему правилу:

.Blue A:visited {color: Blue}
.Blue :active {color: Blue}

Либо по особому правилу псевдокласса, опирающемуся на то, что в данном классе могут быть представлены только элементы A, и ни какой путаницы не возникает, даже если перед порождающим классом убрать точку, а после, убрать пробел:

Blue:active {color: Blue}

В оформлении вида гиперссылок важна последовательность. Поскольку Link означает любой тип ссылок, то ее настройка перекрывает все остальные, если те не настроены после нее. Visited входит в состав Link, по-этому, чтобы они имели отличный от Link вид, их следует настраивать после. Hover входит в состав Link, но может входить и в visited, если мышь находится над посещенной ссылкой. Для выделения hover из других, ее определение следует указывать после определения первых двух. Аналогично с active, которая, обычно, так же и hover, поскольку, если она активизирована щелчком мыши, указатель находится над ней. Ее следует определять последней

В примере, приведенном в разделе "Структура определения стилей" и скопированном из английского руководства, последовательность иная, так как для CSS 1 не имела значение последовательность определения стилей сылок. Эта последовательность приобрела значение с появлением CSS 2, где стили стали наследоваться Поскольку CSS 2 давно стала стандартом, во избежание недоразумений за последовательностью и наследованием стилей стоит следить.

Псевдоэлементы CSS

Псевдоэлементы являются элементы оформления, дополняющие основной тег. Они имеют тот же синтаксис, что и псевдоклассы, но влияют лишь на отображение части содержимого класса.

first-line – оформляет первую строку абзаца, позволяя определить свойства шрифта (font), цвета и заднего плана (color и background), интервал между словами (word-spacing), интервал между символами (letter-spacing), декоративное оформление текста (text-decoration), вертикальное выравнивание (vertical-align), трансформацию текста (text-transform), высоту строки (line-height) и параметры обтекания (clear).

first-letter – оформляет первый символ абзаца, позволяя определить свойства шрифта (font), цвета и заднего плана (color и background), декоративное оформление текста (text-decoration), вертикальное выравнивание (vertical-align) – только если свойство float установлено в "none" (по умолчанию), трансформацию текста (text-transform), высоту строки (line-height), параметры обтекания (clear), отступы (margin), расстояние от обрамления (padding), параметры обрамления (border) и отделение от остального текста (float).

Например:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
    P { color: red; font-size: 12pt }
    P:first-letter { color: green; font-size: 200% }
    P:first-line { color: navy }
  </STYLE>
 </HEAD>
 <BODY>
<P> Отобразит первую строку абзаца темно-синим цветом, все первые
буквы абзаца – зеленым и в два раза большего размера. А остальную часть
абзаца – красным.
<P>Как в этом примере.
 </BODY>
</HTML>

Каскадирование таблиц стилей

Таблицы стилей могут импортировать содержимое других таблиц стилей, для чего в начало таблицы вставляются инструкции @import url которых указывает на расположение импортируемой таблицы. Например:

@import url('http://www.Discoverer.h11.ru/style.css')

Если импортируемая таблица содержит стиль, определенный в дальнейшем коде таблицы стилей или следующей импортируемой таблице, оформление стиля задается его последним определением. Если же, какое-то определение имеет преимущество, оно отмечается инструкцией ! important. Например:

P  {font-size: 12pt ! important; font-style: italic}

И будет переопределено, только если такое же преимущество имеет следующее определение. В данном случае, font-size переопределится, только если новое определение так же отмечено преимуществом, а font-style переопределится в любом случае, если новое определение содержит его указание.

Форматирование содержимого

Свойства шрифта

font-style – начертание шрифта: 'italic' – курсив, 'oblique' – наклонный (это одно и то же, но в некоторых шрифтах может по-разному называться) и normal – обычный (он же roman или upright).

font-variant – регистр символов: normal – обычный, small-caps – малые прописные (поддерживается только Internet Explorer)

font-weight – толщина шрифта: normal – обычный, lighter – более тонкий, чем определен для стиля, bold – жирный и bolder – жирнее, чем определен для стиля. Так же возможны варианты 100, 200, 300, 400, 500, 600, 700, 800, 900, где 400 соответствует нормальной толщине. Вообще, определение толщины шрифта – самое хаотичное место в CSS и его лучше отобразить таблицей:

"Regular" и "Book" 400

"Medium" 500

"Bold" 700

"Heavy" 800

При этом возможность менять степень жирности шрифта зависит от самого шрифта и, если в нем предусмотрен только обычный и полужирный, то никакого жирного и среднего из него не сделать.

font-size – размер шрифта в пунктах (pt), миллиметрах (mm), пикселях (рх), относительных величинах (em) или процентах (%) от стандартного размера. Так же допустимы значения: xx-small и x-small – самые маленькие, small – маленький, medium – средний, large – большой, x-large и xx-large – самые большие; smaller – меньше указанного и larger – больше указанного. Например:

P {font-size: 12pt;}
BLOCKQUOTE {font-size: larger}
EM {font-size: 150%}
EM {font-size: 1.5em}

font-family – определяет перечень предпочитаемых для данного элемента шрифтов, перечисленных через запятую. Указание перечня имеет смысл для корректного подбора заменяющего шрифта, если предпочитаемый не найден. Например:

BODY {font-family: gill, helvetica, sans-serif}

Вместо настоящего шрифта может указываться тип: serif – шрифт с засечками типа Times, sans-serif – шрифт без засечек типа Helvetica или Arial, cursive – шрифт, имитирующий рукописный ввод типа Zapf-Chancery или Kursiv 95, fantasy – тип Western, monospace – моноширинный шрифт типа Courier. Если имя шрифта содержит пробел, оно должно заключатся в кавычки. Например:

<BODY STYLE="font-family: 'My own font', fantasy">

font – позволяет установить название шрифта, его размер и величину междустрочного интервала (через дробь) и другие параметры. Применяется вместо указания отдельных атрибутов. Например:

P {font: bold italic large/120% Helvetica, serif}

Компактность такой записи указывает на предпочтительность ее применения во всех случаях, где не может возникнуть разночтения значения Normal.

Цвета и рисунки

color – цвет символов. Указываться тремя способами:

В 16-ти цветной палитре: Black (Черный), Gray (Серый), Silver (Серебро – светло-серый), White (Белый), Maroon (Темно-бордовый), Red (Красный), Purple (Фиолетовый), Fuchsia (Фуксия – розовый), Green (Зеленый), Lime (Известь – салатный), Olive (Оливковый), Yellow (Желтый), Navy (Темно-синий), Blue (Откровенно-голубой), Teal (Чирок – темный сине-зеленый), и Aqua (Аква – светлый сине-зеленый).
Взятым в кавычки 16-ти битным кодом цвета, например "#FF0000". Запись кода может быть сокращена до трех символов, обозреватели расширят его, удваивая каждый из них, превращая, например, "#F00" в "#FF0000".
Указанием, с помощью атрибута RGB, что цвет определяется соотношением красного, зеленого и синего и, указанием этого соотношения в скобках, например: rgb(255,0,0). Вместо абсолютной величины, при этом, может задаваться величина в процентах, где за 100% принято значение 255.

background-color – цвет фона. Может быть transparent – прозрачный или указываться так же, как цвет символов.

background-image – фоновый рисунок. Либо none – нет, либо url(адрес рисунка). Например:

BODY {background-image: url(marble.gif)}
P {background-image: none}

background-repeat – повторение фонового рисунка для заполнения страницы: repeat – допускается повторение, repeat-x – заполнение только по горизонтали, repeat-y – заполнение только по вертикали, no-repeat – нет повторения. Допускается опускание имени свойства, с указанием только его значения. Например:

BODY {background-image: url(marble.gif) no-repeat}

background-attachment – прокрутка фонового рисунка. Либо scroll – прокрутка разрешена, и рисунок перемещается вместе с текстом, либо fixed – рисунок расположен неподвижно и текст перемещается относительно рисунка. Допускается опускание имени свойства, с указанием только его значения. Например:

BODY {background-image: url(marble.gif) fixed}

background-position – позиция фонового рисунка.

Либо определяется в процентах от размера окна, отсчитываясь с левого верхнего угла, например: {10%,20%} где первая цифра указывает отступ слева, а вторая отступ сверху, либо в сантиметрах: {10cm,20cm}.
Либо фиксируется по краям или центру: top – по верху, bottom – по нижнему краю, left – влево, center – по центру, right – вправо.

Допускается комбинация определений и опускание имени свойства, указывая только его значение:

BODY {background-image: url(marble.gif) center center}
BODY {background-image: url(marble.gif) center 50%}

Background – указывает либо на рисунок, либо на цвет фона, либо и на то, и на другое одновременно. Применяется вместо background-image и background-color.

Свойства текста

word-spacing – интервал между словами: либо normal, либо относительный интервал в em, например:

H1 {word-spacing: 1em}

Увеличит интервал между словами на единицу. Допустимы отрицательные значения. Значение по умолчанию – 0.

letter-spacing – межсимвольный интервал: либо normal, либо относительный интервал в em, например:

H1 {letter-spacing: 0.1em}

Увеличит интервал между символами на одну десятую. Допустимы отрицательные значения. Значение по умолчанию – 0.

text-decoration – оформление текста: none – нет, underline – подчеркиванием, overline – надчеркиванием, line-through – перечеркиванием, blink – мерцанием текста. Данное свойство работает не везде. IE, например, отказывается мерцать, Opera, если станица состоит из Frames (кадров, рамок, фреймов), мерцает через раз, то есть, она либо показывает текст, не мерцая, либо вообще не выводит его на экран – как придется. Поэтому, чтобы избежать ситуации, в которой потребитель вообще ничего не увидит, лучше избегать использования Blink.

vertical-align – определяет вертикальное выравнивание встроенных элементов: baseline – по опорной линии (нижнюю часть по нижней части родительского элемента), sub – нижний индекс, super – верхний индекс, top – выравнивание по верху, text-top – по верху текста, middle – посредине, bottom – понизу, text-bottom – по низу текста или в процентах от высоты строки.

text-transform – преобразование текста: capitalize – все слова с большой буквы, uppercase – все прописные, lowercase – все строчные, none – нет преобразования.

text-align – выравнивание текста: left – влево, right – вправо, center – по центру, justify – по обоим краям.

text-indent – отступ первой строки, указывается в пунктах, символах или процентах. При отрицательном значении означает выступ.

line-height – высота строки (междустрочный интервал): либо normal – обычный (от 1 до 1.2), либо пиксели, проценты, относительный размер (em).

Оформление абзацев

Отступы задаются в процентах, пунктах и относительных величинах (em). Значение AUTO, определяет отступ по умолчанию.

margin-top – верхний отступ.

margin-right – правый отступ.

margin-bottom – нижний отступ.

margin-left – левый отступ.

margin – определяет значение всех отступов в порядке верх, право, низ, лево (с верху, по часовой стрелке). Если указано только три значения, левый отступ равен правому, если только два, левый равен правому, а нижний верхнему; если один – все отступы одинаковы.

border-top-width – верхняя окантовка абзаца: thin – тонкая, medium – средняя, thick – толстая, либо точная величина в пикселях.

border-right-width – правая окантовка абзаца: thin – тонкая, medium – средняя, thick – толстая, либо точная величина в пикселях.

border-bottom-width – нижняя окантовка абзаца: thin – тонкая, medium – средняя, thick – толстая, либо точная величина в пикселях.

border-left-width – левая окантовка абзаца: thin – тонкая, medium – средняя, thick – толстая, либо точная величина в пикселях.

border-width – окантовка абзаца: thin – тонкая, medium – средняя, thick – толстая, либо точная величина в пикселях. Значения указываются в том же порядке: верх, право, низ, лево (с верху, по часовой стрелке). Если указано только три значения, левая рамка равна правой, если только два, левая равна правой, а нижняя верхней; если одно – все рамки одинаковы.

border-color – определяет цвет окантовки, по тому же принципу: с верху, по часовой стрелке.

border-style – стиль окантовки: none – нет окантовки (по умолчанию), dotted – точки, dashed – пунктир, solid – непрерывный, double – двойная линия, groove – канавка, ridge – выступ, inset – углубление блока, outset – возвышающаяся табличка. Стиль определяется для всех четырех сторон. Поскольку по умолчанию стиль не назначен, пока он не будет указан, рамка не отображается, несмотря на то, что может быть задан ее цвет или толщина.

border-top– позволяет в одной команде установить стиль, ширину и цвет верхней окантовки.

border-right – позволяет в одной команде установить стиль, ширину и цвет правой окантовки.

border-bottom – позволяет в одной команде установить стиль, ширину и цвет нижней окантовки.

border-left – позволяет в одной команде установить стиль, ширину и цвет левой окантовки.

Border – позволяет в одной команде установить стиль, ширину и цвет всей окантовки. Например:

border: solid 0.5em

или

border: solid thick blue

padding-top – верхний отступ окантовки от текста. Отрицательные значения не принимаются и уменьшение возможно лишь за счет уменьшения высоты строки (line-height).

padding-right – правый отступ окантовки от текста.

padding-bottom – нижний отступ окантовки от текста. Отрицательные значения не принимаются и уменьшение возможно лишь за счет уменьшения высоты строки (line-height).

padding-left – левый отступ окантовки от текста.

Padding – определяет значение всех отступов окантовки в порядке: верх, право, низ, лево (с верху, по часовой стрелке). Если указано только три значения, левый отступ равен правому, если только два, левый равен правому, а нижний верхнему; если один – все отступы от окантовки одинаковы.

Атрибуты вставляемых элементов

width – ширина в процентах или пикселях, применяется в таблицах, разделителях (HR), а так же, для резервирования места рисункам.

height – высота.

Float – определяет положение нетекстовых элементов none – запрещает отделение от текста, left – выравнивает влево, right – выравнивает вправо.

Clear – определяет отделение нетекстовых элементов от текста: none – нет отделения, текст располагается рядом с объектом, left – текст располагается под объектом, слева, right – текст под объектом, справа, both – текст под объектом с любой из сторон. Например:

P {Clear:left}

Классификационные реквизиты

Эти реквизиты позволяют переопределять тип тега.

Display – определяет тип отображения контейнера (в терминах HTML, многие теги являются блоковыми или текстовыми контейнерами): block – отображать как блоковый контейнер, inline – отображать как текстовый контейнер, list-item – отображать как элемент списка, none – не является контейнером (не отображается). Например, по умолчанию:

P {display: block}
EM {display: inline}
LI {display: list-item}
IMG {display: none}

Блоковые контейнеры, должны иметь закрывающий тег, либо закрываются автоматически, с объявлением следующего такого же контейнера. Блоковые элементы инициируют переход на новую строку. Текстовые (линейные, с точки зрения CSS), контейнеры, например, SPAN, не инициируют переход на новую строку и не закрываются автоматически при новом объявлении такого же контейнера. Элементы списка являются подчиненными контейнерами.

Переопределение типа контейнера должно изменить поведение элемента, например, SPAN может вести себя, как DIV, но может не поддерживаеться браузерами.

white-space – определяет обработку пустого пространства (пробелы и табуляция): normal – стандартное сокращение всех пробелов и табуляторов, pre – сохранение пробелов и табуляторов, а так же переносов строк, как в PRE-элементах, nowrap – переносить строки внутри абзаца только при указании тега BR, но сокращать пробелы и табуляторы.

list-style-type – определяет нумерацию списков (элемент UL и OL) disc – жирными точками, circle – кружками, square – квадратиками, decimal – арабскими цифрами, lower-roman – маленькие римские цифры upper-roman – большие римские цифры, lower-alpha – маленькие английские буквы, upper-alpha – большие английские буквы, none – нет нумерации.

list-style-image – определяет рисунок для маркировки списка: none – список не маркируется, иначе url(), в скобках которого указывается адрес рисунка. Например:

UL {list-style-image: url("http://Disciverer.h11.ru/Smallogo.gif")}

list-style-position – размещение маркеров списковых элементов: inside – внутри текста, outside – выступающими из текста.

list-style – одной командой определяет list-style-type, list-style-image и list-style-position. Например:

UL {list-style: upper-roman inside}

Примечание

1em – значение по умолчанию (например, Font-size:2em – двойной размер шрифта)

* аналогично em – относительный размер

inches – дюймы, 1in = 2,54 см.

millimeters – миллиметры, mm.

Points – пункты, 1pt = 1/72 дюйма

Picas – пикасы?, 1pc = 12pt

Pixels – пиксели, 1px зависит от размера экрана и его параметров.

Относительный размер может указываться как +число или -число, что означает изменение основного размера на эту величину.

Символ косой черты влево (\) отключает стандартное значение следующего за ним символа и может быть использован, например, для включения кавычки в текст CSS.

Атрибуту определяющие сразу несколько свойств в некоторых случаях могут не работать. Кроме того, одни и те же атрибуты могут поддерживаться одними и не поддерживаться другими обозревателями.

Красносельский К. К. 02.11.2003 г.

Комментарии к странице (всего 8)

Каскадные таблица стилей CSS HTML учебник справочник скачать примеры CSS

На главную страницу сайта Каскадные таблица стилей CSS HTML учебник справочник скачать примеры CSS

Справочник Веб-дизайнера: Учебник CSS стилей

Красносельский

Константин

Константинович

Мастерская

Справочник Веб-дизайнера: Учебник CSS стилей

Оглавление

Понятие CSS – каскадной таблицы стилей.

Назначение CSS

Размещение CSS

Синтаксис CSS.

Структура определения стилей.

Разделение тегов на классы, понятие селектора

Идентификаторы CSS

Контекстные селекторы

Псевдоклассы и псевдоэлементы CSS

Псевдоклассы CSS

Псевдоэлементы CSS

Каскадирование таблиц стилей

Форматирование содержимого

Свойства шрифта

Цвета и рисунки

Свойства текста

Оформление абзацев

Атрибуты вставляемых элементов

Классификационные реквизиты

Примечание