CSS Selectors. Typen vu Selektoren

Bloc'en an Ärem Code, all eenzel muss eng spezifesch Faarf hunn. Wéi ginn et? Déi Standard CSS Selektoren fir Tags maachen net funktionnéiert, spezifizéieren se d'Parameter fir all Blödsinn direkt. D'Ausgab ass einfach. Zu engem Element un Elementer ze weisen. Zum Beispill, den éischten Div giff klass = 'roude', déi zweet Div - Klasse = "blu", d'drëtt -klasse = 'gréng'. Elo kënnen se mat CSS Dëschen ausgewielt ginn.

D'Syntax ass: de Punkt (".") A spezielle Schrëftgréisst a. Duerfir schreiwe mir de Numm vun der Klass. Fir den éischte Block ze kontrolléieren, benotzt de .red design. Déi zweet ass .blue a sou weider.

Wichteg! Et ass recommandéiert datt Dir klore Wäerter fir de Klassattribute benotzt. Eng schlecht Form ass de Gebrauch vu Iwwersetzer (zB kranki-blok) oder Zufall Kombinatioune vun Bréiwer / Nummeren (ojfh834871). An esou de Code wäert Dir sécher verwiesselt ginn, net fir d'Schwieregkeeten ze soen déi déi déi mam Projet beschreiwen, no der Dir musst zoukommen. Déi bescht Alternatif ass eng Art Methodologie, wéi BEM.

Virdeeler sinn éischter grouss Flexibilitéit.

Nodeel - verschidden Elementer kënnen déi selwecht Klass sinn, a si si och gläichzäiteg verëffentlecht ginn. De Problem gëtt geléist mat der Methodik, souwéi d'Ierfschaft vu Viraarbechter. Maacht sécher, datt mir manner, Meed oder e puer anere Préprocessor meeschteren, sinn d'Aarbecht ganz vereinfacht.

Mam Identifikateur

Wat dës Optioun ubelaangt, sinn d'Meenungen vum Koder an d'Programméierer eidel. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Puer CSS Tutorials recommandéiere net de Gebrauch vun ID, well an exakt Applikatioun se Problemer mat Ierfschaft verursaache kann. Allerdéngs vill Spezialisten verdeele se aktiv am ganze Markup. Et ass Iech. # »), затем имя блока. D'Siwebiergen ass wéi follegt: den englesche Zeechen ( "#"), dann den Numm vun der Spär. #red. Zum Beispill, #red.

отличается от класса по нескольким параметрам. ID ass anescht aus der Klass an e puer Manéieren. ID. Éischt, kann d'Säit net zwee identesch ID ginn. Si ginn eenzeg Nimm. Zweetens, sou engem Selektor huet eng méi héich Prioritéit. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Dat heescht, datt wann Dir eng Eenheet Klass rout uginn an CSS Dëscher rout uginn Hannergrondfaarf, an duerno bis se uginn déi selwecht ID blo an uginn déi blo Faarf, d'Eenheet blo Tour gëtt.

Virdeeler - Dir kënnt e spezifescht Element kontrolléieren, net op Stierwen op Stile fir Tags a Klassen oppassen.

ID и class. Nodeeler - einfach ze kréien zu enger grousser Zuel vun ID an Klass verluer.

Wichteg! ID вам, в общем-то, не нужны. Wann Dir Bém Methodik sinn benotzt (oder hir mol), ID un Iech, am Allgemengen, sinn net néideg. Dës Technik vum Layout beinhalt d'Verwäertung vun eenzegaarteger Klassen, wat vill méi bequem ass.

Universal selector

{}. Siwebiergen: Starlets Zeechen ( "*") a Klameren, dh, {*} ...

Dir benotzt fir verschidden Elementer vun der Säit direkt z'erreechen. Wéini kënnt et an der Hand? box-sizing: border-box. Zum Beispill, wann Dir d'Säit Propriétéit Box-vu bis ageriicht wëllt: Grenz-Box. div *{}. Kann net nëmme benotzt ginn all Komponente vum Dokument ze verwalten, mee och all d'Kanner vun der spezifizéierter Spär ze kontrolléieren, zum Beispill, Divisiounen * {}.

Virdeeler - Dir kënnt eng grouss Zuel vun Elementer gläichzäiteg verwalten.

Nodeeler si keng flexibel Optioun. En plus, andeems Dir dës selector an e puer Fäll fuerdert d'Säit verlangsamt.

Mat Attributen

Et ass méiglech mat engem spezifeschen Attribut een Element ze managen. Zum Beispill, Dir hutt verschidden Input-Tags mat engem aner Typ attribut. Ee vun hinnen ass Text, dat zweet ass Passwuert, d'Drëtt ass Zuel. Natierlech kënnt Dir all Klass oder Identitéit ze klasséieren, awer et ass net ëmmer praktesch. CSS Selektoren duerch Attributë maachen et méiglech Werte fir gewësse Tags mat maximaler Genauegkeet ze spezifizéieren. Zum Beispill, wéi:

Input [Typ = 'text'] {}

Dëse Attribut Selektioun seleert all Input mat dem Texttyp.

