Elementu bakoitzeko CSS klase bakar batera mugatzen zara.
Cascading Style Sheets (CSS) elementu baten itxura zehazten uzten dizu elementu horretan aplikatzen zaizkizun atributuak. Atributu hauek IDa edo klase bat izan daitezke eta, atributu guztiak bezala, erantsita dauden elementuei buruzko informazio lagungarria gehituko zaie. Elementu batera gehitzen zaren atributuaren arabera, CSS hautatzailea idazteko beharrezko osagai bisualak aplikatu behar dituzu, elementu horren itxura eta sentsazioa lortzeko eta webgunearen osotasunean lortzeko.
IDak edo klaseak CSS arauekin konektatzeko helburuarekin lan egiten duten bitartean, web diseinuaren metodo modernoek klaseak IDak baino gehiago onartzen dituzte, neurri batean, zehatzagoak eta errazagoak baitira orokorrean lan egiteko. Bai, identitateak erabiltzen dituzten gune ugari aurkituko dituzu, baina atributuak iraganean baino neurri txikiagoan aplikatzen ari dira klaseak web orrialde modernoak baino.
Gelaxka bakarrean edo klase anitzetan CSSn?
Kasu gehienetan elementu bateko klase klase bat esleitu beharko zenioke, baina ez duzu ID batekin zauden modu bakarra izango. Elementu batek IDaren atributu bakarra izan dezakeen bitartean, elementu bat baino gehiago klaseak eman ahal izango dituzu eta, kasu batzuetan, zure orriaren errazagoa izango da estilo eta askoz malgua.
Elementu bateko klaseak esleitu behar badizkiozu, klase osagarriak gehi ditzakezu eta, besterik gabe, zure atributuaren espazioarekin bereizi.
Adibidez, paragrafo honek hiru klase ditu:
pullquote featured left "> Hau paragrafoaren testua izango litzateke
Honek hurrengo hiru klaseak ezartzen ditu paragrafo-etiketa honetan:
- Pullquote
- Nabarmenduak
- Ezker
Klaseen balio horietako bakoitzaren arteko espazioen jakinarazpena. Espazio horiek klase desberdinak eta banakakoak ezartzen dituztenak dira. Horregatik, klase-izenak ezin ditu espazioak izan, hortaz, klase bereiziak ezarriko lituzke.
Adibidez, "pullquote-featured-left" erabili baduzu, espazio bat izan gabe, klase-balioa izango litzateke, baina goian adibidean, hiru hitz horiek espazioarekin bereizten direnean, banakako balioak ezartzen ditu. Garrantzitsua da kontzeptua ulertzea zure web orrietan zein klase-balioetan erabakitzen duzun erabakitzen duzun heinean.
Zure klase-balioak HTMLan dituzunean, gero CSS-eko klaseak esleitu eta gehitu nahi dituzun estiloak aplikatu. Adibidez.
.pullquote {...}
.featured {...}
p.left {...}
Adibide hauetakoren batean, CSSen adierazpenak eta balioak bikoteak kizkur giltzen barruan egon beharko lirateke, hau da, estilo horiek estilo egokiarekin aplikatuko lirateke.
Oharra: klase bat elementu jakin bat ezartzen baduzu (adibidez, p.left), oraindik ere erabil dezakezu klaseen zerrenda gisa; Hala ere, kontutan izan CSSan zehaztutako elementuek bakarrik eragingo dutela. Beste era batera esanda, p.left estiloa klase honetako paragrafoei bakarrik aplikatuko zaie, hautagailuak "paragrafoak" ezkerreko "klase-balioarekin" aplikatzeko esaten baitu. Aitzitik, adibidean beste bi aukeratzaileak ez dute elementu jakin bat zehazten, beraz, klase-balio horiek erabiltzen dituzten elementuei aplikatuko litzaieke.
Hainbat klasetako abantailak
Klase anitzek elementuentzako efektu bereziak gehitzea erraz dezakete elementu horrekin estilo berri bat sortu beharrik gabe.
Esate baterako, ezkerreko edo eskuineko elementuak mugitzeko gaitasuna izatea nahi duzu. Ezkerreko eta eskuineko bi klase idatz ditzakezu mugikorrarekin: utzi; eta flotatzen: zuzen; haietan. Orduan, ezkerreko flota egin behar duzun elementu bat izan ezkero, klase "ezkerrean" klase klasean gehitu besterik ez duzu.
Hemen oinez egiteko lerro fina dago, ordea. Gogoan izan web estandarrak estilo eta egitura bereiztea dela. Estruktura HTML bidez maneiatzen da estilo CSS-n bitartean.
Zure HTML dokumentua elementu guztiek betetzen dituzten elementuak "gorri" edo "ezker" bezalako izenak dituzten elementuak betetzen badituzu, zeintzuk diren elementuek zer itxura duten baieztatzen dituzten izenak dira, egitura eta estiloaren arteko lerroa zeharkatzen ari zara. Nire klase semantiko ez-semantikoak ahalik eta gehien mugatzeko saiatzen naiz.
Hainbat klase, semantika eta JavaScript
Klase bat baino gehiago erabiltzerakoan beste abantaila bat da interaktibitate aukera gehiago eskaintzen dituela.
Klase berriak aplikatu ditzakezu existitzen diren elementuei JavaScript erabiliz hasierako klaseak kendu gabe. Elementu baten semantika zehazteko klaseak ere erabil ditzakezu. Horrek esan nahi du elementu gehiago semantikoki definitzea definitzen duten klase gehigarriak gehi ditzakezula. Horrela funtzionatzen du Mikroformatuak.
Klase anitzetako desabantailak
Elementu anitzetan elementu ugari erabiltzeko desabantaila da denboran zehar begiratu eta kudeatzeko moduko neurririk ez izatea. Estiloak elementu bati eragiten dion zehaztea zaila izaten da eta scriptak eragiten badira. Gaur egun eskuragarri dauden esparru askotan, Bootstrap bezalakoak, hainbat klasetako elementuen erabilera astuna egiten dute. Kode hori eskuz atera daiteke eta oso azkar lan egitea oso zaila ez bada.
Klase bat baino gehiago erabiltzen duzunean, klase bateko estiloa izatea arriskuan jartzen baduzu, beste baten estiloa gainidatzi ere ez duzu horretarako asmoa izan. Horrela, zaila da zure estiloak zergatik ez dituztela aplikatzen, nahiz eta behar bezala agertzen diren.
Espezifikazioaren jakitun izan behar duzu, elementu horri aplikatutako atributuei ere!
Chrome-ko Webmaster tresnak bezalako tresna bat erabiliz, erraz ikusi dezakezu zure klaseak zure estiloak nola eragiten dituzten eta estilo eta atributuen gatazkak arazo hau ekiditeko.
Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 07/08/17