Mik a lépcsőzetes stíluslapok és mire használható a CSS?

Mik a lépcsőzetes stíluslapok és mire használható a CSS?

A CSS a HTML és a JavaScript mellett az alapvető webes technológiák hármasához tartozik. Gondos tervezéssel a CSS hozzájárul az aggodalmak elkülönítéséhez. A független erőforrások ellenőrzik a tartalom szerkezetét, megjelenítését és viselkedését.





A stíluslapok fontos szerepet játszanak a hozzáférhetőségben, a méretezhetőségben és még a webes teljesítményben is. Tartalomszerzőként vagy webtervezőként szabályozhatja, hogy az eszközök hogyan jelenítsék meg a tartalmat. Az elrendezéstől a betűméretig és színig a CSS gyönyörű megjelenésű oldalakká alakítja a tartalmat.





Hogyan néz ki a CSS?

A CSS nagy nyelv - sok különböző dolog van a stílusban! De szintaxisa egyszerű, csak néhány szabályt kell megtanulni.





A HTML -elemek különféle tulajdonságokkal rendelkeznek, amelyeket a CSS stílusosíthat. Az szín tulajdonság beállítja az előtér (pl. szöveg) színét. A betűméret attól függ betűméret ingatlan.

Minden tulajdonság beállítható egy támogatott értékre. Egy ingatlan értékének hozzárendelése „nyilatkozat”. Általában így néznek ki:



property: value

Például:

a wii u visszafelé kompatibilis a gamecube -al
color: red

A különböző tulajdonságok értékei nagyon különbözőnek tűnhetnek, akár ugyanazon ingatlan értékei is. Például itt van még két módszer az előző nyilatkozat megírására:





color: #ff0000
color: rgb(255, 0, 0)

Hogyan jön össze a HTML és a stíluslap

A HTML -t és a CSS -t néhány különböző módon kombinálhatja, mindegyik előnyeivel együtt.

Írásstílusok soron belül

A legegyszerűbb módszer, ha a stílusnyilatkozatokat közvetlenül a HTML -fájl elemeihez csatolja. Ezt megteheti a stílus attribútum így:






Most of this text is red …


… but this isn’t!


Bár az ilyen stílusú elemek kényelmesek lehetnek, számos hátránya van. Kezdetben bonyolítja a HTML -t, nehezíti az első pillantásra történő olvasást. Fájdalmas fenntartani is: képzeljünk el egy hosszú dokumentumot, amelyben minden bekezdés színét be akarjuk állítani. Ez a CSS, de nem a „Stíluslapok”.

Stílusok beágyazása a fejbe

A második mechanizmussal elkezdheti látni, hogyan néz ki egy stíluslap, beágyazás . Ezzel a megközelítéssel összegyűjtjük az összes stílusnyilatkozatot a stílus elem a fej dokumentumunkból. Ez valahogy így fog kinézni:





/* style instructions go here */



...

Stílusutasításainknak azonban kicsit részletesebbre van szükségük, mint korábban. Mivel a fejre helyeztük őket, az egyes szabályok már nincsenek társítva elemekkel. Lehet, hogy kijelentettük piros szín de mi legyen ennek a színnek?

Itt jönnek be a CSS -választók. Lehetővé teszik számunkra, hogy megcélozzuk az oldal bizonyos részeit, és egy helyen definiáljuk stílusukat, a következő szintaxissal:

hogyan lehet eltávolítani egy extra oldalt a Wordben
selector {
declaration1;
declaration2;
/* etc. */
}

Például a bekezdések szövegének kék színűvé alakításához a következőket adhatjuk meg:

p {
color: blue;
}

Ebben a példában a választó egyszerűen o , amely megfelel dokumentumunk minden bekezdéselemének. Az egész szöveget kékre színezi, amíg benne van

Külső stíluslap összekapcsolása

Az utolsó fedési módszer a linkelés. Ez messze a leghasznosabb megközelítés, és ezt a legtöbbször választania kell. Ahelyett, hogy beágyazná a CSS szabályokat a stílus elemet közvetlenül a dokumentumban, akkor áthelyezheti őket egy külön fájlba.


Illessze be ezt a kódot a a HTML -fájl címkéit a külső stíluslap összekapcsolásához.

A CSS ereje

A kapcsolódó módszerrel kihasználjuk a CSS egyik alapvető erejét: az aggodalmak elkülönítését. Minden szemantikai információ - mit jelent a tartalom - a HTML dokumentumban található. A stílus - hogy néz ki - egy külön fájlban, a stíluslapban található.

