Css - 3. lecke
Próbáljuk meg a gyakorlatban. Nyissa meg a HTML oldalon és css-oldal létrehozva az előző leckét. Kérjük az oldal kék háttér. Mint bizonyára emlékeznek rá, felelős a címkét
. Ezután menj az oldalra style.css és írjuk be a következő kódot:Nyissa meg a html-oldalt a böngészőben, és ellenőrizze, hogy a háttérben kék színűre változik. Most pedig nézzük a szöveget a fehér oldalon:
Frissítse html oldalt a böngészőben (Ctrl + F5), és győződjön meg arról, hogy az összes szöveg most fehér. Most, hogy a piros szín a header (H1) és a sárga (H2):
Ismét frissítse a böngészőt, és győződjön meg arról, hogy minden olyan, mint tervezték.
Azt hiszem, az elv már világos: a pont választó, azaz az elem, amelyre vonatkozik, és melles - tulajdonságai és azok értékeit. Tulajdonságokat és értékeket tárgya lesz külön osztályok, addig tartjuk, az általános elv kidolgozásának stíluslapot.
CSS választók
ID szelektor
Példánkban használt szelektoroktól oldalelemek: test, H1, H2. De mi van, ha több azonos elemeket (pl bekezdések), és azt akarjuk, hogy a szöveg bekezdések fekete volt, és egyikük a HTML-oldal - rózsaszín. Ezután meg kell adnia egy egyedi azonosítót ebben a szakaszban, és hozzon létre a stílusát.
A HTML elem azonosító által meghatározott paraméter id. az értéke, amely jelzi egy egyedi nevet. Például:
A szöveg rész egy azonosítóval (id).
Neveket lehet adni más, mint egy fenntartott szó (ez tartalmazza a tag nevét és paramétereit HTML és CSS elemek), például, nem adja a nevét az azonosító szervezetben. Adjuk hozzá a html-oldalt egy pár bekezdésekben, és egyikük rendelni azonosítója:
Itt van egy szöveg
Ez a második szintű címsor
Itt van egy szöveg
Passage azonosító (id)
Ha megnézzük most az oldalunkon a böngésző, a részeket pedig fehérek. Add a stíluslap (style.css) stílusok a bekezdések:
Mi először azonosították, hogy a szöveg minden pontban a fekete és a szöveg bekezdésben id „rózsaszín”, hogy rózsaszín. A választó áll ebben az esetben elem (p), az elválasztó (#) és neve azonosítót (rózsaszín).
Fontos megjegyezni, hogy az oldal csak egy azonosítót (id). Ie A példánkban nem hozhat létre két bekezdést azonosítójú „pink”. azonosítójú szakasz lehet, hogy csak egy. De minden részén lehet saját identitását, például, akkor létrehozhat egy bekezdés id = „zöld”, és állítsa be a stílus, ami itt a stíluslap.
Szelektorok osztály
A fenti példában létrehoztunk egy részén rózsaszín szöveget, és jelezte, hogy ez id csak az egyik. De mi van, ha azt akarjuk, egy rózsaszín színét a szöveg két vagy három részből áll. Ehhez van egy HTML paraméter osztályban. az érték, amelynek a neve is mutatja.
Adjuk hozzá a html-oldalt egy pár bekezdés és hozzá class = „pink”.
Itt van egy szöveg
Ez a második szintű címsor
Itt van egy szöveg
Passage azonosítója
Passage egy osztály (class) rózsaszín
Passage egy osztály (class) rózsaszín
Annak érdekében, hogy meghatározza a stílust az ezen osztály stíluslap levelet szabályt, ahol a szelektor p elem és rózsaszín név lesz újra használható. de ebben az esetben a nevét az osztály, így a pont fogják használni, mint egy elválasztó (.):
Bekezdések az osztály bármely szám lehet.
Nézzük első eredmények:- ha minden ilyen elemeket (például, az összes fejléc H1) kell ugyanabban a stílusban, a szelektor áll, csak az, hogy elem (például, p)
Így mi lenne az elem már nem adott class = „red” (címsor, bekezdés vagy link), a szöveg színe, akkor pirosra. Ennek egyik eleme az oldalon (bármilyen) tudjuk beállítani id = „sárga” és a szöveg színe ez a tétel lesz sárga.
Engedje meg, hogy egy HTML-oldalt a kódot:
Szelektor elemEz a szöveg egy bekezdés
Itt van egy szöveg. Ez a szöveg dőlt betűs
Ez a szöveg egy bekezdés, de ez a rész dőlt
Azt akarjuk, hogy a pálya is a zöld szín jelzi. Akkor mi írjuk a stíluslap választó elem, azaz a
Most oldalunkat a böngésző így néz ki:
De mi van, ha el akarjuk kerülni a dőlt betűs szöveg a zöld szín jelzi, és az egyetlen, amely a szakaszok. Ehhez, akkor módosíthatja a stíluslap:
Tehát rámutatott, hogy alkalmazza a stílust az elemeknek i. amelyek a p-sejtekben. Nevek így szóközzel elválasztva. Ezek az úgynevezett kontextuális választókat. Most oldalunkat a böngésző így néz ki:
Tegyük fel, hogy amellett, hogy a színek, szeretnénk kérni a fejléc mérete. Akkor csak hozzá a mi stílusunk mérleg:
A címek lesznek a megadott méret, de ezek mind zöld.
Tény, hogy nem értenek egyet a csoportban. Egyesek úgy vélik, a megfelelő fenti kódot, mert csoportosítás segített megismétlésének elkerülése azonos tulajdonságokkal a három elem, ez csökkenti a kódot.
Mások úgy vélik, hogy így romlik a logika kódot. Mivel találni egy választó számára h3 fejléc nem azonnal világos, hogy miért a szöveget benne zöld. Támogatók logikai javasoljuk csoport csak olyan elemeket, amely blokkolja a leírások tökéletesen megegyeznek.
Ebben a leckében a választókat felett. A következő lecke megismerjék fogalmak, mint az ál-és pszeudo-osztályokat.
Ha ezen az oldalon volt hasznos az Ön számára, segíthet a fejlesztési azáltal az alábbi linkek webhelyére.