Уебсайтовете се състоят от редица отделни части, включително изображения, текст и различни документи. Тези документи включват не само тези, които могат да бъдат свързани към различни страници, като PDF файлове, но и документите, които се използват за конструиране на самите страници, като HTML документи за да се определи структурата на страницата и CSS (Cascading Style Sheet) документи, които да диктуват вида на страницата. Тази статия ще се задълбочи в CSS, обхващайки какво е и къде се използва в уебсайтовете днес.
Урок по история на CSS
CSS е разработен за първи път през 1997 г. като начин за уеб разработчиците да определят визуалния облик на уеб страниците, които са създавали. Той имаше за цел да позволи на уеб професионалистите да отделете съдържанието и структурата на кода на уебсайта от визуалния дизайн, нещо, което преди това не беше възможно.
Разделянето на структурата и стила позволява на HTML да изпълнява повече от функцията, на която първоначално се основава - маркирането на съдържание, без да се притеснявате за дизайна и оформлението на самата страница, нещо общоизвестно като "външен вид и усещане" на страница.
Еволюцията на CSS
CSS не придобива популярност едва през 2000 г., когато уеб браузърите започват да използват повече от основните аспекти на шрифта и цвета на този език за маркиране. Днес всички съвременни браузъри поддържат всички CSS Level 1, повечето CSS Level 2 и дори повечето аспекти на CSS Level 3. Тъй като CSS продължава да се развива и се въвеждат нови стилове, уеб браузърите започнаха да прилагат модули които внасят нова CSS поддръжка в тези браузъри и дават на уеб дизайнерите мощни нови инструменти за оформяне, които да работят с.
През (много) години назад имаше избрани уеб дизайнери, които отказаха да използват CSS за дизайн и разработка на уеб сайтове, но тази практика е почти изчезнала от индустрията днес. CSS сега е широко използван стандарт в уеб дизайна и ще бъдете трудно да намерите някой, работещ в индустрията днес, който не е имал поне основно разбиране на този език.
CSS е съкращение
Както вече споменахме, терминът CSS означава „Каскаден лист със стилове“. Нека разбием тази фраза малко, за да обясним по-пълно какво правят тези документи.
Думата „таблица със стилове“ се отнася до самия документ (като HTML, CSS файловете всъщност са само текстови документи, които могат да се редактират с различни програми). Таблиците със стилове се използват за дизайн на документи в продължение на много години. Те са техническите спецификации за оформление, било то отпечатано или онлайн. Дизайнерите на печат отдавна използват стилови листове, за да гарантират, че техните дизайни се отпечатват точно според техните спецификации. Таблица със стилове за уеб страница служи за същата цел, но с добавената функционалност също така казва на уеб браузъра как да изобрази разглеждания документ. Днес CSS таблиците със стилове също могат да използват медийни заявки за да промените начина, по който търси страницата различни устройства и размери на екрана. Това е изключително важно, тъй като позволява един отделен HTML документ да се изобразява по различен начин в зависимост от екрана, който се използва за достъп до него.
Каскада е наистина специалната част от термина „каскадна таблица със стилове“. Лист за уеб стил е предназначен за каскадно преминаване през поредица от стилове в този лист, като река над водопад. Водата в реката удря всички скали във водопада, но само тези отдолу влияят точно къде водата ще тече. Същото важи и за каскадата в таблиците със стилове на уебсайтове.
Дизайнерските таблици със стилове заменят таблиците със стилове по подразбиране в браузъра
Всяка уеб страница е засегната от поне един лист със стилове, дори ако уеб дизайнерът не прилага никакви стилове. Този лист със стилове е таблицата със стилове на потребителския агент - известни също като стилове по подразбиране, които уеб браузърът ще използва за показване на страница, ако не са предоставени други инструкции. Например, по подразбиране хипервръзките са оформени в синьо и са подчертани. Тези стилове идват от таблицата със стилове по подразбиране на уеб браузъра. Ако уеб дизайнерът предоставя други инструкции, браузърът ще трябва да знае кои инструкции имат предимство. Всички браузъри имат свои собствени стилове по подразбиране, но много от тези по подразбиране (като подчертаните сини текстови връзки) се споделят във всички или повечето основни браузъри и версии.
За друг пример за браузър по подразбиране в нашия уеб браузър шрифтът по подразбиране е "Times New Roman"показва се на размер 16. Почти никоя от страниците, които посещаваме, не се показва в това семейство и размер на шрифтовете. Това е така, защото каскадата определя вторите стилови листове, които са зададени от самите дизайнери, да се предефинират размера на шрифта и семейство, заменяйки настройките по подразбиране на нашия уеб браузър. Всички таблици със стилове, които създавате за уеб страница, ще имат повече специфичност от стиловете по подразбиране на браузъра, така че тези настройки по подразбиране ще се прилагат само ако таблицата със стилове не ги замени. Ако искате връзките да са сини и подчертани, не е нужно да правите нищо, тъй като това е по подразбиране, но ако CSS файлът на вашия сайт казва, че връзките трябва да са зелени, този цвят ще замени синьото по подразбиране. Подчертаването ще остане в този пример, тъй като не сте посочили друго.
Къде се използва CSS?
CSS може да се използва и за определяне на това как да изглеждат уеб страниците, когато се гледат в други медии, различни от уеб браузър. Например можете да създадете лист със стил за печат, който ще определи как да се отпечатва уеб страницата. Тъй като елементите на уеб страницата, като бутоните за навигация или уеб формулярите, няма да имат предназначение върху отпечатаната страница, лист със стилове за печат може да се използва за „изключване“ на тези области при отпечатване на страница. Макар да не е често срещана практика на много сайтове, опцията за създаване на стилове за печат е мощна и привлекателна (в нашата опит - повечето уеб специалисти не правят това просто защото обхватът на даден сайт не изисква тази допълнителна работа да се направи).
Защо CSS е важен?
CSS е един от най-мощните инструменти, които уеб дизайнер може да научи, тъй като с него можете да повлияете на целия визуален облик на уебсайт. Добре написаните таблици със стилове могат да се актуализират бързо и да позволят на сайтовете да променят това, което е приоритетно визуално в екран, който от своя страна показва стойност и фокус на посетителите, без да е необходимо да се правят промени в подлежащ HTML маркиране.
Основното предизвикателство на CSS е, че има доста неща за учене - и с променящите се браузъри всеки ден, това, което работи добре днес може да няма смисъл утре, тъй като новите стилове стават подкрепяни, а други отпадат или изпадат в немилост по една причина или друг.
Кривата на обучение на CSS си заслужава
Тъй като CSS може да се каскадира и комбинира и като се има предвид как различните браузъри могат да интерпретират и прилагат директивите по различен начин, CSS може да бъде по-труден за изучаване от обикновения HTML. CSS също се променя в браузърите по начин, който HTML наистина не. След като започнете да използвате CSS обаче, ще видите, че използването на силата на таблиците със стилове ще ви даде невероятна гъвкавост в начина, по който подреждате уеб страниците и дефинирате външния им вид и усещане. По пътя ще натрупате „торба с трикове“ от стилове и подходи, които са работили за вас в миналото и към които можете да се обърнете отново, докато сте изграждане на нови уеб страници в бъдеще.