2.5. Урок 4: Робота з текстом.

У цьому уроці ми розглянемо основні властивості CSS відповідають за форматування тексту.

text - align

text - decoration

text - indent

text - transform

letter - spacing

word - spacing

Властивість TEXT - ALIGN

Властивість вирівнювання тексту , аналогічне атрибуту ALIGN використовуваному в html . Може приймати чотири значення :

left - вирівнювання по лівому краю (значення за замовчуванням) ;

right - вирівнювання по правому краю;

center - вирівнювання по центру;

justify - вирівнювання по ширині ( по правому і лівому краях одночасно).

Тут все дуже просто , ну от наприклад :

h1 { text - align : center ;}

h2 { text - align : left ;}

h3 { text - align : right ;}

p { text - align : justify ;}

Властивість TEXT - DECORATION

Дозволяє оформляти текст певним чином. Розглянемо чотири основних значення даної властивості :

none - значення за замовчуванням. Додаткового оформлення не відбувається ;

underline - текст підкреслюється знизу ;

overline - текст надчерківается зверху ;

line - through - текст перекреслюється ;

h1 {

text - align : center ;

text - decoration : underline ;

}

h2 {

text - align : center ;

text - decoration : overline ;

}

h3 {

text - align : center ;

text - decoration : line - through ;

}

Властивість TEXT - INDENT

Це властивість знадобиться нам для створення відступів першого рядка , іншими словами абзаців. Значення краще задавати в пікселах , це універсальний спосіб .

h1 { text - align : center ;}

p {

text - indent : 40px ;

}

Властивість TEXT - TRANSFORM

C допомогою цієї властивості , можна видозмінювати текст , а саме міняти великі літери на маленькі або навпаки. Може мати такі значення:

capitalize - змінює регістр перших букв кожного слова так , щоб вони були заголовними . Наприклад: " створіть сайт зараз " стане " Створіть Сайт Сейчас".

Частенько це властивість використовується при написанні рекламних текстів , це більше привертає уваги!

uppercase - робить з усіх букв заголовні . Наприклад: " текст у css " стане " ТЕКСТ У CSS "

lowercase - робить з усіх букв маленькі . Наприклад: " TRANSFORM " cтанет " transform " .

none - не виробляє зміни регістру ; це значення використовується за умовчанням.

Властивість WORD - SPACING

Дозволяє змінювати відстань між словами. Значення також краще задавати в пікселах .

h1 { word - spacing : 20px ;}

p { word - spacing : 10px ;}

2.6. Урок 6:Робота з списками.

У цьому уроці ми розглянемо основні властивості CSS , що відповідають за зовнішній вигляд списків. Їх зовсім трохи , так що урок буде коротким , але корисним!

list - style - type

list - style - position

list - style - image

list - style

Запам'ятайте: Всі ці властивості універсальні, тобто можуть застосовуватися як до впорядкованих списками , так і до неврегульованим . У цьому то і прикол CSS, що можна з неупорядкованого списку , зробити впорядкований і навпаки :)

Властивість LIST - STYLE- TYPE

Дозволяє визначати вид маркера елементів списку . Це можуть бути цифри , букви , квадратики , кружечки і ін Нижче наведені основні значення цієї властивості :

disk - маркер у вигляді закрашеного кола ;

circle - маркер у вигляді незафарбовані кола ;

square - маркер у вигляді закрашеного квадрата ;

decimal - звичайні десяткові числа , наприклад 1,2,3,4,5 і т. д.;upper - roman - великі римські цифри , типу I , II , III , IV , V і т.д. ;

lower - roman - маленькі римські цифри типу i , ii , iii , iv , v і т.д.

upper - alpha - великі літери A , B , C , D , E і так далі;

lower - alpha - малі літери типу a , b , c , d , e і т.д.;

none - маркер списку відсутнє ;

Переробимо , для приколу , впорядкований список в невпорядкований , тобто елементу OL ( впорядкований список ) напишемо square , а елементу UL ( невпорядкований ) тип upper - roman ;

ol { list - style - type : square ;}

ul { list - style - type : upper - roman ;}

Властивість LIST - STYLE- IMAGE

Це напевно найцікавіше властивість у списках. Воно дозволяє поставити замість маркера будь-яке зображення . Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення . У деяких застарілих версіях браузерів , працює неккоректно .

ul { list - style - image : url ( galka.gif ) ;}

Властивість LIST - STYLE- IMAGE

Це напевно найцікавіше властивість у списках. Воно дозволяє поставити замість маркера будь-яке зображення . Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення . У деяких застарілих версіях браузерів , працює неккоректно .

ul { list - style - image : url ( galka.gif ) ;}

Не забувайте , що url ( galka.gif ) означає що зображення galka.gif лежить в тій же папці , де і css -файл. Якщо у вас зображення не там , відповідно і шлях вказуйте інший!

Скорочена форма LIST - STYLE

Перераховані вище властивості можна записати більш компактно . Для цього існує скорочений варіант list - style ;

Такий варіант з трьох рядків :

ul {

list - style - type : square ;

list - style - position : inside ;

list - style - image : url ( galka.gif ) ;

}

Раціональніше замінити таким :

ul { list - style : square inside url ( galka.gif ) }

Властивості вказуються через пробіл і послідовність у даному випадку ролі не грає.