Каскадни набори от стилове (CSS)

1. Каскадни набори от стилове (Cascading Style Sheets, CSS)

1. Същност

а) стил (Style) – нарича се още правило (rule) – набор от свойства, които дефинират и контролират външния вид на даден елемент. Всеки стил има име, по което браузърите определят как да изобразят елементаб) набор от стилове (Style Sheets) – група стилове;
в) каскадни (Cascading) – отнасят се до подредената последователност и приоритет на стиловете. Всеки следващ добавен стил в една страница предефинира предходния.

2. Предназначение

Контролират форматирането, външния вид и разположението на елементите в уеб страниците. CSS се поддържа от браузъри с версии 4.0 и по-нови. Кодът за CSS стиловете се поставя в тага head на HTML страницата.

3. Видове

а) вътрешен – дефинира се и се използва само в текущия документ (когато се налага да се форматира само една страница). Dreamweaver го създава автоматично при форматиране на текста или самата страница.
б) външен – текстов файл, съдържащ форматиращи атрибути (само CSS код). Към него трябва да има препратка от всички страници, които трябва да имат този външен вид. Използва се, когато искате сайтът да има еднотипен външен вид, независимо коя страница е отворена.

4. Предимства на външните CSS

а) стиловете могат да бъдат използвани в много документи;
б) при промяна на някой атрибут в стил, всички контролирани от него елементи се променят автоматично; в) тъй като форматиращият код се намира в един общ документ, то:
– не се налага ползващите го страници постоянно и поотделно да го зареждат;
– използва се по-малко код и страниците се свалят по-бързо;
– добавянето на съдържание към уеб сайтовете е много по-бързо и лесно;
– по-опростено актуализиране и поддържане на сайтовете.

5. Типове набори, които могат да се създават в Dreamweaver

а) Class – позволява създаването на набор от стилове, които не са обвързани с определени елементи. Един клас може да се прилага към много елементи в документа или към много документи. Класовете се разпознават по точката в началото на името им;
б) Tag – позволява съществуващ HTML таг (например заглавие или хипервръзка) да бъде предефиниран със стила;
в) Advanced – позволява:
1) създаването на контекстуални селектори – стилове, които се използват за определена комбинация (положението, при което даден таг се намира в друг) от тагове;
2) даването на идентификатори (ID), които могат да бъдат използвани само 1 път на страница като начин за дефиниране или уникално идентифициране на определен елемент. ID обикновено се използват в скриптове и се познават по знака #.

2. Създаване на вътрешни стилове

1. Създаване на вътрешен стил за цялата страница

Modify/Page Properties, категория Appearance
а) определяне на фонов цвят – Background Color
б) смяна на шрифта – Page Font Комбинациите от шрифтове в менюто Page Font указват на браузъра как да изобразява текста. Ако първият от групата не бъде намерен, браузърът се опитва да използва втория. Ако и той не е наличен – използва третия. Ако нито един от изписаните не бъде намерен браузърът използва собствения си подразбиращ се.
в) промяна на размера на шрифта – Size
г) избор на цвят на шрифта – Text Color

2. Създаване на вътрешен стил за селектиран текст – панел Properties

