2.1 Interfazea komunikazio-bide gisa

Interfazea erabiltzailearen eta ordenagailuaren (edo aplikazioaren) arteko itzultzaile gisa irudikatzea erabilgarria izan daiteke. Erabiltzaileak egin nahi duena adierazten du ekintza errazen bidez; programak ekintza horiek berak ulertu eta exekuta ditzakeen jarraibide bihurtzen ditu, eta ondoren informazioa itzultzen dio erabiltzaileari. Beraz, komunikazioa noranzko bikoa da.

2.2 Interfaze on baten ezaugarriak

Interfaze on batek erabiltzaileari bere helburuak ahalik eta ahalegin txikienarekin lortzeko aukera eman behar dio. Ezaugarri nagusien artean, honako hauek nabarmentzen dira:

• Sinpletasuna: Interfaze sinple batek beharrezkoak diren elementuak baino ez ditu. Egin beharreko ekintzarako beharrezkoak ez diren botoi, kolore edo informazio gehiegirekin pantaila gainkargatzeak nahasmena sortu ohi du.
• Argitasuna: Elementuek argi adierazi behar dute zein den beren funtzioa. Erabiltzaileak ez luke elementu bakoitzak zer egiten duen asmatu behar. Adibidez:
  • “Gorde” argiagoa da “Onartu” baino.
  • Zakarrontzi baten ikonoak ezabatzeko ekintza irudikatu ohi du.
  • Lupa baten ikonoak bilaketa bat irudikatu ohi du.
• Koherentzia: Antzeko elementuek antzera jokatu behar dute. Koherentziari esker, erabiltzaileak azkar ikasten du aplikazioak nola funtzionatzen duen.
• Abiadura: Interfazeak berehala erantzun behar die erabiltzailearen ekintzei. Eragiketa batek hainbat segundo behar baditu amaitzeko, aplikazioak nolabaiteko erantzuna erakutsi behar du:
  • Kargatze-adierazle bat.
  • Aurrerapen-barra bat.
  • Informazio-mezu bat.
• Irisgarritasuna: Pertsona guztiek aplikazioa erabili ahal izan beharko lukete, beren gaitasunak edozein izanda ere.
• Moldagarritasuna: Interfazeak pantailaren edozein tamainatara behar bezala egokitu behar du.

2.3 Lehen inpresioaren garrantzia

Erabiltzaile-esperientziari buruzko hainbat ikerketak erakusten dute pertsona batek web-orri bati buruzko hasierako iritzia segundo gutxitan osatu ohi duela. Denbora-tarte labur horretan, erabiltzaileak honako hauek erabakitzen ditu:

• Orriak profesionala dirudien.
• Informazioa erraz aurkitzen duen.
• Gunean konfiantza duen.
• Nabigatzen jarraitzen duen edo orria uzten duen.

Horregatik, ikusizko diseinuak eragin zuzena du aplikazio baten kalitatearen pertzepzioan. Baina garrantzitsua da gogoratzea interfaze polit batek ez duela zertan interfaze ona izan.

3.1 Komando-lerroko interfazea

Komando-lerroko interfazea edo komando-lerroko aginte-interfazea (ingelesez: command-line interface, CLI) ordenagailu baten erabiltzaile-interfaze mota bat da, erabiltzaileei programa informatiko bati edo sistema eragileari aginduak emateko aukera ematen diona testu-lerro sinple baten bidez.

CLIak modu interaktiboan erabil daitezke, testu-sarrera motaren batean aginduak idatziz, edo askoz modu automatizatuagoan (batch fitxategia), script-fitxategi batetik aginduak irakurriz.

Interfaze hau ia konputazioaren hasieratik existitzen da, antzinatasunean soilik txartel zulatuak eta antzeko mekanismoek gaindituta. Ordenagailuek “terminal tontoak” konektatuta zituzten, eta horien bidez aginduak bidaltzen zitzaizkien ordenagailuari.

Gaur egun, komando-lerroa “terminal emulatzaile” izeneko programekin erabiltzen da, eta horiek komando-interprete bat (shell izenekoa) exekutatzen dute. Interprete hauek, sistema eragilearen arabera, aukera desberdinak izan ditzakete, adibidez:

• Windows-en cmd zaharra edo berriagoa eta hobetua den PowerShell erabil daitezke. Beste batzuk ere erabil daitezke, baina ez daude lehenetsita instalatuta (adibidez bash).
• GNU/Linux sistemetan gehien erabiltzen den interpretea eta banaketa gehienetan instalatuta dagoena bash da. Azken urteetan zsh-k merkatu asko irabazi du Oh-my-zsh frameworkari esker.
• MacOS sistemetan interprete lehenetsia zsh da.

CLI, shell eta terminal emulatzaile kontzeptuak ez dira gauza bera. CLI paradigma bati egiten dio erreferentzia, eta shell edo terminal emulatzaileak programa informatiko espezifikoak dira, normalean elkarrekin CLIa inplementatzen dutenak. Hala ere, hirurak sinonimo gisa erabiltzen dira askotan.

3.2 Erabiltzaile-interfaze grafikoa

Erabiltzaile-interfaze grafikoa, GUI izenez ere ezaguna (ingelesez graphical user interface), erabiltzaile-interfaze gisa jarduten duen programa informatiko bat da, gaur egun irudi eta objektu grafiko multzo bat erabiliz interfazean eskuragarri dauden informazioa eta ekintzak irudikatzeko.

Bere funtzio nagusia ingurune bisual erraza eskaintzea da, ordenagailu baten sistema eragilearekin komunikazioa ahalbidetzeko.

3.2.1 Testu moduko interfazea

Interfaze grafikoak ez dira mahaigaineko inguruneekin jaio, baizik eta aurreko urratsetan ere badaude leihoak edo inguruneak simulatzen dituzten liburutegiak, testu-karaktereak eta koloreak erabiliz.

Kontuan izan behar da interfaze hauek baliabide oso gutxiko makinetan eta interfaze grafikorik ez zuten sistema eragileetan erabiltzen zirela normalean.

3.2.2 Lehen ikerketak eta garapenak

Doug Engelbartek Stanford Research Institute-n (Menlo Park, AEB) 60ko hamarkadan egindako “Giza Adimenaren Handitzea” proiektuak oN-Line System garatu zuen, saguarekin kontrolatutako kurtsorea eta hipertextuarekin lan egiteko hainbat leiho zituen sistema.

Hasierako ikerketa asko ume txikiek nola ikasten duten aztertzean oinarritu zen. Horregatik, diseinua eskuko eta begiaren arteko koordinazioaren oinarrizko mugimenduetan oinarritu zen, komando-hizkuntzak erabili ordez.

GUIa hasieran Xerox PARCen (Palo Alto Research Center) garatu zuten Alan Kay, Larry Tesler, Dan Ingalls eta beste ikertzaile batzuek. Leihoak, ikonoak eta menuak erabiltzen zituen, lehen menu desplegable finkoa barne, fitxategiak ireki, ezabatu eta mugitzeko aginduak onartzeko.

1981ean Xeroxek produktu berritzaile bat aurkeztu zuen, Star izenekoa, PARCen berrikuntza asko txertatuz. Ez zen arrakasta komertziala izan, baina Star-ek etorkizuneko garapenetan eragin handia izan zuen, adibidez Apple, Microsoft eta Sun Microsystems-en.

1979an, Steve Wozniak, Steve Jobs eta Jef Raskin buru zituen taldeak (Xeroxeko langile ohiekin batera) Xerox PARCen ikusitako ideiekin jarraitu zuten eta 1983an “Apple Lisa” ordenagailua merkaturatu zuten, interfaze grafikoa zuen lehen ordenagailua. Ez zen salmentetan arrakastatsua izan, baina “mahaigaineko sistema eragileak” deitu daitezkeen garaiaren hasiera izan zen.

1984an Applek Macintosh kaleratu zuen, Lisa sistemaren eboluzioa zuen sistema eragilearekin, “System” izenekoa, eta bertan gaur egun arte ia aldatu ez diren atal batzuk ikus daitezke.

Hurrengo urtean, Microsoftek Windows 1.0 kaleratu zuen, MS-DOS sistema eragilerako GUI bat, baina ez zen 1990eko Windows 3.0 bertsiora arte bere ospea lehertu.

3.3 Mahaigaineko erabilera masiboa

1990eko hamarkadaren etorrerarekin, ordenagailu pertsonalak (PC, personal computer ingelesez) ezagun bihurtu ziren eta etxeetara eta enpresetara iristen hasi ziren, eta horrek ezagutza aurreraturik ez zuten erabiltzaileen merkatua sortu zuen, erabilera erraztasuna behar zutenak.

“Boom”a Windows 3.11-rekin hasi zen, baina batez ere Windows 95-ekin, sistema eragilearen nukleoa (MS-DOS) ezkutatzea lortu zuen eta hasieratik interfaze grafikoa zuzenean erakusten zuen.

Applek NeXT (Steve Jobsek sortutako enpresa) erosi zuen eta bere sistema eragilea Mac OS 8-ren oinarri gisa erabili zuen. Ondoren, sistema eragilearen arkitektura UNIX estilokoa bihurtu zuten eta horrela Mac OS X aurkeztu zuten 2001ean.

Urte hauetan eta 2000ko hamarkadaren hasieran, erabiltzaile-interfazeak eboluzionatzen joan ziren ordenagailuen potentzia handitzen zen heinean, baina beti mahaigaineko benetako ingurunea simulatzen jarraituz.

GNU/Linux munduan Gnome eta KDE bezalako mahaigaineko ingurune libreak iragarri ziren, paraleloan eboluzionatu zutenak eta ia “gerra” bat sortu zuten haien artean eta erabiltzaileen artean (1. esteka, 2. esteka).

Sistema eragile bakoitzak eta mahaigaineko sistema bakoitzak bere eboluzio propioak egiten zituen, eta arrakasta izanez gero, besteetan “kopiatzen” ziren, kolore, ikono edo leiho-efektuetan “modak” sortuz ere.

3.4 Web-interfazeak

90eko hamarkadaren amaieran eta 2000ko hasieran, interneten gorakadak web atariek ere euren interfazeetan eboluzio handia izatea ekarri zuen.

Kontuan izan behar da garai hartako HTML eta CSS bertsioak ez zirela gaur egungoak bezain aurreratuak, eta javascript-en exekuzio-aukerak ere ez zirela gaur bezain indartsuak. Interfazeak teknologiak berak mugatu zitzakeen

Bestalde, ohikoa da enpresaren irudia aldatzea, logotipo, kolore korporatibo, koloreen modaren arabera… eta horrek guztiak interfazeetan aldaketak eragiten ditu.

3.5 Mugikor-interfazeak

Telefono mugikorren kasuan, bistaratze-sistema estandarrik ez zegoenez, fabrikatzaile bakoitzak bere interfaze propioa sortzen zuen pantailak handitzen, bereizmena eta koloreak handitzen ziren heinean.

Lehen mugikorrek ez zuten pantailarik, gero pantaila txiki monokromoak izaten hasi ziren, batzuetan testu-lerro bakarrarekin.

Ondoren, koloretako pantailak izaten hasi ziren eta enpresa bakoitzak bere sistema eragilea sortu zuen. Enpresa askoren artean sistema eragile bat sortzeko saiakera bat izan zen Symbian, baina azkenean Nokia izan zen garatzailea eta gehien erabili zuena.

