Propietateak CSSren pieza zentrala dira. Elementu bati aplika dakizkiokeen estilo guztiak propietateen bidez definitzen dira.
Aurreko adibideetan sartu ditugu batzuk, baina ehunka propietate daude eskuragarri. Azterketa sinplifikatzeko, bi motatan sailka daitezke:
formatu-propietateak: elementuei eta haien edukiari forma emateko
diseinu-propietateak: pantailan elementuen tamaina eta kokapena zehazteko
Era berean, formatu-propietateak sortzen duten aldaketa motaren arabera sailka daitezke.
Propietate batzuek testua erakusteko erabiltzen den letra-mota aldatzen dute.
Beste batzuek elementuaren inguruan ertz bat sortzen dute.
Beste batzuek elementuari hondo-kolore bat esleitzen diote.
Eta abar.
Kapitulu honetan formatu-propietateak sartuko ditugu sailkapen horri jarraituz.
Testua
CSS medio testuaren hainbat alderdi kontrola daitezke, hala nola pantailan erakusteko erabiltzen den letra mota, lerroen arteko espazioa, lerrokadura, etab.
Honako hauek dira testu baten letra mota, tamaina eta estiloa definitzeko dauden propietateak.
font-family — Propietate horrek testua erakusteko erabiltzen den letra-mota adierazten du. Komaz bereizitako hainbat balio adieraz daitezke, nabigatzaileari hainbat aukera eskaintzeko, baldin eta letra mota batzuk erabiltzailearen ordenagailuan eskuragarri ez badaude. Balio estandarretako batzuk Georgia, “Times New Roman”, Arial, Helvetica, “Arial Black”, Gadget, Tahoma, Geneva, Helvetica, Verdana, Geneva, Impact eta sans-serif dira. (hitz batez baino gehiagoz osatutako izenak komatxo bikoitzen artean adierazi behar dira).
font-size — Propietate horrek letraren tamaina zehazten du. Balioa pixeletan (px), ehunekoetan ( %) adieraz daiteke, edo CSSn eskuragarri dagoen edozein unitate erabiliz (em, rem, pt, etab.). Lehenetsitako balioa normalean 16px. font-weight da. Ezaugarri horrek zehazten du testua letra lodiz agertuko den ala ez. Balio erabilgarriak normala eta bold dira, baina 100, 200, 300, 400, 500, 600, 700, 800 eta 900 balioak ere esleitu ditzakegu letraren lodiera zehazteko (azken horiek letra-mota batzuetarako bakarrik daude eskuragarri).
font-style — Propietate horrek letraren estiloa zehazten du. Balio erabilgarriak normala, italic eta oblique dira.
font —Propietate horrek aukera ematen digu aldi berean balio anitz deklaratzeko. Balioak espazio baten bidez eta ordena zehatz batean bereizi behar dira. Estiloa eta lodiera tamaina baino lehen adierazi behar dira, eta letra-mota amaieran (adibidez, font: bold 24px Arial, sans-serif).
Propietate horiek aldatu nahi dugun testua duen elementu (edo elementu aita) bakoitzari aplikatu behar zaizkio.
Adibidez, hurrengo dokumentuak goiburu bat du izenburu batekin eta atal bat paragrafo batekin. Izenburuari eta testuari letra-mota desberdinak esleitu nahi dizkiegunez, id atributua sartu behar dugu elementu bakoitzean, CSS arauetatik identifikatu ahal izateko.
<!DOCTYPE html> <html lang="es"> <head> <title>Dokumentuaren izena hemen jarri</title> <meta charset="utf-8"> <link rel="stylesheet" href="nirEstiloak.css"> </head> <body> <header> <span id="titulua">Ur-jauzi erako estilo-orriak</span> </header> <section> <p id="azalpena">Ur-jauzi erako estilo-orriak (CSS ere deituak, ingeleseko Cascading Style Sheets) diseinu grafikoko lengoaia bat da HTML etiketa lengoaiaren bitartez eraikitako egiturari definizioa eta itxura emateko.</p> </section> <footer> <a href="http://www.jdgauchat.com">www.jdgauchat.com</a> </footer> </body> </html>
Formatu-propietateak probatzen
Arauek nahi ditugun estiloak esleitzeko behar diren propietate guztiak jaso behar dituzte. Adibidez, testuari letra-mota bat eta tamaina berri bat esleitu nahi badizkiogu, font-family eta font-size propietateak sartu behar ditugu.
Elementuaren hainbat alderdi aldatzeko arau berean hainbat propietate adieraz baditzakegu ere, CSSk font izeneko propietate laburtua eskaintzen du, testuaren ezaugarri guztiak kode-lerro bakar batean definitzea ahalbidetzen diguna. Jabetza horri esleitutako balioak espazio batez bereizita deklaratu behar dira.
Adibidez, hurrengo erregelak bold (letra lodia) estiloa, 26 pixeleko tamaina eta Verdana letra-mota esleitzen dizkio izenburuko elementuari.
#titulua { font: bold 26px Verdana, sans-serif; }
font propietatea letra mota aldatzeko.
Azken arau hau aplikatuz gero gure HTML dokumentiuari font propietateak definitutako balioekin erakusten da izenburua, eta lehenetsitako estiloekin aurkezten da paragrafoa.
Tituluaren font propietateari bold 26px Verdana, sans-serif; balioak aplikatuta
Egin ezazu zuk zeuk: Sortu HTML fitxategi berri goian ikusi dugun HTML kodearekin. Gero sortu edo eguneratu nirestiloa.css fitxategia, tituluarentzat ezarri ditugun font erregelak probatzeko. Azken erregela aplikatu ondoren, dokumentua nabigatzailean irekiz gero, goiko irudian agertzen denaren antzeko zerbait ikusi beharko zenuke. Aldatu propietatearen balioak eta ikuskatu aldaketak nabigatzailean.
CSS lengoaiaren bitartez letra-mota ez ezik, testuaren beste alderdi batzuk ere alda ditzakegu, hala nola lerrokadura, odolustea, lerroen arteko espazioa eta abar. Honako hauek dira helburu horretarako eskura dauden propietateetako batzuk.
text-align —Propietate honek testua elementu baten barruan lerrokatzen du. Balio erabilgarriak left, right, center eta justify dira.
text-align-last —Ezaugarri honek lerrokada baten azken lerroa lerrokatzen du. Balio erabilgarriak left, right, center eta justify dira.
text-indent —Ezaugarri honek paragrafo baten koskaren tamaina definitzen du (lerroaren hasierako espazio hutsa). Balioa pixeletan (px), ehunekoetan ( %) adieraz daiteke, edo CSSn eskuragarri dagoen edozein unitate erabiliz, hala nola em, rem, pt, etab.
letter-spacing —Propietate honek letren arteko espazioa definitzen du. Balioa pixeletan (px), ehunekoetan ( %) edo CSSn eskuragarri dagoen edozein unitate erabiliz adierazi behar da, hala nola em, rem, pt, etab.
word-spacing —Propietate honek hitzen arteko espazioaren zabalera definitzen du. Balioa pixeletan (px), ehunekoetan ( %) edo CSSn eskuragarri dagoen edozein unitate erabiliz (em, rem, pt, etab.) aitortu daiteke.
line-height —Propietate honek lerroen arteko espazioa definitzen du. Balioa pixeletan (px), ehunekoetan ( %) edo CSSn eskuragarri dagoen edozein unitate erabiliz adieraz daiteke, hala nola em, rem, pt, etab.
bertikal-align —Propietate honek bertikalki lerrokatzen ditu elementuak. Maiz erabiltzen da testua irudiekin lerrokatzeko (propietatea irudiari aplikatzen zaio). Balio erabilgarriak baseline, sub, super, text-top, text-bottom, middle, top eta bottom dira.
Lehenetsita, nabigatzaileek testua ezkerretara lerrokatzen dute, baina text-align propietatearen bitartez lerrokadura alda dezakegu. Hurrengo arauak gure dokumentuko paragrafoa ardazten du.
Gorago ikusi ditugun propietateak aplikatzeko errazak dira. Adibidez, word-spacing propietatearekin definitu dezakegu hitzen arteko espazioaren tamaina.
CSSk honako propietate hau ere eskaintzen du testua lerro bakarraz apaintzeko.
text-decoration —Ezaugarri honek testua nabarmentzen du lerro batekin. Balio erabilgarriak underline, overline, line-through eta none dira.
Text-decoration propietatea bereziki erabilgarria da estekekin. Lehenetsita, nabigatzaileek azpimarratutako estekak erakusten dituzte. Linea ezabatu nahi badugu, propietate hori none balioarekin deklara dezakegu. Hurrengo adibideak erregela bat eransten dio gure estilo-orriari, dokumentuaren <a> elementuak aldatzeko.
Orain arte, Verdana letra-mota erabili dugu font: bold 26px Verdana, sans-serif; (eta sans-serif alternatiba, Verdana eskuragarri ez badago). Letra-mota hori iturri seguru gisa ezagutzen den talde baten parte da, ordenagailu gehienetan eskuragarri daudelako eta, beraz, segurtasunez erabil dezakegulako. Webeko iturriekin arazoa da nabigatzaileek ez dituztela webgunearen zerbitzaritik deskargatzen, erabiltzailearen ordenagailutik kargatzen dituztela, eta erabiltzaileek letra mota desberdinak dituztela instalatuta beren sistemetan.
Erabiltzaileak ez duen iturri bat erabiltzen badugu, gure webgunearen diseinua desberdina izango da. Iturri seguruak erabiliz, gure webgunea edozein nabigatzailetan edo ordenagailutan berdin ikusiko dela ziurtatzen dugu, baina arazoa da talde honetan sartutako letra motak gutxi direla. Soluzio bat eskaintzeko eta diseinatzaileari erabateko sormena ahalbidetzeko, CSSk @font-face araua barne hartzen du.
@font-facearaua erreserbatutako erregela bat da, eta diseinatzaileek fitxategi bat sar dezakete web orri bateko testua erakusteko erabili beharreko letra-iturriarekin. Erabiltzen badugu, gure webgunean nahi dugun edozein iturri sar dezakegu, nahi dugun fitxategia emanda.
@font-facearauak gutxienez bi propietate behar ditu iturria deklaratzeko eta fitxategia kargatzeko. font-family jabetzak letra-mota hori erreferentziatzeko erabili nahi dugun izena zehazten du, eta src jabetzak artxiboaren URLa eta iturriaren zehaztapenak adierazten ditu (src jabetzaren sintaxiak url () funtzioa erabiltzea eskatzen du fitxategiaren URLa adierazteko).
Hurrengo adibidean, ‘NireLetraBerria’ izena gure iturriari esleitzen zaio, eta font.ttf fitxategia kargatu beharreko fitxategi gisa adierazten da.
Tituluarentzat letra mota pertsonalizatua kargatu da
Iturria kargatu ondoren, dokumentuko edozein elementutan erabil dezakegu, bere izenaren bidez (nireLetraBerria).
#titulua erregelaren font propietatean, zehazten dugu izenburua iturri berriarekin edo Verdana eta sans-serif iturri alternatiboekin erakutsiko da, gure iturria kargatu ez bada.
Egin ezazu zuk zeuk: Deskargatu font.ttf fitxategia webgunetik. Kopiatu fitxategia zure proiektuaren direktorioaren barruan. Eguneratu zure estilo-orria goiko kodearekin eta ireki dokumentua zure nabigatzailean. Iturri gehiago aurki ditzakezu. Egin aprobak letra mota ezberfdinekin.
Jakin beharrekoa: funtzio bat zeregin espezifiko bat egin eta emaitza itzultzen duen kode zati bat da. url () funtzioak, adibidez, adierazitako fitxategia parentesi artean kargatu eta edukia itzultzeko zeregina du. CSSk hainbat funtzio ditu bere propietateen balioak sortzeko. Funtzio horietako batzuk ikusiko ditugu aurrerago, eta funtzioei buruz gehiago ikasiko dugu JavaScript programazio lengoaiari eskainitako atalean.
Estekak froga simpleak egiteko aproposa den aplikazio bat irekiko dizu elementuek zer-nolako itxura hartzen duten ikusteko, baina hor egindako frogak komeni da kode editorera eramatea eta bertan egiaztatzea gure nahiari hurbiltzen zaion egindakoa.
