Čo je CSS - Čo sú kaskádové štýly SISTRIX
Vo webdizajne ponúka CSS možnosť uložiť niektoré štylistické komponenty, ktoré sa používajú v dokumentoch HTML, centrálne do súboru a použiť ich pre všetky dokumenty HTML.
Čo je to CSS?
CSS znamená Kaskádové štýly a je to možnosť, aby dokumenty HTML oddelili obsah stránky od pokynov na návrh jednotlivých prvkov, ako sú nadpisy, citácie atď.
Môžete vytvoriť súbor CSS pre doménu a integrovať ho ako externý zdroj na všetkých podstránkach. To môže ušetriť veľa času, keď existujú pevné pokyny pre moje dizajnové prvky, ktoré sa medzi dokumentmi nemenia.
Kaskádová časť sa vyjasní pri rokovaniach s rôznymi triedami. Napríklad v súbore CSS môžete určiť, aby sa všetky nadpisy H2 (nadradený prvok) zobrazovali vo veľkosti písma 46, a potom vložiť podtriedu nadpisov H2 (podradený prvok), ktorá obsahuje text tučný vypíše, ak je definovaná určitá trieda (napr. tučne).
V dokumente nemusím opakovať inštrukciu o veľkosti písma pre podtriedu, pretože sa to dedí z inštrukcie na vyššej úrovni (prelieva sa).
S týmto pokynom dostane každý
-Element veľkosť písma 42 a iba nadpisy s
sú tiež vytlačené tučným písmom.
Prečo existujú kaskádové štýly?
Schopnosť oddeliť dizajn od obsahu dokumentu prináša zjavné rýchlostné výhody. Jednotlivé dokumenty HTML sú kratšie, pretože konštrukčné pokyny sú zadávané externe.
Prevádzkovateľ webových stránok navyše nemusí zaistiť, aby boli pre každý dokument k dispozícii všetky potrebné pokyny pre dizajn. To môže nesmierne znížiť administratívne úsilie, najmä pri veľkom počte dokumentov.
Môžem tiež prehľadávačom povedať, ako dlho je možné súbor CSS používať (a ako dlho sa môže ukladať do medzipamäte). To znamená, že prehliadač nemusí zakaždým sťahovať súbor, čo prospieva dobe načítania.
Ako môžem odovzdať informácie CSS do dokumentu?
Existujú rôzne spôsoby, ako vložiť CSS do dokumentu HTML. Dva najbežnejšie sú odkaz na externý súbor CSS a priame vkladanie do dokumentu HTML.
Externý súbor CSS
Spravidla je najjednoduchšie zhrnúť všetky informácie o štýle do súboru CSS a odkázať na ne v časti dokumentu HTML:
Toto informuje prehliadač, že aby sa mohol správne zobraziť obsah dokumentu HTML, musí sa načítať súbor „my-stylesheet.css“.
Vložené CSS
Môžete sa tiež rozhodnúť pridať časť mojej šablóny štýlov priamo v sekcii dokumentu HTML.
Na to použijete jednu
Prehliadač by teraz vedel, že všetky prvky s class = "img-responsive" by mali používať vyššie uvedené pokyny pre štýl.
Použitie CSS na optimalizáciu vyhľadávacieho modulu
Schopnosť definovať informácie o štýle naraz a implementovať ich na všetky podstránky prirodzene prináša výhody aj pre optimalizáciu vyhľadávacích nástrojov.
Podľa pokynov v súbore CSS môžete presne určiť, ako sa dokument zobrazuje v stolnom alebo mobilnom prehliadači. Takže môžete urobiť jeden Citlivý dizajn a môžu z toho ťažiť všetky podstránky, takže pre počítač a mobil nie sú potrebné dve verzie.
CSS sa navyše v priebehu rokov používal na zvýšenie rýchlosti načítania mnohých webových stránok. To bolo nevyhnutné, keď sa na správne zobrazenie webovej stránky vyžadovalo veľké množstvo súborov.
Množstvo požiadaviek v staršom štandarde HTTP, HTTP/1.1, znamenalo, že čas načítania sa predĺžil iba z toho dôvodu, že prehliadač mohol vytvárať iba maximálny počet pripojení.
S novým štandardom HTTP/2 už toto obmedzenie nie je použiteľné.
CSS a HTTP/1.1
Vďaka protokolu HTTP/1.1 umožňuje väčšina prehľadávačov zjednodušene povedané iba 6 simultánnych pripojení na hostiteľa. Okrem toho sa spojenia ukončia po prenose prostriedku. To môže mať za následok predĺženie času načítania kvôli samotnej latencii (čo je obzvlášť viditeľné pri mobilných pripojeniach).
Môžete tiež načítať grafické prvky, ktoré sa používajú na webe, ako veľký obrázkový škriatok a potom pomocou CSS zobraziť iba tie časti obrázka, ktoré obsahujú požadovanú grafiku.
CSS a HTTP/2
S novým štandardom HTTP 2.0 sa limit maximálneho počtu pripojení zmiernil a pripojenia je možné použiť aj pre viac ako jeden prostriedok. Výsledkom je, že latencia vytvorenia spojenia zohráva oveľa menšiu rolu v rýchlosti stránky.
Záver kaskádových štýlov
CSS sa stalo neoddeliteľnou súčasťou webdizajnu a ako SEO má dokonalý zmysel zaoberať sa možnosťami, ktoré kaskádové štýly ponúkajú.
Najmä pokiaľ ide o optimalizáciu PageSpeed, čas na prvé spokojné vykreslenie sa dá ešte dnes skrátiť použitím vloženého CSS.