CSS

Kaskadako estilo-orriak edo CSS (ingelesez, Cascading Style Sheets) HTML edo XML (beraz, XHTML ere bai) lengoaian egituratutako dokumentu baten aurkezpena definitzeko balio duen lengoaia da. W3C da beronen definizioa mantentzen duen erakundea.

Web baten estiloa aldatzeko erabiltzen den tresna da. CSS lengoaiaren helburu nagusia dokumentu baten edukia eta aurkezpena bereiztea da. HTMLko elementuak orrian nola ikusiko diren zehazten du. Gainera, lana askoz azkarrago egitea ahalbidetzen du, orri askori estiloa batera aldatzea posible delako.

Abantailak

- Webgune oso baten aurkezpena bateratzeko aukera, eguneraketak egiteko denbora aurreztea ahalbidetzen duelarik.

- Irisgarritasuna hobetzen da, nabigatzaileek estilo-orri lokal bat zehaztea ahalbidetzen baitiete erabiltzaileei. Esate baterako, ikusmen arazoak dituztenek letra-tamaina handitzeko edo kolore ikusgarriagoak erabiltzeko aukera daukate.

- Web orrialde batek estilo-orri ezberdinak izan ditzake, gailu ezberdinetara egokitzeko, eta baita erabiltzaileak aukeratu dezan ere.

- HTML kodearen tamaina asko txikitzen da eta ulergarriagoa da.

Sintaxia

CSS-k oso sintaxi sinplea erabiltzen du eta ingelez hitz batzuk erabiltzen ditu propietateen izenak adierazteko.

Erabilpena

CSS orri bat atxikitzeko hiru modu posible daude:

- Kanpoko CSS-a. Honen bidez, web-orri baten estilo osoa aldatu daiteke artxibo bakarrarekin. Hori lortzeko, HTML orrian CSS orrira eramaten gaituen link-a ipini beharko dugu. CSS orria idazteko, edozein kode editore erabili daiteke.

- Barne CSS-a: CSS- mota honi esker, HTML orri baten estiloa aldatu daiteke, baina gainontzekoena mantenduz. "<head>" barruan estiloa ipiniz aldatzen da.

- Lerroko CSS-a: eredu honekin, elementu bakar baten estiloa aldatu dezakegu. Horretarako, elementu bakoitzari dagokion atributua erabili beharko dugu.

Selektoreak

Selektoreek adierazten dute zein etiketa edo etiketa multzoei aplikatuko zaien estiloa. Selektoreak aplikatu ditezke:

Etiketa guztiei, <p> adibidez
Atributuak diztuten elementuei, normalean id eta class.

Selektore zerrenda luzea dago, hauek dira erabilienak:

Etiketa: P
Hainbat etiketa: H1, H2, H3
Klasea (class): .nireKlasea
Klase eta etiketa: P.nireKlasea
Identifikadora: #id1

CSS bidezko maketatzea

HTML kodearen erabilpen soilarekin ohitura handia da maketatzea burutzeko taulak erabiltzea. CSS estilo-orrien erabilpenarekin ordea, geruzak erabiltzen dira lan hau burutzeko. Taulak tabulatuta doan informazioa erakusteko baino ez dira behar. Honenbestez, web orrialdeek kargatzeko behar duten denbora ere izugarri txikitzen da.

Maketatze lanak burutzeko <div></div> etiketa erabiliena den arren, berau gehiegitan erabiltzea saihestea ere komeni da, kodearen ulergarritasuna mantentzeko. Hori dela-eta, <span></span>, <p></p>, <h1></h1> eta beste etiketa ugari ere maketatzeko erabil daitezke.

Hona hemen <div></div> etiketa erabiltzen duen maketatze adibide sinplea:

Adibidea.html
...
<body>
    <div class="geruza"> 
        Hau web orrialde honetan geruza bat izango da. 
    </div> 
</body>
...

Adibidea.css
...
.geruza {
    background-color: #ccc; color: #000; width: 200px; 
}
...

Kanpo estekak

(Ingelesez) CSS estandarraren definizioa
CSS oinarrizko gida
(Ingelesez) Instant CSS Code

Datuak: Q46441
Multimedia: Cascading Style Sheets / Q46441
MediaWiki: Manual:CSS