CSS

Каскадни стилски табели

Наставка	.css
MIME-тип	text/css
Творец	W3C
Прва верзија	17 December 1996 (17 December 1996)
Тип на формат	јазик за стилски табели
Стандард(и)	Ниво 1 (Препорака) Ниво 2 (Препорака) Ниво 2 Ревизија 1 (Препорака)

Каскадните стилски табели (CSS, од англ. Cascading Style Sheets) е јазик за стилски табели што се користи за опишување на презентацискта семантика (изгледот и форматирњето) на документ напишан во јазик за означување. Нејзини најчести апликации се стилот на мрежните места напишани во HTML и XHTML, но јазикот исто така може да се примени на секој тип на XML документ, вклучувајќи обичен XML, SVG and XUL.

CSS е предвиден првенствено за да се овозможи поделба на содржината на документот (напишан во HTML или сличен markup language) за презентација на документот вклучувајќи елементи како рапоредот на страната, боите, и фонтот. Оваа поделба може да ја подобри содржината ,да овозможи флексибилност и контрола во одредбите на презентирање одлики, да им овозможи на повеќе страни да го споделат форматирањето , и да ја намалат комплексноста и повторувањето во структурната содржина. CSS исто така дозволува истата означена страна да биде презентирана во различни стилови за различни рендерирани методи како на екран, во печатена форма, со глас (кога се чита од гласовно-засновани прелистувачи или екрански читачи) или уреди на основа на Брајова азбука. Може да се користи и за да им дозволи на мрежните места да се прикажуваат различно во зависност од големината на екранот или уредот на кој ќе биде прегледуван. Додека авторот на документот обично го води тој документ во CSS стил, корисниците може да употребуваат друг стил,како на пример оној на нивниот компјутер за да го замени оној кој е укажан од авторот.

Синтакса

CSS има едноставна синтакса и употребува англиски клучни зборови за наведување на имињата на различни својства.

CSS се состои од список на правила. Секое правило или множество од правила се состои од едно или повеќе селектори,и исказен блог. Исказниот блог содржи листа од искази во загради. Секој исказ се состои од особина, две точки (:), и вредност. Ако има повеќе искази во еден блог, мора да се стави точка-заперка (;) за да се оддели секој исказ.. Во CSS, селекторите се употребуваат за да декларираат на коЕ означување стилот се однесува. Селекторите можат да се однесуваат на сите елементи на укажан тип ,на елементи укажани од атрибутите или на елементи во зависнот од тоа каде се поставени или вгнездени во рамките на други во вид на дрво.

Псевдо-класите се употребуваат во CSS селекторите за да дозволат форматирање засновано на информација која е надвор од дрвото на документот .Често употребуван пример на псевдо-класа е :hover, кој ја идентификува содржината само кога корисникот 'укажува на' видливиот елемент, обично со поставување на курсот на глувчето врз него. Тоа е во прилог на селекторот како во a:hover или #elementid:hover.Псевдо-класата класифицира елементи на документот, како :link или :visited, каде псевдо-елементот прави избирање кое може да се состои од делумни елементи како :first-line или :first-letter.

Селектори може да се комбинираат на многу начини, особено во CSS 2.1,за да се постигне поголема конкретност и флексибилност.

Еве еден пример со употреба на овие правила:

selector [, selector2, ...] [:pseudo-class] {
 property: value;
 [property2: value2;
 ...]
}
/* comment */

Употреба

Пред CSS,речиси сите презентациски атрибути на HTML документите биле содржани во рамките на HTML ; сите фонтови, бои, позадински стилови,, порамнувањата на елементите, граници и големини мораа да бидат експлицитно опишани, честопати повторувани во рамките на HTML. CSS им дозволува на авторите да преместат голем дел од тие информации во друга податотека, друг style sheet, што резултира со значително поедноставен HTML.

Насловите (h1 елементи), поднасловите (h2), под-поднасловите (h3), итн.,се дефинирани структурирано користејќи HTML. Во печатена форма и на екран, изборот на фонт, големина, боја и акцент за тие елементи е презентациски.

