CSS свойства графических елементов.

Свойство width служит для задания ширины элемента.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { width : 50%; }

Свойство min-width определяет минимально возможную ширину элемента.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { min-width : 200px; }

Свойство max-width определяет максимально возможную ширину элемента.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { max-width : 600px; }

Свойство height служит для задания высоты элемента.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { height : 400px; }

Свойство min-height определяет минимально возможную высоту элемента.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { min-height : 200px; }

Свойство max-height определяет максимально возможную высоту элемента.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { max-height : 700px; }

Свойство border-width служит для задания толщины рамки вокруг элемента.

Значения:

thin - тонкая рамка.

medium - средняя рамка.

thick - тонкая широкая.

num - числовое значетие.

Пример:

.p { border-width : thin; }

Существует возможность задания ширины для отдельной границы рамки:
border-top-width, border-right-width, border-bottom-width, border-left-width.

Значения:

thin - тонкая рамка.

medium - средняя рамка.

thick - тонкая широкая.

num - числовое значетие.

Пример:

.p { border-bottom-width : thick; }

Свойство border-color служит для задания цвета рамки вокруг элемента.

Значения:

#num - указывается цвет рамки.

Пример:

.p { border-color : #00FF99; }

Существует возможность задания цвета для отдельной границы рамки:
border-top-color, border-right-color, border-bottom-color, border-left-color.

Значения:

#num - указывается цвет рамки.

Пример:

.p { border-bottom-color : #00FF00; }

Свойство border-style служит для задания вида рамки вокруг элемента.

Значения:

none - рамка не показана.

hidden - рамка не показана.

dotted - рамка из точек.

dashed - пунктирная рамка.

solid - сплошная рамка.

double - двойная рамка.

groove - двугранная рамка.

ridge - такая же, как groove, но светлая и темная грани расположены иначе.

inset - одна грань, наклоненная внутрь.

outset - такая же, как inset, но свет падает по-другому.

Пример:

.p { border-style : dotted; }

Существует возможность задания вида для отдельной границы рамки:
border-top-style, border-right-style, border-bottom-style, border-left-style.

Значения:

none - рамка не показана.

hidden - рамка не показана.

dotted - рамка из точек.

dashed - пунктирная рамка.

solid - сплошная рамка.

double - двойная рамка.

groove - двугранная рамка.

ridge - такая же, как groove, но светлая и темная грани расположены иначе.

inset - одна грань, наклоненная внутрь.

outset - такая же, как inset, но свет падает по-другому.

Пример:

.p { border-bottom-style : outset; }

Существует возможность задания всех свойств для отдельной границы рамки:
border-top, border-right, border-bottom, border-left.

Порядок свойств строго как в примере!

Пример:

.p { border-left : 2px dashed #009999; }

Свойство border служит для задания всех свойств для всей рамки вокруг элемента.

Порядок свойств строго как в примере!

Пример:

.p { border : 2px solid #006666; }


html-css-tegs.ru © 2011 - 2018 год.
Все права защищены