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:

  1. 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)