Каскадные таблицы стилей

 Синтаксис: селектор {text-decoration: line-through }

 * text-indent

 Атрибут определяет  отступ текста.

 Синтаксис: селектор {text-indent: число}

 o Пункты.

 Синтаксис: селектор {text-indent: 12pt}

 o Дюймы.

 Синтаксис: селектор {text-indent: 12in}

 o Сантиметры.

 Синтаксис: селектор {text-indent: 12cm}

 o Пиксели.

 Синтаксис: селектор {text-indent: 12px}

 Браузер Internet Explorer поддерживает отрицательные значения атрибутов полей и отступа. Эта функциональная особенность позволяет добиваться интересных и необычных эффектов, что положительно сказывается на читабельности страницы.

* text-align

 Атрибут позволяет  изменить режим выравнивания  текста.

 Синтаксис: селектор {text-align: расположение}

 o По правому краю.

 Синтаксис: селектор {text-align: right }

 o По левому краю.

 Синтаксис: селектор {text-align: left }

 o По центру.

 Синтаксис: селектор {text-align: center }

* text-transform

 Атрибут позволяет  изменить регистр шрифта текста.

 Синтаксис: селектор {text-transform: none}

 так же может принимать значения:

 o capitalize.

 o uppercase.

 o lowercase.

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

Свойства  цвета и фона

* color

* background-color

Атрибут позволяет задать цвет фона абзаца, присвоив ему шестнадцатеричное  значение, либо задать прозрачность transparent.

