CSS (cascade style sheets – каскадни набори от стилове) ви предоставя лесен и удобен начин да форматирате HTML или XML документи. Първоначално е създаден за да даде усъвършенстван контрол над HTML документа, в последстие намира приложение и при XML документите. CSS позволява да дефинирате вида на таговете, така че да не се налага повторението на множество код за форматиране. Например вместо да пишете всеки път някакъв текст вие можете да определите текста между тагове и винаги да е червен. По-хубавото е, че CSS предоставя повече контрол над HTML документа, отколкото самия HTML. Вие можете да дефинирате цвета на хипервръзките, когато мишката е над тях и когато не е; освен това можете да определите техния шрифт, дали да бъдат подчертани и т.н. Можете също така да позиционирате абсолютно точно елементите, като при това те биха могли да се застъпват! CSS предоставя и контрол над самия браузър – например е възможно да се променят цветовете на лентите зая превъртане (scrollbar). Разбира се, всички тези възможности се определят от самия браузър и доколко той поддържа спецификацията CSS. Но ако дадена стилова дефиниция не се поддържа от браузъра тя просто се игнорира. Така, че можете да определите подходящ цвят на лентите за превъртане без да се притеснявате за по-старите браузъри – те ще игнорират тази дефиниция без да предизвикват грешка. Но всъщност най-добре е да се запознаете със CSS за да видите сами възможностите, които ви разкрива.
Предимствата на CSS
1. Разделяне на съдържанието от форматирането. Това означава, че дефинирате вида на всеки един таг на едно място. Така правите HTML документите по-малки, тъй като избягвате излишен HTML код за форматиране, а освен това става изключително лесно да промените дизайна на сайта си – само трябва да смените стиловата дефиниция
2. Дава много повече контрол над форматирането, отколкото HTML.
Определяне на вида на един таг
Практически всеки таг поддържа атрибута STYLE, който от своя страна поддържа множество свойства. Когато използвате този атрибут, като стойност вписвате стойствата, разделени с точка и запетая (, самите свойства разделяте от техните стойности с две точки (. Например можете да напишете:
Код:
Някакъв текст>/DIV>
Така текста между таговете
ище бъда с бели букви на черен фон. Както вече споменахме, основното предимство на CSS е отделянето на форматирането от съдържанието. Показания по-горе метод е подходящ, ако искате да дефинирате вида на един-единствен конкретен елемент. Това най-често се използва при позициониране, тъй като трябва да определите координати на всеки отделен елемент. Друг начин за употр*бибипам* на CSS е предефинирането на тагове. Това се осъществява в областта на документа. Всичко което трябва да направите е да добавите таг
След това на всеки таг, безотносително какъв е той, можете да дадете стойности standart, inverse или attention на атрибута CLASS и ще получите съответното форматиране на тага. Класовете дават още една възможност – дефиниране на клас, специфичен за тага. Това означава че можете да дадете една и съща стойност на атрибута CLASS за различни тагове и ще бъде приложено специфично форматиране за всеки таг. Това става като преди точката в дефиницията на класа, сложите името на тага, за който се отнася това форматиране
Псевдо-класове
Освен класове, същестуват така наречените псевдо-класове. Наричат се така, защото това са предварително дефинирани класове на тага . Това са съотвено link, active, hover и visited. по подразбиране е от клас link. Когато курсора е над хипервръзката, получава клас hover. Ако хипервръзката вече е посещавана, то класа е visited, а ако в момента е активна – active. Това позволява създаването на красиви хипервръзки. Псевдокласовете се отделят от тага с две точки (. Отново, тези псевдокласове се използват само за тага . Ето един пример:
Код:
Псевдо-елементи
Има една основна разлика между псевдо-класа и псевдо-елемнта. Това е, че псевдо-класа представлява един елемент в дадено негово състояние – т.е. целия елемент но само за част от времето. Псевдо-елемента пък представя само част от елемента, но през цялото време. Такива псевдо-елементи са първия ред от елемент и неговата първа буква. Това може да се използва за някои специални ефекти. Псевдо-елементите са съответно first-line (първи ред) и first-letter (първа буква). Те могат да се прилагат към тагове като
и
. Ето един пример:Код:
Още за елементите
Има още една възможност на CSS която си струва да бъде разгледана. Това е дефинирането на стила на таг, който е дъщерен на даден таг. Т.е. можете да имате стилова дефиниция на тага когато е дъщерен на и този стил ще се прилага винаги и единствено когато имате двойката тагове . По този начин можете да определите различен вид на един и същи таг в зависимост от предхождащите го тагове. Това се осъществява изключително лесно – просто слагате двата тага един след друг, разделени с интервал, в реда в който трябва да се срещат в документа. В нашия пример това е:
Код:
Стилови дефиниции
От тук нататък ще разглеждаме самите свойства, които можете да определяте в CSS. Важно е да се отбележи, че CSS е чувствителен към малки и главни букви.
Цветове и фонови изображения
Едно от най-важните неща в уеб-дизайна е именно подбора на цветове. Цветовете могат да бъдат дефинирани точно както и в HTML – със шеснайсетичен код или с някой от 16-те основни цвята: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White и Yellow.
Свойството, определящо цвета на текста е color.Свойства на фона
Съществуват множество свойства, определящи изгледа на фона. Те се отнасят както за фона на целия документ, така и на отделни елементи, най-често на таблица. Фонов цвят обаче можете да определите за всеки един таг
– background-color определя цвета на фона
– background-image определя изображение, което да се използва за фон. Обърнете внимание, че се определя адреса на изображения под формата url(адрес на изображението)
Например:
Код:
BODY {background-image: url(styled.gif)}
– background-repeat определя как да се процедира, когато изображението, използвано за фон, е по-малко от самия елемент. Това най-често се случва при елемента BODY. Обикновено изображението се повтаря необходимия брой пъти във вертикална и хоризонтална посока за да запълни цялото пространство. Възможни стойности на това свойство са repeat (по подразбиране), no-repeat (изображението се слага само веднъж), repeat-x (изображението се размножава хоризонтално, но не и вертикално) или repeat-y (изображението се размножава само вертикално)
– background-attachment определя дали фона да се превърта заедно със страницата (стойност scroll, която е по подразбиране) или да стои фиксирано на екрана, а само текста да се превърта (стойност fixed)
– background-position определя началната позиция на фона (т.е. от къде започва) спрямо горния ляв ъгъл на елемента. Определят се две стойности, разделени с интервал, съответно за разтояние по хоризонтала и по вертикала. Т.е.
Код:
BODY {background-position: 20px 30px}
означава, че горния ляв ъгъл на изображението ще се намира на 20 пиксела по-наляво и 30 по-надолу от горния ляв ъгъл на документа.
Свойства на текста
– font-family определя шрифта, който да бъде използван. Можете да определите неограничено количество шрифтове, разделяйки ги със запетая. Ако първия шрифт не е наличен на машината на потребителя, то се използва втория и т.н.
Пример:P {font-family: Times, Arial}
– font-size определя размера на текста. Например:
P {font-size: 36pt}
– font-style определя дали текста да бъде курсивен (italic) или не (normal)
– font-weight определя дали текста да бъде удебелен (bold) или не (normal). CSS обаче поддържа множество степени на удебеляване. Можете да определите стойности 100, 200, 300, 400, 500, 600, 700, 800 или 900, като 900 е най-удебелено, 700 съответсва на bold, а 400 на normal.
– line-height определя височината на един ред текст. За стойност се определя число. Височината на реда се получава като се умножи размера на буквите по определеното в line-height число. Така можете да контролирате разтоянието между редовете.
– text-align определя подравняването на текста. Възможни стойности са left (ляво), right (дясно), center (центриране на текста) или justify (двустранно подравняване)
– text-decoration определя дали текста да е подчертан (underline), зачертан (line-through) с линия отгоре (overline). Стойността по подразбиране е none, т.е. без декорация
– text-ident има за стойност число или процент и определя колко по-навътре трябва да започва първия ред на текста спрямо останалите. Приложимо е за тагове като
и
– text-transform е една интересна възможност на CSS. Възможни стойности са none – текста не се трансформира, lowercase – текста се извежда само с малки букви, uppercase – текста се извежда с главни букви или capitalize – първата буква на всяка дума се извежда главна.
– letter-spacing определя допълнителното разтоянието между буквите в една дума
– word-spacing определя допълнителното разтояние между отделните думи
Контрол над списъците
В HTML същестуват два типа списъци – номерираните, дефинирани от тага
и неномерираните, дефинирани от тага
. CSS ви позволява да определите как да изглеждат тези списъци
– list-style-type определя символа, използван за отделните елементи в списъка. За неномериран списък възможни стойности са dics (запълнен кръг), circle (празен кръг) и square (квадрат). За номерирания списък стойностите са decimal (десетични числа), lower-roman (малки римски цифри), upper-roman (главни римски цифри), lower-alpha (малки букви) и upper-alpha (главни букви)
– list-style-position е подобно на text-ident. То определя дали всички редове на даден елемент от списъка трябва да са по-навътре (outside) или само първия, а останалите да започват там, където е символа за елемент от списък (inside)
– list-style-image е приложимо само за неномерирани списъци и определя изображение, което да се използва вместо символ за елемент от списък. За стойност се определя адрес на изображения под формата на url(адрес на изображение)
Позициониране
CSS 2 поддържа няколко типа позициониране на елементите: абсолютно, относително и фиксирано. Абсолючно позициониране означава, че за всеки елемент (или таг) можете да определите точна позиция, на която да бъде разположен. Това ви дава невероятен контрол над вида на вашия документ. Още повече че можете да сложите елементите така, че те да се застъпват. Относителното позициониране ви дава възможността да определите позицията на елемента спрямо предишния. Тази възможност на CSS е едно от нещата, които често се използват в комбинация с JavaScript за създаване на динамични страници – посредством скрипт вие можете да изменяте позицията на даден елемент. За да позиционирате елемента трябва първо да определите свойството position на absolute (абсолютно), relative (относителено) или fixed (фиксирано), а след това да определите стойности за свойствата top и left. top определя разтоянието по вертикала (в пиксели) от горния край на документа (или на предишния елемент ако се използва относително позициониране), а left – разтоянието по хоризонтала от левия край на документа (или предишния елемент). При фиксираното позициониране елемента е фиксиран в дадена позиция и остава на нея дори когато страницата се превърта.
Цветовете на лентите за превъртане (scrollbar)
Internet Explorer поддържа промяна на цвета на scrollbar-а. Това става чрез определянето на редица свойства на елемента BODY, а именно:
scrollbar-face-color
scrollbar-arrow-color
scrollbar-track-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-darkshadow-colorСмяна на курсора
Една изключително интересна възможност на CSS е определянето на курсор за всеки отделен елемтент. Можете да използвате за стойност на свойството cursor системните курсори, които съгласно CSS спецификацията са crosshair, pointer, move, text, wait, help и най-различни вариации на стрелки за оразмеряване, които едва ли ще са ви необходими в една уеб-страница (Internet Explorer поддържа такива курсори като hand, no-drop, not-allowed и progress), или да използвате собсвен курсор, определяйки стойност url(адрес на файла, съдържащ курсора).
Това е най-важното, което трябва да знаете за CSS 2. Това са най-често използваните свойства. Само опита може да ви покаже колко полезно е използването ин.Имайте предвид обаче че различните браузъри поддържат в различна степен CSS, а някои добавят добствени стиловеи дефиниции. Най-добре е да използвате CSS редактор, който може да филтрира дефинициите съгласно спецификациите CSS и CSS 2, както и спрямо поддържаните от даден браузър стилови дефиниции. Такъв редактор е TopStyle – освен всичко останало, той показва кое свойство от кои браузъри се поддържа.
Освен в HTML каскадните набори от стилове намират своето приложение и в XML. Чрез тях е възможно да се трансформира XML документ в добре изглеждаща уеб-страница като се определя вида на всеки един таг, съдържащ се в XML документа. Трябва да отбележа, че CSS е изключитено мощна, макар и вече малко остаряла технологиия. Комбинирането и с JavaScript може да направи наистина впечатляващи ефекти.
Автор: Максим Крижановски