Пред CSS, авторите на документите кои сакаа да додадат типографски одлики, да речеме на сите h2 наслови мораа да го повторуваат HTML презентациското означување за секое појавување на тој тип на наслов. Ова ги правеше документите покомплицирани, поголеми, и потешки за одржување. CSS овозможува одделување на презентацијата од структурата. CSS може да дефинира бои, фонтови, порамнување на текстот, големина, граници, растојание, распоред и многу други типографски одлики, независно за екран и печатени форми. CSS, исто така дефинира не-визуелни стилови како што се брзината и акцент со кој текст се чита од страна на оралните читателите. W3C ја има запоставено употебата на HTML означувањето.

Надворешните CSS податотеки, како што е опишано подолу, може да биде поврзан со HTML документ со користење на следнава синтакса:

<link href="path/to/file.css" rel="stylesheet">

Извори

CSS информациите можат да се обезбедат од различни извори. CSS стилот на информацијата може да биде во посебен документ или може да биде вгнезден во HTML документ. Повеќето стилови може да се увозат. Различни стилови може да се применуваат во зависност од тоа каков излезен уред се користи ; на пример, верзијата на екранот може да биде различна од испечатената верзија, така да авторотите можат да ја прилагодат презентацијата соодветно за секој медиум.

Приоритетни шеми за CSS изворите(од највисокиот до најнискиот приоритет):

• Стилот за авторот (обезбеден од дизанерот на мрежната страница), во форма на:
  • Внатрешни стилови, внатре во HTML документот, стил на информацијата за секој елемент, одредена со употреба на style атрибутот
  • Вградени стилови, блокови на CSS информации внатре во самиот HTML
  • Надворешни стилови, посебна CSS датоттека наводирана од документот
• Стилот за корисникот:
  • Локална CSS податотека која корисникот ја одредува со можност за пребарувач, која делува како потиснувач кој се применува на сите документи
• Стилот за кориснички агент
  • Стандардните стилови се применуваат од страна на корисничкиот агент односно стандардните поставувања на прелистувачот за презентација на секој елемент

Стилот со најголем приоритет го контролира прикажувањето на содржината на екран. Декларациите кои не се поставени во изворот на највисокиот приоритет се пренесуваат на извор со понизок приоритет, како што се корисничките агенти. Овој процес се нарекува каскадирање.

Една од целите на CSS е да им дозволи на корисниците поголема контрола на презентацијата. На некој на кого му е тешко да прочита црвен закосен наслов може да си примени друг стил. Во зависност од прелистувачот и мрежната страница, корисникот може да избира различни стилови овозможени од дизајнерите, или може да ги отстрани сите додадени стилови и да го гледа мрежното местотa со стандарните стилови на прелистувачот, или може да го отфрли црвениот закосен наслов без да ги промени другите атрибути.

Историја

Стиловите постоеле во една или друга форма уште во почетоците на SGML во 1980 година. Каскадирањето на стиловите било развиено како средство за создавање на доследен пристап за обезбедување на стил на информациите за веб документите.

Со развивањето на HTML, дојде и опфаќањето на поширок спектар на стилски способности за да се исполни барањето на веб дизајнерите. Оваа еволуција му овозможи на дизајнерот повеќе контрола над изгледот на страната по цена на покомплексен HTML. Варијациите во имплементацијата на прелистувачите како ViolaWWW и WorldWideWeb, го направија тежок изгледот на мрежната страница и корисниците имаа се помалку контрола на тоа како веб содржината беше прикажана. Robert Cailliau сакаше да ја оддели структурата од презентацијата. Идеалниот начин би бил да им се дозволи на корисниците различни опции и пренесување на три различни видови на стилови : еден за печатење, еден за презентација на екран и еден за функција на уредникот.

За подобрување на способностите на веб презентацијата , девет различни јазици за стил беа предложени на World Wide Web Consortium. Од тие девет, два беа избрани како основа на она што стана CSS: Каскадирање на HTML Style Sheets (CHSS) и Stream-based Style Sheet Proposal (SSP). Bert Bos работеше на прелистувач наречен Argo, кој употребуваше свој јазик за стил наречен SSP. Lie and Yves Lafon му се придружија на Dave Raggett за проширување на Arena прелистувачот за поддржување на CSS како апликација за тестирање за W3C. Lie и Bos работеа заедно за развој на CSS стандард ( 'H' беше отстрането од името бидејќи овие стилови се однесуваа и на други јазици за означување не само на HTML).

