Klaseak eta IDak Laguntza zabaldu zure CSS
Gaur egungo web orrien eraikuntzak CSS (Cascading Style Sheets) ulermen sakona behar du. Webgune bat ematen duzun argibideak dira, arakatzailearen leihoan nola egingo den zehazteko. HTML formatuan "estilo" batzuk aplikatzen dituzu, zure webgunearen itxura eta sentipena sortuko dutenak.
Agiri batean dokumentu hauetan aipatutako estilo horiek aplikatzeko modu asko daude, baina askotan dokumentu baten elementu batzuk bakarrik erabili nahi dituzu, baina ez da elementu horren instantzia guztiak.
Dokumentu batean hainbat elementu aplikatu ditzakezun estilo bat ere egin dezakezu, instrukzio bakoitzerako estilo-araua errepikatu gabe. Nahi dituzun estilo horiek lortzeko, klase eta IDko HTML atributuak erabiliko dituzu. Atributu hauek HTML etiketa guztietan aplikatu daitezkeen atributu orokorrak dira. Horrek esan nahi du zatiketa, paragrafoak, estekak, zerrendak edo beste dokumentu HTML batzuk zure estetikoki estilizatzea ala ez, klase eta ID atributuei jar diezaiekezu. Zeregin hori lortzen lagunduko duzu!
Klaseen hautagailuak
Klaseen hautagailua elementu berberak edo etiketa bat dokumentu batean ezartzeko aukera ematen du. Esate baterako, dokumentuaren gainerako testuetatik desberdina den testuaren atal batzuk izan ditzake. Nabarmendutako atal hauek orriaren ezarpen "alerta" izan liteke. Zure paragrafoak honela sailkatu ditzakezu hauekin:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Estilo hauek paragrafo guztien kolorea urdina (# 0000ff) ezarriko luke, baina "alerta" klasearen atributu batekin paragrafoak gorriz markatuta (# ff0000). Hau da klasearen atributuak CSS arauaren lehenengo arauaren gaineko zehaztasun handiagoa duela, etiketa hautatzailea soilik erabiltzen duena.
CSS-rekin lan egitean, arau zehatzago bat gutxiago zehaztuko da. Beraz, adibide honetan, arau orokorrenak paragrafo guztien kolorea ezartzen du, baina bigarrena, arau zehatzagoa, paragrafo batzuetan baino ezarpen hori gainidazten du.
Hona hemen horrelako HTML markaketa bat erabil daitekeen:
Paragrafo hau urdinez bistaratuko litzateke, hau da orriaren lehenetsia.
Paragrafo hau urdinez egongo litzateke.
Eta paragrafo hau gorriz bistaratuko litzateke, klasearen atributuak kolore urdina estandarra gainidatziko baitu elementuen hautatzailearen estilotik.
Adibide horretan, "p.alert" estiloa alerta-klase hori erabiltzen duten paragrafo-elementuei bakarrik aplikatuko litzaieke. Elementu hori HTML elementu anitzetan erabili nahi baduzu, HTML elementua ezabatu besterik ez duzu estilo-deira (ziurtatu epea utzita (.) lekuan), honela:
.alert {background-color: # ff0000;}
Klase hau orain behar duen edozein elementuren eskura dago. Zure "alerta" klase atributuaren balioa duen zure HTML zatiak estilo hau lortuko du orain. Beheko HTMLan, "alerta" klasean erabiltzen dugun paragrafo bat eta goiburuko 2. maila ditugu. Bi hauek kolore gorria izan beharko lukete CSSen oinarrituta.
Paragrafo hau gorriz idatziko litzateke.
Eta h2 hau gorri ere izango litzateke.
Gaur egungo webguneetan, klase-atributuak sarritan erabiltzen dira elementu gehienetan, IDa duten zehaztasun ikuspegitik errazago funtzionatzeko. HTML orrialde gehienak klasearen atributuei bete behar zaizkie, horietako batzuk dokumentu batean behin baino gehiagotan errepikatzen direnak eta behin bakarrik agertzen direnak.
ID hautatzaileak
ID hautagailuak izen bat ematen dio estilo jakin bati etiketa edo beste HTML elementu batekin lotu gabe. Esan zatiketa bat izan duzula zure HTML markupean gertakari bati buruzko informazioa duen.
Zatiketa hau "gertaera" IDaren atributu bat eman ahal izango duzu, eta, ondoren, 1 miliako ertz beltz zabaleko zatiketa hori zehaztu nahi baduzu, honela idatz ezazu ID kode hau:
#event {border: 1px solid # 000; }
ID aukeratzaileak dituzten erronka HTML dokumentu batean ezin direla errepikatu. Bakarra izan behar dute (ID bera erabil dezakezu zure webguneko hainbat orrialdeetan, baina behin bakarrik HTML dokumentu bakoitzean). Beraz, hiru gertakari izan badituzu, hau da "gertakari1", "event2" eta "event3" identitateen atributuak eta horien estiloa eman behar dituzula. Horregatik, "gertaera" klasearen atributuaren atributua erabiltzea errazagoa izango litzateke eta aldi berean guztiak estilatu.
Beste erronka bat da ID atributuei dagokienez, klaseen atributuak baino zehaztasun handiagoa dutela. Horrek esan nahi du lehenago ezarritako estiloa gainidazten duen CSS izan behar baduzu, oso zaila izan daiteke IDak gehiegi fidatu badituzu. Horregatik, hainbat web-garatzaileek beren markatzean IDak erabiltzetik alde egin dute, balioa behin bakarrik erabili nahi badute ere, eta, horregatik, ia estilo guztietako klase-atributu gutxiago bihurtu dira.
IDaren atributuak jokoan sartzen diren eremu bat da orrialdean orriko ainguruen estekak dituen orria sortzeko. Esate baterako, parallax estiloko webgune bat badu orrialde bakar bateko edukia duen orrialde horren zati desberdinak "salto" dituen estekekin. Honek IDaren atributuak eta aingura loturak erabiltzen dituzten testu-loturak erabiltzen ditu.
Bakarrik gehitu nahi diozu atributu horren balioa, # ikurrak aurretik, estekaren href atributura, honela:
Esteka hau da
Egin klik edo ukitutakoan, estekak IDaren atributu hori duen orriaren zatira joango da. Orriaren elementurik ez bada ID balio hori erabiltzen, esteka ez litzateke ezer egingo.
Gogoan izan, gune batean lotzen duzun orrialdea sortu nahi baduzu, ID atributuen erabilera beharrezkoa izango da, baina klaseetara jo dezakezu CSS estilo orokorrarentzako helburuetarako. Hau da, gaur egun markatzen ditugun orrialdeak - Klaseko hautagailuak ahalik eta gehien erabiltzen ditut eta IDak soilik aktibatzen baditut atributu hori CSSren ganbera gisa jarduteko, baina baita orrialdeko esteka gisa.
Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 17/08/17