2000ko hamarkadaren lehen urteetan PDA-ak (personal digital assistant, poltsikoko ordenagailuak) ere modan jarri ziren, normalean pantaila ukigarri (erresistiboa) bat erabiltzen zutenak eta boligrafo batekin erabiltzen zirenak.

Dena aldatu zen 2007an iPhone-a eta lehen smartphone-ak iritsi zirenean, pantaila ukigarri kapazitiboek (hatzez erabiltzen direnak) protagonismoa hartu zuten. Pantaila hauek, ukigarriak izateaz gain, hainbat hatz erabiliz keinuak egiteko aukera ematen dute, interfazearekin elkarreragiteko modu berriak sortuz.

Applek botoi bakarra aukeratu zuen, eta Android sistema eragileek (adibidez HTC Desire 2009koa) gutxienez lau botoi zituzten sistemako eta unean erabiltzen ari zen aplikazioko funtzio batzuk kudeatzeko.

Aldaketa hauekin, sistema eragileek eta interfazeek aldaketa erradikal bat jasan zuten, erabiltzailearen erraztasuna bilatuz eta interfazearekin elkarreragiteko “keinuak” agertuz:

• Tap: pantaila ukitzea (saguarekin “klik” egitearen antzekoa)
• Double tap: ukitu bikoitza, aplikazioaren arabera zoom bat egin dezake.
• Scroll: hatzarekin gora edo behera arrastatuz interfazean mugitzea.
• Flick: keinu azkarra gora edo behera eginez scroll egiten da; ezkerrera edo eskuinera eginez, mugimendua pantaila gehiagorik badago horren araberakoa izango da.
• Pinch in: zooma gerturatzea.
• Pinch out: zooma urruntzea.

Honekin guztiarekin, orain arte interfazeetan planteatu ez zen “arazo” berri bat sortzen da: gailuaren biraketa. Biraketa horrek aplikazioa egokitu behar du terminalaren posizio berrira, bertikaletik horizontala edo alderantziz pasatuz.

Gailu hauen eboluzioarekin tablet-ak sortu ziren, keinu filosofia bera jarraituz, baina pantaila handiagoek informazio gehiago erakusteko aukera ematen dute. Mahaigaineko interfazeak erabili ordez, mugikorretako interfazeak eboluzionatu ziren.

Leku gehiago dagoenez, ez dira mugikor-aplikazioak “eskalatzen”, baizik eta interfazeek menu edo informazio gehiago gehitzeko aukera dute.

3.6 Errealitate birtuala eta errealitate areagotua

Interfazeen garapenaren hurrengo urratsa errealitate areagotuan (augmented reality) eta errealitate birtualean dago. Nahiz eta orain modan dauden terminoak diruditen, haien ikerketa eta eboluzioa hamarkadak daramatza garatzen.

Lehen urratsak “head-up display” izenekoetan eman ziren, erabiltzaileari informazioa aurkezten dioten pantaila gardenak, pantailaren atzean dagoena ikusten uzten dutenak. Horrela, erabiltzaileak ez du burua biratu behar informazioa lortzeko.

Batzuetan pantaila hau erabiltzailearen eta aginte-panelaren artean egon daiteke, aginte-panelera integratuta edo pilotuaren kaskoan eta begiaren ondoan jarrita.

Bestalde, errealitate birtuala dugu, erabiltzaileari ingurune simulatua eskaintzen diona, bertan mugi daiteke eta batzuetan inguruko elementuekin elkarreragin dezake.

Horretarako, ohikoa da betaurreko batzuk erabiltzea ingurune birtuala erakusteko, eta aginte batzuk edukitzea ingurunearekin elkarreragiteko.

Ingurunean mugitzeko, sistema batzuek trackers erabiltzen dituzte, horrela ingurune birtualean mugi gaitezke aginteak erabili gabe.

Hurrengo urratsa errealitate areagotua da, non elementu birtualak bizitza errealean integratzen saiatzen diren. Ez da berria, urteak daramatza joko eta aplikazioetan existitzen.

Errealitate areagotua eguneroko erabilerarako izan dadin, sistemak pixkanaka eboluzionatzen hasi dira, nahiz eta kostua oraindik altua izan. Gaur egun, ez dago argi zein izango den bere onura eta errendimendua.

Apple Vision Pro kasuan, errealitate areagotuko esperientzia bat agintzen dute, eskuen keinuak erabiliz interfazean mugitzeko.

3.7 Ahots bidezko interfazeak

Ahotsaren ezagutza digitala exekutatzeko aukera eman zuen lehen tresna 1962an aurkeztu zen. Aurretik hainbat aplikazio eta laguntzaile birtual egon baziren ere, erabilera publiko orokorrera ez zen iritsi Siriren agerpena 2010ean gertatu arte.

Gaur egun, ahots bidezko interfazeak telefono mugikorrekin eta hizkuntza naturala ezagutzeko eta eskatzen zaizkien ekintzak exekutatzeko gai diren laguntzaile birtualekin lotuta daude. Laguntzaile ezagunenak Siri, Alexa eta Google Assistant dira.

6.1 Lehenengo urteak: web orri estatikoak

1991ean Tim Berners-Leek HTML garatzen hasten du CERNen. Ez zuen HTML hizkuntza bakarrik sortu, HTTP (HyperText Transfer Protocol) protokoloa eta lehenengo web zerbitzari ere sortu zen.

Lehenengo web orriak HTML hizkuntzan bakarrik idazten ziren eta egitura oso sinplea zuten. Ez zegoen edukia eta aurkezpena bereizteko inolako banaketarik. HTML propioak adierazten zituen bai dokumentuaren egitura, bai itxura.

Lehenengo urte hauetan nabigatzaileak agertu ziren, hala nola:

• WorldWideWeb
• Mosaic
• Netscape Navigator

6.2 Nabigatzaileen guda (1995-2000)

90eko hamarkadaren erdialdean Internet azkar hazten hasi zen. Microsoftek Internet Explorer kaleratu zuen, bitartean Netscape merkatuan lehenengo postuan zegoen. Bi enpresa lehia bizia hasi zuten beren aurkaria baino ezaugarri berriak aurretik txertatzeko.

Aldi hau nabigatzaileen guda izenez ezagutzen da, nabigatzaile bakoitzak bere HTML etiketak ezartzen zituelako. Ondorioz:

• Web orri bat nabigatzaile batean ondo funtziona zitekeen eta beste batean erroreak aurkezten zituen.
• Garatzaileek bertsio espezifikoak sortu behar zituzten nabigatzaile desberdinetarako.
• Webguneen mantentzea zailtzen zen.

Ohikoa zen webguneek “Internet Explorererako optimizatutako gunea” edo “Netscape Navigatorrekin bateragarria” mezuak izatea arazo honen ondorioz.

<table>
    <tr>
        <td>Menú</td>
        <td>Contenido</td>
    </tr>
</table>

6.3 CSSaren agerpena

1996an CSS (Cascading Style Sheets) agertu zen, web garapenaren arazo nagusietako bat konpontzeko helburuarekin: edukia eta aurkezpena bereiztea.

<h1>Título</h1>

h1{
    color: blue;
    text-align:center;
}

Orduz geroztik:

• HTML-ek egitura deskribatzen zituen.
• CSS-ek itxura bisuala kontrolatzen zuen.

Bereizketa horrek abantaila ugari eskaintzen zituen:

• Kode garbiagoa.
• Mantentze erraztasun handiagoa.
• Estiloen birerabilpena.
• Irisgarritasun hobea.
• Diseinu uniformea webgune osoan.

CSS 1996an agertu arren, hainbat urte pasa ziren nabigatzaileek behar bezala ezartzen hasi arte.

6.4 Web 2.0

2000eko hamarkadaren hasieran Internet sakon aldatu zen. Erabiltzaileak irakurle soilak izatetik edukien sortzaile ere bihurtu ziren. Aldi honi Web 2.0 deritzo.

Web orriak honako elementuak txertatzen hasi ziren:

• Blogak.
• Sare sozialak.
• Wikiak.
• Iritziak.
• Foroak.
• Merkataritza elektronikoa.

Diseinua ere asko eboluzionatu zuen. Populartsu bihurtu ziren:

• Botoi handiak.
• Itzalak.
• Gradienteak.
• Ertz biribildutakoak.
• Ikono koloretsuak.
• Menú elaboratuagoak.

6.5 HTML5 eta CSS3

2010 inguruan bi estandar nagusi sendotzen hasi ziren: HTML5 eta CSS3, web garapena erabat eraldatu zutenak. Garrantzitsuenak diren berrikuntzen artean hau aurkitzen dugu:

6.6 Mugikorretarako gailuen gorakada

2007an lehen iPhone agertu zen, eta nahiz eta jada Interneten nabigatzeko gailu mugikorrak egon, horietako bat ere ez zen honen renderizazio kalitateari iristen, nabigatzaile erreala baitzen. Denbora gutxi ondoren smartphone ezagun bihurtzen hasi ziren, eta horrek Interneten nabigatzeko modua erabat aldatu zuen.

Dizainatzaileek ezin zuten bakarrik mahaigaineko monitoreentzako orriak sortu, gaur egun beharrezkoa baitzen honakoa pentsatzea:

• Pantaila txikiak.
• Pantaila ukigarriak.
• Bereizmen desberdinak.
• Orientazio desberdinak.

6.6.1 Responsive Web Design

2010ean Ethan Marcottek Responsive Web Design terminoa ezagun bihurtu zuen. Bere proposamena edozein pantailaren tamainara automatikoki egokitzen diren orriak sortzea zen.

Horretarako hasi ziren erabiltzen:

• Diseinu fluidoak.
• Media Queries.
• Irudi moldagarriak.
• Unitate erlatiboak.

Gaur egun responsive diseinua funtsezko baldintza da ia edozein webguneetan.

6.7 Flexbox eta CSS Grid-en etorrera

Urte askotan CSS bidez diseinu konplexuak sortzea zaila zen. float, taulak eta posizio absolutuak bezalako teknikak erabiltzen ziren.

Soluzio hauek ez ziren oso malguak eta mantentzea zaila zen. Aldaketa hori flexbox eta CSS Grid etorri zenetik gertatu zen, eta maquetazioan kalitate- eta mantentze-jauzi handia ekarri zuen. Gaur egun bi sistema hauek diseinu modernoko oinarria osatzen dute.

6.8 Diseinuaren eboluzioa

Urte askotan interfazeek objektu errealak imitatzen saiatzen ziren. Filosofia hori skeuomorfismoa izenez ezagutzen da:

• Botoiak botoi fisikoak bezalakoak ziren.
• Karpetak karpeta errealak bezalakoak ziren.
• Egutegiak paper-egutegiak imitatzen zituzten.

2012tik aurrera alderantzizko joera bat hasi zen nagusitzen, Flat Design izenekoa. Bere ezaugarri nagusiak hauek dira:

• Kolore solidoak.
• Efektu bisual gutxi.
• Testurarik eza.
• Itzal minimoak.
• Diseinu garbia.
• Ikono sinpleak.

Microsoft estilo honen lehenengo sustatzaile handietako bat izan zen Windows Phone-rekin. Geroago Applek eta Googlek antzeko diseinuak hartu zituzten. 2014an Googlek Material Design aurkeztu zuen, ez zena estilo bisualen multzo bat bakarrik, diseinu sistema osoa baizik. Material Design-ek honakoak definitzen ditu:

• Koloreak.
• Tipografiak.
• Animazioak.
• Ikonografia.
• Tarteak.
• Osagai berrerabilgarriak.

Bere helburua Googleko aplikazio guztietan esperientzia koherentea eskaintzea zen. Gaur egun oraindik eboluzionatzen ari da eta web garapenaren diseinu sistema eraginkorrenetako bat da.

6.9 Etorkizunera begira

Web diseinua etengabe eboluzionatzen ari da. Gaur egungo joera batzuk hauek dira:

• Modu iluna (Dark Mode).
• Web aplikazio progresiboak (PWA).
• Mikroanimazioak eta animazio diskretuak.
• Osagaietan oinarritutako diseinua.
• Diseinu-sistema partekatuak.
• Irisgarritasuna garapenaren lehen faseetatik.
• Errendimendu handia.

Nahiz eta tresnak azkar aldatzen diren, diseinu on baten oinarrizko printzipioak ia aldatu gabe geratzen dira.

CSS

7.1 HTMLren arazoa

HTML dokumentu baten egitura deskribatzeko sortu zen, ez haren itxura deskribatzeko. Horrela, edukia izenburuen, paragrafoen, zerrenden eta esteken bidez defini zitekeen, baina dokumentuaren aurkezpena kontrolatzeko aukera gutxi eskaintzen zituen. Horren ondorioz, orrialde gehienek oso antzeko itxura zuten: atzeko plano grisa, testu beltza, esteka urdinak eta oso banaketa sinplea.

Internet ezagun egiten hasi zen heinean, enpresek eta erakundeek itxura erakargarriagoa eta bereiziagoa zuten web-orriak sortu nahi izan zituzten. Hala ere, HTML ez zegoen horretarako diseinatuta. Ez zegoen honako alderdi hauek definitzeko mekanismorik:

• Koloreak.
• Marjinak.
• Tipografiak.
• Tarteak.
• Elementuen kokapena.

7.2 Aurkezpen-etiketen etorrera

Diseinatzaileek orrien itxura kontrolatu nahi zutenez, nabigatzaileak aurkezpenarekin lotutako HTML etiketak txertatzen hasi ziren, hala nola: <font>, <center>, <big> …

Etiketa horiek arazoa neurri batean konpontzen zuten, baina beste arazo batzuk sortzen zituzten. Adibidez, letra-tipoa gehitu nahi bagenuen, testu guztietan zehaztu behar genuen. Gainera, edukia eta aurkezpena nahastu egiten ziren, mantentze-lanak garestiak ziren eta nabigatzaile bakoitzak etiketa batzuk modu desberdinean interpretatzen zituen, edo zuzenean ez zituen interpretatzen.

7.3 CSSren sorrera

Arazo horiek konpontzeko, 1994an Håkon Wium Lie informatikari norvegiarrak Cascading Style Sheets izeneko hizkuntza berria proposatu zuen, CSS siglez ezagunagoa. Haren proposamena bi alderdi desberdin erabat bereiztean oinarritzen zen:

• HTML edukiaren eta egituraren deskribapenaz arduratuko zen.
• CSS itxura soilik definitzeaz arduratuko zen.

Ideia oso ondo hartu zen eta, Bert Bos bezalako beste kolaboratzaile batzuekin batera, W3Cren estandar bihurtu arte garatu zen. 1996ko abenduan, lehenengo gomendio ofiziala argitaratu zen: CSS Level 1 (CSS1). Hainbat alderdi aldatzeko aukera ematen zuen, besteak beste:

• Koloreak.
• Tipografiak.
• Marjinak.
• Koskak.
• Testuaren lerrokatzea.
• Atzeko planoak.

7.4 CSS2

1998an CSS2 agertu zen, eta hobekuntza ugari ekarri zituen. Horien artean, honako hauek nabarmentzen ziren:

• Posizionamendu absolutua.
• Posizionamendu erlatiboa.
• Euskarri-motak (pantaila, inprimaketa…).
• Geruzak.
• Hautatzaile berriak.
• Taula osatuagoak.

CSS2ri esker, diseinu askoz konplexuagoak garatzen hasi ziren. Hala ere, nabigatzaileek oraindik alde handiak zituzten inplementazioan. Urte askotan ohikoa izan zen web-orri batek nabigatzaile batean behar bezala funtzionatzea eta beste batean erroreak erakustea.

7.5 CSS3: eboluzionatzeko modu berri bat

Zehaztapen erraldoi bakarra sortu beharrean, W3Ck CSS modulu txiki eta independenteetan banatzea erabaki zuen. Nahiz eta herri mailan CSS3-ri buruz hitz egiten dugun, egia esan, ez dago “CSS3” izeneko dokumentu ofizialik. Gaur egun, CSS modulu ugarik osatzen dute, eta bakoitzak bere garapen-erritmoa du. Hona hemen adibide batzuk:

• Hautatzaileak.
• Atzeko planoak eta ertzak.
• Animazioak.
• Trantsizioak.
• Flexbox.
• Grid Layout.
• CSS aldagaiak.
• Media Queries.

Sistema horri esker, funtzionalitate berriak txerta daitezke urteak itxaron behar izan gabe bertsio oso berri bat argitaratzeko.

7.6 CSSren aurreprozesadoreen sorrera

Muga horiek gainditzeko, CSSren aurreprozesadore izenekoak agertu ziren. Aurreprozesadore batek CSS estandarra baino hizkuntza ahaltsuago eta erosoago batean idazteko aukera ematen du, eta ondoren automatikoki CSS estandar bihurtzen da. Bi aurreprozesadore ezagunenak hauek dira:

• SASS: 2006an sortu zen eta aldagaiak, habiaratzea, mixins sistema (funtzio gisa defini daiteke) kodea errepikatu behar ez izateko, herentzia, begiztak… sortzeko aukera ematen du.
• LESS: 2009an sortu zen, SASSen inspirazioan oinarrituta, eta abantaila nagusia da JavaScript bidez nabigatzailean exekuta daitekeela, aurretik aurreprozesatu beharrik gabe.

Duela urte batzuk arte, ia proiektu handi guztiek SASS edo LESS erabiltzen zuten barnean, honako hauek ahalbidetzen baitzituzten:

• Kodea errepikatzea murriztea.
• Proiektu handiak antolatzea.
• Osagaiak berrerabiltzea.
• Mantentze-lanak erraztea.
• Taldean lan egitea.
• Zereginak automatizatzea.

Garai hartan, CSSk oraindik ez zituen ezaugarri horietako asko.

Denborarekin, CSSk hainbat funtzio txertatu ditu, hala nola aldagaiak, hautatzaile berriak, zenbait funtzio matematiko… Ondorioz, proiektu txiki eta ertain asko CSS soilik erabiliz gara daitezke.

Hala ere, SASSek oso erabilia izaten jarraitzen du proiektu handietan, kodearen antolaketarekin eta estiloak berrerabiltzearekin lotutako abantailak eskaintzen jarraitzen duelako.

7.7 CSS gaur egun

Gaur egun, CSS oso hizkuntza ahaltsua da, etengabe eboluzionatzen ari dena, eta hainbat enpresak parte hartzen dute ezaugarri berriak proposatzeko eta gehitzeko.

8.1 Hainbat estilo-orri txertatzea

Benetako proiektuetan, oso ohikoa da CSS kodea hainbat fitxategitan banatzea, haren mantentze-lanak errazteko. Kasu horretan, nabigatzaileak estilo-orri guztiak deskargatu eta aplikatuko ditu agertzen diren ordenan. Hainbat estilo-orrik elementu beraren propietate bera aldatzen dutenean, kargatzen diren ordenak azken emaitzan eragina izan dezake.

<head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/titulos.css">
</head>

Aurreko adibidearekin jarraituz, demagun honako kode hau dutela:

h1 {
    color: blue;
}

h1 {
    color: red;
}

Izenburuaren azken kolorea gorria izango da, bigarren estilo-orriak lehenengoa gainidazten duelako. Portaera hori kaskada (cascade) izenez ezagutzen den mekanismoaren parte da, eta aurrerago zehatz-mehatz aztertuko dugu.

Ez dago proiektu batek izan behar duen CSS fitxategi kopuru finkorik. Aplikazio txikietan, estilo-orri bakarra nahikoa izan ohi da, baina proiektua handitzen den heinean, ohikoa da kodea hainbat fitxategitan banatzea, haien funtzioaren arabera.

8.2 Barneko CSS

CSS estiloak zuzenean HTML orri baten barruan idatz daitezke <style> etiketak erabiliz, eta goiburuko <head> atalaren barruan egon behar dute.

<html>
  <head>
    <style>
      body {
        background-color: linen;
      }  
      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

HTML bateratuak sortzeko sistemak daude (HTML auto-edukiak sortzeko), webgune estatikoak sortzeko, baina garapenean zehar ****ez da CSS HTMLaren barruan erabili behar****.

8.3 CSS estiloak inline

HTML kodearen barruan CSS estiloak erabil daitezke; horiei inline estiloak esaten zaie. Teknika hau oso erabilia zen webaren hasieran, baina ez da erabiltzea gomendatzen, CSS estiloen berrerabilpenaren aurka egiten duelako.

Horrez gain, maketazioaren eta estiloen arteko bereizketaren aurka ere egiten du, eta horrek zaildu egin dezake osagaiak aplikazio bereko atal desberdinetan berrerabiltzea. Hurrengo adibidean inline estilo baten adibidea eta HTML eta CSS bereizita nola egingo litzatekeen ikus daitezke:

<p style="
 color: red;
 font-style: italic;
">
    Texto
</p>

<p class="special">
    Texto
</p>

.scpecial {
  color: red;
  font-style: italic;
}

Lehenengo adibidean, estilo bera duen beste p bat nahi izanez gero, estilo hori berriro idatzi beharko litzateke; bereizketa erabiliz, berriz, klasea jartzea baino ez litzateke beharrezkoa izango. Lehenengo adibidean estilo berri bat gehitu nahi badugu, hainbat lekutan aldatu beharko genuke; bereizketa erabiliz, berriz, CSS estilo-orrian egitea baino ez litzateke beharrezkoa izango.

8.4 CSSren garrantziaren adibideak

CSS estilo-orriek aukera ematen digute web-orri baten itxura erabat aldatzeko, estilo-orria aldatuta. Pentsa dezagun enpresa batek hainbat bezerorentzat online denda-produktu bat duela.

• CSS estiloak inline badaude, bezero bakoitzarentzat estiloak aldatzeak honako hauek ekarriko lituzke:
  • Iturburu-kode osoa kopiatzea.
  • Inline estiloak aldatzea.
  • Ezaugarri berri bat gehitu nahi badugu, bezero bakoitzean aldatu beharko litzateke.
  • Inline estiloak berriro aldatzea.
• CSS estiloak HTMLtik bereizita badaude:
  • Bezero bakoitzarentzat CSSaren kopia bat egiten da eta estilo propioekin aldatzen da.
  • Ezaugarri berri bat gehitu nahi badugu, bezero bakoitzean HTMLa soilik eguneratzen da.

Jarraian, HTML kode beraren adibide bat ikus daiteke, CSS estilo-orri desberdinekin. Adibideak W3Schools webgunetik lortuak dira.

9.1 CSS araua

Estilo-orri bat CSS arau multzo batek osatzen du. Arau bakoitzak honako hauek adierazten ditu:

• Zer elementu aldatu behar diren.
• Zer propietate aldatu behar diren.
• Zer balio esleitu behar zaion propietate bakoitzari.

Egitura orokorra honako hau da:

selector {
    propiedad: valor;
}

h1 {
    color: red;
}

Arau horrek adierazten du <h1> elementu guztiak gorriz erakutsi behar direla.