За разлика од постоечките јазици за стил како DSSSL и FOSI, CSS дозволуваше стилот на документот да биде под влијание на други стилови.

Предлогот на Lie беше претставен на "Mosaic and the Web" конференцијата (подоцна наречена WWW2) во Chicago, Illinois во 1994, и повторно со Bert Bos во 1995 година . Околу ова време W3C веќе постоеше, и се интересираше за развојот на CSS. Организираа работилница за таа цел на чело со Steven Pemberton. Ова резултираше во W3C со додавање работа на CSS за испорака на HTML за уредување на прегледот(ERB). Lie и Bos беа основниот технички персонал на овој проект , со дополнителни членови вклуќувајќи го и Thomas Reardon од Microsoft. Во август 1996 Netscape Communication Corporation презентираше алтернативен style sheet јазик наречен JavaScript Style Sheets (JSSS). Оваа одредба никогаш не беше завршена и е застарена. При крајот на 1996, CSS беше подготвен да стане службен и CSS ниво 1 беше објавен во декември.

Развојот на HTML, CSS, и DOM заземаа место во една група, одборот за уредување на прегледот (ERB). Во почетокот на 1997, ERB беше поделен на 3 групи: HTML работна група на чело со Dan Connolly од W3C; DOM работна група на чело со Lauren Wood од SoftQuad; и CSS работна група на чело соChris Lilley од W3C.

CSS работната група почна да се справува со проблемите кои не беа опфатени со CSS ниво 1, што резултираше со создавање на CSS ниво 2 во November 4, 1997. CSS ниво 2 беше објавен како препорака на W3C на 12 мај 1998. CSS ниво 3 кое започна 1998, и сè уште е во развој од 2009.

Во 2005, CSS работните групи одлучија да спроведат барања за построги стандарди.Ова значеше дека веќе објавените стандарди како CSS 2.1, CSS 3 Селектори и CSS 3 беа повлечени од препораките за кадидати за работно ниво.

Тешкотии со усвојување

CSS 1 пецификацијата беше завршена во1996.Internet Explorer 3 почна со работа истата година ,со лимитирана поддршка за CSS.Но поминаа повеќе од три години пред секој прелистувач да постигне речиси целосна имплементација на одредбата.Internet Explorer 5.0 за Macintosh, беше првиот прелистувач кој имаше целосна CSS 1 поддршка , и успеа да го намине Opera, прелистувачот кој беше водач за CSS поддршка. Другите прелистувачи набрзо им се приклучија и многу од нив имплементираа делови од CSS 2.

Иако Internet Explorer 3 и4, и Netscape 4.x имаа поддршка за CSS, не беше целосна и имаше сериозни грешки (bugs). Ова беше сериозна пречка за усвојувањето на CSS.

Кога прелистувачите 'верзија 5' почнаа да нудат целосна имплементација на CSS,тие сè уште беа неточни во одредени области и беа со недостатоци и грешки(bug). Зголемувањето на бројот на недостатоци поврзани со CSS предизвикаа тешкотија кај дизајнерите да постигнат ист изглед на мрежната страница кај секој прелистувач и на секоја платформа.

Проблемите со прелистувачите за усвојување на CSS, заедно со списокот на типографски грешки во изворната одредба, го натераа W3Cда го ревидира CSS 2 стандардот во CSS 2 јануари Некои CSS 2 својства кои ниеден прелистувач не ги имплементира успешно беа отфрлени и во некои случаи дефинираните постапки беа изменети за да го донесат стандардот во согласност со постоечките имплементации. CSS 2.1 стана препорака за кандидат на 25 февруари 2004, но CSS 2.1 беше вратен на работната група на 13 јуни 2005 and only returned to Candidate Recommendation status on July 19, 2007.

Во минатотот, некои опслужувачи беа конфигурирани за да им служат на сите документи со filename екстензија .css како mime type application/x-pointplus а не како text/css.Во времето кога компанијата Net-Scene го продаваше PointPlus Maker за претворање PowerPoint податотеки во Slide Show податотеки (со употреба на .css екстензија).

Варијации

