CSS: tamaina

Lehenetsita, elementu gehienen tamaina edukiontzian dagoen espazioaren arabera zehazten da.

Elementu baten zabalera % 100 da. Horrek esan nahi du edukiontzia bezain zabala izango dela. Altuera, ordea, elementuaren barruko edukiak zehazten du.

Hori dela eta, gure dokumentuaren <p> elementua nabigatzailearen leihoaren alboetara zabaltzen zen, eta ez zen paragrafoaren lerroak edukitzeko behar baino altuagoa.

CSSk ezaugarri hauek definitzen ditu tamaina pertsonalizatua deklaratzeko:

• width —Propietate horrek elementu baten zabalera adierazten du. Balioa pixeletan, ehunekoetan edo auto-gako hitzarekin zehaztu daiteke (lehenetsita). Balioa ehunekotan zehazten denean, zabalera nabigatzailearen arabera kalkulatzen da edukiontziaren zabaleratik abiatuta, eta auto-balioarekin deklaratzen denean, elementua zabaldu egiten da edukiontziaren barruan dagoen espazio horizontal guztia hartu arte.
• height —Propietate horrek elementu baten altuera adierazten du. Balioa pixeletan, ehunekoetan edo auto-gako hitzarekin zehaztu daiteke (lehenetsita). Balioa ehunekotan zehazten denean, nabigatzaileak altuera kalkulatzen du edukiontziaren altueratik abiatuta, eta auto-balioarekin adierazten denean, elementuak bere edukiontziaren altuera hartzen du. Nabigatzaileek kutxa bat sortzen dute pantailan hartzen duen eremua zehazten duen elementu bakoitzaren inguruan.

Tamaina pertsonalizatua deklaratzen dugunean, kaxa aldatu egiten da eta elementuaren edukia egokitu eremu berriaren barruan sartzeko, irudiak erakusten duen bezala.

Norberak egokitutako kaxak.

Adibidez, 200 pixeleko zabalera aitortzen badugu gure dokumentuko <p> elementurako, testuaren lerroak ez dira hain luzeak izango, baina lerro berriak erantsiko dira paragrafo osoa erakusteko.

        
          #titulua {
            font: bold 26px Verdana, sans-serif;
          } 
          #azalpena {
            width: 200px;
          }
        
Zabalera egokitu zaio azalpenari
      

Tamaina egokitutako edukia.

Zabalera egokitzeko ikusi dugun erregelak <p> elementuaren zabalera adierazten du, baina altuera edukiaren arabera zehazten da oraindik, eta horrek esan nahi du elementu horrek sortutako kutxa altuagoa izango dela paragrafo osoa edukitzeko, irudiak erakusten duen bezala.

Orain, elementuaren altuera ere murriztu nahi badugu, height propietatea erabil dezakegu. Hurrengo erregelak gure dokumentuko <p> elementuaren altuera 100 pixelera murrizten du.

  
    #titulua {
      font: bold 26px Verdana, sans-serif;
    } 
    #azalpena {
      width: 200px; 
      height: 100px;
    }
  
Altuera pertsonalizatua esleitu zaio (100px)

Tamaina zehatza duten elementuekin arazoa da batzuetan edukia ezin dela bere osotasunean erakutsi. Lehenetsita, nabigatzaileek kutxaren eremutik kanpo erakusten dute gainerako edukia. Ondorioz, tamaina pertsonalizatua duen kutxa baten edukiaren zati bat azpian dagoen elementuaren edukiaren gainean koka daiteke, hurrengo irudian ikus daitekeen bezala.

Edukiak gainezka egiten du.

Gure adibidean, <p> elementuak zehaztutako kaxatik kanpo dagoen testuak <footer> elementuari dagokion espazioa hartzen du, eta, beraz, bi elementuen edukia gainjarrita dago. CSSk honako propietate hauek ditu arazo hau konpontzeko:

• overflow —Propietate honek elementua gainditzen duen edukia nola erakutsiko den zehazten du. Balio erabilgarriak honako hauek dira:
  • ikusgai (lehenetsita)
  • hidden (kutxaren barruan sartzen ez den edukia ezkutatzeko)
  • scroll (edukia mugitzeko alboko barrak erakusteko)
  • auto (nabigatzaileari edukiarekin zer egin erabakitzen uzteko)
• overflow-x —Propietate honek elementua horizontalki gainditzen duen edukia nola erakutsiko den zehazten du. jabetzaren balio berak onartzen ditu.
• overflow-y —Propietate honek elementua bertikalki gainditzen duen edukia nola erakutsiko den zehazten du. Overflow jabetzaren balio berak onartzen ditu.
• overflow-wrap —Propietate honek adierazten du hitz bat puntu arbitrario batean banatu beharko litzatekeen lerroan erakusteko nahikoa leku ez dagoenean. Balio erabilgarriak bi dira:
  • normal(lerroa naturalki zatitzeko)
  • break-word(hitzak puntu arbitrarioetan zatituko dira, testu-lerroa erabilgarri dagoen espazioan egokitzeko)

Propietate horiekin zehaztu dezakegu nola erakutsiko den edukia nahikoa leku ez dagoenean. Adibidez, elementua gainditzen duen testua ezkutatu dezakegu, overflow propietateari hidden balioa esleituz.

          
            #titulo {
              font: bold 26px Verdana, sans-serif;
            } 
            #azalpena {
              width: 200px; 
              height: 100px; 
              overflow: hidden;
            }
          
Elementua gainditzen duen edukia ezkutatu egiten da
        

Gainezka egiten duen edukia ezkutatuta.

Erabiltzaileak ezkutatu den testua ikusi ahal izatea nahi badugu, scroll balioa esleitu eta nabigatzailea alboko barrak erakustera behartu dezakegu, edukia lekuz aldatzeko.

          
            #titulua {
              font: bold 26px Verdana, sans-serif;
            } 
            #azalpena {
              width: 200px; 
              height: 100px; 
              overflow: scroll;
            }
          
Edukia gora eta behera mugitzeko barra
        

Desplazamendu-barrak agerian.

Elementuaren tamaina ez da kaxaren zabalerak eta altuerak bakarrik zehazten, baita betelanak eta ertzek ere. CSSk aukera ematen digu kutxaren inguruko espazioa izendatzeko, elementua eta inguruko beste elementu batzuk bereizteko (marjina), eta, horrez gain, kutxaren mugen eta edukiaren (betegarria) arteko tartea sartzeko.

Marginak, betegarriak eta ertzak.

CSSk elementu baterako marjinak eta betegarriak definitzeko honako propietate hauek ditu.

• Propietate horrek elementu baten marjina adierazten du. Marjina kutxaren inguruan dagoen espazioa da. Goiko, eskuineko, beheko eta ezkerreko marjinak adierazten dituzten lau balio jaso ditzake, ordena horretan eta espazio batez bereizita (adibidez, margin: 10px 30px 10px 30px;). Hala ere, balio bat, bi edo hiru bakarrik deklaratzen badira, besteek balio berberak hartzen dituzte (adibidez, margin: 10px 30px; erregelak 10 pixeleko margina eransten du goiko eta beheko aldeetan eta 30 pixelekoa ezkerreko eta eskuineko aldeetan). Balioak bereiz adieraz daitezke margin-top, margin-right, margin-bottom eta margin-left propietate elkartuak erabiliz (adibidez, margin-left: 10px;). Propietateak, halaber, auto balioa ere onartzen du, nabigatzailea marjina kalkulatzera behartzeko (elementu bat edukiontzian zentratzeko erabili ohi da).
• padding —Propietate horrek elementu baten betegarria adierazten du. Betegarria elementuaren edukiaren eta kaxaren mugen arteko tartea da. Balioak margin propietaterako egiten dugun modu berean deklaratzen dira. paddingen kasuan marginen kasuan bezala, propietateekin modu independentean ere deklara daitezke: padding-top, padding-right, padding-bottom eta padding-left (adibidez, padding-top: 10px;).

Beheko erregelak marjinak eta betegarria gehitzen ditu gure dokumentuaren goiburuan. Balio bakarra esleitzen dugunez, balio bera erabiltzen da elementuaren marjina eta betegarri guztiak definitzeko (goikoa, eskuinekoa, behekoa eta ezkerrekoa, ordena horretan).

          
            header {
              margin: 30px;
              padding: 15px;
              }
              #izenburua {
              font: bold 26px Verdana, sans-serif;
              }
          
Ertzak eta betegarria gehitu zaizkio header elementuari, alegia titulua identifikatzailea duen <h1>a  barne hartzen duen elementuari.
        

Elementu baten tamaina eta ertzak gehitu egiten dira okupatzen duen azalera kalkulatzeko. Gauza bera gertatzen da betegarriarekin eta ertzarekin (ertzak aurrerago aztertuko ditugu).

Elementu baten azken tamaina formula honen bidez kalkulatzen da: tamaina + marjinak + betegarria + ertzak. Adibidez, alde bakoitzean 200 pixeleko zabalera eta 10 pixeleko marjina duen elementu bat badugu, elementuak hartzen duen eremuaren zabalera 220 pixelekoa izango da.

Guztira 20 pixeleko marjina gehitzen zaio elementuaren 200 pixeleko zabalerari eta altuerari, eta azken balioa pantailan irudikatzen da.

Ertz eta betegarri pertsonalizatuak dituen goiburua.

Egin ezazu zuk zeuk: Ordeztu arauak zure CSS fitxategian (nirEstiloak.css) goiburuari dagokion headera goian ikusi dugun erregelako kodearekin eta ireki dokumentua zure nabigatzailean. Beheko irudian adierazten denaren antzeko zerbait ikusi beharko litzateke. Aldatu margin propìetatearen balioa marjinei nola eragiten dien ikusteko.

GARRANTZITSUA: kapitulu honetan aurrerago ikusiko dugun bezala, elementuak bi mota nagusitan sailkatzen dira:

• Block (blokea). Block elementuek tamaina pertsonalizatua izan dezakete, baina Inline elementuek edukiek zehaztutako espazioa baino ezin dute okupatu.
• Inline (linean) Goiburuaren izenburua definitzeko erabiltzen dugun <span> elementua Inline elementutzat jotzen da lehenetsita, eta, beraz, ezin ditu tamaina eta marjina pertsonalizatuak izan.

Horregatik, gure adibidean <header> elementuari esleitzen dizkiogu marjinak eta betegarria, eta ez <span> elementuari. (egiturazko elementuak Block elementu gisa definitzen dira).