9.2 Adierazpenak

Propietate batek eta balio batek osatutako bikote bakoitzari adierazpen esaten zaio. Arau berak hainbat adierazpen izan ditzake. Hurrengo adibidean hiru daude:

h1 {
    color: blue;
    font-size: 40px;
    text-align: center;
}

Giltzen artean dagoen adierazpen multzoari adierazpen-bloke esaten zaio.

9.3 Iruzkinak

Iruzkinek kodeari informazioa gehitzeko aukera ematen dute, nabigatzaileak informazio hori interpretatu gabe. Lerro bakarrekoak edo hainbat lerrotakoak izan daitezke:

/* Estilos generales */
body {
    margin: 0;
}

/*
  Curso: DAW
  Fecha: Septiembre de 2026
*/

9.4 Maiuskulen eta minuskulen arteko bereizketa

Bai propietateen izenak, bai gako-hitzak, minuskulaz idatzi behar dira. Nabigatzaile batzuek aldaera jakin batzuk onartzen dituzten arren, beti gomendatzen da lengoaiaren konbentzioei jarraitzea.

9.5 Zuriuneak

CSSk ez ditu kontuan hartzen beharrezkoak ez diren zuriuneak. Hurrengo arauak baliokideak dira.

h1 {
color:red;
}

h1 {
  color:red;
}

h1 {   color:red;     }

Guztiek emaitza bera sortzen dute, baina bigarrena bakarrik da erraz irakurtzeko modukoa.

9.6 Koska (indentation)

Koskatzean, kodea zertxobait eskuinerantz desplazatzen da haren egitura erakusteko. CSSk koska erabili gabe behar bezala funtzionatzen badu ere, koska uniformea erabiltzeak irakurgarritasuna asko hobetzen du. Editore gehienek zeregin hori automatikoki egiten dute. Bi edo lau zuriune erabiltzea aukera dezakegu.

9.7 Puntu eta koma

Adierazpen bakoitza puntu eta koma baten bidez amaitzen da ;. Arau batek hainbat adierazpen dituenean, puntu eta koma nahitaezkoa da.

9.8 Zer gertatzen da errore bat dagoenean?

CSSren ezaugarri oso garrantzitsu bat da nabigatzaileak estilo-orria interpretatzen jarraitzen saiatzen direla, erroreak aurkitzen badituzte ere.

h1 {
    color: blue;
    colr: red;
    font-size: 40px;
}

Kasu honetan:

• color: blue; behar bezala aplikatuko da.
• colr: red; ez ikusi egingo zaio.
• font-size: 40px; normaltasunez aplikatuko da berriro.

Portaera horri esker, errore txikiek ez dute orria bistaratzea eragozten.

9.9 Propietateen ordena

CSSk ez du propietateak ordena jakin bati jarraituz idaztera behartzen. Hurrengoek emaitza bera sortzen dute:

h1 {
    color: blue;
    margin: 20px;
    font-size: 30px;
}

h1 {
    font-size: 30px;
    margin: 20px;
    color: blue;
}

Hala ere, proiektu profesionaletan, normalean ordena jakin bati jarraitzen zaio irakurketa errazteko.

1. Posizionamendua.
2. Kaxa-eredua.
3. Tipografia.
4. Koloreak.
5. Animazioak.

Beti irizpide bera mantentzeak kodearen mantentze-lanak hobetzen ditu.

10.1 Mota-hautatzailea

Mota-hautatzaileak mota jakin bateko HTML elementu guztiak hautatzeko aukera ematen du.

<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>

p {
    color: blue;
}

Aurreko adibidea kontuan hartuta, CSS-k <p> motako elementu guztiak hautatzen ditu, testuari kolore urdina gehituz.

Mota hautatzaileak sinpleak dira, baina oso orokorrak izan daitezke behar denean estilo desberdinak aplikatu elementu beraren mota berean.

10.2 Hautatzaile unibertsala

Hautatzaile unibertsala izartxo batez (*) irudikatzen da eta dokumentuko elementu guztiak hautatzen ditu.

* {
    margin: 0;
    box-sizing: border-box;
}

Hautatzaile unibertsala maiz erabiltzen da doikuntza orokor txikiak egiteko. Nahiz eta erabilgarria izan, ez da komeni gehiegikeriaz erabiltzea elementu guztiei propietate asko aplikatzeko, erredundantzia sortu eta mantentzea zaildu ahal baitu.

10.3 Klase hautatzailea

Klase hautatzaileek estiloak aplikatu ahal dituzte elementu jakin batzuei, mota bereko elementu guztiak eragin gabe. HTMLn class atributua erabiltzen da.

<h1 class="importante grande">
  Izenburu garrantzitsua
</h1>

<p class="importante">
  Testu hau garrantzitsua da.
</p>

<p class="grande">
  Testu hau handia da.
</p>

.importante {
  color: red;
}

.grande {
  font-size: 50px;
}

CSSn, klase bat hautatzeko puntu bat (.) erabiltzen da, klasearen izena jarraituta. Klase bat hainbat aldiz erabil daiteke eta elementu desberdinetan, beraz, hori kontuan hartu behar da, baina aurrerago hitz egingo dugu.

Bestalde, class atributua zuriunez banatutako klase anitz eduki ahal ditu, beraz, bi klaseen estiloak jasoko ditu. Modu honetan estiloak berrerabiltzeko eta konbinatzeko aukera dugu gure beharren arabera.

10.4 Identifikatzaile hautatzailea

HTMLk id atributua ere badu, eta behin bakarrik erabili behar da HTML dokumentu bakoitzean. Elementu bat bere identifikatzailearen bitartez hautatzeko # karakterea erabiltzen dugu:

<h1 id="titulo-principal">
    Nire web orria
</h1>

#titulo-principal {
    color: blue;
}

Hautatzailea id titulo-principal den elementuari aplikatuko zaio.

10.5 Atributuaren arabera hautatzea

CSS-k HTML atributu jakin batzuk dituzten elementuak hautatzeko aukera ematen du. Adibidez, type atributua duten elementu guztiak hauta ditzakegu:

<input type="text">

<input type="email">

<input type="password">

input[type] {
    border: 1px solid black;
}
input[type="email"] {
    background-color: lightblue;
}

Atributuaren balio zehatz bat ere hauta dezakegu, adibidean type="email". Kasu honetan, posta elektronikoaren eremua bakarrik izango du atzeko plano urdin argia.

Atributu hautatzaileak bereziki erabilgarriak dira HTML elementu baten ezaugarrietara lotutako estiloak aplikatu behar direnean.

Beste adibide bat target atributua duten esteketarako.

<a href="http://google.com"
    target="_self">
    link
</a>
<a href="http://google.com" 
    target="_blank">
    link
</a>

a[target] {
    font-weight: bold;
}
a[target="_blank"] {
    color: red;
}

10.6 Hautatzaileak taldekatu

Arau berdinak hainbat hautatzaileri aplikatu ahal dizkiegu komaz banatuta. Taldekatzeak kodea errepikatzea ekiditen du.

h1,
h2,
h3 {
    font-family: sans-serif;
}

h1, h2, h3 {
    font-family: sans-serif;
}

10.7 Hautatzaile beherakoiak

CSS-k beste elementu batzuen barruan dauden elementuak hautatzeko aukera ematen du. Bakarrik <article> elementuaren barruan dauden paragrafoak hauta ditzakegu.

<article>
    <p>Lehen paragrafoa.</p>
    <p>Bigarren paragrafoa.</p>
</article>

<article>
    <div>
        <p>
            Testua.
        </p>
    </div>
</article>

<p>Kanpoko paragrafoa.</p>

article p {
    color: blue;
}

article eta p arteko hutsuneak adierazten du <article> elementuaren ondorengo <p> elementuak hautatzen ari garela.

Emaitza hau izango da:

• Lehen paragrafoa → urdina.
• Bigarren paragrafoa → urdina.
• Kanpoko paragrafoa → estilo hau gabe.
• Testua → urdina.

Hautatzaile beherakoiak ez du seme zuzenetara mugatzen, ondorengo guztiei aplikatzen zaie.

10.8 Seme zuzenen hautatzailea

Batzuetan ez dugu edozein ondorengo hautatu nahi, baizik eta seme zuzenak bakarrik. Horretarako > sinboloa erabiltzen da.

<article>
  <p>Paragrafo zuzena.</p>
  <div>
    <p>Div baten barruan.</p>
  </div>
</article>

article > p {
    color: blue;
}

Modu honetan lehen paragrafoa bakarrik hautatzen da, bigarren paragrafoa ez delako <article> elementuaren seme zuzen.

10.9 Hurbileko anai-arrebaren hautatzailea

CSS-k beste elementu baten ondoren berehala agertzen diren elementuak hautatzeko aukera ematen du. Horretarako + sinboloa erabiltzen da.

<h2>Izenburua</h2>
<p>Lehen paragrafoa.</p>
<p>Bigarren paragrafoa.</p>

h2 + p {
    color: blue;
}

Arau honen bidez lehen paragrafoa bakarrik hautatzen da, bigarrena ez.

10.10 Ondorengo anai-arrebak hautatzea

Elementu baten ondoren agertzen diren anai-arreba guztiak hautatzeko ~ erabiltzen da.

<h2>Izenburua</h2>
<p>Lehen paragrafoa.</p>
<p>Bigarren paragrafoa.</p>
<div>Beste elementu bat.</div>
<p>Hirugarren paragrafoa.</p>

h2 ~ p {
    color: blue;
}

Arau honen bidez <h2> elementuaren ondoren dauden <p> elementu guztiak hautatzen dira. Beraz, hiru paragrafoak hautatuko dira.

10.11 Pseudo-klaseak

Pseudo-klaseak elementuak egoera edo baldintza baten arabera hautatzeko aukera ematen dute, eta bi puntu bidez irudikatzen dira (:). Adibide batzuk:

• :hover: Erabiltzaileak saguaren erakuslea elementuaren gainean jartzen duenean.
• :focus: Elementu batek fokua duenean.
• :active: Elementu bat aktibatzen ari den momentua adierazten du.
• :visited: Erabiltzaileak jadanik bisitatu dituen estekak.

10.12 Pseudo-elementuak

Pseudo-elementuak elementu baten zati jakin batzuk hautatzeko edo hura lotutako edukia sortzeko aukera ematen dute. Normalean bi puntu bidez irudikatzen dira (::).

<p class="aviso">
    Eremu hau derrigorrezkoa da.
</p>

p::first-letter {
    font-size: 50px;
}
p::first-line {
    font-weight: bold;
}
.aviso::before {
    content: "⚠ ";
}
.enlace::after {
    content: " →";
}

Sortutako arauek honakoak egiten dituzte:

• Paragrafo bakoitzaren lehen letra aldatzen du.
• Testuaren lehen lerroa aldatzeko aukera ematen du.
• Elementuaren edukia baino lehen edukia txertatzeko aukera ematen du.
• ::after modu antzekoan funtzionatzen du, baina edukia ondoren txertatzen du.

10.13 Hautatzaileen konbinazioa

Hautatzaileak konbinatu daitezke arau askoz zehatzagoak sortzeko. Adibidez:

<article class="destacado">
  <p>Urdina izango da.</p>
</article>

article.destacado p {
    color: blue;
}

Arau honek honako baldintzak dituen elementuaren barruan dauden paragrafoak hautatzen ditu:

• <article> da.
• destacado klasea du.

Klaseak ere konbinatu ditzakegu:

<button class="boton">
    Onartu
</button>

<button class="boton importante">
    Ezabatu
</button>

.boton.importante {
    background-color: red;
}

Arau honek bi klaseak dituen elementuak bakarrik hautatzen ditu:

10.14 Hautatzaileen laburpena

10.15 Praktika onak

CSS hautatzaileak idatzean zenbait gomendio jarraitu behar dira.

• Erabili klaseak estilo berrerabilgarrietarako.
• Saihestu hautatzaile oso konplexuak, mantentzea zaildu baitute.
• Erabili izen deskribatzaileak klase eta identifikatzaile bakarretarako.

11.1 Hautatzaile motak eta espezifikotasuna

Hautatzaile baten espezifikotasuna erabilitako hautatzaile motaren araberakoa da batez ere. Lehentasun handienetik txikienera, honako sailkapen hau ezar dezakegu:

1. Inline estiloak.
2. Identifikatzaileak (#id).
3. Klaseak, atributuak eta pseudo-klaseak.
4. Elementuak eta pseudo-elementuak.

Espezifikotasuna ulertzeko, hautatzaile bat lau balioren bidez adieraz dezakegu: A B C D. Balio horiek puntuazio bat balira bezala irudika ditzakegu. Ikus ditzagun honako adibide hauek:

p {
    color: blue;
}

.mensaje {
    color: green;
}

#mensaje {
    color: red;
}

Puntuazioak honela geratuko lirateke:

• 0 0 0 1: elementu motako hautatzaile bat duelako.
• 0 0 1 0: klase bat delako.
• 0 1 0 0: identifikatzaile bat delako.

Garrantzitsua da ulertzea espezifikotasun-balioak ez direla puntuazio arrunt bat bezala batzen. Ezkerretik eskuinera alderatzen dira. Adibidez, 0 1 0 0 > 0 0 20 0; lehenengoa espezifikoagoa da, nahiz eta bigarren hautatzaileak 20 klase izan, identifikatzailearen hautatzaileak klaseek baino lehentasun handiagoa duelako. Badira kalkulagailuak balioa kalkulatzeko eta arau desberdinak alderatzeko, bat bestea baino espezifikoagoa zein den jakiteko.

11.2 Hautatzaileen konbinazioa

Hautatzaileak konbinatzen ditugunean, espezifikotasuna ere metatu egiten da. Aurretik azaldutako arauari jarraituz, azter ditzagun honako adibide hauek:

article p {
    color: blue;
}

article .mensaje {
    color: green;
}

Puntuazioak honela geratuko lirateke:

• 0 0 0 2: bi mota-hautatzaile dituelako.
• 0 0 1 1: mota-hautatzaile bat eta klase-hautatzaile bat dituelako. Beraz, aurrekoa baino espezifikotasun handiagoa du.

11.3 Hainbat klase

Hautatzaile batek hainbat klase baditu, guztiek hartzen dute kontuan espezifikotasunerako.

.mensaje.importante {
    color: red;
}

.mensaje {
    color: blue;
}

Lehenengo araua bigarrena baino espezifikoagoa da.

11.4 Atributu-hautatzaileak

Atributu-hautatzaileek klaseen garrantzi bera dute.

input[type="email"] {
    border-color: blue;
}

11.5 Pseudo-klaseak

Pseudo-klaseak ere klase baten moduan hartzen dira kontuan espezifikotasunari dagokionez.

a:hover {
    color: red;
}

11.6 Pseudo-elementuak

Pseudo-elementuak mota-hautatzaile gisa hartzen dira kontuan.

p::first-letter {
    font-size: 30px;
}

11.7 Hautatzaile unibertsala

Hautatzaile unibertsalak ez du espezifikotasunik ematen. Gauza bera gertatzen da > + ~ eragileekin. Elementu horiek hautatzaileen arteko erlazioak ezartzeko balio dute, baina ez dute espezifikotasuna handitzen.

11.8 Espezifikotasuna eta ordena

Espezifikotasuna ez da CSSk erabiltzen duen irizpide bakarra. Bi arauk espezifikotasun bera dutenean, agertzeko ordenak zein aplikatzen den zehaztu dezake. Hurrengo adibidean, bi hautatzaileek puntuazio bera dute eta elementu mota berari eragiten diote:

p {
    color: blue;
}
p {
    color: red;
}

Puntuazio bera izan arren, aplikatzen den araua bigarrena da, ondoren agertzen delako; beraz, testua gorria izango da.

11.9 Adierazpen bat !important bidez behartzea

CSSk !important izeneko tresna berezi bat eskaintzen du, eta lehentasun berezia du kaskadaren mekanismoaren barruan. Erabil daiteke adierazpen jakin batek beste adierazpen arrunten gainetik lehentasuna izan dezan behartzeko.

Aurreko adibidea kontuan hartuta, lehenengo arauari !important gehituz gero, lehentasuna hartzen du eta bigarren araua baliogabetzen du:

p {
    color: blue !important;
}
p {
    color: red;
}

!important asko daudenean, zaila bihurtzen da jakitea zein arau aplikatuko den azkenean; beraz, ez da gomendatzen estilo-arazoak konpontzeko ohiko irtenbide gisa erabiltzea.

11.10 Nabigatzailearen tresnak

Nabigatzaileen garatzaileentzako tresnek erraz egiaztatzeko aukera ematen dute zein CSS arau aplikatzen ari diren. Adibidez, Chrome edo Firefoxen, ikuskatzailearen bidez elementu bat hauta dezakegu, eta nabigatzaileak honako hauek erakutsiko ditu:

• Elementuari eragiten dioten arauak.
• Aplikatutako propietateak.
• Gainidatzitako propietateak.
• Arau bakoitza dagoen CSS fitxategia.
• Definituta dagoen lerroa.
• Zenbait kasutan, espezifikotasunarekin lotutako informazioa.

Propietate bat marratuta agertzen bada, esan nahi du propietate berarentzat lehentasun handiagoa duen beste adierazpen bat dagoela. Ordena identifikatzen eta tresna hau erabiltzen ikastea funtsezkoa da CSS arazoak konpontzeko.

<h1 id="titulo">Especificidad de CSS</h1>

<h2 class="azul">Primer ejemplo</h2>
<p class="base">Párrafo 1</p>

<h3 class="verde">Segundo ejemplo</h3>
<p id="importante" class="destacado">Segundo párrafo</p>

<h2 class="gris">Tercer ejemplo</h2>
<p class="base resaltado">Tercer párrafo</p>

<p class="importante">Cuarto párrafo</p>

p { color: black;}
h1 { color: darkgray;}
h2 { color: purple;}
h3 { color: brown;}
#titulo { color: red;}
.base { color: green;}
h2.azul { color: blue;}
p.destacado { color: orange;}
h3.verde { color: olive;}
p.resaltado { color: teal;}
p.importante { color: fuchsia !important;}
#importante { color: darkblue !important;}
h2.gris { color: gray;}

12.1 Propietate guztiak ez dira heredatzen

Garrantzitsua da kontuan izatea CSS propietate guztiak ez direla heredagarriak. Adibidez, color normalean heredatzen da, baina kaxa-ereduarekin lotutako propietateak, hala nola margin, normalean ez dira heredatzen.

Beraz, honako hauen artean bereizi behar dugu:

• Propietate heredagarriak: lehenespenez, guraso-elementuaren kalkulatutako balioarekin ezartzen dira. Testuarekin lotutako propietateak dira, hala nola color, font-family, font-size, font-style, line-height, text-align eta visibility.
• Heredagarriak EZ diren propietateak: lehenespenez, propietatearen hasierako balioarekin ezartzen dira. Kaxa-ereduarekin edo layout-arekin lotutako propietateak dira, hala nola border, background, margin, padding, width eta height.

Propietate bat heredagarria den jakiteko, MDN edo W3C dokumentazioan Inherited definizioa ikus dezakegu; True bada, heredatu egiten da.

12.2 Herentzia behartzea inherit erabiliz

CSSk inherit gako-hitza eskaintzen du, propietate batek guraso-elementutik heredatutako balioa erabili behar duela esplizituki adierazteko.

Hitz hori erabiliz, berez heredatuko ez liratekeen propietateak ere heredatu ahal izango ditugu.

<div>
    <p>Primer párrafo.</p>
    <p>Segundo párrafo</p>
</div>

div {
  border: 2px solid red;
}
p {
    border: inherit;
}

12.3 initial reset gisa

initial reset bat balitz bezala defini genezake, CSSren arabera propietatearentzat definitutako hasierako balioa ezartzen baitu.

Demagun honako adibide hau:

<div>
    <h1>Título</h1>>
    <p>primer párrafo</p>
</div>

div {
  color:red
}
h1 {
    color: initial;
}

div elementuan kolore bat ezartzen dugu, eta herentziaren bidez haren azpian dauden elementu guztiek kolore hori izan beharko lukete; baina h1 arauan kolorea lehenetsitako baliora itzultzen dugu.

12.4 unset gako-hitza

unset gako-hitzak bi portaera konbinatzen ditu.

• Propietatea heredagarria bada, unset honela jokatzen du: inherit
• Propietatea heredagarria ez bada, initial bezala jokatzen du.

p {
    color: unset;
    margin: unset;
}

Aurreko adibidean bi jokabide-moduak ditugu:

• color propietate heredagarria denez, unset erabiltzeak heredatutako balioa erabiltzea eragingo du.
• margin-erako, lehenetsitako balioa erabiliko da.

12.5 revert gako-hitza

revert gako-hitzak propietateak aurreko jatorri-arauak erabiliz izango zukeen baliora itzultzeko aukera ematen du, uneko adierazpena aplikatzen jarraitu beharrean.

Haren funtzionamendua kaskadarekin eta CSS arauen jatorri desberdinekin lotuta dago.

Zenbait kasutan erabilgarria izan daitekeen arren, oraingoz ez dugu erabiliko; hala ere, komeni da MDN webgunean adibide bat ikustea.

13.1 Kaskadak ez du esan nahi “azken arauak irabazten duela”

Agertze-ordena kaskadak erabiltzen duen irizpideetako bat baino ez da; beraz, kontuz ibili behar da eta ez da pentsatu behar azken araua beti zuzena izango denik.

Gogoratu behar da aplikatzen den araua espezifikotasun handiena duena dela.

13.2 Oinarrizko hiru ideiak

Kaskada ulertzeko, aurretik ikusi ditugun kontzeptuak bereizi behar dira:

• Espezifikotasuna: elementu batekin hainbat arau bat datozenean, zein hautatzailek duen lehentasun handiagoa zehazten du.
• Herentzia: propietate jakin batzuk guraso-elementuetatik ondorengo elementuetara igarotzea ahalbidetzen du.
• Kaskada: hainbat adierazpen posible daudenean, azkenean zein adierazpen erabiliko den zehazten du.

13.3 Estilo-orrien jatorria

CSS arauak hainbat lekutatik etor daitezke. Modu sinplifikatuan, honako hauek bereiz ditzakegu:

• Nabigatzailearen estilo-orriak.
• Erabiltzaileak emandako estilo-orriak.
• Orriaren egilearen estilo-orriak.

Web-orriak ohiko moduan garatzean, batez ere egilearen estiloekin lan egingo dugu, hau da, guk geuk idazten ditugun CSSekin.

13.3.1 Nabigatzailearen estiloak

Nabigatzaileek lehenetsitako estilo-orri bat dute, normalean user-agent stylesheet izenez ezagutzen dena. Gure HTMLa sortzen dugunean, elementuren bat gehitzean, dagoeneko berezko estiloa izango du tamainari, koloreari, letra-tipoari, lodierari, marjinei eta abarrei dagokienez.

Estilo horiek ez ditugu guk idatzi; nabigatzailearen lehenetsitako arauetatik datoz. Arau horiek normalean estilo lehenetsiak eskaintzen dituzte honako etiketa hauetarako: <h1>, <p>, <a>, <ul>, <button>, <input>, eta beste elementu askotarako.

Hori dela eta, HTML orri batek itxura bisuala izan dezake estilo-orririk idatzi ez badugu ere.

Ikus daitekeen bezala, botoian desberdintasun nabariak daude, baina baita zerrendako bullet-a non marrazten den, elementuen arteko tartean eta, modu sotilagoan, estekaren azpimarratzean ere.

Hori beti izan da arazo bat, eta are gehiago lehenago, nabigatzaile batzuek estandarra behar bezala kudeatzen ez zutenean, batez ere kaxa-parametroen kudeaketan. Horregatik, reset.css fitxategiak daude lehenetsitako estiloak berrezartzeko. CSS frameworkek, hala nola Bootstrap edo TailWind, eragiketa hori ere egiten dute beren estiloak aplikatu aurretik.

13.4 Kaskada-sistema kontrolatzea

CSSk eboluzionatu egin du, eta gaur egun kaskada kontrolatzeko mekanismo osagarriak daude. Horietako bat kaskada-geruzak dira, @layer erabiliz.

Geruzek CSS arauak lehentasun-maila desberdinetan antolatzeko eta, ondoren, arauak geruza bakoitzaren barruan kokatzeko aukera ematen dute. Hori bereziki erabilgarria da proiektu handietan, CSSaren zati desberdinak liburutegi edo modulu desberdinetatik etor daitezkeenean.

@layer main {
    p {
        color: blue;
    }
}

@layer componentes {
    p {
        color: red;
    }
}

Aurreko adibidean, “componentes” geruza “main” geruza baino lehentasun handiagokoa da, ondoren deklaratzen delako; beraz, testuaren kolorea gorria izango da. Geruzen ordena ere zehaztu dezakegu, gero deklarazioen ordena edozein izanda ere.

@layer componentes, main;

@layer componentes;
@layer main;

Orain “main” geruza da lehentasun handiagoa duena (deklarazioan ondoren gehitu delako), eta, beraz, haren estiloak aplikatuko dira espezifikotasun bera dagoenean.

13.5 Espezifikotasuna eta ordena

Orain arte ikusitako guztia kontuan hartuta, lehentasun handiena duten arauak espezifikotasunaren arabera zehazten dira; baina espezifikotasun bera dutenean, azkenik deklaratzen den arauak irabazten du, betiere layers zehaztapenik tartean ez badago, horrek ordena alda baitezake.

13.6 Herentziaren eta kaskadaren arteko aldea

Herentzia eta kaskada erlazionatutako kontzeptuak dira, baina ez dira gauza bera. Herentziak propietate jakin batzuk guraso-elementu batetik haren ondorengo elementuetara igarotzea ahalbidetzen du.

Kaskadak, berriz, hainbat CSS adierazpen aplika daitezkeenean zein adierazpenek duen lehentasuna zehazten du; beraz, espezifikotasunaren bidez zehaztu beharko da zeinek duen lehentasuna.

Honela laburbil dezakegu:

14.1 Unitate absolutuak

Unitate absolutu nagusiak hauek dira:

Ohiko web-garapenean, px da alde handiz gehien erabiltzen den unitate absolutua.

@media print {
    .pagina { /* A4 */
        width: 21cm;
        min-height: 29.7cm;
    }
}

14.2 Unitate erlatiboak

Luzera-unitate erlatiboek luzera bat beste luzera-propietate batekiko erlazioan zehazten dute. Luzera-unitate erlatiboak hobeto egokitzen dira errendatze-euskarri desberdinetara.

vw, vh, vmin eta vmax neurriek nabigatzailearen leihoa hartzen dute kontuan. Leihoak 50 cm-ko zabalera izango balu, orduan 1vw = 0.5cm izango litzateke.

p {
    font-size: 20px;
    margin: 2em;
}

body {
    font-size: 16px;
}
h1 {
    font-size: 2em;
}

<div>
    Texto
    <div>
        Texto interior
    </div>
</div>

body {
    font-size: 16px;
}
div {
    font-size: 1.5em;
}

<h1>Título 1</h1>
<div>
    <h1>Título 2</h1>
</div>

html {
    font-size: 16px;
}
div {
    font-size: 2rem;
}
h1 {
    font-size: 2rem;
}

html  { font-size: 16px; }
h1    { font-size: 2rem; }
h2    { font-size: 1.5rem; }
p     { font-size: 1rem; }
small { font-size: 0.875rem; }

p {
    max-width: 60ch;
}

.elemento {
    height: 5ex;
}

<div class="contenedor">
    <div class="caja"></div>
</div>

.contenedor {
    width: 800px;
}

.caja {
    width: 50%;
}

.caja {
    padding: 10%;
}

.elemento {
    width: 100vw;
    height: 100vh;
}

14.3 Angelu-unitateak

CSSk angeluak adierazteko unitateak ere erabiltzen ditu. Nagusiak hauek dira:

• deg: graduak.
• rad: radianak.
• grad: gradu zentesimalak.
• turn: birak.

.elemento {
    transform: rotate(45deg);
}

.elemento {
    transform: rotate(0.5turn);
}

Hurrengo taulan hainbat adibide eta haien baliokidetasunak ikus daitezke, MDN dokumentaziotik hartuta.

Rotación	Equivalencias
	90deg = 100grad = 0.25turn ≈ 1.5708rad
	180deg = 200grad = 0.5turn ≈ 3.1416rad
	-90deg = -100grad = -0.25turn ≈ -1.5708rad

14.4 Denbora-unitateak

CSS propietate batzuek denbora-unitateak erabiltzen dituzte. Unitate horiek bereziki erabiliko ditugu CSS trantsizioak eta animazioak aztertzen ditugunean. Nagusiak hauek dira:

• s: segundoak.
• ms: milisegundoak.

.boton {
  transition: background-color 0.3s;
}

.boton {
  transition: background-color 300ms;
}

Bi balioek iraupen bera adierazten dute.

14.5 Unitate gabeko balioak

CSS propietate batzuek unitaterik gabeko zenbakiak onartzen dituzte.

.elemento {
    opacity: 0.5;
}

.elemento {
    line-height: 1.5;
}

Adibide hauetan ez da beharrezkoa unitatea jartzea, honako arrazoi hauengatik:

• opacity: normalean 0 eta 1 arteko zenbaki bat erabiltzen du.
• line-height: unitaterik gabe ere erabil daitekeen propietatea da.

14.6 0 balioa

CSS propietate askotan, balioa zero denean, unitatea bazter daiteke.

.elemento {
    margin: 0;
    padding: 0;
    border-width: 0;
}

Kasu hauetan ez da unitaterik jarri behar zero jarri dugulako; beste kopuru bat balitz, berriz, px, em edo beste edozein unitate jarri beharko litzateke.

14.7 Automatikoki kalkulatutako neurriak

CSS modernoan, mugikorrak eta tabletak agertzearen ondorioz, diseinu responsive bihurtu da ezinbesteko, eta, beraz, neurri erlatiboak erabiltzea ere ezinbestekoa da. Horri neurriak automatikoki kalkulatzeko aukera gehitu behar zaio.

.caja {
    width: calc(100% - 40px);
}

.caja {
    width: min(90%, 1000px);
}

.caja {
    width: max(300px, 50%);
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

15.1 Koloreak nola zehaztu

Koloreak esleitzerakoan, kolorea adierazteko hainbat modu aukera ditzakegu:

15.1.2 Koloreak balio hamaseitarren bidez

CSSn koloreak definitzeko gehien erabiltzen den moduetako bat balio hamaseitarrak erabiltzea da. Kolore hamaseitar bat # sinboloarekin hasten da eta normalean sei karakterez osatuta dago:

Koloreak hamaseitarrean

p { color: #ff0000; }

Sei karaktereek osagai hauek adierazten dituzte:

• Gorria (R).
• Berdea (G).
• Urdina (B).

Horregatik, sistema honi RGB hamaseitarra deritzo, eta #RRGGBB gisa adierazten da. Osagai bakoitzak 00 eta FF arteko balioa izan dezake. Karaktere hamaseitarrak letra xehez ere idatz daitezke.

Sistema honekin 24 biteko kolore-sakontasuna dugu (8 bit kanal bakoitzeko), eta horrek 16.777.216 koloreko aniztasuna ematen du.

Horrela, adibide erraz gisa:

• #000000: beltza, kolorerik ez dagoelako.
• #FF0000: gorria
• #00FF00: berdea
• #0000FF: urdina
• #FFFFFF: zuria, kolore guztiak batera

Osagai bakoitzaren bikoteak bi karaktere berdinez osatuta daudenean, hiru karaktereko forma laburtua erabil dezakegu. Beraz, honako adibide hauek baliokideak dira:

• #FF0000 = #F00
• #112233 = #123
• #00FFAA = #0FA

p {
    color: rgb(255 0 0);
    background-color: rgb(30% 20% 50% );
}

15.1.4 Koloreak HSL-rekin

CSSk HSL eredua erabiliz koloreak definitzeko aukera ere ematen du. HSL siglek honako hau esan nahi dute:

• Hue: tonua/ñabardura.
• Saturation: saturazioa.
• Lightness: argitasuna.

CSSn hsl() funtzioaren bidez erabil daiteke. Hurrengo adibidean kolore gorria erakusten da:

Koloreak hsl()-rekin

p { color: hsl(0 100% 50%); }

HSLk balioak zilindro baten moduan adierazten ditu. Lehenengo balioak tonua adierazten du eta angelu baten bidez adierazten da. Adibidez:

• 0°: gorria
• 60°: horia
• 120°: berdea
• 180°: cyana
• 240°: urdina
• 300°: magenta
• 360°: gorria berriro, zirkuluari bira osoa eman diogulako.

Saturazioa eta argitasuna ehunekoen bidez adierazten dira.

Saturazioak %100eko balioa duenean, %50ekoa duenean baino biziagoa da. Argitasuna txikiagoa denean, kolore ilunagoa lortzen dugu, eta %0 jartzen badugu, beltza izango da.

HSL bereziki erosoa izan daiteke kolore beraren aldaerak sortu behar ditugunean. Hurrengo adibidean, argitasunarekin jolastuz, kolore beraren 3 aldaera lortuko ditugu:

HSL-rekin argitasun-aldaketa

.color-base {
    color: hsl(210 80% 50%);
}
.color-claro {
    color: hsl(210 80% 70%);
}
.color-oscuro {
    color: hsl(210 80% 30%);
}

h1{
    background-color: rgb(0 0 255 / 50%);
}
h2{
    background-color: hsl(240 100% 50% / 0.5);
}
h3{
    background-color: #FF00007F;
}

h1{
    background-color: transparent;
}

15.2 Zein sistema erabili

Erantzun anbiguoa eman dezakeen arren, proiektuaren eta azken teknologia erabiliko dugunaren araberakoa da, horrek ere eragina baitu.

Sistema hamaseitarra edo rgb() funtzioa erabiltzen dugunean, sRGB izeneko kolore-espazioarekin lan egiten ari gara. Sistema horrek, aurrez esan bezala, 24 bit erabiltzen ditu (8 kanal bakoitzeko), guztira 16.777.216 kolore lortuz.

Aitzitik, hsl() erabiltzean ez gara kanal bakoitzeko 8 bit horietara mugatzen, eta gure nabigatzaileak/sistemak/pantailak beste kolore-sakontasun bat erabiltzen badu, hori erabili ahal izango dugu.

Teknologiak aurrera egin ahala, koloreak adierazteko modu berriak behar ditugu, kolore-espazioa zabaltzen ari delako; adibidez, kanal bakoitzeko 10 kolore-bit, HDR, …

15.3 Koloreak eta interfazeen diseinua

Interfaze batean normalean ez ditugu koloreak modu isolatuan erabiliko; ohikoena paleta txiki bat definitzea da. Adibidez:

• Kolore nagusia
• Bigarren mailako kolorea
• Atzeko planoko kolorea
• Testuaren kolorea
• Bigarren mailako testuaren kolorea
• Arrakasta-kolorea
• Errore-kolorea
• Abisu-kolorea

Aurrerago, CSS aldagaiak aztertzen ditugunean, balio horiek zentralizatu ahal izango ditugu.

16.1 Atzeko planoaren kolorea

background-color propietateak elementu baten atzeko planoaren kolorea ezartzeko aukera ematen du. Aurretik aztertutako edozein kolore-formatu erabil dezakegu:

body {background-color: #d0d0d0}
.div1 { background-color: #2563eb }
.div2 { background-color: rgb(37, 235, 212) }
.div3 { background-color: hsl(262 83% 53% / 0.5) }

Propietate hori edozein elementuri eslei diezaiokegu, baita dokumentuaren atzeko planoari ere body elementuaren bidez, adibidean ikus daitekeen bezala.

16.2 Atzeko planoko irudiak

background-image propietateak irudi bat atzeko plano gisa erabiltzeko aukera ematen du.

div { background-image: url("fondo.jpg"); }

url() funtzioak irudiaren helbidea adierazten du. Bidea CSS fitxategiarekiko erlatiboa edo absolutua izan daiteke, aplikazioa nola antolatuta dagoen kontuan hartuta. Bide erlatiboa izatea nahi badugu, honako fitxategi-egitura hau dugula irudikatuz:

proyecto/
├── css/
│   └── estilos.css
└── img/
    └── fondo.jpg

Irudia estilos.css fitxategitik kargatzeko, honako bide hau erabiliko dugu: url("../img/fondo.jpg").

background-image background-color-rekin batera erabil dezakegu, baina koloreak irudia erabilgarri ez dagoenean bakarrik funtzionatuko du.

16.2.1 background-repeat

Atzeko planoko irudi bat errepikatu egin daiteke erabilgarri dagoen espazio guztia betetzeko. Portaera hori background-repeat propietatearen bidez kontrola dezakegu. Haren balio nagusietako batzuk, besteak beste, hauek dira:

• repeat: irudia horizontalki zein bertikalki errepikatzea ahalbidetzen du. Atzeko planoko irudi baten portaera lehenetsia da. Bereziki erabilgarria da ereduak osatzen dituzten irudi txikiak erabiltzen ditugunean.
• repeat-x: irudia horizontalki errepikatzen da.
• repeat-y: irudia bertikalki errepikatzen da.
• no-repeat: irudia errepika ez dadin erabiltzen da; aukera egokiena da atzeko plano gisa argazki bakar bat gehitu nahi dugunean.
• space: irudia ebakirik egin gabe errepikatzen da. Lehenengo irudia elementuaren hasieran eta amaieran jartzen da, eta erdian errepikapenak gehitzen dira, tarte libreak utziz.

Hurrengo irudiak MDN adibidetik hartutakoak dira.

04c

Egiaztatu background-repeat-ren parametro desberdinen arteko aldea.

<div id="example1">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum  ...</p>
</div>

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
#example1 p {
    width:60%;
}

16.3 Atzeko planoaren beste propietate batzuk

Atzeko planoarekin lotutako beste propietate batzuk ere badaude; beraz, komeni da bakoitzaren dokumentazioa kontsultatzea, eskaintzen dituen aukerak ezagutzeko.

• background-position: atzeko planoko irudi baten posizioa kontrolatzeko aukera ematen du, honako balio hauek erabiliz:
  • Gako-hitzak, konbina daitezkeenak: left, center, right, top edo bottom.
  • Ehunekoak, bi posiziorekin: ezkerretik eta goitik dagoen posizioa.
  • px eta em bezalako posizioak ere erabil daitezke.
• background-size: atzeko planoko irudiaren tamaina kontrolatzeko aukera ematen du.
  • Dimentsio bakarra jartzen badugu, zabalera izango da eta proportzioa mantenduko du. Bigarren bat gehitzen badugu, altuera izango da.
  • cover hitz erreserbatua erabiltzen badugu, elementu osoa estaliko du, baina proportzioa bat ez badator, irudiaren zati bat ikusgai dagoen eremutik kanpo gera daiteke.
  • contain hitz erreserbatua erabiltzen badugu, irudia eskalatu egingo da elementuaren barruan osorik ikus dadin, baina espazio librea utziko du.
• background-attachment: scroll-a egiten dugunean atzeko planoaren portaera kontrolatzeko aukera ematen du. Balio hauek onartzen ditu:
  • scroll: ohiko portaera.
  • fixed: kasu honetan, atzeko planoa finko gera daiteke edukia desplazatzen dugun bitartean.
• background-origin: atzeko planoko irudia kutxaren zein eremutatik kokatzen den zehazteko aukera ematen du. Balioak border-box, padding-box edo content-box dira.

.a {background-position: top left;}
.b {background-position: 10% 50%;}
.c {background-position: 10em 50px;}
.d {background-size: 300px;}
.e {background-size: cover;}
.f {background-size: contain;}

16.4 Gradienteak

CSSk gradienteak sortzeko aukera ematen du kanpoko irudirik erabili beharrik gabe. Gradienteak nabigatzaileak berak sortzen ditu, eta horri esker ikusmen aldetik konplexuak diren atzeko planoak sor daitezke irudirik deskargatu beharrik gabe.

Gradienteak sortzeko hainbat modu daude:

• linear-gradient(): gradiente lineal bat sortzen du. Norabidea lehen parametro gisa adieraz daiteke:
  • to right: gradientea ezkerretik eskuinera doa.
  • to bottom: goitik behera.
  • Bi kolore baino gehiago adieraz daitezke, eta nabigatzaileak haien arteko trantsizioak egingo ditu. Horietako bakoitzaren posizioa ere adieraz daiteke.
• radial-gradient(): erdiko puntu batetik abiatzen eta kanporantz hedatzen den gradientea sortzen du.
• conic-gradient: erdiko puntu baten inguruan gradiente koniko bat sortzen du.

.a { background: linear-gradient(red, orange); }
.b { background: linear-gradient(to right, red, orange, yellow); }
.c { background: linear-gradient(45deg, red 25%, yellow 50%, blue 100% ); }
.d { background: linear-gradient( to right, red 0%, yellow 50%, blue 100% ); }
.e { background: radial-gradient(circle, white, blue); }
.f { background: conic-gradient(red, orange, yellow, green, blue, purple, red); }

.a {
    background-image:
        linear-gradient(
            rgb(0 0 0 / 50%),
            rgb(0 0 0 / 50%)
        ),
        url("paisaje.jpg");
}

16.5 background propietate laburtua

Atzeko planoak propietate espezifikoen bidez nola sortu edo gehitu ikusi dugu, baina background propietateari aurrez ikusitako atributu guztiak gehi dakizkioke, ondorengo ordenan:

.caja {
    background:
        #222
        url("imagen.jpg")
        no-repeat
        center
        / cover;
}

Propietate bakar honekin atzeko planoaren kolorea, irudi bat, errepikapena, posizioa eta tamaina ezarri ditugu. Propietate laburtua oso erabilgarria izan daiteke, baina hasieran errazagoa izan daiteke propietate bakoitza banaka erabiltzea.

Box Model eta dimentsioak

17.1 Kutxa baten eremuak

Esan bezala, HTMLko elementu bakoitza kutxa angeluzuzen gisa interpretatzen da, eta kutxa horrek, aldi berean, lau eremu desberdin ditu:

1. Edukia (content): Elementuaren edukia.
2. Betegarria (padding): Barneko espazioa.
3. Ertza (border): Ikusgai dagoen ertza.
4. Marjina (margin): Kanpoko espazioa, kutxa hau inguruko beste kutxetatik bereizteko.

Nabigatzaileak kutxaren tamaina kalkulatzen du eremu horien guztien espazioa kontuan hartuta. Ondorengo irudietan hobeto ikus daiteke:

Gure nabigatzaileko garatzaile-tresnetatik box model eta orri bateko elementu bakoitzak hartzen duen tamaina ikus ditzakegu.

Eredu hau CSSko diseinuaren oinarria da, eta ezinbestekoa da ulertzea atal konplexuagoak ikusi aurretik.

17.2 Kutxaren tamaina eta box-sizing

Demagun honako kutxa hau dugula:

.caja {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Nahiz eta oraindik propietateak sakon aztertu ez ditugun, aurrez ikusitako kutxen eredua kontuan hartuta:

Aurreko adibidean kutxaren zabalera 300+20+20+5+5=350px da, ezarritako zabalera gehi alde bakoitzeko padding-a eta ertzaren zabalera gehitu behar baitira, baita alde bakoitzean ere. Marjina ez da tamainaren kalkuluan sartzen, elementuen arteko bereizketa baita. Portaera hori arraroa izan daiteke hasieran.

box-sizing propietateak dimentsioak nola kalkulatzen diren aldatzeko aukera ematen du. Bi balio nagusi daude:

• content-box: portaera tradizionala da. Zabalera edukiari dagokio. Hau da portaera lehenetsia.
• border-box: zabalerak padding-a eta ertza barne hartzen ditu. Portaera hau intuitiboagoa da.

Ondorengo irudietan hobeto ikus daiteke kutxaren benetako dimentsioa nola kalkulatzen den bi kasuetan:

Ikus daitekeen bezala, aukera content-box denean, tamaina width-en ezarritakoa da, eta ondoren gainerako tamainak gehitzen dira. Aldiz, border-box denean, garatzaile-tresnek erakusten dute edukiaren tamainari padding-aren eta border-aren tamaina kendu zaiola, width-ren guztizko tamainarekin bat etor dadin.

*,
*::before,
*::after {
    box-sizing: border-box;
}

17.3 Bloke-elementuak eta lerroko elementuak

Kutxa-ereduak elementu guztiei eragiten die, nahiz eta guztiek ez duten berdin jokatzen. Elementuak bloke-elementuak edo lerroko elementuak izan daitezke, baina inoiz ez biak aldi berean.

18.1 Dimentsioak eremuaren arabera

Jarraian, HTMLko box model-aren kutxen dimentsioak aldatzeko hainbat propietate ikusiko ditugu. Propietateak honela bereiz daitezke:

• Propietate orokorra: izenak ez du adierazten zein eremuri eragiten dion, eta, beraz, eremu guztietan egingo du aldaketa.
• Propietate espezifikoa: zein eremu aldatuko duen adierazten du, eta eremu horri bakarrik eragingo dio.

.caja {
    padding: 30px;
}

.a { padding: 2px; }
.b { padding: 2px 4px; }
.c { padding: 2px 4px 6px; }
.d { padding: 1px 2px 3px 4px;}

18.2 width propietatea

width propietateak elementu baten eduki-eremuaren zabalera ezartzen du.

.caja {
    width: 300px;
}

Edukiak 300px-ko zabalera izango du. Garrantzitsua da gogoratzea, lehenespenez, padding eta border ez daudela zabalera horren barruan. Portaera hori aurrerago aztertuko dugu box-sizing-ekin.

.contenedor { width: 80%; }

18.3 min-width propietatea

min-width propietateak elementu batek izan dezakeen gutxieneko zabalera ezartzen du.

.caja {
    width: 50%;
    min-width: 250px;
}

Elementua 50% hartzen saiatuko da, baina ez da inoiz 250px baino txikiagoa izango. Propietate hau oso erabilgarria da responsive diseinuetan.

18.4 max-width propietatea

max-width-ek onartzen den gehieneko zabalera ezartzen du.

.caja {
    width: 90%;
    max-width: 1200px;
}

Eredu hau oso ohikoa da. Lehenespenez, pantaila txikietan 90% hartuko du, eta pantaila handietan, berriz, ez ditu inoiz 1200px gaindituko. Horrela, edukia gehiegi zabala izatea saihesten dugu.

18.5 height propietatea

height-ek eduki-eremuaren altuera definitzen du.

.caja { height: 200px; }

Edukiak 200px-ko altuera izango du. Edukiak erabilgarri dagoen espazioa baino leku gehiago hartzen badu, gainezkatzea gerta daiteke; hurrengo atalean aztertuko dugu.

height-en ehuneko batek behar bezala funtzionatzen du guraso-elementuak altuera definitua duenean soilik. Guraso-elementuak ez badu altuera definiturik, baliteke ehunekoak espero den emaitza ez ematea.

18.6 min-height propietatea

min-height propietateak gutxieneko altuera bat ezartzen du.

.caja { min-height: 200px; }

Edukia oso txikia izan arren, kutxak gutxienez 200px-ko altuera izango du. Edukia hazten bada, elementua ere hazi egingo da.

18.7 max-height propietatea

max-height-ek gehieneko altuera mugatzen du.

.caja { max-height: 400px; }

Edukiak tamaina hori gainditzen badu, gainezkatzea gerta daiteke, overflow propietatearen arabera. Konbinazio hau oso ohikoa da alboko paneletan eta desplazamendua duten zerrendetan.

19.1 Ardatz bakoitzaren kontrol independentea

Gainezkatzea kontrolatzerakoan, horizontalki eta bertikalki bereizita kontrola dezakegu. Horretarako, propietate hauek ditugu:

• overflow-x: ardatz horizontalarentzat.
• overflow-y: ardatz bertikalarentzat.

20.1 Padding-aren erabilera botoietan

Padding-aren erabilera ohikoenetako bat botoi baten sakatze-eremua handitzea da. Testua txikia izan arren, botoiak erabiltzailearentzat askoz azalera erosoagoa izango du. Eredu hori ia edozein interfaze modernotan agertzen da.

21.1 border propietatea

Ertz bat sortzeko modurik errazena border propietate laburtua erabiltzea da. Hiru parametro ematen zaizkio:

• Ertzaren lodiera: neurri-unitate batekin edo thin, medium eta thick bezalako gako-hitzekin adieraz daiteke.
• Marra estiloa: hainbat gako-hitz daude ertz mota adierazteko:
  • none: Ertzik gabe.
  • solid: Marra jarraitua.
  • dashed: Marra etena.
  • dotted: Puntuzko marra.
  • double: Marra bikoitza.
  • groove: Hondoratutako hiru dimentsioko efektua.
  • ridge: Goratutako hiru dimentsioko efektua.
  • inset: Barruko itxura.
  • outset: Kanpoko itxura.
• Ertzaren kolorea.

Hurrengo adibidean kodea propietate bakar batean edo parametro bakoitza bere propietatean banatuta ikus daiteke:

p { 
    border: 2px solid black;
}

p {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

border-width propietatea propietate “orokorra” da, eta batetik lau parametrora onartzen ditu eremu desberdinetarako, lehenago azaldu dugun bezala.

21.2 Alde bakoitzean ertz desberdinak

CSS-k ertzaren alde bakoitza modu independentean konfiguratzeko aukera ematen du, border-top, border-right, border-bottom eta border-left propietateen bidez.

border propietatearen modu berean funtzionatzen dute; beraz, alde bakoitzari lodiera, estilo eta kolore desberdinak eslei diezazkiokegu.

Eta ezaugarri bakoitza banaka esleitu nahi badugu, propietate bereiziak ditugu, hala nola:

• border-top-width
• border-right-style
• border-bottom-color

Eta horrela kaxaren alde eta propietate bakoitzerako.

21.3 Ertz biribilduak border-radius erabiliz

Gehien erabiltzen den propietateetako bat border-radius da, izkinak biribiltzeko aukera ematen baitu.

.a { border-radius: 5px; }
.b { border-radius: 1rem; }
.c { border-radius: 50%; }

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

Izkinak modu independentean konfigura daitezke propietate espezifiko hauen bidez:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

21.4 Ertz eliptikoak

border-radius-ek erradio horizontal eta bertikal desberdinak definitzeko aukera ere ematen du.

.caja {
    border-radius: 50px / 20px;
}

Horrek forma eliptikoa duten izkinak sortzen ditu, zirkularrak izan beharrean. Ezaugarri interesgarria bada ere, diseinu gehienetan erradio berdinak erabiltzen dira. Ertz eliptikoak ondo ulertzeko, MDNren border-radius generator webgunean nola funtzionatzen duten ikus dezakegu.

22.1 margin: auto

auto balio bereziak nabigatzaileari marjina automatikoki kalkulatzeko aukera ematen dio. Kasurik ezagunena horizontalki zentratzea da.

.caja {
    margin: auto;
}

Garrantzitsua da konturatzea auto bakarrik adierazten badugu, goiko eta beheko marjinak automatikoki desagertzen direla.

22.2 Marjinak eta atzeko planoa

Ezaugarri garrantzitsu bat da atzeko kolorea ez dela marjinera hedatzen.

Adibidez:

.caja {
    margin: 20px;
    background-color: lightblue;
    border: 1px solid black;
}

Kolore urdina ertzera iritsi arte bakarrik hedatzen da. Hortik aurrera dagoen guztiak, hau da, marjinak, ez du atzeko kolore hori izango.

22.3 Marjinen kolapsoa

Marjin bertikalen ezaugarri esklusibo bat marjinen kolapsoa da (margin collapsing).

Logikak 50px pentsatzera eramango gintuzke, baina ez da horrela, aldameneko marjin bertikalek kolapsatu egiten baitute eta handiena erabiltzen baita; kasu honetan, 30px. Dokumentazioan kasu guztiak azaltzen dira.

Kontuan izan behar da kolapsoa ez dela kasu guztietan gertatzen. Adibidez:

• Marjin horizontaletan.
• Flexbox elementuetan.
• Grid elementuetan.
• Posizionamendu berezia duten elementuetan.
• Padding edo ertz baten bidez bereizitako elementuetan.

Horregatik, Flexbox edo Grid-en oinarritutako diseinu modernoetan portaera hori askoz gutxiagotan agertzen da.

Aldagaiak, funtzioak eta organizazioa

23.1 Nola sortu aldagai bat CSSn

CSS aldagai bat propietate bat da, eta haren izena bi marratxorekin hasten da (--); ondoren, var() funtzioaren bidez erabil dezakegu, aurretik emandako izena adieraziz. Aldagaiak ---rekin hastearen arrazoia propietate pertsonalizatuak CSSren propietate estandarretatik bereiztea da.

:root {
  /* COLORES */
  --color-main: #2563eb;
  --color-ok: #16a34a;
  --color-error: #dc2626;
  --color-text: #222222;
  /* ESPACIO */
  --espacio-md: 1rem;
  /* BORDES */
  --bordes: 2px;
  --radio: 10px;
}

h1 {
    color: var(--color-main);
}
a {
    color: var(--color-main);
}
.ok {
    border: var(--bordes) solid var(--color-ok);
    border-radius: var(--radio);
    padding: var(--espacio-md);
}

Ohikoena aldagaiak :root hautatzailearen barruan deklaratzea da; horrela, aldagaiak orrialde osoan egongo dira eskuragarri. Horregatik, diseinuaren konfigurazio globala gordetzeko erabiltzen den lekua izan ohi da.

Aldagaiak behar adina aldiz erabil daitezke, eta etorkizunean aldaketak egin nahi badira, deklarazioan bakarrik aldatu behar da, eta horrek orrialde osoa aldatzea eragingo du.

Adibidean ikus daitekeen bezala, aldagaiak koloreetarako ez ezik, tarteetarako eta baita tipografietarako ere erabil daitezke.

23.2 Aldagai lokalak eta herentzia

Aurreko atalean aldagai “globalak” nola sortu ikusi dugu, :root barruan definitu baitira, baina elementu baterako aldagai lokalak ere sor ditzakegu. Kontuan izan behar da CSSko aldagaiak heredatu egiten direla; beraz, aldagai bat elementu batean definitzen badugu, haren seme-alabek erabili ahal izango dute.

.tarjeta {
    --color-local: blue;
}

.tarjeta p {
    color: var(--color-local);
}

Aldagaia .tarjeta barruan eta haren ondorengo elementuetan baino ez da existitzen. Horri esker, konfigurazio propioak dituzten osagaiak sor ditzakegu.

Garrantzitsua da aldagai lokalak sortzean kontuan izatea osagai bakoitzak izen bereko beste aldagai bat defini dezakeela, eta, beraz, definizio desberdinak izango direla, osagai bakoitzak bere testuingurua mantentzen baitu:

.alerta {
    --color: #dc2626;

    color: var(--color);
    border: 2px solid var(--color);
}

.exito {
    --color: #16a34a;

    color: var(--color);
}

23.3 Aldagaiak berriro esleitzea berrerabiltzeko

Osagai generikoak sor ditzakegu eta, ondoren, aldaerak sortu aldagai baten balioa bakarrik aldatuz; horrela, ez ditugu propietate guztiak errepikatu behar.

.boton {
  --color-boton: #2563eb;
  background: var(--color-boton);
  border: 2px solid var(--color-boton);
  color: white;
}

.boton-rojo {
    --color-boton: #dc2626;
}

.boton-verde {
    --color-boton: #16a34a;
}

Ondoren, HTMLn osagaiak behar ditugun klaseak izango ditu.

23.4 Balio lehenetsiak var()-rekin

var() funtzioak bigarren parametro bat onartzen du, ordezko balio gisa erabiltzen dena. Lehenengo aldagaia existitzen ez bada, bigarren balioa erabiliko du.

color: var(--color-texto, black);

Mekanismo hau erabilgarria da osagai berrerabilgarriak garatzen ditugunean.

23.5 Aldagaiak eta modu iluna

CSSko aldagaien abantaila handienetako bat gaiak sortzeko aukera da. Gaur egun ohikoa da webguneek modu argia eta modu iluna izatea.

/* tema claro*/
:root {
    --fondo: white;
    --texto: #222;
}
/* tema oscuro */
body.dark {
    --fondo: #111;
    --texto: #eee;
}

body {
    background: var(--fondo);
    color: var(--texto);
}

<body>-ren klasea aldatzean, interfaze osoa automatikoki aldatzen da.

23.6 Aldagaiak eta calc()

Aldagaiak CSSko funtzioekin konbina daitezke; horrela, nabigatzaileak kalkulua automatikoki egiten du.