6. lecke ssylkirustutorial
Minden tanult a korábbi leckéket akkor lehet alkalmazni, referenciák / linkek (azaz változás színek, betűtípusok, aláhúzott, stb stb). Az új dolog az, hogy a CSS tulajdonságokat lehet meghatározni különböző módon, attól függően, hogy a link már meglátogatott, akár aktív, ha az egérmutató a hivatkozás fölé. Ez lehetővé teszi, hogy adjunk érdekes hatásokat a web-oldalon. Erre a célra az úgynevezett pszeudo-osztályokat.
Mi egy ál?
A pseudo-osztály lehetővé teszi, hogy vegye figyelembe a különböző körülmények vagy események, amikor tulajdonságait meghatározó HTM-tag.
Vegyünk egy példát. Mint tudja, a linkeket meghatározott HTML tag . A CSS-ben mi is használni, mint egy választó:
Használja | a: link | és | a: látogatott | nem látogatott és meglátogatott hivatkozások volt. Aktív linkek ál egy: aktív. és a: hover. ha a mutató - mint egy link.
Úgy véljük, mind a négy pszeudo-osztályok példákkal és magyarázatokkal.
A pszeudo-osztály: link
A pszeudo-osztály: link a link mutat egy lapot, hogy a felhasználó nem látogatható.
Az alábbi példában, nem látogatott hivatkozások kód - kék.
A pszeudo-osztály: látogatott
A pszeudo-osztály: látogatott használják linkek vezető lapok, hogy a felhasználó által meglátogatott. A példa kód, meglátogatott linkek - lila.
A: aktív ál
A pseudo-osztály: aktív használják linkeket, amelyek aktívak.
A példában az aktív hivatkozások sárga alapon.
: Hover pszeudo osztály
: Hover pszeudo osztály összekapcsolására alkalmazott, amely felett az egérmutatót.
Ezt fel lehet használni, hogy érdekes hatásokat. Például, ha azt akarjuk, hogy linkeket, hogy a narancs és lehet dőlt, amikor a kurzort mutatott nekik, mi CSS kell kinéznie:
1. példa: A hatás, ha a mutatót a hivatkozás
A helyzet az egérmutatót a link hatásokat vált közös helyen. Nézzük meg néhány extra példákat kapcsolatos ál: hover.
1a példa: A távolság a betűk
Mint bizonyára emlékeznek rá óráról 5 közötti távolság karakterek segítségével lehet beállítani az ingatlan letter-távolsággal. Ezt fel lehet használni a hivatkozás:
1b példa: nagybetűs és kisbetűs
Az 5. lecke megnéztük az ingatlan text-transform. amely lehet váltani karakter nagybetűs a kisbetűs. Azt is fel lehet használni, hogy olyan hatás linkek:
E két példa mutatja a szinte végtelen lehetőségek kombinálásával különböző tulajdonságokkal rendelkeznek. Hozhat létre saját hatások - próbáld ki!
2. példa: Eltávolítás aláhúzás linkek
A közös kérdés - hogyan lehet eltávolítani aláhúzás kapcsolatok?
Gondosan mérlegelnie kell, hogy szükséges-e eltávolítani a aláhúzás, mert jelentősen csökkentheti a használatát a web-oldalon. Az emberek megszokták, hogy a web-oldalt a kék, aláhúzott linkeket, és tudja, hogy meg kell kattintani rájuk. Még az anyám tudja! Ha megváltoztatja a aláhúzás és a hivatkozások színét, akkor nagyon valószínű, hogy ez megzavarja a felhasználók, és nem jut be a webhely tartalmáról web-oldalon.
Tény, hogy távolítsa el a aláhúzás kapcsolatok nagyon egyszerű. Mint talán emlékeznek a lecke 5. text-decoration tulajdonság lehet használni, hogy meghatározza a aláhúzás szöveget. Ahhoz, hogy távolítsa el az aláhúzás, egyszerűen az értéket a text-decoration none.
Alternatív beállíthatja text-dekoráció. együtt más tulajdonságok mind a négy pszeudo-osztályok.
Ebben a leckében tanultál pszeudo-osztályok segítségével néhány a tulajdonságokat a korábbi leckéket. Ez megmutatja, hogy milyen lehetőségek vannak beágyazva CSS.
A következő leckében megtanuljuk, tulajdonságait határozzák meg az egyes elemek és csoportok elemeket.