Синтаксис: селектор {background-color: #ffffff}

* background-image

Атрибут позволяет задать фоновый рисунок страницы, указав его URL.

Синтаксис: селектор {background-image: URL("URL");}

* background-position

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

o left

o top

o center

o right

o bottom

Синтаксис: селектор {background-position: left 45pt;}

* background-attachment

Атрибут позволяет задать будет ли фоновый рисунок страницы фиксированным, указав scroll или fixed.

Синтаксис: селектор {background-attachment: scroll;}

* background-repeat

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

o repeat - повторяется

o no-repeat - не повторяется

o repeat-x - повторяется по оси x

o repeat-y - повторяется по оси y

Синтаксис: селектор {background-repeat: no-repeat;}

* color

Атрибут позволяет задать цвет текста страницы, присвоив ему  шестнадцатеричное значение.

Синтаксис: селектор {color: #000000}

Свойства  обрамления

* margin-left

Атрибут определяет отступ от объекта слева.

Синтаксис: селектор {margin-left: auto}

o Пункты.

Синтаксис: селектор {margin-left: 12pt}

o Дюймы.

Синтаксис: селектор {margin-left: 12in}

o Сантиметры.

Синтаксис: селектор {margin-left: 12cm}

o Пиксели.

Синтаксис: селектор {margin-left: 12px}

* margin-right

Атрибут определяет отступ от объекта справа.

Синтаксис: селектор {margin-right: auto}

o Пункты.

Синтаксис: селектор {margin-right: 12pt}

o Дюймы.

Синтаксис: селектор {margin-right: 12in}

o Сантиметры.

Синтаксис: селектор {margin-right: 12cm}

o Пиксели.

Синтаксис: селектор {margin-right: 12px}

* margin-top

Атрибут определяет отступ от объекта сверху.

Синтаксис: селектор {margin-top: auto}

o Пункты.

Синтаксис: селектор {margin-top: 12pt}

o Дюймы.

Синтаксис: селектор {margin-top: 12in}

o Сантиметры.

Синтаксис: селектор {margin-top: 12cm}

o Пиксели.

Синтаксис: селектор {margin-top: 12px}

 

* margin-bottom

Атрибут определяет отступ от объекта снизу.

Синтаксис: селектор {margin-bottom: auto}

o Пункты.

Синтаксис: селектор {margin-bottom: 12pt}

o Дюймы.

Синтаксис: селектор {margin-bottom: 12in}

o Сантиметры.

Синтаксис: селектор {margin-bottom: 12cm}

o Пиксели.

Синтаксис: селектор {margin-bottom: 12px}

* padding-left

Атрибут определяет отступ от содержимого элемента до обрамления слева.

Синтаксис: селектор {padding-left: 0}

o Пункты.

Синтаксис: селектор {padding-left: 12pt}

o Дюймы.

Синтаксис: селектор {padding-left: 12in}

o Сантиметры.

Синтаксис: селектор {padding-left: 12cm}

o Пиксели.

Синтаксис: селектор {padding-left: 12px}

* padding-right

Атрибут определяет отступ от содержимого элемента до обрамления справа.

Синтаксис: селектор {padding-right: 0}

o Пункты.

Синтаксис: селектор {padding-right: 12pt}

o Дюймы.

Синтаксис: селектор {padding-right: 12in}

o Сантиметры.

Синтаксис: селектор {padding-right: 12cm}

o Пиксели.

Синтаксис: селектор {padding-right: 12px}

* padding-top

Атрибут определяет отступ от содержимого элемента до обрамления сверху.

Синтаксис: селектор {padding-top: 0}

o Пункты.

Синтаксис: селектор {padding-top: 12pt}

o Дюймы.

Синтаксис: селектор {padding-top: 12in}

o Сантиметры.

Синтаксис: селектор {padding-top: 12cm}

o Пиксели.

Синтаксис: селектор {padding-top: 12px}

* padding-bottom

Атрибут определяет отступ от содержимого элемента до обрамления снизу.

Синтаксис: селектор {padding-bottom: 0}

o Пункты.

Синтаксис: селектор {padding-bottom: 12pt}

o Дюймы.

Синтаксис: селектор {padding-bottom: 12in}

o Сантиметры.

Синтаксис: селектор {padding-bottom: 12cm}

o Пиксели.

Синтаксис: селектор {padding-bottom: 12px}

* border-style

Атрибут определяет оформление рамок вокруг объектов.

Синтаксис: селектор {border-style:тип}

o dotted.

Синтаксис: селектор {border-style: dotted}

o solid.

Синтаксис: селектор {border-style: solid}

o double.

Синтаксис: селектор {border-style: double}

o groove.

Синтаксис: селектор {border-style: groove}

o insert.

Синтаксис: селектор {border-style: insert }

o ridge.

Синтаксис: селектор {border-style: ridge}

o outset.

Синтаксис: селектор {border-style: outset}

o none.

Синтаксис: селектор {border-style: none }

* border-color

Атрибут определяет оформление цвета рамок вокруг объектов.

Синтаксис: селектор {border-color: цвет}

* border-width

Атрибут определяет оформление цвета рамок вокруг объектов.

Синтаксис: селектор {border-width: цвет}

* border-позиция

Атрибут определяет оформление вида и цвета рамок вокруг объектов выборочно с любой из сторон

Синтаксис: селектор {border-top: вид цвет}

может принимать значения:

o border-top

o border-bottom

o border-right

o border-left

Тогда, приведенные выше свойства примут вид:

для border-color:

o border-top-color

o border-bottom-color

o border-right-color

o border-left-color

для border-style:

o border-top-style

o border-bottom-style

o border-right-style

o border-left-style

для border-width:

o border-top-width

o border-bottom-width

o border-right-width

o border-left-width

Свойства  позиционирования

* top

Атрибут позволяет задать y-координату элемента в окне браузера:

Синтаксис: селектор {top: значение}

задается:

o n px

o n %

o auto

* left

Атрибут позволяет задать x-координату элемента в окне браузера:

Синтаксис: селектор {left: значение}

задается:

o n px

o n %

o auto

* width

Атрибут позволяет задать ширину элемента в окне браузера:

Синтаксис: селектор {width: значение}

задается:

o n px

o n %

o auto

* height

Атрибут позволяет задать высоту элемента в окне браузера:

Синтаксис: селектор {height: значение}

задается:

o n px

o n %

o auto

* position

Атрибут позволяет задать позицию элемента в окне браузера:

Синтаксис: селектор {position: absolute}

o absolute - когда значения left и top задаются относительно левого верхнего угла контейнера или страницы.

o relative - когда значения left и top задаются относительно текста, за которым следует элемент.

o static - когда значения left и top задаются относительностраницы статично.

* z-index

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

Синтаксис: селектор {z-index: 2}

o auto

o порядковый номер

* clear

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

Синтаксис: селектор {clear: none}

o left

o right

o both

* overflow

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

Синтаксис: селектор {overflow: none}

o none

o clip

o scroll

* float

Атрибут аналогичен атрибуту align.

Синтаксис: селектор {float: left}

Визуальные  свойства

* cursor

Синтаксис: селектор {cursor: hand}

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

 crosshair

 hand

 pointer

 move

 e-resize

 ne-resize

 nw-resize

 n-resize

 sw-resize

 se-resize

 s-resize

 w-resize

 text

 wait

 help

 auto

 default

 

* filter

Синтаксис: селектор {filter: fliph(параметры)}

Атрибут позволяет задать фильтр для текста или изображения, присвоив ему одно из значений:

o alpha

o blur

o chroma

o dropshadow

o flipv

o fliph

o glow

o gray

o invert

o light

o mask

o shadow

o wave

o xray

 

* visibility

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

Синтаксис: селектор {visibility: inherit}

o inherit

o hidden

o visible

* display

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

Синтаксис: селектор {display: none}

o inline

o list-item

o none

o block

 

 

* list-style-position

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

Синтаксис: селектор {list-style-position: outside}

o outside

o inside

* list-style-type

Атрибут определяет оформление маркеров в списках.

Синтаксис: селектор {list-style-type: тип}

o disc.

Синтаксис: селектор {list-style-type: disc}

o square.

Синтаксис: селектор {list-style-type: square}

o circle.

Синтаксис: селектор {list-style-type: circle}

o decimal.

Синтаксис: селектор {list-style-type: decimal}

o lower-roman.

Синтаксис: селектор {list-style-type:lower-roman }

o upper-roman.

Синтаксис: селектор {list-style-type: upper-roman}

o lower-alpha.

Синтаксис: селектор {list-style-type: lower-alpha}

o upper-alpha.

Синтаксис: селектор {list-style-type: upper-alpha}

o none.

Синтаксис: селектор {list-style-type: none }

 

* list-style-image

Атрибут определяет замену маркеров в списках на изображение.

Синтаксис: селектор {list-style-image: URL(file.gif ) }

Пример:

<UL STYLE="list-style-image:URL(file.gif)">

<LI> текст

<LI>текст

<LI> текст

</UL>

Прочие свойства

* page-break-after

* page-break-before

* :first-line

* :first-letter

* :after

* :before

* page-break-after

Атрибут определяет разрыв страницы перед атрибутом.

Синтаксис: селектор {page-break-after: значение}

может принимать значения:

o auto.

o right.

o left.

o always.

* page-break-before

Атрибут определяет разрыв страницы после атрибута.

Синтаксис: селектор {page-break-before: значение}

может принимать значения:

o auto.

o right.

o left.

o always.

* :first-line

Псевдоэлемент определяет стиль для первой строки блока текста

* :first-letter

Псевдоэлемент определяет стиль для первой буквы в строке.

Пример задания буквицы:

P:first-letter { font-size: 300%; font-style: italic; font-weight: bold; float: left }

* :after

Псевдоэлемент для вставки генерируемого содержимого после содержимого элемента

* :before

для вставки генерируемого  содержимого до содержимого элемента

Например, следующее правило  вставляет строку "Пояснение: " перед содержимым каждого элемента SPAN, значение атрибута class которого, равно note:

SPAN.note:before { content: "Пояснение: " }