Помощ - Търсене - Потребители - Събития
Пълна версия: ВЪВЕДЕНИЕ В CSS
GGbit.info > Hi-Tech > Web разработка > Полезни статии
ALKAIOS
CSS (cascade style sheets - каскадни набори от стилове) ви предоставя лесен и удобен начин да форматирате HTML или XML документи. Първоначално е създаден за да даде усъвършенстван контрол над HTML документа, в последстие намира приложение и при XML документите. CSS позволява да дефинирате вида на таговете, така че да не се налага повторението на множество код за форматиране. Например вместо да пишете всеки път <H3><FONT COLOR="red">някакъв текст</FONT></H3> вие можете да определите текста между тагове <H3> и </H3> винаги да е червен. По-хубавото е, че CSS предоставя повече контрол над HTML документа, отколкото самия HTML. Вие можете да дефинирате цвета на хипервръзките, когато мишката е над тях и когато не е; освен това можете да определите техния шрифт, дали да бъдат подчертани и т.н. Можете също така да позиционирате абсолютно точно елементите, като при това те биха могли да се застъпват! CSS предоставя и контрол над самия браузър - например е възможно да се променят цветовете на лентите зая превъртане (scrollbar). Разбира се, всички тези възможности се определят от самия браузър и доколко той поддържа спецификацията CSS. Но ако дадена стилова дефиниция не се поддържа от браузъра тя просто се игнорира. Така, че можете да определите подходящ цвят на лентите за превъртане без да се притеснявате за по-старите браузъри - те ще игнорират тази дефиниция без да предизвикват грешка. Но всъщност най-добре е да се запознаете със CSS за да видите сами възможностите, които ви разкрива.

Предимствата на CSS

1. Разделяне на съдържанието от форматирането. Това означава, че дефинирате вида на всеки един таг на едно място. Така правите HTML документите по-малки, тъй като избягвате излишен HTML код за форматиране, а освен това става изключително лесно да промените дизайна на сайта си - само трябва да смените стиловата дефиниция
2. Дава много повече контрол над форматирането, отколкото HTML.

Определяне на вида на един таг