а) смяна на шрифта – меню Font
Комбинацията от шрифтове може да се промени чрез избиране на Edit Font List (или Text/Font/Edit Font List) – отваря се диалогов прозорец, в който могат да се правят следните промени върху наборите от шрифтове:
– добавяне на шрифт към съществуваща комбинация
1) селектирайте комбинация от списъка Font List
2) изберете кой шрифт ще добавяте от списъка Available Fonts, бутон <<
– премахване на шрифт от съществуваща комбинация
1) селектирайте комбинация от списъка Font List
2) изберете кой шрифт ще премахвате – Chosen fonts, бутон >>
– създаване на нова комбинация
1) селектирайте (Add fonts in list below) от списъка Font List, списъка Available Fonts, бутон <<
2) за всяка следваща комбинация: натиснете бутон (+) и повторете 1)
– премахване на комбинация
1) селектирайте комбинация от списъка Font List
2) натиснете бутон (–)
– добавяне на шрифт, който не е инсталиран на системата – въвеждате името му в текстовото поле под списъка Available Fonts, бутон <<
За да махнете настройките за шрифта:
1) селектирайте текста, използващ дадения шрифт
2) панел Properties, меню Font, Default Font или Text/Font/Default
б) промяна на размера на шрифт – меню Size
За да махнете настройките за размера на шрифта:
1) селектирайте текста, използващ дадения размер
2) панел Properties, меню Style – None или Text/CSS Styles/None
в) избор на цвят на шрифт – поле Text Color
Панел Files, страница Assets или Window/Assets, икона Colors – показва активите на цветовете
◦ Site – вижда се кои цветове са били използвани в текущия активен сайт
Бутон Add to favorites – записва избрания цвят като предиалогов прозорец очитан
Бутон Refresh Site list – показва цветове, които са дефинирани, но не ги виждате
◦ Favorites – показва предиалогов прозорец очитаните цветове (които се използват в целия сайт)
Когато за първи път на страница избирате атрибут или комбинация от атрибути, Dreamweaver създава нов стил, който се появява в меню Style на панел Properties. Тези стилове получават автоматично генерирани стандартни имена Style1, Style2 и т.н. След това активния стил може да бъде преименуван чрез Rename от меню Style.

3. Работа с класове

1. Създаване на клас (правило), който е вътрешен стил

1) панел CSS, панел CSS Style (съдържа списък със стиловете, които са били създадени от програмата при дефиниране на свойствата на страниците), бутон All
2) кликнете върху иконата New CSS Rule (или Text/CSS Style/New)
3) отваря се диалогов прозорец New CSS Rule, изберете ○ Class
4) в текстово поле Name въведете име за собствен стил (поставете точка пред него). Dreamweaver автоматично дава на стиловете имена .unnamed1, unnamed2,…
5) изберете радиобутон This document only – показва, че се създава нов вътрешен стил; OK
6) отваря се диалогов прозорец CSS Rule Definition for .име_на_стил – в необходимите категории направете желаните настройки; OK
Новосъздаденият клас се появява в меню Style на панел Properties и в списъка със стиловете на панел CSS Styles. В долната му част има списък със свойства на селектирано правило – имената им са в лявата колона, а стойностите им – в дясната. Има 3 режима за разглеждане на списъка със свойства:
(1) – Show Only Set Properties – по подразбиране – виждат се само свойствата, за които има дефинирани стойности
(2) – Show List View – показва целия списък с атрибути
(3) – Show Category View – показва атрибутите, организирани в категориите от диалогов прозорец CSS Rule Definition

2. Създаване на клас, който е външен стил

1) панел CSS Styles, икона New CSS Rule
2) радуобутон Class, Name – въведете име, изберете радиобутон (New Style Sheet File), OK
3) въведете име за файла с набора (изберете разширение .css), Save
4) в диалогов прозорец CSS Rule Definition for .име in име.css – въведете атрибути за набора; OK

3. Редактиране на правило, избрано в панел Styles

а) промяна на стойностите на свойства – директно от списъка
б) добавяне на ново свойство и стойност
– в режим (1) – кликате върху препратката Add и от появилото се меню изберете свойството
– в режим (2) или (3) – стойност се добавя директно чрез щракване в полето на свойството в) изтриване на свойство – маркирате го и кликате върху иконата Delete CSS property г) използване на диалогов прозорец за редактиране на правила – бутон Edit Style – отваря се диалогов прозорец CSS Rule Definition

4. Прилагане на клас (стил)

1) селектирайте текста
2) панел Properties, меню Style–избирамежеланияклас

5. Изтриване на клас от вградения набор от стилове

1н.) селектирате го в панел CSS Styles и щр. Върху иконата Delete CSS Rule – стилът изчезва от набора, но обръщенията към него, които се намират в кода, ще останат в документа.
2н.) функция Find and Replace–премахваиобръщениятакъмстила

4. Преобразуване на вътрешни стилове във външни

