Az itt használt kifejezések a leírást CSS szabályokat.
1. ábra. A szokásos szabály CSS.
Példa CSS szabályok:
2. ábra. Példa CSS szabályokat.
Röviden a szabályok szintaxisa CSS:
MINŐSÉG A szelektor lehet bármilyen HTML tag, az is egy osztály választó vagy id-szelektor. Tekintsük mindent annak érdekében.
szelektor címkék
Amint korábban említettük, minden tag lehet egy CSS szabályt választó. Vegyünk egy példát.
Ez a stílus a felvétel megegyezik a következő szabály csoport:
leszármazott szelektor
Meg lehet rendelni elemeinek stílusát szabályok attól függően, hogy az elem van ágyazva a másik. Ha az egyik tag van ágyazva egy másik, a beágyazott tag hívta leszármazottja. egy címkét, amely be van ágyazva a leszármazottja nevű ősük. Például, meg kell adnia a bekezdések
belül az asztalra
piros szöveget. A probléma megoldására a kiválasztó elemek vannak elrendezve annak érdekében, a beágyazás és szóközzel vannak elválasztva. Ez a mi problémát meg lehet oldani a következők szerint:
Az összes tag
minden táblázatban a dokumentumban jelenik meg a vörös szín. Felhívjuk figyelmét, hogy a tag
belül a tag
is megjeleníti a szöveget pirossal.
Sőt, ahelyett,
megadhatja a címkét
. mivel a címke
Meg kell mindig tartalmaznak egy tag
.
Ahhoz, hogy tovább vizsgálja a CSS választók meg kell birkózni néhány egyszerű kifejezések kapcsolatos a szerkezet a dokumentumot.
dokumentum-fa
dokumentum fát (angol dokumentum fán.) - ez a rendszer az építési HTML dokumentum, amely bemutatja a sorrendben a címkék és fészkelő egymásba. Itt látható egy példa egy ilyen áramkör:
Itt látható egy példa a megfelelő kódot a fadiagram elemek 1. ábra.
Tehát vannak linkek a címkék között a HTML dokumentum. Ezek fejezik ki a fészkelő sorrendben a címkéket egy tag egy időben. Ezek a kapcsolatok nevezzük rokonság. és kijelölje különböző rokonsági használt kifejezések, mint ős és leszármazott, a szülő és a gyermek elemek és más „család” kifejezések.
Most tekintsünk minden típusú kapcsolatokat.
Ősök és leszármazottak
Ősök (ős) - elemek, amelyek más elemeket, azaz az elem egy őse az összes elem van beágyazva.
Leszármazottai (leszármazott) - elemek beágyazott egy másik elem.
Leszármazott szelektor már fentebb tárgyalt.
A szülők és a gyermek elemek
Szülő (szülő) - az őse az első szinten (azonnali őse) az elem. Gyermek elem (gyermek - gyermek) - leszármazottja az első szinten. Szülő elem lehet korlátlan számú gyermek.
A mi fán elemek a címke
következő gyermek elemei:
.
.
és a másik
.
A testvéri vagy testvérek
A testvéri vagy testvérek. (Született testvérek -. Testvérek), a csoport a elemek, amelyek közös szülő. Például címkék
.
.
és a második
- testvér, mivel van egy közös szülő
.
Kapcsolódó elemek
Kapcsolódó elemek - a testvéri szomszédos elem, vagyis az elemeknek ugyanaz a szülő és a gyaloglás mellett fa elemekkel. A mi példánkban, pár szomszédos eleme:
és
.
és
.
és
.
Most vissza a választókat.
Gyermek szelektor
Ha nem vagyunk érdekeltek a leszármazottai, de csak az első szintű leszármazottai, vagyis a gyermek elemek a CSS segítségével gyermek szelektor. Annak jelzésére, hogy a stílus szabályt csak a gyermek elem, a szimbólum „>” használják a választó.
HTML-kód a példához egybeesik a mintakódjának a választó leszármazottai, csak abban különbözik a stílus szabály. Ennek eredményeként a leányvállalat választó bekezdésszöveg táblázat a tartályban
nem piros, mert ez paragrafus
A szülő és a címke
őse.
Szomszédos (szomszédos) választó
A szelektor kiválasztja egy szomszédos elem elem található, közvetlenül a másik után, előre meghatározott elem. A szintaxis e választó: választó előző elem, a „+” jellel a választó kiválasztja egy elemet.
Itt látható a html-kódot a munka példáját a szomszédos elemek választó.
Egy másik nevet kapcsolódó szelektor: szomszédos választókat. itt lehet többet megtudni az ilyen típusú szelektor.
testvér szelektor
Kapcsolódó kiválasztó elem hasonló a szomszédos választó, de ez vonatkozik a minden ilyen elemet követő kiválasztott. Syntax kapcsolatos választó: szelektor előző elem, a jel "
„(Tilde), és mögötte a választó kiválasztja elemekkel.
Példa isolzovaniya ápolási választó.
A példa azt mutatja, hogy miután
címke szövegét bekezdés №3 is vörös. Azaz, hogy rendelni testvérek stílus nem megy egymás után.
univerzális szelektor
Ha megad egy karaktert a CSS szabály választó „*”, ez a szabály vonatkozik minden elemét az oldalt, kivétel nélkül. Nehéz elképzelni, hogy olyan esetben, amikor egy ilyen szabály van értelme. De van egy eset, amikor a fejlesztő azt akarja, hogy „reset” minden külső és belső béléssel. Akkor kell használni ezt a stílust:
De a „*” jelet lehet használni az alkatrész választókat.
Ez a kód hozzárendeli a piros szín a szöveg elem leszármazottai
.
Osztályba a CSS - a legjobb módja annak, hogy rendelni stílus rasrpostranonny csoport elemeit. Az osztály akkor használjuk, amikor meg kell adni a különböző stílusú elemek html-dokumentum által létrehozott egyik tag. szintaxis:
Az első stílus választó van írva jobb kulcsszó, majd egy ponton megadott osztály neve. Az osztály nevének meg kell kezdeni egy levelet, és tartalmazhat egy kötőjel (-) és aláhúzás (_).
Például, ha a felhasznált osztályok: felhasználásával készített címkéket webhelyén felső, oldalsó és alsó menüjében
. E három menük akkor létre kell hozni három különböző stílusban. A CSS-ben létre három osztályba ul.menu-top. ul.menu és ul.menu-alján.
A test a html-dokumentum menü jön létre a osztály jelzése a class attribútum:
.
.
.
Osztályok - általánosan használt CSS eszközöket. Ez kényelmes, ráadásul teszi a kód olvashatóbbá stílusban.
Akkor hozzon létre egy osztályt, amely alkalmazható bármely tag. Erre a célra az egyetemes választó.
Ez a bejegyzés lehet csökkenteni eltávolításával „*” jelet.
ID szelektorok (azonosítók)
Azonosítók - azokat a választókat megadásával egy egyedi nevet a tételt. Unique - majd egyszer találkozunk kódot dokumentumot. Segítségével azonosítókat hozhat létre egy stílust, de a fő cél -, hogy fellebbezni őket a szkripteket.
A bemutató hash tábla jelzi az elején (#), majd egy azonosító nevet.
Csakúgy, mint az osztály nevét, az azonosító nevét kell kezdődnie írni, és tartalmazhat egy kötőjel (-) és aláhúzás (_).
attribútum szelektor
A HTML-ben van néhány tag, amely attól függően, a tulajdonság változik tevékenységüket. Például a tag Attól függően, hogy az érték a type attribútum létrehozhat egy űrlap mezőt, gombok és más formában elemeket. Tehát, ha olyan stílust alkalmazni a választó bemenet. ez meg fog változni minden eleme a forma által létrehozott ezt a címkét. A pontos szabályozás ezen elemek léteznek a CSS attribútum szelektor.
Képesség szelektor eltérő. A rendszer segítségével a attribútum szelektor, akkor meg a stílus tag, ha van egy bizonyos tulajdonság, vagy ha egy adott tag attribútum egy bizonyos értéket.
Képesség szelektor - a téma egy másik nagyszerű cikket. csak megemlíteni ebben a cikkben, hogy azok.
ál
A rendszer segítségével a pszeudo-dinamikus hatások jönnek létre az oldalon.
Meg lehet alkalmazni, hogy az ál-szelektor vagy osztály azonosítókat (ul.menu:hover ).
A kezdők, megjegyzem, hogy ha az osztály nevét és identifikatov fejlesztő jön fel a neve is, az ál nevek CSS - ez tartalmazza a szót.
A: aktív ál végez stílus szabály, hogy ha az elem aktív. Például, egy link indukált egér klikk és támogatni. A pszeudo-osztály: hover - egér csak összpontosított tagja, például egy link.
Van egy csomó ál-osztályok. Teljesen nyilvánosságra pszeudo-téma lehet egy külön cikkben. Itt már érintettük csak felületesen.
ál
A rendszer segítségével a pszeudo-elemek is adhatunk az oldal tartalmát kiegészítő tartalom, amely nem a forráskódot. Lehetőség van arra is, hogy módosítsa a részét az elem, mint például az első betű egy bekezdés. Ez sozdaval képzeletbeli elem html - az első betű a megjelenítési stílusát.
A szintaxisa pszeudo-elemek megegyezik, hogy a pszeudo-osztályok: