Mi a CSS - Mik a lépcsőzetes stíluslapok SISTRIX
A webdesignban a CSS felajánlja, hogy a HTML dokumentumokban használt egyes stilisztikai összetevőket központilag fájlba mentse, és az összes HTML dokumentumhoz felhasználja.
Mi a CSS?
A CSS a Lépcsőzetes stíluslapok és egy módja annak, hogy a HTML dokumentumok leválasszák az oldal tartalmát az egyes elemek, például fejlécek, idézetek stb.
CSS fájlt hozhat létre egy tartományhoz, és külső erőforrásként integrálhatja az összes aloldalra. Ez sok időt takaríthat meg, amikor a tervezési elemekre vonatkozóan rögzített irányelvek vannak, amelyek nem változnak a dokumentumok között.
A lépcsőzetes rész világossá válik, amikor különböző osztályokkal foglalkozunk. Például megadhatja a CSS fájlban, hogy az összes H2 fejléc (szülőelem) 46 betűméretben jelenik meg, majd beszúrja a H2 fejlécek (gyermekelem) egy alosztályát, amely tartalmazza a szöveget zsír akkor nyomtat, ha egy bizonyos osztály (pl. "félkövér") meg van határozva.
A dokumentumban nem kell megismételnem az alosztály betűméretére vonatkozó utasítást, mivel ez a magasabb szintű utasításból öröklődik (átcsúszik).
Ezzel az utasítással mindenki megkapja
-Elemezze a 42-es betűméretet, és csak a címsorokat használja
félkövéren is vannak nyomtatva.
Miért vannak lépcsőzetes stíluslapok?
A tervezés és a dokumentum tartalmának elválasztásának képessége észrevehető sebességelőnyökkel jár. Az egyes HTML dokumentumok rövidebbek, mert a tervezési utasításokat kihelyezik.
Ezenkívül a weboldal üzemeltetőjének nem kell biztosítania, hogy minden dokumentumhoz rendelkezésre álljon az összes szükséges tervezési utasítás. Ez rendkívül csökkentheti az adminisztrációs erőfeszítéseket, különösen nagy számú dokumentum esetén.
Azt is meg tudom mondani a böngészőknek, hogy meddig használható a CSS fájl (és meddig lehet tárolni). Ez azt jelenti, hogy a böngészőnek nem kell minden alkalommal letöltenie a fájlt, ami előnyös a betöltési idő szempontjából.
Hogyan adhatom át a CSS-információkat egy dokumentumnak?
Különböző módon lehet beágyazni a CSS-t egy HTML-dokumentumba. A két leggyakoribb az összekapcsolás egy külső CSS fájlhoz és a közvetlen beágyazás egy HTML dokumentumba.
Külső CSS fájl
Általában a legegyszerűbb összes stílusinformációt összefoglalni egy CSS fájlban, és erre hivatkozni a HTML dokumentum részében:
Ez azt mondja a böngészőnek, hogy a "my-stylesheet.css" fájlt be kell tölteni a HTML-dokumentum tartalmának megfelelő megjelenítéséhez.
Inline CSS
Választhatja azt is, hogy a stíluslapom egy részét közvetlenül hozzáadja-e a HTML-dokumentum szakaszához.
Ehhez használ egyet
A böngésző most már tudná, hogy az összes class = "img-responsive" elemnek a fenti stílusutasításokat kell használnia.
A CSS használata a keresőmotorok optimalizálásához
A stílusinformációk egyszeri meghatározásának és az összes aloldalon történő megvalósításának természetesen előnyei vannak a keresőmotorok optimalizálása szempontjából is.
A CSS-fájlban található utasítások felhasználásával meghatározható, hogy pontosan hogyan jelenik meg a dokumentum az asztali és/vagy mobil böngészőben. Tehát megtehet egyet Reszponzív dizájn és minden aloldal profitálhat belőle, így nincs szükség két verzióra az asztali és a mobileszközökhöz.
Ezenkívül a CSS-t az évek során számos webhely betöltési sebességének növelésére használták. Erre akkor volt szükség, amikor nagyszámú fájlra volt szükség a weboldal megfelelő megjelenítéséhez.
A régebbi HTTP szabványban, a HTTP/1.1-ben szereplő kérelmek bősége azt jelentette, hogy a betöltési idő meghosszabbodott csak azért, mert a böngésző csak a kapcsolatok maximális számát hozhatta létre.
Az új HTTP/2 szabványnál ez a korlátozás már nem alkalmazható.
CSS és HTTP/1.1
A HTTP/1.1 használatával a legtöbb böngésző egyszerűen leegyszerűsítve csak 6 egyidejű kapcsolatot engedélyez gépenként. Ezenkívül a kapcsolatok az erőforrás átadása után megszakadnak. Ez megnövekedett töltési időket eredményezhet csak a késés miatt (ami különösen észrevehető a mobil kapcsolatoknál).
Betölthet olyan grafikus elemeket is, amelyeket a weboldalon nagy képkockaként használnak, majd csak a kép azon részeit jelenítheti meg, amelyek tartalmazzák a szükséges grafikát CSS-en keresztül.
CSS és HTTP/2
Az új HTTP 2.0 szabvány révén a kapcsolatok maximális számának korlátozása enyhül, és a kapcsolatok egynél több erőforráshoz is felhasználhatók. Ennek eredményeként a kapcsolat létrehozásának késése sokkal kisebb szerepet játszik az oldal sebességében.
Következtetés a lépcsőzetes stíluslapokról
A CSS a webdesign szerves része, és SEO-ként teljesen logikus kezelni a lépcsőzetes stíluslapok kínálta lehetőségeket.
Különösen, ha a PageSpeed optimalizálásról van szó, az első tartalmas festés ideje még mindig lerövidíthető az inline CSS használatával.