Практически всеки таг поддържа атрибута STYLE, който от своя страна поддържа множество свойства. Когато използвате този атрибут, като стойност вписвате стойствата, разделени с точка и запетая (, самите свойства разделяте от техните стойности с две точки (. Например можете да напишете:


CODE
<DIV STYLE="color: white; background-color: black">Някакъв текст>/DIV>



Така текста между таговете <DIV> и </DIV> ще бъда с бели букви на черен фон. Както вече споменахме, основното предимство на CSS е отделянето на форматирането от съдържанието. Показания по-горе метод е подходящ, ако искате да дефинирате вида на един-единствен конкретен елемент. Това най-често се използва при позициониране, тъй като трябва да определите координати на всеки отделен елемент. Друг начин за употр*бибипам* на CSS е предефинирането на тагове. Това се осъществява в областта <HEAD> на документа. Всичко което трябва да направите е да добавите таг <STYLE> и да напишете стиловата дефиниция между отварящия и затварящия таг. За целта първо пишете името на тага, а след това във фигурни скоби { и } пишете стиловата дефиниця - по същия начин, по който и ако тя е стойност на атрибута STYLE на някой таг. Например:


CODE
BODY {color: red;
background-color: white;
font-size: 16px;
font-family: Arial}



Този код определя цвета на текста в документа като червен, на фона - бял, размера на буквите - 16 пиксела, а шрифт - Arial. По-нататък ще разгледам подробно възможните стилови дефиниции

Външни стилови дефиниции

CSS има още едно голямо предимство - стиловата дефиниция може да се отдели в отделен файл и след това да се приложи към HTML документа чрез един-единствен таг. Това е от особено значение за големи сайтове, за които се използва една и съща стилова дефиниция във всяка страница. Така вместо да пишете един и същи код във всяка страница от сайта (а една стилова дефиниция може да се състои от десетки редове код), можете да я напишете само веднъж в отделен файл и след това да го свържете със всеки един HTML документ. За целта всичко между отварящия и затварящия таг <STYLE> (т.е. самата стилова дефиниция), без самите тагове, трябва да бъде азписано в отделен файл, обикновени с разширение .css. След това вместо тага <STYLE>, използвате тага <LINK> със следните атрибути:


CODE
<LINK rel="stylesheet" type="text/css" href="name.css">



Tyk name.css е името на файла, съдържащ стиловата дефиниция.

Класове

Една от изключително полезните възможности на CSS е дефинирането на класове - набор от стилове, които могат да бъдат присвоявани на всеки таг, но всъщото време не определят вида на конкретния таг. Това означава, че можете да определите стил, а след това да го приложите на определени тагове. Също така, посредством скрипт можете да смените стила на даден таг.

Дефинирането на клас се осъществява в тага <STYLE>. Определяте име на класа и във фигурни скоби определяте неговите свойства. За да укажете, че това е клас, пред името му слагате точка. След това на всеки таг можете да присвоите този стил, като използвате атрибута CLASS, поддържан от всички тагове. Ако искате посредством скрипт да смените класа на някой от таговете, трябва да ползвате свойството className.

Ето един пример:


CODE
<STYLE>
.standart {color: black; background-color: white}
.inverse {color: white; background-color: black}
.attention {color: red; background-color: white}
</STYLE>



След това на всеки таг, безотносително какъв е той, можете да дадете стойности standart, inverse или attention на атрибута CLASS и ще получите съответното форматиране на тага. Класовете дават още една възможност - дефиниране на клас, специфичен за тага. Това означава че можете да дадете една и съща стойност на атрибута CLASS за различни тагове и ще бъде приложено специфично форматиране за всеки таг. Това става като преди точката в дефиницията на класа, сложите името на тага, за който се отнася това форматиране

Псевдо-класове

Освен класове, същестуват така наречените псевдо-класове. Наричат се така, защото това са предварително дефинирани класове на тага <A>. Това са съотвено link, active, hover и visited. <A> по подразбиране е от клас link. Когато курсора е над хипервръзката, <A> получава клас hover. Ако хипервръзката вече е посещавана, то класа е visited, а ако в момента е активна - active. Това позволява създаването на красиви хипервръзки. Псевдокласовете се отделят от тага с две точки (. Отново, тези псевдокласове се използват само за тага <A>. Ето един пример:


CODE
<STYLE>
A:link {color: black; text-decoration: none}
A:hover{color: red; text-decoration: underline}
A:visited{color: black; text-decoration: none}
</STYLE>



Псевдо-елементи

Има една основна разлика между псевдо-класа и псевдо-елемнта. Това е, че псевдо-класа представлява един елемент в дадено негово състояние - т.е. целия елемент но само за част от времето. Псевдо-елемента пък представя само част от елемента, но през цялото време. Такива псевдо-елементи са първия ред от елемент и неговата първа буква. Това може да се използва за някои специални ефекти. Псевдо-елементите са съответно first-line (първи ред) и first-letter (първа буква). Те могат да се прилагат към тагове като <P> и <DIV>. Ето един пример:


CODE
<STYLE>
P:first-line {text-transform: capitalize}
P:first-letter {font-size: 48pt}
</STYLE>



Още за елементите

Има още една възможност на CSS която си струва да бъде разгледана. Това е дефинирането на стила на таг, който е дъщерен на даден таг. Т.е. можете да имате стилова дефиниция на тага <I> когато е дъщерен на <B> и този стил ще се прилага винаги и единствено когато имате двойката тагове <B><I>. По този начин можете да определите различен вид на един и същи таг в зависимост от предхождащите го тагове. Това се осъществява изключително лесно - просто слагате двата тага един след друг, разделени с интервал, в реда в който трябва да се срещат в документа. В нашия пример това е:


CODE
<STYLE>
B I {text-transform: uppercade}
</STYLE>



Стилови дефиниции

От тук нататък ще разглеждаме самите свойства, които можете да определяте в 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(адрес на изображението)

Например:


CODE
BODY {background-image: url(styled.gif)}



- background-repeat определя как да се процедира, когато изображението, използвано за фон, е по-малко от самия елемент. Това най-често се случва при елемента BODY. Обикновено изображението се повтаря необходимия брой пъти във вертикална и хоризонтална посока за да запълни цялото пространство. Възможни стойности на това свойство са repeat (по подразбиране), no-repeat (изображението се слага само веднъж), repeat-x (изображението се размножава хоризонтално, но не и вертикално) или repeat-y (изображението се размножава само вертикално)

- background-attachment определя дали фона да се превърта заедно със страницата (стойност scroll, която е по подразбиране) или да стои фиксирано на екрана, а само текста да се превърта (стойност fixed)

- background-position определя началната позиция на фона (т.е. от къде започва) спрямо горния ляв ъгъл на елемента. Определят се две стойности, разделени с интервал, съответно за разтояние по хоризонтала и по вертикала. Т.е.

CODE
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 има за стойност число или процент и определя колко по-навътре трябва да започва първия ред на текста спрямо останалите. Приложимо е за тагове като <P> и <DIV>

- text-transform е една интересна възможност на CSS. Възможни стойности са none - текста не се трансформира, lowercase - текста се извежда само с малки букви, uppercase - текста се извежда с главни букви или capitalize - първата буква на всяка дума се извежда главна.

- letter-spacing определя допълнителното разтоянието между буквите в една дума

- word-spacing определя допълнителното разтояние между отделните думи

Контрол над списъците

В HTML същестуват два типа списъци - номерираните, дефинирани от тага <OL> и неномерираните, дефинирани от тага <UL>. 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 може да направи наистина впечатляващи ефекти
Автор: Максим Крижановски( Darhazer )
Relevant Advertise!
ALKAIOS
Когато създавате сайт с CSS, несъмнено ще се сблъскате с много чудновати проблеми. И почти винаги ще си биете главата в стената отново и отново. Тази статия е опит за улесняване на дизайнерския процес и с нея се осигурява бърз справочник за случаите, в които се натъквате на трудности.

Когато се съмнявате, валидирайте
Когато дебъгвате (дебъгване - процес по откриване на грешки в програмен код), можете да си спестите много главоболия като от начало просто валидирате своя код. Неправилно форматираният XHTML/CSS е причина за много проблеми с лейаута.
Разработвайте и тествайте своя CSS с най-модерния браузър преди да го тествате в другите, а не след това.
Ако създавате сайт, тествайки в развален браузър, вашият код започва да разчита на погрешната интерпретация на този браузър. Когато дойде време да тествате в браузър, който поддържа стандартите по-добре, ще бъдете разочаровани от факта, че показва кода ви не както очаквате. Вместо това, започнете с перфектен код и добавяйте хакове за по-развалените браузъри. Вашият код ще отговаря далеч повече на стандартите още от самото начало и няма да ви се налага да използвате прекалено много хакове, за да поддържате други браузъри. Днес това означава Mozilla, Safari или Opera.
Проверете дали желаният от вас ефект наистина съществува.
Съществуват специфични за даден браузър добавки към CSS, които не са част от официалната спецификация. Ако се опитвате да използвате filter или да форматирате цвета на скролбара, вие създавате код, който няма да работи никъде другаде освен в IE. Ако валидаторът ви казва, че кодът, който използвате не е дефиниран, има вероятност той да е специфичен за някой браузър и да не работи коректно при всички останали.
Когато разчитате на плаващи блокове (float) за лейаут, се уверете, че няма проблеми с околните елементи.
Плаващите блокове (бел.прев. при оформянето на които се използва float: left | right) правят номера и не винаги се държат както очаквате. Ако се сблъскате със ситуация, при която плаващ блок се разпростира извън края на съдържащия го елемент или просто не се държи правилно, то се уверете, че онова, което искате да постигнете е правилно. Вижте урока на Ерик Майер по този въпрос.
Изчезващи margin (полета); за да избегнете това, добавете padding (отстъп) или border (очертание).
Може да се сблъскате с повече празно пространство, където то съвсем не ви трябва или пък никакво празно пространство, където ви трябва. Ако използвате margin, припокриването е най-вероятната причина. Енди Бъд обяснява какво можете да очаквате.
Опитвайте се да избягвате задаването на padding/border и едновременно с това фиксиран размер на елемента.
IE5 разбира box model (блоковия модел) по погрешен начин, което наистина обърква нещата. Има начини за справяне с проблема, но винаги е по-добре проблемът да бъде заобиколен като padding.ът се прилага на родителски елемент вместо на наследяващ елемент, който е с фиксиран размер.
Избягвайте мигновеното показване на неоформен HTML в IE.
Ако разчитате само на @import, за да заредите външен CSS файл, рано или късно ще забележите, че в IE, когато веднъж e зареден чистият, неформатиран HTML следва съвсем кратко забавяне при прилагането на CSS. Това може да бъде избегнато.
Не разчитайте на min-width в IE.
IE не го поддържа. Но до известна степен третира width като min-width и с малко трикове може да се постигне същият краен резултат.
Когато се съмнявате, намалявайте широчините.
Понякога грешки в закръглянето ще са причина сметки от сорта на 50% + 50% да дават резултат 100.1%, което разрушава лейаута в някои браузъри. Опитайте да сбутате нещата от 50% на 49% или дори до 49.9%.
Съдържанието не се показва правилно в IE?
Може би сте се натъкнали на бъга Peekaboo, особено ако съдържанието се покаже, когато минете с курсора върху някоя връзка. Вижте Position is Everything за решение.
Внимавайте, когато оформяте връзки ако използвате котви.
Ако използвате класическа котва в кода си (<a name="anchor">), ще забележите, че за нея също работят :hover и :active псевдо-класовете. За да избегнете това или трябва да използвате id за котвите, или да ги оформите с малко по-мистериозен синтаксис: :link:hover, :link:active
Запомнете: Link, Visited, Hover, Active.
Когато указвате псевдо-класове за връзките, винаги спазвайте този ред: Link, Visited, Hover, Active. Всяка друга подредба няма да работи еднакво добре. Обмислете използването и на :focus, като при това последователността е Link, Visited, Hover, Focus, Active.
Запомнете: Top, Right, Bottom, Left (Горе, Дясно, Долу, Ляво).
Съкратеният запис на размерите на очертанията, полетата и отстъпите (border, margin, padding) предполага конкретна последователност: по посока на часовниковата стрелка от горе, дясно, долу и ляво. И затова резултатът от код margin: 0 1px 3px 5px; е липса на поле отгоре, 1px поле отдясно и т.н.
Указвайте мерна единица за стойностите различни от нула.
CSS изисква от вас да указвате мерните единици за всички измерими характеристики като шрифтове, полета и размери. (Единственото изключение е line-height, за което не се изисква мерна единица.) Поведението на различните браузъри, когато размерите не са указани е твърде различно. Нулата, обаче, си е нула, независимо дали се измерва в px, em или друго. За нея не е необходимо указването на мерна единица въобще. Пример: padding: 0 2px 0 1em;
Тествайте при различни размери на шрифта.
Модерните браузъри като Mozilla и Opera ви позволяват да променяте размера на шрифта независимо в каква мерна единица е зададен. Някои потребители със сигурност имат по-голям или по-малък размер на шрифта зададен по подразбиране; опитайте се да нагодите стила си за възможно най-широк кръг.
Уеднаквете регистъра на буквите между HTML и CSS.
Някои браузъри правят разлика между главни и малки букви. Използването на клас като 'homePage' е OK, но само ако проявявате постоянство при изписването на класовете. Прилагането на стил към 'homepage' ще причини проблеми в някои по-строги браузъри (като Mozilla).
Тествайте със стилове в кода на страницата; при публикуване в интернет, използвайте отделен CSS файл.
Ако работите със стилове, директно написани в HTML кода, вие елиминирате някои потенциални проблеми с кеширането. Това е особено важно когато се работи с някои Mac браузъри. Но преди да пуснете своя сайт, преместете стиловете в отделен CSS файл чрез @import или <link>.
За да си помогнете при отстраняването на грешки, добавете ясни очертания на елементите.
Едно универсално CSS правило като div {border: solid 1px #f00;} може да свърши доста работа, когато възникне проблем с лейаута. Добавянето на очертание към някои елементи може да помогне при идентифицирането на припокриване или излишно празно пространством, които иначе не са очевидни.
Не използвайте единични кавички около адреси на изображения.
Когато задавате фоново изображение, трябва да устоите на желанието да обградите адреса на картинката с кавички. Това не е необходимо, а IE5/Mac ще се сгърчи.
Не правете връзки към празни CSS файлове, които смятате да използвате в бъдеще (например CSS за печат или безжични устройства).
Mac IE5 се сгърчва, когато срещне празен CSS и времето за зареждане на страницата се увеличава. Вместо това, сложете поне едно правило или дори само един коментар в CSS.a, за да няма проблем с MacIE.

--------------------------------------------------------------------------------

Освен горните препоръки, тук има няколко интересни теоретични забележки, които нямат пряко отношение към функционалната част на нещата, но трябва да бъдат вземани под внимание при разработката:

Организирайте своя CSS файл
Коментирайте различните части от CSS кода правилно, групирайте подобните селектори и използвайте постоянна конвенция за именуването, форматирането (препоръка: единичен спейс вместо табулация за съмвестимост с различни платформи) и подреждане на стойностите.
Именувайте класовете / ID-тата според тяхната функция, а не според външния им вид.
Ако създадете клас .smallblue и по-късно получите молба да промените размера на шрифта в по-голям или цвета - на червен, този клас престава да носи всякакъв смисъл. Вместо това използвайте описателни класове като .copyright и .pullquote.
Разчитайте на филтрите на CSS само в краен случай.
CSS хакове и филтри могат да ви помогнат избирателно да прилагате CSS (или да не прилагате - в зависимост от случая) към различни елементи. Вместо да ги използвате всеки път, когато ударите на камък, опитайте се да намерите по-стандартен и работещ в различни браузъри начин да постигнете желания ефект. Когато се съмнявате, това може да ви спаси живота. Ето един огромен списък с CSS филтри.
Комбинирайте селектори.
За да оптимизирате времето за зареждане, трябва да се стремите към малки CSS файлове; опитвайте се колкото се може повече да групирате селектори, разчитайте на наследяването и намалявайте излишните повторения като използвате съкратен (shorthand) запис.
Обърнете внимание на достъпността, когато замествате изображения с текст
Класическият метод FIR (Farhner Image Replace) създава проблеми с екранните четци и за хората, които са изключили изображенията в браузъра си. Съществуват алтернативи; използвайте ги внимателно.
Това е "lo-fi" версия на нашия форум. За да видите пълната версия, моля натиснете тук.
Invision Power Board © 2001-2018 Invision Power Services, Inc.