CSS има различни нивоа и профили. Секое ниво од СЅЅ беше изградено над последното, со додавање на нови функции и обично означени како CSS 1, CSS 2, CSS 3, and CSS 4.Профилите се обично подмножества на едно или повеќе нивоа на CSS изградени за одреден уред или кориснички интерфејс. Моментално има профили за мобилни уреди, печатачи, и телевизори. Профилите не треба да се мешат со медиа типовите кои се додадени во CSS 2.

CSS 1

Првата CSS-одредба која постана официјална препорака на W3C е CSS ниво 1, издадена во декември 1996 Неговите способности се поддршка за

• Фонт својства како фонт и акцент
• Боја на текст, позадина и други елементи
• Текст атрибути како растојание помеѓу зборовите и линиите на текстот
• Порамнување на текстот, сликите и другите елементи
• Разлика, граници,зглавје и позиција на повеќето елементи
• Уникатна идентификација и генеричка класификација на групите на атрибутите

W3C не ја поддржува повеќе CSS 1 препораката .

CSS 2

Одредбата за CSS ниво 2 беше дизајнирана од W3C и издадена како препорака во мај 1998. Множеството на CSS 1 и CSS 2 вклучува голем број на нови можности како апсолутно, релативно и фиксно позиционирање на елементите и z-index, концепт на медија типови како и поддршка за орални стилови и двонасочен текст, и својства за нов фонт како сенки.

W3C повеќе не ја одржува CSS 2 препораката.

CSS 2.1

CSS ниво 2 ревизија 1 често се спомнува како "CSS 2.1",поправа грешки во CSS 2,ги остранува малку поддржаните или нецелосно компатибилни можности и додава веќе имплементирани екстензии на прелистувачот до одредбата. Со цел да се усогласат со W3C процесот за стандардизирани технички одредбите, CSS 2.1 оди напред-назад помеѓу работната група и препораката за кандидат. CSS 2.1 прво стана препорака за кандидат на 25 февруари 2004 но беше вратен на работната група на 13 јуни 2005 за дополнителен преглед. Се врати како препорака за кандидат на 19 јули 2007 и беше ажуриран двапати во 2009. И покрај промените кои беа направени, пак беше вратен на работната група во декември 2010.

CSS 2.1 стана предлог за препорака за кандидат на 12 април 2011. Откако беше разгледан од страна на W3C советодавниот комитет, конечно беше издаден како W3C препорака на 7 јуни 2011.

CSS 3

За разлика од CSS 2, CSS 3 е поделен во неколку посебни документи наречени "модули". Секој модул додава нова можност или проширува функција која е веќе дефинирана во CSS 2. Работата на CSS ниво 3 започна за време на издавањето на оригиналната CSS 2 препорака. Најраните CSS 3 шеми беа објавени во јуни 1999.

До јуни 2012,има над 50 CSS модули објавени од CSS работната група. и 4 од нив беа објавени како формални:

• 2012 јуни19 : Media Queries
• 2011 септември 29 : Namespaces
• 2011 септември 29 : Selectors Level 3
• 2011 јуни07 : Color

CSS 4

Не постои такво нешто наречено CSS, бидејќи е поделен во посебни модули. Сепак, постојат "ниво 4" модули.

Откако CSS3 ги подели дефинициите на CSS јазикот во модули, модулите се дозволени во нивоата независно. Повеќето модули се ниво 3 и тие изградуваат врз работи од CSS 2 јануари Неколку модули на ниво 4 постојат (како Image Values, Backgrounds & Borders, или Selectors), кои изградат врз функционалностите на претходното ниво 3. Други дефинираат потполно нови функционалности како Flexbox.

Па сè додека не постои монолитен "CSS4" што ќе работи откако "CSS3" ќе биде комплетно завршен, модулите на ниво 4 можат да се наведуваат како "CSS4".

Поддршка од прелистувачите

Бидејќи не сите прелистувачи правилно го расчленат кодот, развиената техника за кодирање позната како CSS hacks која може или да филтрира поединечни прелистувачи или да цели кон поединечни прелистувачи(генерално двете се познати како CSS filters). Првото може да се дефинира како CSS filtering hacks додека другото како CSS targeting hacks. И двете можат да се употребат за да скријат или да покажат делови од CSS на различни прелистувачи.Ова се постигнува или со ексцентрично експлоатирање на CSS-расчленување или со грешки (bugs) во прелистувачот, или со искористување на недостатоците за поддршка за деловите од одредбата на CSS. Со употребување на CSS филтри некои дизајнери одат далеку како испорака на различен CSS за одредени прелистувачи за да се осигура дека дизајнот ќе се прикажи како што се очекува.

Пример за добро позната CSS прелистувачка грешка(bug) е Internet Explorer box model bug, каде ширината на кутијата(box) се толкува погрешно во неколку верзии на овој прелистувач, што резултира во блокови кои се претесни кога се прегледува во Internet Explorer, но точни во стандардни прелистувачи. Оваа грешка(bug) може да биде избегната во Internet Explorer 6 со употреба на точен тип на документот doctype во (X)HTML documents. CSS hacks и CSS filters се користат за да се компензира за грешките како оваа, која е една од илијадниците CSS bugs кои се документирани во различни верзии на Netscape, Mozilla Firefox, Opera, и Internet Explorer (вклучувајќи го и Internet Explorer 7).

Дури и кога достапноста на CSS-способни пребарувачи ја направени CSS остварлива технологија, усвојувањето на CSS сè уште се држеше назад од борбата помеѓу дизајнерите и прелистувачите. Дури и денеска овие проблеми сè уште се случуваат и го прават CSS дизајнот покомплексен и поскап отколку што беше наменето, и тестирањето преку прелистувач останува неопходно. Други причини за постоечкото не-усвојување на CSS се: неговата комплесност, недостаток на близината на дизајнерите со синтаксата и потребните техники за CSS, слабата поддршка на алатки за пишување, ризиците од недоследност кај прелистувачите и зголемените трошоци за тестирање.

Ограничувања

Некои забележани ограничувањата на моменталните способности на CSS се:

Селектори не се во можност да се искачат

CSS не нуди начин да е избере родител или предок на елементот кој ги задоволува одредени критериуми, until CSS Selectors Level 4,. Повеќе напредни шеми на селекторите (како XPath)ќе овозможат повеќе софистицирани стилови. Сепак, главната причина за тоа зошто CSS работната група го одбива предлогот за селектори-родители се поврзани со перформансите на прелистувачите и делумно рендерирани проблеми.

Вертикално контролни ограничувања

Додека хоризонталната поставеност на елементите е обично лесно да се контролира, вертикална поставеност е често целосно невозможна. Еднозтавните задачи како центрирање на елемент вертикално или поставување на подножје(footer) не повисоко од дното на гледиштето или побарува комплицирана правила за стил, или е едноставно но со неподдржани правила.

Отсуство на изрази

Моментално нема способност да се укажуваат својства за вредност како едноставни изрази (како margin-left: 10% – 3em + 4px;). Ова ќе биде корисно за сличаи како пресметување на големината на колоните. W3C работната група за препораки со calc() вредноста за адресирање на оваа ограничување беше објавено од страна на CSS WG.

Недостаток на декларација за колоните

Додека со моменталниот CSS 3 (со употреба на column-count модулот), е можен распоред(layout) со повеќе колони тој може да биде комплексен за имплементација со CSS 2 јануари Со CSS 2.1, процесот обично се прави со подвижни елементи кои обично се рендерирани различно од различни прелистувачи и различни екрани.

Не е возможно експлицитно декларирање на нови обеми независни од позицијата

Правилата за опсег како z-index изгледот за најблискиот родител-елемент со позиција: апсолутна или релативна. Оваа чудна спој има несакани ефекти.

Неконтролираното однесување на динамичките псевдо-класи

CSS имплементира псевдо-класи кои овозможуваат одреден степен на повратни кориснички информации од условни апликации од алтернативни стилови. CSS псевдо-класа, ":hover", е динамичка (еквивалентна на JavaScript "onmouseover"),.

Не може да се именуваат правилата

Нема начин за именување на CSS правило, кое ќе овозможи (на пример) client-side скриптите да се однесуваат на првилото дури и кога неговиот селектор е променет

Не може да се вклучуваат стилови од едно правило во друго

CSS стиловите обично мора да бидат дуплирани во повеќе правила за да го постигнат посакуваниот ефект, со што ќе предизвика дополнително одржување и темелно тестирање.

Не може да се наведе конкретен текст без поправка на означувањето

