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