Web készségek leckék
IT infrastruktúra az Ön vállalkozása számára
Ma meg fogjuk ismerni az alapfogalmakat és néhány példát a CSS (stílustáblák) gyakorlati használatára.
Nézzük meg az alapvető technikákat, amelyek szükségesek a webmester kezdetéhez. Egy lecke tanulmányozásához minden olyan lehetőség, amit a stíluslapok nyújtanak, és a velük kapcsolatos összes probléma nem tűnik megfelelőnek, és nem ez a lecke feladata. Az internet erőforrásaira való utalásokat, ahol a stílustáblázatok specifikációit adják meg, és minden tulajdonságukat konkrét használati példákkal magyarázzák, a cikk végén található "Hasznos linkek" oldalsávban találja.
Mi a stíluslap és miért van szükségük?
Tehát a stílus egy olyan szabály, amely meghatározza egy elem megjelenését egy dokumentumban.
A stílustáblák előnyei:
- A stíluslapok lehetővé teszik az oldalak logikai struktúrájának elválasztását a vizuális megjelenítésből (design). Végtére is, a HTML nyelvet eredetileg a dokumentum szerkezetének jelölésére tervezték.
- A létrehozott stíluslap a webhely minden oldalára alkalmazható, ami miatt a tervének egységét betartják.
- Ha a webhelyet egyetlen stíluslap segítségével díszítik, akkor a módosítások módosítása esetén egy helyen (a stílustáblázatban) ezek a változások hatással lesznek a webhely összes oldalára. Nem kell megnyitnia és szerkesztenie az összes olyan oldalt, ahol ezek a címkék előfordulnak. Így a CSS lehetővé teszi, hogy rugalmasan ellenőrizze az oldalak külső megjelenítését a képernyőn.
- A stíluslapok webmestereknek bőséges lehetőséget biztosítanak az oldalak elrendezésére. Mint tudják, a HTML nyelvének e tekintetben alkalmazott eszközei meglehetősen szűkösek. De légy óvatos. A stíluslapok specifikációjában leírt összes tulajdonságot a böngészők nem támogatják. Ezért, mint a HTML-címkék esetében, tesztelje őket különböző böngészőkben.
Vegyünk egy konkrét példát.
Az 1. ábrán. 1. ábrák:
- HTML kód a kbcss.HTML;
- stílusú design table site.css;
- Az oldal megjelenítése az Internet Explorerben.
Az oldal megtervezése meglehetősen sematikus:
Felhívjuk a figyelmet arra, hogy a stíluslap bal oldalán és a HTML kódsorok sorában megjelenik a szám. Mivel a listák elég nagyok, célszerűbb egy adott vonalra hivatkozni.
A kép rövid leírása:
Javaslom, hogy ismételje meg ezt az oldalt, és először próbálja meg magának csinálni, és ha valami nem működik, nézze meg HTML-kódját. A következő, hatodik és végső leckében visszatérünk erre a példára.
A stíluslapok szintaxisa
A szabály két részből áll:
- a választó (H1) meghatároz egy címkét a HTML dokumentumban (cím, bekezdés, stb.);
- A definíció (szín: piros) határozza meg a választót (címke) alkalmazott stílust.
A meghatározás viszont két részből áll: a tulajdonság (szín) és az érték (piros). Ezeket zárójelben írták és kettősponttal elválasztották egymástól. A tulajdonságok és egyes értékek a stíluslap specifikációjában vannak meghatározva. A választók vesszővel (,), meghatározásokkal vannak csoportosítva - pontosvesszővel (;).
Ebben a példában ugyanaz a design az első és a második szint fejlécéhez. Pirosak és Arial betűkészletek lesznek.
Miért a csoportosulás? A válasz egyszerű - a táblázat méretének csökkentése.
öröklés
Ez az egyik tag tulajdonsága, hogy örököse a másik tulajdonságait.
Az előző példákban meghatároztuk a címkét
piros színű. Tegyük fel a weboldalon belül
dőlt kiválasztás történik:
Példa a szülőelem tulajdonságainak öröklésére
Kérdés: milyen színű lesz az "öröklés" szó?
A válasz piros (és Arial).
Magyarázat: Mivel a címke színét nem definiáltuk, az örökölni fogja a tulajdonságot a szülőtitkából, ebben az esetben a
Ábra. 2. A CSS szintaxisa
Milyen csodálatos ingatlan! Hála neki, nem kell stílusokat definiálnia minden olyan címke számára, amelyet HTML oldalak létrehozásakor használsz - képzeld el, milyen kellemetlen és hosszú lesz! Elég a teljes dokumentum alapértelmezett stílusának meghatározása. És csak akkor, ha szükséges, adjon hozzá stílusokat különböző címkékhez.
Hogyan határozza meg ezt az alapértelmezett stílust? Melyik címke?
- az összes többi címke örökölni belőle.
Az 1. ábrán. 3 vázlatosan "fa" -ként egy HTML oldalt ábrázol.
Az oldal egy hierarchikus struktúra. A legmagasabb szinten a címke
a következőre. és így tovább.
Fontos megjegyezni, hogy a gyakorlatban az öröklést nem mindig megfelelően támogatja a böngészők.
Jegyezze fel a stíluslap listáján szereplő 7-10 sorokat (1. ábra). Duplikálják a megadott stílust
Ez azért van így, hogy az oldal különböző böngészőkben megegyezzen.
Kontúrválasztók
Ez a stílus a szelektorhoz (címke), amely egy másik választó (címke) alatt található. A példában:
Példa a szülőelem tulajdonságainak öröklésére
Meghatározhatja a stílus kialakítását, amikor belsejében van
Amint a példából is látszik, a kontúrválasztó egy szóközt használ.
Ebben a példában az összes címke között
zöld lesz.
Több kontextusválasztó csoportosítása is lehetséges:
A stíluslapok néhány jellemzőjét már figyelembe vették. Valószínűleg feltett egy kérdést: és hogyan kell alkalmazni ezeket a stílusokat egy HTML-oldalra?
Beleértve a stíluslapokat egy HTML dokumentumban
Háromféle módon lehet CSS-t hozzáadni egy HTML dokumentumhoz (4. ábra):
- Külső stíluslap csatlakoztatása (
- Belső stíluslap használata, amely csak ebben a dokumentumban érvényes (
- A stílust közvetlenül a címkén belül megadhatja
Nyilvánvaló, hogy a külső stíluslap használata a legelőnyösebb lehetőség. Végül is ezt a táblázatot csatlakoztathatja a webhely összes dokumentumához, és így meglehetősen rugalmas mechanizmust nyerhet a megjelenés kezelésére. Amikor egy fájlt (site.css, lásd a 4. ábrát) végez, módosításokat vagy kiegészítéseket hajt végre, minden oldalra azonnal hatályba lép.
A (második út) stílustáblázat csak egy dokumentumban érvényes.
A harmadik út elveszíti a stíluslapok előnyeit, mivel a címkén belül van megírva, és ennek megfelelően csak erre vonatkozik. Képzeld el, hogy ezt a stílust kétszáz oldalra kell változtatni.
Miért lépnek fel a táblák?
Amint az 1. ábrából látható. 4. A dokumentumhoz egyszerre több stíluslap is alkalmazható. Mi történik, ha a stílusbeállítások átfedik egymást, mint az első szint fejlécében
Milyen színű lesz a "Stílus táblázat" felirat, amikor a felhasználó a böngészőben látja: piros (
Példánkban a 2. ábrán. 4 a "Stílus táblázat" felirat a kék lesz.
Hasznos linkek
- Böngésző támogatás. Az alábbi táblázatok a CSS1 és a CSS2 specifikációit támogatják mind a böngészők mind az új verziók régi verzióiban (IE 4-6, Netscape 4-7, Opera 3.5-7 Windows és Macintosh vezérlés alatt). A táblázatokban a következő szimbólumokat használjuk: Y - igen, igen, a választó vagy a tulajdonság támogatott, P - részleges, részben támogatott, azaz. egyes értéktípusok nem támogatottak, B - támogatás végrehajtva hibákkal, N - nem, nem támogatott
- Ugyanazon az oldalon található egy tankönyv a CSS-en (angol nyelven)
- A World Wide Web Concortium honlapján megtalálja a következőket:
CSS validator az online létrehozott stíluslap ellenőrzéséhez (adja meg stíluslapjának URI-jét, illessze be az űrlapmezőbe a tartalmát, és adja meg a számítógép stílustáblájának elérési útját). Ezt a programot ingyen letöltheti számítógépén
- Egy olyan oldal, amely bemutatja a különböző stíluslapok HTML oldalra való alkalmazását (a bal oldalon, a stílus kiválasztása, az oldal, amelyre vonatkozik, a jobb oldalon található). Ezenkívül az egyes stíluslapok tartalmát is megtekintheti
Kapcsolódó cikkek