CSS notiuni generale
Ce este CSS de fapt?
La fel ca HTML, CSS nu este un limbaj de programare(desi exista numeroase controverse si dicutii pe acest subiect) si nu este niciun limbaj de marcare, este un limbaj al foilor de stil.
CSS este un limbaj de stilizare(design) cu ajutorul caruia pot fi personalizate paginile web. Asta înseamna ca permite aplicarea selectiva de stiluri, elementelor din documentele HTML.
CSS este limbajul regulilor de stil pe care le utilizam pentru a aplica stilul continutului HTML, de exemplu setarea culorilor de fundal si a fonturilor, si aranjarea continutului în mai multe coloane.
De exemplu, pentru a selecta toate paragrafele dintr-un document si a colora textul in rosu, vom folosi urmatorul cod CSS:
p {
color: red;
}
Sa incercam urmatorul lucru: copiati cele trei linii de mai sus, plasati-le intr-un fisier nou si salvati acest fisier cu numele style.css in directorul css, creat in lectiile anterioare.
Acum, pentru a aplica acest simplu cod CSS, documentului HTML, pentru a vedea efectiv cum textul isi schimba culoarea in rosu, trebuie sa-i spunem fisierului index.html, unde este plasata foaia de stil.
Practic trebuie sa creem o legatura intre index.html si style.css astfel:
- Deschideti fisierul index.html si undeva in sectiunea head(situata intre etichetele <head></head>), plasati urmatoarea linie:
<link href="css/style.css" rel="stylesheet">
- Salvati fisierul index.html si incarcati-l in browser. Ar trebui sa vedeti exact ce apare in exemplul urmator:
Anatomia unei reguli CSS
Sa analizam codul din imaginea de mai jos, in detaliu.
Intreaga structura este denumita set de reguli, dar de cele mai multe ori este denumita pe scurt regula CSS. Sa vedem din ce elemente individuale este constituita o regula CSS:
- Selectorul - este reprezentat de numele elementului HTML de la inceputul setului de reguli. Acesta selecteaza elementul(elementele), ce urmeaza sa fie stilizate(in cazul nostru <p>).
- Declaratia - este reprezentata de fiecare linie din interiorul unei reguli. O regula CSS poate contine mai multe declaratii. In cazul nostru declaratia este reprezentata de linia color: red; si ea specifica, una din proprietatile pe care dorim sa le modificam.
- Proprietatea(proprietatile) - reprezinta modalitati, cu ajutorul carora putem stiliza, un element HTML existent. In cazul nostru, culoarea este o proprietate care poate fi aplicata elementelor <p>. In CSS, putem alege ce proprietati dorim sa modificam, pentru un anumit element.
- Valoarea proprietatii - se afla in dreapta proprietatii, imediat dupa cele doua puncte(:) sau separata de un singur spatiu. Exista foarte multe valori CSS, pe care le-am putea utiliza si despre care vom discuta ulterior.
Sa ne uitam si la celelalte parti importante ale sintaxei CSS:
- fiecare regula CSS trebuie infasurata in acolade({}), plasate imediat dupa selector si la sfirsitul regulii respective, separind astfel si regulile intre ele,
- in cadrul fiecarei declaratii, proprietatea este separata de valoarea ei prin doua puncte(:),
- in cadrul fiecarei reguli, declaratiile sunt separate intre ele prin adaugarea de punct si virgula (;) la sfirsitul fiecarei declaratii.
Deci, pentru a modifica mai multe valori, apartinind mai multor proprietati, simultan, procedam astfel:
p {
color: red;
width: 600px;
border: 1px solid orange;
}
Selectarea mai multor elemente
De asemenea, putem selecta mai multe elemente diferite, deodata si putem aplica o singura regula tuturor:
p, li, h1 {
color: red;
}
Diferite tipuri de selectori
Exista foarte multe tipuri de selectori.
Mai sus am prezentat doar selectorii de elemente, care selecteaza toate elementele de un anumit tip din documentul HTML, dar putem utiliza selectori mai specifici. Iata citeva dintre cele mai utilizate tipuri de selectoare CSS:
| Numele selectorului | Ce anume selecteaza | Exemplu |
|---|---|---|
| Selectori de elemente | Toate elementele HTML de tipul specificat | p - selecteaza toate elementele <p> |
| Selector de ID | Elementul din pagina cu ID-ul respectiv specificat. Este recomandata utilizarea unui singur ID/element. De asemenea nu este permisa utilizarea aceluiasi ID de mai multe ori in acelasi document HTML. | #my-id - selecteaza <p id="my-id"> sau <a id="my-id"> |
| Selector de clasa | Elementul din pagina cu clasa respectiva specificata. Selectorul de clasa poate fi utilizat in mod repetat, pentru diverse elemente si de mai multe ori in acelasi document. | .my-class - selecteaza <p class="my-class"> sau <a class="my-class"> |
| Selector de atribut | Elementul din pagina cu atributul respectiv specificat. | img[src] - selecteaza <img src="myimage.png"> dar nu si <img> |
| Selector de pseudo-clasa | Elementul(elementele) specificat, dar numai atunci cind se afla intr-o stare specificata. | a: hover - Selecteaza <a>, dar numai atunci cind, indicatorul mouse-ului acopera sau trece peste un link. |
Exista multi alti selectori de explorat, despre care vom discuta la momentul oportun.
Textul si fonturile
Acum, dupa ce am discutat despre citeva elemente de baza din CSS, sa incepem sa adaugam alte citeva reguli si informatii in fisierul nostru style.css, pentru ca primul nostru site sa arate mai bine.
Sa incepem prin a a modifica fontul, astfel incit textul nostru sa arate putin mai bine:
- Adaugati in sectiunea <head></head>, urmatoarea linie:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Linia de mai sus, nu face altceva decit sa stabileasca o legatura intre pagina noastra si o foaie de stil de pe Google Fonts, ceea ce ne permite sa descarcam fontul Open Sans, odata cu pagina noastra.
Astfel putem utiliza acest font in propria foaie de stil.
- Acum stergeti din fisierul styles.css, regula existenta si adaugati urmatoarea regula:
html {
font-size: 10px; /* px = "pixeli": setam inaltimea fontului la 10px */
font-family: "Open Sans", sans-serif;
}
Regula de mai sus, stabileste dimensiunea fontului pentru intreaga pagina(de 10 pixeli inaltime) si seteaza utilizarea unui font global, intrucit selectorul html, este elementul parinte al intregii pagini si toate elementele vor mosteni aceeasi dimensiune de font si tip(familie) de font.
☞ Orice text dintr-un document CSS, cuprins intre /* si */, este un comentariu CSS, pe care browserul il ignora atunci cind citeste si reda codul. Astfel puteti scrie note utile, care sa va aduca aminte mai tirziu, ce anume face codul respectiv sau pentru a crea delimitari, intre blocuri mari de cod, care targheteaza diferite zone ale site-ului.
- Acum, vom seta diferite dimensiuni de fonturi, pentru elementele HTML, care contin text in interiorul lor- <h1>, <li>, si <p>. De asemenea, vom centra titlul, vom seta inaltimea liniilor de text(line-height) si vom mari distanta dintre litere (letter-spacing), toate acestea pentru a face ca textul sa fie mai usor de citit.
Pentru asta adaugati in fisierul style.css, urmatoarele linii de cod:
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
Puteti ajusta valorile exprimate in (px), la ce valori doriti, pentru ca designul sa arate asa cum va place.
Totul este despre cutii
Imaginati-va ca majoritatea elementelor HTML sunt de fapt niste cutii(casute), asezate unele peste altele sau unele linga altele.
De fapt, chiar asa este.
Nu este surprinzator, aspectul CSS se bazeaza in principal pe modelul cutiei.
Fiecare din blocurile(cutiile), care ocupa spatiu intr-o pagina web, are proprietati, cum ar fi:
- padding(umplutura) - spatiul din jurul continutului(elementului);
- border(chenarul) - linia solida aflata chiar la marginea umpluturii;
- margin(marginea) - spatiul din exteriorul elementului sau dintre elemente;
- width(latime) - seteaza latimea unui element;
- background-color(culoarea de fundal) - culoarea din spatele continutului elementului, cuprinzind si umplutura;
- color(culoarea) - culoarea continutului unui element(de regula text);
- text-shadow(umbra-textului) - seteaza o umbra a textului, in interiorul unui element;
- display(afisare) - seteaza modul de afisare a unui element(o chestiune mai complexa despre care vom discuta mai tirziu).
Asadar, sa incepem sa adaugam alte proprietati in pagina noastra. Faceti acest lucru in continuarea regulilor deja existente in fisierul style.css si chiar incercati sa modificati valorile, sa vedeti ce alte rezultate stilistice puteti obtine.
Schimbarea culorii de fundal
html {
background-color: limegreen;
}
Regula de mai sus stabileste o culoare de fundal pentru intreaga pagina.
Adaugati in fisierul style.css, doar declaratia background-color: limegreen;, in regula html { }.
html {
font-size: 10px; /* px = "pixeli": setam inaltimea fontului la 10px */
font-family: "Open Sans", sans-serif;
background-color: limegreen;
}
Corpul paginii(body)
body {
width: 700px;
margin: 0 auto;
background-color: tomato;
padding: 0 20px 20px 20px;
border: 5px solid navy;
}
Sa parcurgem declaratiile de mai sus bucata cu bucata:
- width: 700px; - forteaza corpul paginii(body) sa aiba mereu latimea de 600px,
- margin: 0 auto; - cind setam doua valori pe o proprietate precum margin sau padding, prima valoare afecteaza partea superioara si cea inferioara a elementului(in cazul nostru 0) iar a doua valoare afecteaza partea stinga si cea dreapta(auto - valoare speciala, care imparte spatiul orizontal disponibil, uniform intre stinga si dreapta). Se pot utiliza, de asemenea, trei sau patru valori,
- background-color: tomato; - seteaza culoarea de fundal a elementului. Puteti sa experimentati folosind alte culori,
- padding: 0 20px 20px 20px; - va spuneam mai sus, ca se pot utiliza si patru valori pentru padding sau margin. Exact asta am facut aici, pentru a crea un pic de spatiu la stinga, la dreapta si in partea inferioara,
- border: 5px solid black; - foarte simplu aici, un chenar de 5 pixeli, linie plina(solid), de culoare neagra, pe toate laturile.
Pozitionarea si stilizarea titlului
h1 {
margin: 0;
padding: 20px 0;
color: limegreen;
text-shadow: 3px 3px 1px black;
}
Poate ai observat ca exista un spatiu destul de mare, in partea de sus a paginii. Acest lucru se intimpla pentru ca browserele aplica o stilizare implicita pentru elementul H1(printre altele).
Pentru a scapa de acel spatiu am setat marginea la 0.
In continuare am setat, umplutura(padding), pentru titlu, in partea de sus si partea de jos si culoarea titlului la fel ca cea pentru elementul html(elementul radacina).
O proprietate interesanta pe care am utilizat-o aici, este text-shadow, care aplica o umbra textului continut de elementul h1. Cele patru valori se citesc astfel:
- prima valoare(3px), seteaza decalarea orizontala, catre dreapta, a umbrei textului. O valoare negativa(-3px), ar deplasa umbra catre stinga;
- a doua valoare(tot 3px), stabileste decalarea verticala, respectiv deplasarea in jos. O valoare negativa ar deplasa umbra in sus;
- a treia valoare(1px), stabileste raza de blur a umbrei;
- a patra valoare stabileste culoarea de baza a umbrei.
Centrarea unei imagini
img {
display: block;
margin: 0 auto;
}
In cele din urma, vom centra imaginea pentru a arata mai bine in pagina noastra.
Vom utiliza acelasi truc de mai sus margin: 0 auto;, dar mai trebuie sa facem si altceva.
Elementul <body>, este de tip block, ceea ce inseamna ca ocupa spatiu in pagina si poate avea margine si alte valori de spatiere(distantare) aplicate implicit.
Imaginile, sunt elemente de tip inline, opusul tipului block, descris mai sus.
Asadar, pentru a putea aplica o margine imaginii, trebuie sa schimbam comportamentul acesteia in pagina si facem acest lucru cu ajutorul proprietatii display, cu valoarea block.
☞ Instructiunile de mai sus, sunt valabile, daca utilizati o imagine mai mica decit latimea de 700px setata pe elementul <body>. Daca imaginea utilizata este mai mare, atunci aceasta se va revarsa in restul paginii. Puteti remedia acest lucru, daca reduceti dimensiunea imaginii, prin utilizarea unui editor grafic sau daca reduceti dimensiunea imaginii(< img>) cu ajutorul CSS, prin setarea proprietatii de latime la o valoare mai mica(400px de exemplu - width: 400px;).
Nu va ingrijorati prea mult, daca nu intelegeti foarte bine proprietatea display: block;. Vom discuta mult mai mult despre aceasta in lectiile urmatoare.
Concluzie
Daca ati urmat corect instructiunile, ar trebui ca pagina pe care am construit-o impreuna sa arate astfel: