4.2.4 Властивості css

Властивості Font

1) font-family

Опис: ця властивість визначає шрифт, що використовується елементом.

Приклад: font-family:Arial Black URL('arialblack.ttf')

2) font-style. Опис: стиль елемента. Курсивний або звичайний.

Приклад: font-style:italic

3) font-variant. Опис: варіанти відображення шрифту. Браузер Netscape не підтримує цю властивість.

Приклад: font-variant:small-caps

4) font-weight. Опис: виділення (жирність) елемента.

Приклад: font-weight:bold

5) font-size. Опис: розмір шрифту.

Приклад: font-size:30pt

6) font. Опис: узагальнює перераховані вище властивості.

Приклад: font: italic bolder Arial 12pt

Властивості Text

1) word-spacing. Опис: відстань між словами.

Приклад: word-spacing:0.4em

2) text-decoration. Опис: "прикраса" тексту.

Приклад: text-decoration:line-through

3) letter-spacing. Опис: відстань між літерами. Не працює в Netscape.

Приклад: letter-spacing:100

4) vertical-align. Опис: позиціонування елементів стосовно інших елементів, що стоять в одному ряді. Не працює в Netscape.

Приклад: vertical-align:top-text

5) text-transform. Опис: зміна тексту. Не працює в Netscape.

Приклад: text-transform:Capitalize

6) text-align. Опис: положення тексту.

Приклад: text-align:right

7) text-indent. Опис: відступ.

Приклад: text-indent:30 em

8) line-height. Опис: відступ зверху.

Приклад: line-height:100%

Властивості Color і Background

1) color. Опис: колір.

Приклад: color:#f00000

2) backgroung-color. Опис: колір фону елемента.

Приклад: background-color:#f00000

3) background-image. Опис: фонове зображення.

Приклад: background-image:URL(cool.gif)

4) background-repeat. Опис: повторення фонового зображення.

Приклад: background-repeat:no-repeat

5) background-attachment.

Опис: можливість прокручування фонового зображення.

Приклад: background-attachment:fixed

6) background-position.

Опис: положення фонового зображення (працює з background-repeat рівним repeat-x, repeat-y або no-repeat) .

Приклад: background-position:50%0%

7) background. Опис: узагальнює перераховані вище властивості.

Приклад: background: no-repeat black fixed 50%0%

Властивості Box

1) margin-top. Опис: визначає відступ зверху.

Приклад: margin-top:100

2) margin-right. Опис: визначає відступ праворуч.

Приклад: margin-right:100%

3) margin-bottom. Опис: визначає відступ знизу.

Приклад: margin-bottom:100em

4) margin-left. Опис: визначає відступ ліворуч.

Приклад: margin-left:100pt

5) margin. Опис: узагальнює всі перераховані вище властивості.

Приклад: background:100pt

6) padding-top. Опис: відступ від верхньої межі.

Приклад: padding-top:100pt

7) padding-right

Опис: відступ від правої межі.

Приклад: padding-right:100%

8) padding-bottom. Опис: відступ від нижньої межі.

Приклад: padding-bottom:100em

9) padding-left. Опис: відступ від лівої межі.

Приклад: padding-top:100

10) padding.

Опис: узагальнює перераховані вище властивості. Можна задати кілька значень одночасно (до чотирьох) для різних сторін. Якщо встановлено одне значення, то задається єдиний відступ для всіх сторін, якщо два, то задаються різні відступи для суміжних сторін, а якщо чотири, то задаються індивідуальні відступи для всіх сторін.

Приклад: padding:100px

11) border-top-width. Опис: товщина верхньої межі.

Приклад: border-top-width:100pt

12) border-right-width. Опис: товщина правої межі.

Приклад: border-right-width:thick

13) border-bottom-width. Опис: товщина нижньої межі.

Приклад: border-bottom-width:100em

14) border-left-width. Опис: товщина лівої межі.

Приклад: border-left-width:medium

15) border-width.

Опис: товщина меж. Можна задати кілька значень одночасно (до чотирьох) для різних меж.

Приклад: border-width: 15pt

16) border-color. Опис: Колір межі. Не працює в Netscape.

Приклад: border-color:green

17) border-style.

Опис: стиль меж. Можна задати кілька значень одночасно (до чотирьох) для різних меж.

Приклад: border-style: dotted groove

18) border-top.

Опис: узагальнює перераховані вище властивості для верхньої межі.

Приклад: border-top: 100em red groove

19) border-right.

Опис: узагальнює перераховані вище властивості для правої межі.

Приклад: border-right: 5pt magenta solid

20) border-left.

Опис: узагальнює перераховані вище властивості для лівої межі.

Приклад: border-left: 15pc coral inset

21) border-bottom.

Опис: узагальнює перераховані вище властивості для нижньої межі.

Приклад: border-bottom: 30 orange outset

22) border. Опис: узагальнює перераховані вище властивості.

Приклад: border: thik black double

23) width. Опис: ширина елемента.

Приклад: width:10%

24) height. Опис: висота елемента.

Приклад: height:100pt

25) float. Опис: розташування елемента.

Приклад: float:right

26) clear. Опис: розташування інших елементів навколо даного.

Приклад: clear:both

27) display. Опис: визначає, як відображатиметься елемент.

Приклад: display:none

28) white-space.

Опис: визначає, як відображатимуться пробіли між елементами.

Приклад: white-space:nowrap

29) list-style-type.

Опис: визначає вид list-item маркера, якщо значення list-style-image дорівнює none або не зазначене.

Приклад: list-style-type: lower-alpha

30) list-style-image.

Опис: задає вид list-item маркера у вигляді картинки.

Приклад: list-style-image:URL(cool.gif)

31) list-style-position.

Опис: визначає положення маркера залежно від list-item.

Приклад: list-style-position:inside

32) list-style. Опис: узагальнює перераховані вище властивості.

Приклад: list-style:inside