Den Instrument ass relativ flexibel, et kann mat all Tags déi benotzt hunn Attributiounen. Mee dat ass net alles! An der CSS Spezifikatioun ass et méiglech datt d'Elementer souguer mat groussem Komfort verwalten!

Stellt Iech vir datt Är Säit en Input mat dem Attribut Plazhalter = "Numm beantrée" an inputfolderhalter = "Passwuert" aginn. Dir kënnt och wielt mat de selector! Déi folgend Konstruktioun gëtt fir dësen:

Input [Plazhalter = "Numm beantrécken"] {} oder input [Plazhalter = "Passwuert"]

Méi flexibel Aarbecht mat Attributer ass méiglech. Loosst Iech behaapten datt Dir e puer Tags mat ähnlechen Titelattributer hutt (sou "Caspian" an "Caspian"). Fir dësst Wielen ze benotze mat den folgenden Selecturen:

[Titel * = "Kaspian"]

CSS wäerte all Elementer an den Titel auswielen, wou et d'Symboler "Caspian" sinn, d. H. "Caspian" an "Caspian".

Dir kënnt och Wierder auswielen, déi d'Attributer mat gewësse Charaktere beginnt:

[Titel ^ = "Charakter deen Dir braucht"] {}

Oder Schluss mat hinnen:

[Tit $ = "desired character"] {}.

Virdeeler - maximal Flexibilitéit. Dir kënnt all existent Säit Elementer auswielen ouni ouni Coursen ze schéissen.

Nodeeler - relativ rar seelen, nëmmen an speziellen Fäll. Vill Web Designer léifste Methodik, well de Punkt Klass ass méi einfach wéi vill ze Rendez eckeg Klammeren a Schëlder "gläich". Zousätzlech kënnen dës Selecturen net an Internet Explorer Versioun 7 oder manner schaffen. Mee, wien elo den alen Internet Explorer brauch?

Pseudo-Klassekreesser

Eng Pseudo-Klass weist den Zoustand vun engem Element duer. Zum Beispill: Schwämm - wat geschitt mat engem Deel vun der Säit wann et iwwer de Schwamm réckelt :: besicht - Link besicht. Dëst beinhalt Elementer wéi: éischt-Kanner a: lescht-Kand.

Dës Zort vu Selektoren gëtt aktiv am moderne Layout benotzt, well e gëtt dank der Säit "live" ouni JavaScript benotzen. Zum Beispill, Dir wëllt et maachen, datt wann Dir iwwer e Knäppchen mat der btn Klasse hovert, ännert sech seng Faarf. Fir dat ze maachen, benotzen mir déi folgend Konstruktioun:

.btn: hover {

Background-color: rout;

}}

Fir Schéinheet kënnt Dir de Besëtz vum Knäppchen an den Haaptvirdeeler vun dësem Knäppchen spezifizéieren, zum Beispill an 0,5s - an dësem Fall klickt d'Knäp eriwwer net direkt, awer bannent engem halwen Sekonn.

Virdeeler - aktiv gebraucht fir d'Säiten "lieweg". Einfach ze benotzen.

Nodeeler - se sinn net. Dëst ass wierklech e prakteschen Instrument. Allerdéngs kënne onerfuere Redaktoren an de Fülle vu Pseudo-Klassen verwechselt ginn. De Problem gëtt geléiert duerch Studium a Praxis.

Pseudo-Element Selektoren

"Pseudo-Elementer" sinn déi Deeler vun der Säit déi net am HTML sinn, awer se kënnen nach ëmmer verwaltbar sinn. Huet Dir näischt verstinn? Alles ass méi einfach wéi et schéngt. Zum Beispill, Dir wëllt den éischte Bréif an der Linn grouss a roude Léiw maachen, andeems den aneren Text kleng a schwaarzt. Natierlech kënnt Dir dëse Bréif am Spann mat enger gewëssen Klasse schloen, awer et ass laang an langweileg. Et ass vill méi einfach de ganze Paragrapus ze benotzen an benotzt den :: éischt-Pseudo-Element. Et erlaabt Iech d'Optriede vum éischte Bréif ze kontrolléieren.

Et gëtt eng éischter grouss Zuel vu Pseudo-Elementer. Fir si ze lafen am Kader vun engem Artikel ass onwahrscheinlech ze schaffen. Dir fannt Informatiounen an Ärer Lieblingssécherung.

Virdeeler - Gitt d'Méiglechkeet ze flexibel d'Optriede vun der Säit z'änneren.

Nodeel - Ufänger bei hinnen sinn oft verwirrt. Vill Auswiel vun dësen Typen funktionéieren nëmmen an verschidden Browseren.

Ze summéieren

De Wënzer ass e kräftege Tool fir d'Dokumentablitéit ze kontrolléieren. Dank him ass ganz kaaft all Komponent vun der Säit (souguer d'existent ass nëmmen conditionell). Gitt sécher datt Dir all déi Méiglechkeeten leeft oder op mannst se ze schreiwen. Dëst ass besonnesch wichteg wann Dir komplexe Säiten mat e modernen Design an eng vill interaktive Elementer schreift.