CSS oinarrizko gida

programatzen | 2006-12-13 16:17

Egilea: Gorka Alustiza

CSS edo “Cascading Style Sheets” (Estilo Orriak Turrustan) HTMLko estrukturaren aurkezpena banatzeko garatutako teknologia bat da, hau da, web dokumentu bat exploratzailean ikustaraztean edukiko duen itxura definitzen du. W3Ck garatutakoa da eta gero eta garrantzia gehiago du diseinuaren munduan, bere erabilerraztasun eta emaitza honengatik.

HTML elementuei erregelak aplikatuz funtzionatzen du, berauen kolore, hondo, borde, letra mota, etab… bezalako propietateak kontrolatuz. Honela, web orriaren zati grafikoa HTML egituratik erabat at geratzen da honek dauzkan onurekin: gure kodigoa antolatu dezakegu, aldaketak errazten ditu, lan fluxua optimizatzen du, orriek gutxiago okupatzen dute…

SINTAXIA

Hona hemen aipatutako erregelen adibide bat:

P { text-align: right; }

Erregela honek HTML kodeko <P></P> etiketen hartean dagoen textua eskuinean alineatuko du. Orain azter dezagun etiketaren egitura. Bi zatitan bana daiteke: batetik aukeratzailea (selector) eta bestetik deklarazioa (declaration), giltzen hartean ( {…}).

Deklarazio bat propietate bat eta bere balioa da. Lehenik propietatearen izena idazten da (text-align), ondoren bi puntu eta azkenik propietate honek izatea nahi dugun balioa (right). Etiketa berean hainbat deklarazio jartzeko, beraien hartean puntu-koma “;”-ren bidez banatu behar dira. Aukeratzaile bat berriz (P) deklarazioa aplikatu nahi diogun HTMLko elementuaren izena izan ohi da. Beste aukera bat, aukeratzailea etiketaren izena izan beharrean “klasearena” edota “identifikatzailearena” izatea da. Ikus adibide konplexuago hau:

    TABLE { font-size:15; font-family:sans-serif; }
    TD { font-size:20;}
    TD.burua {font-size:25; color:#0000ff;}}
    #textua { font-size:15; background-color: #ff0000 }
     .izenburua { font-size:20; font-weight:bold; color:#44aa44;}

Ikus daitekenez, hiru erregela definitzen ditugu. Lehenak <TABLE></TABLE> etiketen hartean dagoen textuaren tamaina eta letra mota definitzen du eta bigarrenak letra tamaina propio bat definitzen du <TD></TD> etiketentzat. Hirugarrenak <TD CLASS=”burua”></TD> etiketa definitzen du, <TD></TD> etiketaren “klase” bat. Laugarrenak “textua” identifikatzailea duen etiketari egiten dio so eta azkenak “izenburua” klaseko elementu orori. Ondorengo atalean ikusiko da hau hobeto:

CSS ETA HTML

CSS orriak gure HTML kodean aplikatzeko hainbat era daude. Lehena kodea textu artxibo batean gordetzea izango litzateke “.css” izenarekin, eta ondoren gure orrira zuzendu HTML kodean honakoa idatziz:

<LINK HREF=”estiloa.css” REL=”stylesheet” TYPE=”text/css”>

Beste aukera bat gure HTML kodean zuzenean txertatzea izango litzateke ondorengo moduan:

    <HTML>
     <HEAD>
         <STYLE TYPE=”text/css”>
            P { font-size:14}
         </STYLE>
    </HEAD>
    <BODY>
    …

Orain ikus dezagun CSS eta HTML adibide osoago bat, goran ikusi dugun CSS kodea erabiliz:

    <HTML>
    <HEAD>
        <STYLE TYPE=”text/css”>
            TABLE { font-size:15; font-family:sans-serif; }
            TD { font-size:20;}
            TD.burua {font-size:25; color:#0000ff;}
            #textua { font-size:15; background-color: #ff0000; }
            .izenburua { font-size:20; font-weight:bold; color:#44aa44;}
        </STYLE>
    </HEAD>
    <BODY>
        <DIV CLASS=” izenburua”>CSS proba DIV >

        <DIV ID=”textua”>Kaixo mundua!</ DIV >

        <TABLE BORDER>
        <TR>
            <TD CLASS=”burua”>ZERRENDA</TD>
        </TR>
        <TR>
            <TD>1. elementua</TD>
        </TR>
        <TR>
            <TD>2. elementua</TD>
        </TR>
        </TABLE>

</BODY>
</HTML>

PROPIETATEEN ZERRENDA

CSSk kontrolatutako bost propietate kategoria daude. Ondoren berauek zerrendatuko dira:

ITURRIEN PROPIETATEAK

Propietatea	Deskribapena	Balio posibleak
font-family	Letra mota	tipoen zerrenda
font-size	Letra tamainua	xx-small, x-small, small, medium, large ,x-large, xx-large
font-weight	Letra lodiera	normal, bold, bolder, lighter edo 100tik 900ra
font-style	Letraren estiloa (etzana)	normal, italic, italic small-caps, oblique, oblique small-caps

HONDO ETA KOLOREAREN PROPIETATEAK

Propietatea	Deskribapena	Balio posibleak
color	textuaren kolorea	Kolore bat
background	Hondoko kolore edo grafikoa	Grafikoaren URLa edota kolore bat

TEXTUAREN PROPIETATEAK

Propietatea	Deskribapena	Balio posibleak
line-height	Lerroen arteko distantzia	Zenbakia ala portzentaia
text-decoration	Textuan efektuak	none, underline, overline, line-through, blink
vertical-align	Textuaren posizio bertikala	baseline, sub, super, top, text-top, middle, bottom, text-bottom edo portzentaia
text-transform	Letra larri edo xehe bihurtu	capitalize, uppercase, lowecase, none
text-align	Textuaren alineazioa	left, right, center, justify
text-indent	Textuaren lehen izkiaren tabulazioa	Zenbakia edo portzentaia

KOADROAREN PROPIETATEAK

Propietatea	Deskribapena	Balio posibleak
margin-top, margin-right, margin-bottom, margin-left	Bloke baten eta beste elementuen harteko distantzia	Zenbakia edo portzentaia
padding-top, padding-right, padding-bottom, padding-left	Bordearen eta blokearen edukiaren harteko distantzia	Zenbakia edo portzentaia
border-top-width, border-right-width, border-bottom-width, border-left-width	Bloke baten bordearen zabalera	Zenbakia
border-style	Borde baten estiloa	none, solid, 3D
border-color	Borde baten kolorea	Kolore bat
width, height	Bloke baten tamaina	Zenbakia edo portzentaia
float	Bloke baten alineazioa	left, right, none
clear	Bere ezkerrean edo eskubian beste elementu bat jarri ahal izateko baimena	left, right, both, none

Datsegit

css diseinu gida informatika lenguaia programazio web