CSS választók 2

Mik szelektor

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: