Jegyzet css - CSS osztályok

Az osztályok kulcsos kapcsoló CSS, mivel így szinte korlátlan lehetőségek alkalmazásának stílusok a különböző HTML-elemek. Osztály választó mindig kezdődik egy pontot (.), Ami után kerül rögzítésre, szóköz nélkül osztály neve. Összességében az alábbi szintaxist:

Az osztály neve - egy véletlen szót elér magát, de van egy határ, csak áll a latin ábécé karaktereit (a-z, A-Z), számokat (0-9), kötőjel (-) és aláhúzás (_). Sőt, az osztály neve nem kezdődhet számjeggyel, vagy kötőjellel majd egy számjegyet. Például, osztályok .block-1. -block3. kartinkiBlock. _7Block_vnizu - helyes és .1-blokk. -7block - nincs.

Oké, osztály, hoztunk létre stílusok neki regisztrált, de hogyan kell alkalmazni, hogy az elemek? Nos, minden könnyen. A címke alapvető eleme kell egyszerűen adja meg az attribútum class = „classname”. ahol class_name a neve az osztály ön találta. És ugyanabban az osztályban is használható tetszőleges számú címkék. Ez minden.

Ahogy emlékszem, CSS nem érzékenyek, de van egy „de”. Az osztály neve mindig felelnek meg pontosan, hogy mit írnak attribútum osztály. Például, ha van egy osztály .menuHeader, meg kell írni „menuHeader” class = tag. és nem a class = "menuheader". class = "MenuHeader", stb

Nos, itt az ideje, hogy vizsgálja meg a példa, de ne ijedjen meg előre, így sok stílus. Sőt, ha csak egy kicsit nekik jobban megnézed, biztos vagyok benne, hogy minden egyszerre megérteni.

Egy példa az osztályok CSS

Az eredmény a böngészőben

Keverjük össze CSS osztályok

A CSS megengedett Association osztályok, azzal jellemezve, hogy fel lehet használni egy teljesen más célja van: alkalmazni több osztály egy elemet vagy elemeket, szűkül a mintában.

Olyan stílust alkalmazni, hogy egy elem több osztály, ezen osztályok kell lapozhat egy rés a class attribútum. ahol, ha a több osztály bemutatni ugyanazt a tulajdonság, akkor lehet használni, amely alacsonyabb a kód táblázat stílusok.

A több CSS osztályok egyetlen elem

Az eredmény a böngészőben

Bold kék szöveg.

Félkövér dőlt szöveget.

Félkövér szöveg zöld.

Mint látható, az utolsó bekezdés, például a szöveges zöld, mint .green osztály alacsonyabb .blue. Menjünk tovább.

Néha szükség van az összerendelést egy másik osztályba vagy egy másik osztály választó (például egy tag), vagy mindkettő egyidejűleg szűk körének a minták. Ehhez a szelektor van megadva egy sorban szóköz nélkül, ebben az esetben a stílusok közül csak azokra vonatkozik elemeket, amelyek megfelelnek közvetlenül mindezen szelektor. Az általános szintaxis:

Példa osztályok társulva szelektorok CSS

Az eredmény a böngészőben

Megjegyzés: általában kombinálásával számos osztálya szelektor használt elrendezés meglehetősen ritka. de az osztályok uniója más szelektor - nagyon gyakran. különösen Címkeválasztó.

Ebben a példában használt azonos osztályú (.Megjegyzés) a különböző címkéket, és nagyon különböző stílusokat. Szintén figyelni az utolsó tag . A szöveg nem csak a tulajdonságait ezen osztályok használták, de azt is nekik, és a teljes tulajdon.

Ez a feladat nehezebb lesz korábban. Eleinte hittem neki, hogy várjon egy kicsit, de aztán úgy döntött, az ő osztályok határozzák meg. Végtére is, ez most jobb dudorok tölthető, mint később, amikor tényleg jobban szeretik a webhelyen. Különösen azért, mert az összes CSS tulajdonságokat, amelyek szükségesek, itt már szembesült, nos, azzal az eltéréssel, hogy az egyik lehet, hogy nem ismerik. Szóval