Покрај :first-letter псевдо-елементот, не може да се наведат конкретни движења низ текстот без да се користи place-holder елемент.

Предности

Одделување на содржината од презентацијата

CSS го олеснува објавувањето на содржината во повеќе презентациски формати засновани на номинални параметри. Номиналните параметри вклучуваат експлицитни кориснички параметри, различни прелистувачи, тип на уредот на кој се гледа содржината, географската локација на корисникот и многу други променливи.

Site-wide доследност

Кога CSS се употребува делотворно, во однос на наследувањето и каскадирањето глобален стил може да се употребува за да се влијае на стилот врз елементите на site-wide. Ако стилот на елементите треба да се промени, тие промени можат да се направат со едитирање на правилата во глобалниот стил. Пред CSS, овој вид на одржување беше многу потежок, поскап и одземаше повеќе време.

Пропусен опсег

Интерфејсот, внатрешен или надворешен, го определува стилот на HTML елементите селектирани од class, типот или од релацијата со другите елементи. Ова е многу поефикасно од повторување на стилот на информациите за секоја појава на елементот. Надворешниот интерфејс е обично зачуван во кешот на прелистувачот и може да биде употребува од повеќе мрежни страници без да бидат повторно вчитани.

Реформатирање на страна

Со едноставна промена на една линија, различен стил може да биде употребен за иста страна. Ова има предност за поголема пристапност како и за прилагодување на страната за различни уреди.

Пристапност

Без CSS, веб дизајнерите обично мораат да ги поставуваат нивните мрежни страници со техники кои не ја припречуваат пристапноста за корисниците со оштетен вид, како HTML tables (види Tableless web design#Accessibility).

CSS рамки

CSS рамки се веќе подготвени библиотеки кои се наменети за полесен, постандарден стил на мрежните места со употреба на јазик за каскадирање на стилови(Cascading Style Sheets language). Layout-grid поврзаните CSS рамки вклучуваат Blueprint, 960 grid, и YUI CSS grids. Како програмирањето и библиотеките во јазиците за скрипти, CSS рамките обично се вклучуваат како надворешни .css наводи во HTML <head>.Тие обезбедуваат голем број на готови опции за дизајнирање на мрежно место. Додека многу од тие рамки се објавени, многу дизајнери ги користат повеќето од нив само за прототипови или за учење.

Позиционирање

CSS 2.1 дефинира три позиционирачки шеми:

Нормален проток

Вградените елементи се вметнати на ист начин како буквите во зборовите во текстот, еден по друг во слободниот простор сè додека има место, потоа почнува нова линија. Блок елементите се редат вертикално, како параграфи и како елементи во бројчената листа. Нормален проток обично вклучува релативно позиционирање на блоковите или вметнатите елементи и работат во кутии.

Проточен

Проточниот елемент се вади од нормалниот проток и се префрла лево или десно што е можно подалеку во слободниот простор.

Апсолутно позиционирање

Апсолутно позиционираните елементи немаат влијание и немаат место во нормалниот проток на другите елементи односно заземаат доделени позиции во нивните кутии независно од другите елементи.

Позиција: горе, долу, лево, и десно

Има 4 основни вредности на position својството. Ако елементот е позициониран на некој друг начин освен static, тогаш дополнителните својства како top, bottom, left, и right се употребуваат за одредување на позицијата.

Статичка

Вообичајната вредност го сместува елементот во нормалниот проток

Релативна

Елементот се сместува во нормалниот проток,и потоа се префрла од таа позиција. Последователните проточни елементи се поставени како елементот да не бил поместен воопшто.

Апсолутна

укажува апсолутно позиционирање. Елементот е поставен во релација со неговиот најблизок нестатички предок.

Фиксна

Елементот е апсолутно позициониран во фиксна позиција на екранот дури и ако остатокот од документот е помрднат.

Поврзано

• Acid3
• Comparison of layout engines (CSS)
• Comparison of stylesheet languages
• CSS frameworks
• CSS Zen Garden
• CSSTidy
• Dynamic Cascading Style Sheets
• List of stylesheet languages
• Minification
• Progressive enhancement
• Responsive Web Design (RWD)
• Validator
• X resources

Надворешни врски

• CSS home page at W3C – со врски за одредбите за CSS.
• CSS на Curlie (англиски)