WEB-нотатки - записник он-лайн

Короткі записи css властивостей.

Font

можна використовувати замість

Code

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;

наступний запис:

Code

font: 1em/1.5em bold italic serif;

При використанні короткого запису для шрифтів необхідним є присутність в ній font-size і font-family. Якщо ж ви їх не зробите, то все інше в цьому записі буде повністю проігноровано.

Також слід пам'ятати, що якщо ви не вказуєте значення для властивостей font-weight, font-style або font-varient, то їх значення будуть автоматично встановлені за замовчуванням, тобто - normal.

Background

можна використовувати замість

Code

background-color: #fff;
background-image: url (image.gif);
background-repeat: no-repeat;
background-position: left top;

наступний запис:

Code

background: url (image.gif) no-repeat left top #fff;

У короткому запису для фону можна виключати будь-яку властивість, опис якої нам не потрібен. Якщо не вказується background-position для фонового зображення, то воно автоматично буде притискати в лівий верхній кут, аналогічно якщо б ви вказали background-position: left top;.

Також корисно знати, що для background-position можна вказувати точне положення щодо меж блоку для якого прописується фонове зображення.

Замість

Code

left top;

ми можемо прописати

Code

10px 20px;

Або будь-яке інше значення в доступних одиницях виміру.

Списки

можна використовувати замість

Code

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url (image.gif);

наступний запис:

Code

list-style: disc outside url (image.gif);

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

Margin і padding

Так як правила написання коротких записів для них однакові, я буду як приклад використовувати margin .

можна використовувати замість

Code

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

наступний запис:

Code

margin: 2px 1px 3px 4px (top, right, bottom, left);

Border

можна використовувати замість

Code

border-width: 1px;
border-color: black;
border-style: solid;

наступний запис:

Code

border: 1px black solid;

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

Code

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

наступний запис:

Code

border-right: 1px black solid;

І в кінці хотілося б навести маленький приклад використання властивості border

Щоб зробити такі кордони потрібно прописати для блоку:

Code

border: 8px solid # 336;
border-left: 10px solid # ccf;
border-top: 10px solid # ccf

ну або використовуючи короткий запис ось так:

Code

border: 8px solid # 336;
border-width: 10px 8px 8px 10px
border-color: # ccf # 336 # 336 # ccf

Категорія: CSS · Додав: mr_smith (17.03.2010)

Переглядів: 885 · Рейтинг: 5.0/2

Всього коментарів: 0

Додавати коментарі можуть лише зареєстровані користувачі.
[ Реєстрація | Вхід ]

Головна
Реєстрація
Вхід

Пошук

Категорії

HTML

PHP

JavaScript

CSS

HTML5

CSS3

jQuery

uCoz

Друзі сайту

Червоне - зробимо кращим

SMITH