Што е CSS - Кои се каскадните листови на стилот SISTRIX
Во веб-дизајнот, CSS нуди опција за зачувување на одредени стилски компоненти што се користат во HTML-документите централно во датотека и нивно користење за сите HTML-документи.
Што е CSS?
CSS се залага за Каскадни листови со стил и е можност HTML-документите да ја разделат содржината на страницата од инструкциите за дизајн на одделните елементи, како што се наслови, цитати, итн.
Можете да креирате CSS-датотека за домен и да ја интегрирате како надворешен ресурс на сите под-страници. Ова може да заштеди многу време кога има фиксни спецификации за елементите на мојот дизајн кои не се менуваат помеѓу документите.
Каскадниот дел станува јасен кога работиме со различни класи. На пример, во датотеката CSS можете да наведете дека сите наслови на H2 (родителски елемент) се прикажани во големината на фонтот 46 и потоа вметнете подкласа на H2 насловите (детски елемент) што содржи текст дебели печати кога е дефинирана одредена класа (на пр. „задебелена“).
Во документот, не мора да ги повторувам упатствата за големината на фонтот за подкласата, бидејќи ова е наследено од инструкциите на повисоко ниво (се прелева).
Со оваа инструкција секој добива
-Елементирајте ја големината на фонтот 42 и само наслови со
исто така се отпечатени со задебелени букви.
Зошто има каскадни листови со стил?
Способноста да се оддели дизајнот од содржината на документот носи забележителни предности на брзината. Индивидуалните HTML-документи се пократки, бидејќи упатствата за дизајн се аутсорсирани.
Покрај тоа, операторот на веб-страницата не мора да осигура дека се достапни сите потребни упатства за дизајн за секој документ. Ова може да ги намали административните напори неизмерно, особено со голем број документи.
Исто така, можам да им кажам на прелистувачите колку долго може да се користи CSS-датотеката (и колку долго може да се чува во кеш меморија). Ова значи дека прелистувачот не мора да ја презема датотеката секој пат, што е од корист на времето на вчитување.
Како можам да ги пренесам информациите за CSS на документ?
Постојат различни начини за вградување на CSS во HTML-документ. Двете најчести се поврзување со надворешна CSS-датотека и директно вградување во HTML-документ.
Надворешна датотека CSS
Обично е најлесно да се сумираат сите информации за стилот во CSS-датотека и да се упатуваат на тоа во делот на HTML-документот:
Ова му кажува на прелистувачот дека датотеката "my-stylesheet.css" мора да биде вчитана за правилно прикажување на содржината на HTML документот.
Вграден CSS
Можете исто така да изберете да додадете дел од мојот стилски лист директно, во делот на HTML документот.
Вие користите еден за тоа
Прелистувачот сега би знаел дека сите елементи со class = "img-responsive" треба да ги користат горенаведените упатства за стилот.
Употреба на CSS за оптимизација на пребарувачот
Способноста да се дефинираат информациите за стилот еднаш и да се имплементираат на сите под-страници природно, исто така, носи предности за оптимизација на пребарувачот.
Инструкции во датотека CSS може да се користат за да се утврди точно како документот се прикажува преку десктоп и/или мобилен прелистувач. Така, можете да направите еден Одговорен дизајн и сите под-страници можат да имаат корист од тоа, така што не се потребни две верзии за десктоп и мобилен телефон.
Покрај тоа, CSS се користеше со текот на годините за да се зголеми брзината на вчитување на многу веб-страници. Ова стана потребно кога беше потребен голем број датотеки за правилно прикажување на веб-страницата.
Изобилството на барања во постариот стандард HTTP, HTTP/1.1, значеше дека времето на вчитување беше продолжено само од причина што на прелистувачот му беше дозволено да создава само максимален број на врски.
Со новиот стандард HTTP/2, ова ограничување повеќе не се применува.
CSS и HTTP/1.1
Со HTTP/1.1, повеќето прелистувачи, во едноставни термини, дозволуваат само 6 симултани врски по домаќин. Покрај тоа, врските се прекинуваат по пренесувањето на ресурсот. Ова може да резултира во зголемено време на вчитување само заради латентноста (што е особено забележливо кај мобилните врски).
Можете исто така да вчитате графички елементи што се користат на веб-страницата како голема слика за слики и потоа да ги прикажете само оние делови од сликата што ја содржат потребната графика преку CSS.
CSS и HTTP/2
Со новиот стандард HTTP 2.0, ограничувањето на максималниот број на врски е релаксирано, а врските може да се користат и за повеќе од еден ресурс. Како резултат, латентноста на воспоставувањето на врската игра многу помала улога во брзината на страницата.
Заклучок за каскадните листови со стилови
CSS е составен дел од веб-дизајнот и има добра смисла како оптимизација за справување со можностите што ги нудат каскадните листови за стил.
Особено кога станува збор за оптимизацијата на PageSpeed, времето за прва содржина со боја сè уште може да се скрати денес со употреба на вграден CSS.