Zer da CSS?
1. Hasiera
Aurreko puntuan ikusi dugunez, orri bati forma eman behar zaionean, HTMLa oso mugatua da; hainbat erabilera izateko pentsatuta dago, baina ez horretarako. Aurreko bertsioetan, formatua emateko hainbat atributu sartzen ziren kodean; baina, HTML5en, ez daude onetsita: dokumentuak irakurtzea zaila zen, eta formatu-aldaketak egitea, guztiz neketsua, elementuz elementu egin behar zelako.
Beraz, CSS estilo-lengoaiak (Cascading Style Sheets edo teilakatutako estilo-orriak) dokumentuak aurkeztea errazten du, eta horretako baliabideak eskaintzen: letra motak, koloreak, marjinak, lerroak, altuera, zabalera, atzeko planoak…
Zehatzago esanda, HTML edukia antolatzeko erabiltzen da; CSS, berriz, antolatutako edukiari forma emateko.
Ezaugarriak eta abantailak
CSSrekin, sintaxi berezi baten bidez, informazioa nola agertuko den zehazten da:
- Behin eginda, webguneko web orri guztiek formatu bera hartzen dute.
- Web orri bakarrean edo haren zatitxo batean agertzea agin daiteke.
- Batzuetan, estilo bat baino gehiago jar daitezke etiketa berean.
Gainera, neurriak gehitzen dira. Lehen, ehunekoak (%) eta pixelak (px) txertatzen ziren. CSSrekin, berriz, ehunekoak (%), pixelak (px), hazbeteak (in), puntuak (pt) eta zentimetroak (cm) txerta daitezke.
2. Estiloak erabiltzeko moduak
Lau modutan erabiltzen dira estilo-orriak:
- Elementu baten zatitxoaren estiloa aldatzeko,
<span></span
> etiketarekin.
- Elementu osoaren estiloa aldatzeko, etiketaren atributu moduan
style
erabilita.
- Web orriaren atal batean agertzeko, etiketaren atributu moduan
style
jarrita
- Web orri osorako estiloak jar ditzakegu, orriaren goiburuan zehaztuz,
<head> </head>
. Hala, orri osoari ematen zaio formatua, eta aldatu behin baino ez dugu egingo.
Horretarako, orriaren goiburuan <style> </style>
etiketak idatziko dira.
<body>
etiketari kolorea jarriz gero, gainerako elementu guztiek kolore hori hartuko dute, beste kolore bat ezarri ezik. Kasu honetan, <p>
paragrafoak eta <h1>
izenburuak berezko kolorea dute, <body>
etiketaren barruan egon arren.
- Webgune osoari formatu berbera emateko, kanpoko fitxategiak erabiltzen dira; hori da ohikoena. Kontu hori Kanpoko estilo-orria puntuan aztertuko dugu.
3. Kanpoko estilo-orria
Kanpoko fitxategia erabiliz gero, webguneko orri guztiek estilo bera izango dute sorreran; horrela, aldaketetan, batera aldatuko dira, eta HTML kodea laburtu egingo da.
Pausoz pauso, ikus dezagun nola erabili kanpoko orri-estiloa. Honela:
- Formatu guztiak dituen kanpoko orri-estiloa sortzeko, “Ohar-blokea” atalean edo formatu gabeko testu editorean idatziko dugu, eta .css luzapena ezarriko diogu.
2. Web orrian, zer estilo-orri erabiliko dugun zehazteko, web orriaren goiburuan <link>
etiketa ezarriko dugu, honako atributu hauekin:
rel="stylesheet"
, esteka orri-estiloa dela esateko.type="text/css"
, testu-fitxategia dela adierazteko, css formatuan.href="izena.css"
, estilo-orriaren izena zehazteko.
Koloreak aldatuz gero, honela:
Kontuan izan beharrekoak
Lehen aipatu bezala, estiloak etiketa batetik bestera jaraunsten dira (inherit). <body> etiketari estilo jakin bat ezarri badiogu, haren barruko etiketetan eragina izango du. Web-nabigatzaileek deskripzio zehatzena hartzen dute kontuan. Halaber, deklaratzeko moduak ere badu zerikusia. Eragin txikienetik handienera, hierarkia honako hau da:
- kanpoko fitxategia
- orri osoko estiloa
- etiketa jakin baten estiloa
- etiketa baten zatitxoa ( <span> etiketarekin)