Tutorial HTML – Introducere in CSS

Tutorial HTML – Introducere in CSS

Începând cu acest tutorial HTML – Introducere in CSS, voi aduce în discuție noțiuni despre CSS pe lângă HTML.

CSS provine de la Cascading Style Sheets, ceea ce înseamnă că prin intermediul său se pot formata și stiliza elementele HTML. CSS a apărut datorită nevoii de a aplica instrucțiunile de stil pe mai multe elemente HTML ce au elemente de stil comune. În loc să scrii de fiecare dată aceleași comenzi de stil pentru mai multe etichete HTML, poți doar să le scrii o singură dată într-un fișier CSS și să le folosști în codul HTML folosind doar o scurtă comandă.

Dar de ce poartă și denumirea de stil în cascadă? Pe scurt, deoarece procesorul HTML va aplica instrucțiunile CSS în cascadă, adică în ordinea de sus în jos. Astfel, dacă o etichetă HTML are definite 2 stiluri diferite, se va aplica ultima invocată.

CSS este un limbaj strâns corelat de HTML, conceput să susțină modul de aplicare a stilurilor elementelor web. Deși se pot aplica stilurile direct din cod HTML, este mult mai ușor să folosești separat instrucțiunile CSS pentru a defini stiluri în bloc ce se pot aplica mai multor elemente deodată.

Legătura cu fișierul CSS

De obicei stilurile CSS se scriu într-un fișier separat ce are extensia .css și se află în același director cu fișierele HTML sau în alt subdierctor. Pentru ca procesorul HTML să preia stilurile din acest fișier, trebuie scrisă o instrucțiune în eticheta head.

<link href="styles.css" rel="stylesheet" type="text/css" />

Eticheta link  cuprinde atributele href care indică calea și numele fișierului .css (în cazul nostru fișierul este în același director cu fișierul HTML). Atributul rel indică relația cu acest fișier iar atributul type este tipul fișierului, în cazul nostru text/css.

Selectori simpli

CSS folosește selectori pentru grupurile de stil. Cel mai simplu selector este o etichetă HTML. Să urmărim mai jos exemple de selectori simpli.

p {
	text-align:justify;
}

h1, h2 {
	text-align:center;
}

body {
	font-size:24px;
	font-family:Arial, Helvetica, san-serif;
}

ol {
	list-style-type:upper-alpha;
}

ul {
	list-style-image:url("star.gif");
}

Pimul selector este p urmat de o paranteză acoaldă. În corpul parantezei se scriu instrucținile de formatare. Astfel, pentru totate paragrafele se va aplica alinierea textului de tip justify.

Toate instrucțiunile din CSS sunt încheiate cu punct și virgulă (;) pentru a se știi unde începe o altă instrucțiune.

Se observă în al doilea exemplu că se pot aplica stiluri mai multor etichete, h1h2 vor primi alinere la centru.

Se poate aplica stil și întergului corp body. Să spunem că aceasta este prima aplicare de font pentru tot ceea ce există în fișierul HTML. Dacă în cadrul etichetei body se va aplica alte stiluri de font, se vor aplica ultimele definite, sau cele mai apropiate.

Listele ordonate primesc litere mari ca elemente de ordonare, iar listele neordonate vor avea ca decorațiune un fișier numit star.gif.

Avantajul selectorilor este acela că pot fi selectați doar anumite elemente pentru stil. Exemplu:

nav p {
	text-align:justify;
}

În acest caz se observă că nav și p nu sunt seaprați prin virgulă, ci doar prin spațiu. Stilul CSS nu se va aplica acestor etichete, ci numai paragrafelor din care se află înăuntrul etichetei nav.

Selectori avansați

Doi dintre selectorii avansați sunt class și id. În continuare le voi explica și voi arăta diferența dintre acestea două.

Class

Selectorul class definește un grup de stil ce poate fi aplicat mai multor etichete HTML. Astfel, poți folosi aceeași clasî pe mai multe elemente și poți folosi mai multe clase pe același element. Cu alte cuvinte, clasele sunt universale și pot fi folosite pe scară largă.

Pentru CSS vom avea definiția:

.photo-left {
	float:left;
	margin-right:20px;
}

Clasele sunt definite prin operatorul punct (.) urmat de numele clasei pe care îl vom alege noi. Deocamdată nu ne vom lega de instrucțiunile de stil.

Mai jos, avem în CSS definită clasa .photo-left, iar acum să o folosim în HTML:

<figure class="photo-left">
    <img src="images/imagine.jpg" width="300" height="400" />
<figcaption>explicatie</figcaption>

În fișierul HTML clasa .photo-left este folosită pentru a aplica stil etichetei <figure>. Așa cum am menționat deja, această clasă poate fi folosită pentru mai multe etichete HTML dintr-un fișier.

ID

Acum vine marea provcare. Id este un selector avansat care, spre deosebire de class, este unic pentru o pagină. Poți avea un singur selector de tip id într-o pagină și fiecare pagină poate avea un singur element cu acel id. 

De reținut: informațiile ce sunt reutilizate ar trebui păstrate în class, iar informațiile ce sunt unice pe pagină trebuie păstrate în id. Deși poate părea un pic deplasat acest lucru, totuși browserele interacționează diferit cu selectorii de tip class și id. Și Javascript este unul din limbajele pentru care contează ca pe o pagină HTML să existe doar un singur id pentru un element.

De remarcat și faptul că un element HTML poate avea aplicată atât o clasă, mai multe clase sau un id și mai multe clase.

Instrucțiunea pentru selecorul id este realizată cu ajutorul simbolului #, ca în exemplul de mai jos:

#block1 {
	position:relative;
	top:50px;
	left:80px;
}

Un alt lucru interesant legat de selecorul id este faptul că acesta poate crea o zonă specială în pagina noastră ce poate fi accesată astfel: http://domeniu.com#numeid, astfel poți merge direct la elementul definit cu id.

În acest tutorial HTML – Introducere in CSS am explicat câteva noțiuni legate de CSS. În articolul următor scrie despre formatare și stil cu ajutorul lui CSS.

Leave a Reply

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.