CSS

Каскадните стилски табели (CSS, од англ. ''Cascading Style Sheets'') е јазик за стилски табели што се користи за опишување на презентацискта семантика (изгледот и форматирњето) на документ напишан во јазик за означување. Нејзини најчести апликации се стилот на мрежните места напишани во HTML и XHTML, но јазикот исто така може да се примени на секој тип на XML документ, вклучувајќи обичен XML, SVG and XUL.
CSS е предвиден првенствено за да се овозможи поделба на содржината на документот (напишан во HTML или сличен markup language) за презентација на документот вклучувајќи елементи како рапоредот на страната, боите, и фонтот. Оваа поделба може да ја подобри содржината ,да овозможи флексибилност и контрола во одредбите на презентирање одлики, да им овозможи на повеќе страни да го споделат форматирањето , и да ја намалат комплексноста и повторувањето во структурната содржина. CSS исто така дозволува истата означена страна да биде презентирана во различни стилови за различни рендерирани методи како на екран, во печатена форма, со глас (кога се чита од гласовно-засновани прелистувачи или екрански читачи) или уреди на основа на Брајова азбука. Може да се користи и за да им дозволи на мрежните места да се прикажуваат различно во зависност од големината на екранот или уредот на кој ќе биде прегледуван. Додека авторот на документот обично го води тој документ во CSS стил, корисниците може да употребуваат друг стил,како на пример оној на нивниот компјутер за да го замени оној кој е укажан од авторот.
1 Синтакса
CSS има едноставна синтакса и употребува англиски клучни зборови за наведување на имињата на различни својства.
CSS се состои од список на ''правила''. Секое правило или множество од правила се состои од едно или повеќе ''селектори'',и ''исказен блог''. Исказниот блог содржи листа од ''искази'' во загради. Секој исказ се состои од ''особина'', две точки (<code>:</code>), и ''вредност''. Ако има повеќе искази во еден блог, мора да се стави точка-заперка (<code>;</code>) за да се оддели секој исказ..
Во CSS, ''селекторите'' се употребуваат за да декларираат на коЕ означување стилот се однесува. Селекторите можат да се однесуваат на сите елементи на укажан тип ,на елементи укажани од атрибутите или на елементи во зависнот од тоа каде се поставени или вгнездени во рамките на други во вид на дрво.
''Псевдо-класите'' се употребуваат во CSS селекторите за да дозволат форматирање засновано на информација која е надвор од дрвото на документот .Често употребуван пример на псевдо-класа е <code>:hover</code>, кој ја идентификува содржината само кога корисникот 'укажува на' видливиот елемент, обично со поставување на курсот на глувчето врз него. Тоа е во прилог на селекторот како во <code>a:hover</code> или <code>#elementid:hover</code>.''Псевдо-класата'' класифицира елементи на документот, како <code>:link</code> или <code>:visited</code>, каде ''псевдо-елементот'' прави избирање кое може да се состои од делумни елементи како <code>:first-line</code> или <code>:first-letter</code>.
Селектори може да се комбинираат на многу начини, особено во CSS 2.1,за да се постигне поголема конкретност и флексибилност.
Еве еден пример со употреба на овие правила:
selector [, selector2, ...] [:pseudo-class] {
property: value;
[property2: value2;
...]
}
/* comment */
1.1 Употреба
Пред CSS,речиси сите презентациски атрибути на HTML документите биле содржани во рамките на HTML ; сите фонтови, бои, позадински стилови,, порамнувањата на елементите, граници и големини мораа да бидат експлицитно опишани, честопати повторувани во рамките на HTML. CSS им дозволува на авторите да преместат голем дел од тие информации во друга податотека, друг style sheet, што резултира со значително поедноставен HTML.
Насловите (<code>h1</code> елементи), поднасловите (<code>h2</code>), под-поднасловите (<code>h3</code>), итн.,се дефинирани структурирано користејќи HTML. Во печатена форма и на екран, изборот на фонт, големина, боја и акцент за тие елементи е ''презентациски''.
Пред CSS, авторите на документите кои сакаа да додадат типографски одлики, да речеме на сите <code>h2</code> наслови мораа да го повторуваат HTML презентациското означување за секое појавување на тој тип на наслов. Ова ги правеше документите покомплицирани, поголеми, и потешки за одржување. CSS овозможува одделување на презентацијата од структурата. CSS може да дефинира бои, фонтови, порамнување на текстот, големина, граници, растојание, распоред и многу други типографски одлики, независно за екран и печатени форми. CSS, исто така дефинира не-визуелни стилови како што се брзината и акцент со кој текст се чита од страна на оралните читателите. W3C ја има запоставено употебата на HTML означувањето.
Надворешните CSS податотеки, како што е опишано подолу, може да биде поврзан со HTML документ со користење на следнава синтакса:
<link>
2 Историја
Стиловите постоеле во една или друга форма уште во почетоците на 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 беа повлечени од препораките за кадидати за работно ниво.
2.1 Тешкотии со усвојување
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 екстензија <code>.css</code> како mime type <code>application/x-pointplus</code> а не како <code>text/css</code>.Во времето кога компанијата Net-Scene го продаваше PointPlus Maker за претворање PowerPoint податотеки во Slide Show податотеки (со употреба на <code>.css</code> екстензија).
2.2 Варијации
CSS има различни нивоа и профили. Секое ниво од СЅЅ беше изградено над последното, со додавање на нови функции и обично означени како CSS 1, CSS 2, CSS 3, and CSS 4.Профилите се обично подмножества на едно или повеќе нивоа на CSS изградени за одреден уред или кориснички интерфејс. Моментално има профили за мобилни уреди, печатачи, и телевизори. Профилите не треба да се мешат со медиа типовите кои се додадени во CSS 2.
2.2.1 CSS 1
Првата CSS-одредба која постана официјална препорака на W3C е CSS ниво 1, издадена во декември 1996 Неговите способности се поддршка за
* Фонт својства како фонт и акцент
* Боја на текст, позадина и други елементи
* Текст атрибути како растојание помеѓу зборовите и линиите на текстот
* Порамнување на текстот, сликите и другите елементи
* Разлика, граници,зглавје и позиција на повеќето елементи
* Уникатна идентификација и генеричка класификација на групите на атрибутите
W3C не ја поддржува повеќе CSS 1 препораката .
2.2.2 CSS 2
Одредбата за CSS ниво 2 беше дизајнирана од W3C и издадена како препорака во мај 1998. Множеството на CSS 1 и CSS 2 вклучува голем број на нови можности како апсолутно, релативно и фиксно позиционирање на елементите и z-index, концепт на медија типови како и поддршка за орални стилови и двонасочен текст, и својства за нов фонт како сенки.
W3C повеќе не ја одржува CSS 2 препораката.
2.2.3 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.<ref>W3C:''
2.2.4 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 :
* 2011 септември 29 :
* 2011 јуни07 :
2.2.5 CSS 4
Не постои такво нешто наречено CSS, бидејќи е поделен во посебни модули. Сепак, постојат "ниво 4" модули.
Откако CSS3 ги подели дефинициите на CSS јазикот во модули, модулите се дозволени во нивоата независно. Повеќето модули се ниво 3 и тие изградуваат врз работи од CSS 2 јануари Неколку модули на ниво 4 постојат (како , , или ), кои изградат врз функционалностите на претходното ниво 3. Други дефинираат потполно нови функционалности како .
Па сè додека не постои монолитен "CSS4" што ќе работи откако "CSS3" ќе биде комплетно завршен, модулите на ниво 4 можат да се наведуваат како "CSS4".
3 Поддршка од прелистувачите
Бидејќи не сите прелистувачи правилно го расчленат кодот, развиената техника за кодирање позната како 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, слабата поддршка на алатки за пишување, ризиците од недоследност кај прелистувачите и зголемените трошоци за тестирање.
4 Ограничувања
Некои забележани ограничувањата на моменталните способности на CSS се:
; Селектори не се во можност да се искачат:CSS не нуди начин да е избере родител или предок на елементот кој ги задоволува одредени критериуми, until CSS Selectors Level 4,. Повеќе напредни шеми на селекторите (како XPath)ќе овозможат повеќе софистицирани стилови. Сепак, главната причина за тоа зошто CSS работната група го одбива предлогот за селектори-родители се поврзани со перформансите на прелистувачите и делумно рендерирани проблеми.
; Вертикално контролни ограничувања: Додека хоризонталната поставеност на елементите е обично лесно да се контролира, вертикална поставеност е често целосно невозможна. Еднозтавните задачи како центрирање на елемент вертикално или поставување на подножје(footer) не повисоко од дното на гледиштето или побарува комплицирана правила за стил, или е едноставно но со неподдржани правила.
; Отсуство на изрази :Моментално нема способност да се укажуваат својства за вредност како едноставни изрази (како <code>margin-left: 10% – 3em + 4px;</code>). Ова ќе биде корисно за сличаи како пресметување на големината на колоните. W3C работната група за препораки со calc() вредноста за адресирање на оваа ограничување беше објавено од страна на CSS WG.
; Недостаток на декларација за колоните:Додека со моменталниот CSS 3 (со употреба на <code>column-count</code> модулот), е можен распоред(layout) со повеќе колони тој може да биде комплексен за имплементација со CSS 2 јануари Со CSS 2.1, процесот обично се прави со подвижни елементи кои обично се рендерирани различно од различни прелистувачи и различни екрани.
; Не е возможно експлицитно декларирање на нови обеми независни од позицијата: Правилата за опсег како z-index изгледот за најблискиот родител-елемент со позиција: апсолутна или релативна. Оваа чудна спој има несакани ефекти.
; Неконтролираното однесување на динамичките псевдо-класи:CSS имплементира псевдо-класи кои овозможуваат одреден степен на повратни кориснички информации од условни апликации од алтернативни стилови. CSS псевдо-класа, ":hover", е динамичка (еквивалентна на JavaScript "onmouseover"),.
; Не може да се именуваат правилата: Нема начин за именување на CSS правило, кое ќе овозможи (на пример) client-side скриптите да се однесуваат на првилото дури и кога неговиот селектор е променет
; Не може да се вклучуваат стилови од едно правило во друго: CSS стиловите обично мора да бидат дуплирани во повеќе правила за да го постигнат посакуваниот ефект, со што ќе предизвика дополнително одржување и темелно тестирање.
; Не може да се наведе конкретен текст без поправка на означувањето: Покрај <code>:first-letter</code> псевдо-елементот, не може да се наведат конкретни движења низ текстот без да се користи place-holder елемент.
5 Предности
; Одделување на содржината од презентацијата: CSS го олеснува објавувањето на содржината во повеќе презентациски формати засновани на номинални параметри. Номиналните параметри вклучуваат експлицитни кориснички параметри, различни прелистувачи, тип на уредот на кој се гледа содржината, географската локација на корисникот и многу други променливи.
; Site-wide доследност : Кога CSS се употребува делотворно, во однос на наследувањето и каскадирањето глобален стил може да се употребува за да се влијае на стилот врз елементите на site-wide. Ако стилот на елементите треба да се промени, тие промени можат да се направат со едитирање на правилата во глобалниот стил. Пред CSS, овој вид на одржување беше многу потежок, поскап и одземаше повеќе време.
; Пропусен опсег: Интерфејсот, внатрешен или надворешен, го определува стилот на HTML елементите селектирани од <code>class</code>, типот или од релацијата со другите елементи. Ова е многу поефикасно од повторување на стилот на информациите за секоја појава на елементот. Надворешниот интерфејс е обично зачуван во кешот на прелистувачот и може да биде употребува од повеќе мрежни страници без да бидат повторно вчитани.
; Реформатирање на страна: Со едноставна промена на една линија, различен стил може да биде употребен за иста страна. Ова има предност за поголема пристапност како и за прилагодување на страната за различни уреди.
; Пристапност: Без CSS, веб дизајнерите обично мораат да ги поставуваат нивните мрежни страници со техники кои не ја припречуваат пристапноста за корисниците со оштетен вид, како HTML tables (види Tableless web design#Accessibility).
6 CSS рамки
CSS рамки се веќе подготвени библиотеки кои се наменети за полесен, постандарден стил на мрежните места со употреба на јазик за каскадирање на стилови(Cascading Style Sheets language). Layout-grid поврзаните CSS рамки вклучуваат Blueprint, 960 grid, и YUI CSS grids. Како програмирањето и библиотеките во јазиците за скрипти, CSS рамките обично се вклучуваат како надворешни .css наводи во HTML <code>&lt;head&gt;</code>.Тие обезбедуваат голем број на готови опции за дизајнирање на мрежно место. Додека многу од тие рамки се објавени, многу дизајнери ги користат повеќето од нив само за прототипови или за учење.
7 Позиционирање
CSS 2.1 дефинира три позиционирачки шеми:
; Нормален проток: ''Вградените'' елементи се вметнати на ист начин како буквите во зборовите во текстот, еден по друг во слободниот простор сè додека има место, потоа почнува нова линија. ''Блок'' елементите се редат вертикално, како параграфи и како елементи во бројчената листа. Нормален проток обично вклучува релативно позиционирање на блоковите или вметнатите елементи и работат во кутии.
; Проточен: Проточниот елемент се вади од нормалниот проток и се префрла лево или десно што е можно подалеку во слободниот простор.
; Апсолутно позиционирање: Апсолутно позиционираните елементи немаат влијание и немаат место во нормалниот проток на другите елементи односно заземаат доделени позиции во нивните кутии независно од другите елементи.
7.1 Позиција: горе, долу, лево, и десно
Има 4 основни вредности на <code>position</code> својството. Ако елементот е позициониран на некој друг начин освен <code>static</code>, тогаш дополнителните својства како <code>top</code>, <code>bottom</code>, <code>left</code>, и <code>right</code> се употребуваат за одредување на позицијата.
; Статичка: Вообичајната вредност го сместува елементот во ''нормалниот проток''
; Релативна: Елементот се сместува во ''нормалниот проток'',и потоа се префрла од таа позиција. Последователните проточни елементи се поставени како елементот да не бил поместен воопшто.
; Апсолутна: укажува ''апсолутно позиционирање''. Елементот е поставен во релација со неговиот најблизок нестатички предок.
; Фиксна: Елементот е ''апсолутно позициониран'' во фиксна позиција на екранот дури и ако остатокот од документот е помрднат.
8 Поврзано
* 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
9 Наводи
10 Дополнителна литература
* Jeffrey Zeldman (2009): ''Designing With Web Standards'', New Riders, ISBN 978-0321616951 (paperback)
* Dan Cederholm (2009): ''Web Standards Solutions, The Markup and Style Handbook'', Friends of Ed, ISBN 978-1430219200 (paperback) ( )
*
* (2004) ISBN 0-7357-1425-8
* (2002), ISBN 0-7357-1245-X
* Meyer, Eric A. (2001) ''Cascading Style Sheets 2.0 Programmer's Reference'', McGraw-Hill Osborne Media, ISBN 0 јули 213178-0
* ''The Zen of CSS Design'' (2005) (co-authored by CSS Zen Garden Owner, Dave Shea, and Molly E. Holzschlag), ISBN 0-321-30347-4
* Kynn Bartlett: ''Teach Yourself CSS in 24 Hours'', 2nd Edition (2006), Sams Publishing, ISBN 978-0672329067
* (2005) by Håkon Wium Lie and Bert Bos, ISBN 0-321-19312-1
* ''Cascading Style Sheets'', PhD thesis, by Håkon Wium Lie – provides an authoritative historical reference of CSS
* , (co-authored by Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson), Friends of Ed (2004), ISBN 978-1590592311
* Keith Schengili-Roberts (2003): ''Core CSS, 2nd Edition'', Prentice Hall, ISBN 0-13-009278-9