1) Отворете документ, съдържащ вътрешен стил
2) File/Export/CSS Styles
3) Отваря се диалогов прозорец Export Styles As CSS File – в поле Save As въведете име за външния стил
4) Запишете файла (автоматично се добавя разширение css към името му) Създава се външен набор от стилове, който съдържа всички вътрешни стилове, намиращи се досега в документа – включително тези, които дефинират свойствата на страницата и създадените от вас класове (ако има такива). Ако към документа има прикачен друг външен набор, неговите стилове няма да бъдат експортирани в новия.
Ако желаете да използвате новия набор и за документа, от който сте го експортирали трябва първо да премахнете вътрешния набор (в панел CSS Styles селектирайте самия набор и щракнете върху иконата Delete Embedded Style Sheet).

5. Свързване към външни набори

1. Използване на примерни набори от стилове

1) Отворете неформатиран документ
2) В панел CSS Styles щракнете върху иконата Attach Style Sheet
3) Отваря се диалогов прозорец Attach External Style Sheet
– когато набори от стилове са прикачени към документ, те могат да бъдат свързани или вградени (импортирани)
Радиобутон Link – един набор се използва за форматиране на много страници
Радиобутон Import – един набор се използва за форматиране само на един документ Изберете Link.
– щракнете върху препратката sample style sheet, за да намерите примерен набор; OK
4) OK- наборът е добавен към панел CSS Styles и автоматично се копира в папка с име CSS в текущия сайт. Ако такава не съществува Dreamweaver ще я създаде. Атрибутите на набора автоматично се прилагат в отворения файл.

2. Използване на собствен външен набор от стилове

1) В панел CSS Styles щракнете върху иконата Attach Style Sheet
2) Отваря се диалогов прозорец Attach External Style Sheet – Радиобутон Link
3) Бутон Browse–намеретежеланиявашсобственвъншенфайл

6. Създаване на външни стилове за предефиниране на HTML тагове

Те се прилагат автоматично върху съдържанието, което се намира в тях – във всички документи, върху които се прилага наборът от стилове.

1. Създаване на стил за конкретен таг

1) Поставете курсора в текста, използващ тага или селектирайте тага в Tag selector
2) В панел CSS Styles, икона New CSS Rule
3) Отваря се диалогов прозорец New CSS Rule. Изберете радиобутон Tag
4) Текстовото поле Tag трябва да съдържа избрания таг, без < >
5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK
6) Отваря се диалогов прозорец CSS Rule Definition …. in …..
В необходимите категории направете желаните настройки; OK
Файлът с външния набор от стилове се отваря автоматично в нова подстраница на прозореца Document. CSS файловете се изобразяват в изглед Code. Ако правите някакви промени в него, задължително запишете CSS файла.

2. Създаване на стил за форматиране на текст с тагове за параграф

1) Поставете курсора в желания параграф – лента Tag selector показва HTML тага p за дефиниране на параграф 2) В панел CSS Styles, икона New CSS Rule
3) Отваря се диалогов прозорец New CSS Rule. Изберете радиобутон Tag
4) Текстовото поле Tag трябва да съдържа p. Ако не е така, изберете го.
5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK
6) Отваря се диалогов прозорец CSS Rule Definition …. in …..
В необходимите категории направете желаните настройки; OK

3. Създаване на стил за предефиниране начина на форматиране на списък

1) Поставете курсора в 1-я ред на списъка. В Tag selector щракнете върху ul, ol (това са HTML тагове за целия списък; li – отнася се само за отделни позиции в списъка)
2) В панел CSS Styles, икона New CSS Rule
3) Отваря се диалогов прозорец New CSS Rule, изберете радиобутон Tag
4) Текстово поле Tag трябва да съдържа ol. Ако не е така – изберете го.
5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK
6) Отваря се диалогов прозорец CSS Rule Definition …. in ….., категория Type – направете желаните настройки; OK

7. Създаване на външни стилове за комбинация от няколко тага

Задача: Форматирайте по различни начини текстови параграфи, в които е използвано подравняване.

1. Създаване на стил за конкретен таг div