Íme csak néhány előnye ennek a szétválasztásnak:

  • Egy stíluslapot csak a fájlhivatkozás megváltoztatásával válthat ki. Ez akár dinamikusan is megtörténhet. Egy lépésben megváltoztathatja az oldal teljes kinézetét.
  • Sok oldal ugyanazokat a stíluslapokat használhatja, mint szükséges. Egyetlen fájl megváltoztatásával frissítheti a teljes webhely megjelenését.
  • Az oldal „tartalomra” és „stílusra” bontása technikai előnyökkel jár. A proxyk és a böngészők külön tárolhatják az egyes fájlokat. Ez azt jelenti, hogy egy webhely egyszer elküldheti a stílusinformációit, ahelyett, hogy minden egyes oldalra felvenné.
  • Az együttműködés során a különböző csapatok erősségeikhez mérten dolgozhatnak, külön fájlokat hozhatnak létre és szerkeszthetnek anélkül, hogy befolyásolnák egymást.

A kaszkád magyarázata

Sokat tanult a stílusokról és a stíluslapokról, de mi a helyzet a CSS lépcsőzetes részével?

A kaszkád határozza meg, hogy mely stílusokat használja, ha több stíluslap van jelen. Látta, hogy a szerző hogyan határozhat meg stílusokat a tartalmához. De a CSS egy másik jellemzője, hogy az olvasóknak és a böngészőgyártóknak is van véleményük erről.

Lehet, hogy már kíváncsi volt az alapértelmezett stílusokra. Például hogyan működik egy H1 elem nagynak és merésznek tűnik, akár szerzői stíluslapok nélkül is? Ez a felhasználói szabályok stíluslapját alkotó speciális szabályok összességének köszönhető. Ezeket a szabályokat a böngészője kezdetben minden meglátogatott oldalra alkalmazza.

A kaszkád megadja, hogy a szerző stíluslapja a user-agent stílusok után érvényes. Ha böngészőnk azt mondja, hogy a címsorok félkövérek, de az oldal szerzője kijelenti, hogy az ezen a lapon található címsorok világosak, akkor végül is világosak lesznek.

Van egy másik stíluslapforrás is, amely némi irányítást ad át az olvasónak. Elméletileg minden webfelhasználó egyéni szabályokkal karbantarthat felhasználói stíluslapot. Ezek középen állnak: a felhasználói szabályok felülírják az alapértelmezett böngészőbeállításokat, de a szerzői stílusok felülírják őket. Sajnos a felhasználói stíluslapok támogatása soha nem volt elterjedt.

Különböző médiumok célzása

A stíluslapokat különböző környezetekben, a képernyőn túl is használhatja. Az fél attribútuma link elem határozza meg, hogy a stíluslap mely médiatípusokra vonatkozik. Például meghatározhatja a stíluslap nyomtatásra jelölést használ, mint például:

Gyakori stílusokat gyűjthet össze egy globális stíluslapban, és média-specifikus stílusokat külön fájlokban. Vannak olyan médiatípusok is, amelyek a tartalom hangos vagy Braille -bemutatását szolgálják. A CSS alapvető eszköz a hozzáférhetőség javításában.

Összefüggő: Hogyan böngészhet az interneten, ha vak vagy látássérült

hogyan lehet ellenőrizni a merevlemez meghibásodását

Az olyan webhelyek, mint a Wikipédia, CSS -t használnak nyomtatási stílusuk szabályozására, a nem kívánt elemek elrejtésére és az elrendezés egyszerűsítésére.

A CSS jó megjelenést kölcsönöz a HTML -nek

A lépcsőzetes stíluslapok sok mindenre kiterjednek: a kaszkádra, az öröklődésre, a választókra, a forrásokra, a médiára stb. De erejük lehetővé teszi a modern internetet. Ez egy olyan médium, amely beépített újrafelhasználhatóságot, rugalmasságot és kisegítő lehetőségeket biztosít.

Ha meg szeretné tekinteni a CSS teljes erejét és azt, hogy mit kínál, nézze meg csalási lapunkat, amely minden lényeges CSS3 tulajdonságot tartalmaz.

Részvény Részvény Csipog Email Az alapvető CSS3 tulajdonságok csalólapja

Az alapvető CSS szintaxis elsajátítása a CSS3 tulajdonságok csalólapjával.

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • Webfejlesztés
  • CSS
A szerzőről Bobby Jack(58 cikk megjelent)

Bobby technológiai rajongó, aki két évtized nagy részében szoftverfejlesztőként dolgozott. Szenvedélyesen szereti a játékot, a Switch Player Magazin Vélemények szerkesztőjeként dolgozik, és elmerül az online közzététel és webfejlesztés minden területén.

Továbbiak Bobby Jack -től

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide