5.1 Formatuak modu luzean

5.1.1 Formatuak zuzenean emateko. Modu luzean

Esan dugun moduan, HTML egitura sortzen duen lengoaia da, eta ez da itxura aldatzeko erabili behar. Beraz, web orriko elementu batzuei (kolorea, letra-tipoa, betegarriak, lerrokatzea…) formatua zuzenean jartzeko, estilo-orriak erabil ditzakegu, edo, besterik gabe, estiloa: zuzenean style atributua jarrita elementu bakoitzean edo orri horretan.

Hau guztia CSS3 estilo-orriekin batera ikusiko dugu sakonago. Baina, oraingoz, ikus ditzagun testuetan erabilgarriak diren estilo-deklarazio batzuk.

Estiloa deklaratzeko, bada sintaxi jakin bat. Honela idazten da estilo orrietan:

Baina estilo hori HTMLko elementu bati lotzeko erabili behar dugun deklarazioa beste hau da:

5.1.2 Font (letra-tipoa)

  • color. Kolorea ezartzeko erabiltzen da, eta ia HTMLko etiketa guztiak erabiltzen dituzte. Koloreen izen guztiak ez daude onetsita; beraz, hobe da RGB balioa jartzea.

color: RGB balioa | kolore_izena;

color: #013ADFr;

color: pink;

  • font-size. Letra-tipoaren tamaina zehazteko erabiltzen da.

font-size: xx-small|x-small|small|medium|large|x-large|xx-large;

font-size: x-large;

font-size: SS_unitateak;

font-size: 14px;

  • font-family. Letra-tipoaren familia zehazteko erabiltzen da. Hasierako balioak generikoak dira; beraz, nabigatzaileek eta erabiltzaileek ulertzen dituzten edo sisteman dituzten letra-tipoak erabiltzen ditu.

Tipografia normalak erabil daitezke; baina, izen batek espazioak baditu, komatxoen artean jarri behar da.

font-family: serif|sans-serif|cursive|fantasy|mosopace;

font-family: ohiko_letra_tipoak;

font-family: arial,helvetica;

font-family: fantasy;

  • font-weight. Karaktereen zabalera zehazteko ibiltzen da. Horrekin, letra lodia ere jar daiteke. 400=normala; 700=lodia (bold).

font-weight: normal | bold| lighter| 100 | 200 | 300 | 400 | 500 | 600| 700| 800| 900;

font-weight: bold;

font-weight: 200;

  • font-style. Letra-tipoaren estiloa adierazteko da.font-style:normal|italic|oblique;

font-style: normal;

font-weight: italic;

5.1.3 Text (paragrafoa)

  • line-height. Lerro baten altuera adierazteko da, hau da, lerro-tartea. HTMLrekin soilik ezin da aldatu.

line-height: normal | CSS_unitateak;

line-height; 12px;

line-height: normal;

  • text-decoration. Testuaren apaingarria adierazteko erabiltzen da (azpimarratuta, lerroa testu gainean edo marratuta). HTMLrekin soilik ezin da aldatu.

text-decoration:none | [underline || overline || line-through];

text-decoration: none;

text-decoration: underline;

  • text-align. Testuaren lerrokatzea adierazteko da.

text-align: left | right | center | justify;

text-align: right;

text-align: center;

  • text-indent. Testuen koskak jartzeko da. Berria da bertsio honetan.

text-indent: CSS_unitateak;

text-indent: 10px;

text-indent: 2in;

  • text-transform. Testua moldatzeko aukera ematen du: lehen hizkia larriz, dena larriz edo dena xehez.

text-transform: capitalize | uppercase | lowercase | none;

text-transform: none;

text-transform: capitalize;

5.1.4 Background (atzeko planoa)

  • background-color. Atzeko planoari edo elementu bati kolorea ezartzeko.

background-color: RGB balioa | kolore_izena;

background-color: green;

background-color: #0000FF;

  • background-image. Atzeko planoari edo elementu bati irudia ezartzeko erabiltzen da.

background-image: url (irudiaren_izena helbide absolutuarekin edo erlatiboarekin);

background-image: url(eguzkia.jpg);

background-image: url(https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529_960_720.jpg);

5.1.5 Margin (marjina)

  • margin-left. Ezkerreko marjinaren tamaina adierazteko.

margin-left: CSS_Unitateak;

margin-left: 1cm;

margin-left: 0,5in;

  • margin-right. Eskuineko marjinaren tamaina adierazteko.

margin-right: CSS_Unitateak;

margin-right: 6%;

margin-right: 5px;

  • margin-top. Goialdeko marjinaren tamaina adierazteko.

margin-top: CSS_Unitateak;

margin-top:2%;

margin-top:3cm;

  • margin-bottom. Behealdeko marjinaren tamaina adierazteko.

margin-botom: CSS_Unitateak;

margin-botom: 3pt;

margin-botom: 0px;

5.1.6 Padding (betegarria)

  • padding-left. Objektu baten eta haren edukitzailearen artean txertatutako ezkerreko espazioa. Espazio horren planoa eta edukitzailearen atzeko planoa berbera da.

padding-left: CSS_Unitateak;

padding-left: 1%;

padding-left: 0,5in;

  • padding-right. Objektu baten eta haren edukitzailearen artean txertatutako eskuineko espazioa.

padding-right: CSS_Unitateak;

padding-right: 0,5cm;

padding-right: 3pt;

  • padding-top. Objektu baten eta haren edukitzailearen artean txertatutako goialdeko espazioa.

padding-top: CSS_Unitateak;

padding-top: 10pt;

padding-top: 3cm;

  • padding-bottom. Objektu baten eta haren edukitzailearen artean txertatutako behealdeko espazioa.

padding-bottom: CSS_Unitateak;

padding-bottom: 2in;

padding-bottom: 4px;

5.1.7 Border (Ertza)

  • border-color. Objektu baten ertzaren kolorea adierazteko. Ertz guztiak kolorez bereiz daitezke: border-top-color, border-right-color, border-bottom-color eta border-left-color.

border-color:RGB balioa | kolore_izena;

border-color:pink;

border-color:#0000FF;

  • border-style. Objektu baten ertzaren kolorea adierazteko. Ertz guztiak kolorez bereiz daitezke: border-top-color, border-right-color, border-top-color eta border-left-color.

border-style: none | dotted | solid | double| grove | rigde | inset | outset;

border-style: groove;

border-style: solid;

  • border-width. Objektu baten ertzaren zabalera adierazteko.

border-width: CSS_unitateak;

border-width: 12px;

border-width: 1in;

Beste batzuk

  • float. Elementu bat ezkerrera edo eskuinera lerrokatzeko erabiltzen da. Ondoko testua elementu horren inguruan batuko da.

float: none | left | right;

float: right;

  • clear. Edozein elementuk eskuinean eta ezkerrean lerrokatuta dituen irudiak edo elementuak kendu egiten ditu.

clear: none | left | right;

clear: right;