Curs Css

Etichete HTML si stiluri CSS

CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei, cu atributul: style. Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei respective.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:

<eticheta style="proprietate:valoare;"> text ... </eticheta>
CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea <head> a paginii, in cadrul tag-ului <style>.
Sintaxa pentru definire CSS in interiorul etichetei <head> </head>, este urmatoarea:
<style>
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }
...
selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }
</style>
- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini.
Iata un exemplu practic de cod css:
<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
h1 {
color:#1111ff;
font-size:21px;
text-decoration:underline;
}
p {
font-family:Calibri;
font-size:16px;
color:#00be00;
}
</style>
</head>
<body>
<h1>Titlu paginii</h1>
<p>Paragraf, cu stilul css definit in tagul STYLE;.</p>
<p>Alt paragraf, preia acelasi stil.</p>
</body>
</html>
Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creat un fisier cu extensia ".css", care va contine codul CSS si poate fi inclus in paginile HTML prin doua procedee: legatura sau import.

Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui editor de texte simplu (de exemplu Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE.

Dupa ce a fost creat fisierul ".css", poate fi folosit in paginile din site utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>:
<link rel="stylesheet" href="nume_fisier.css" type="text/css">
- Atributele folosite transmit navigatorului tipul de legatura ("rel" – legatura cu o foaie de stil, "type" - tipul codului din fisier), la "href" locatia fisierului ".css".

O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import.
<style>
@import url(adresa/nume_fisier.css);
</style>
- "adresa/nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS definite.
Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si selectori suplimentari.
Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a paginii.

Definirea selectorilor

- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se refera, avand urmatoarea forma generala:

selector { proprietate1:valoare1; proprietate2:valoare2; ... }
Dupa definirea selectorului HTML in CSS, stilurile etichetelor respective din documentul HTML vor fi modificate conform proprietatilor din CSS.

Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente care au clasa respectiva. Sintaxa generala de definire a unei clase in CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

In codul CSS o clasa se poate asocia direct unui selector HTML. In acest caz, stilul definit va afecta doar elementele HTML specificate care au acea clasa. Pentru a defini o clasa care sa afecteze in mod direct un anume selector HTML, se foloseste urmatoarea sintaxa:
tag_Html.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

- Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi aplicat unei singure etichete HTML dintr-o pagina.
#id_ul { proprietate1:valoare1; proprietate2:valoare2; ... }

Utilizare <span> si <div> cu CSS

- Elementul <span> nu are un stil propriu, reprezinta doar o locatie vida care creaza o eticheta in linie.
Pentru a configura o eticheta <span> trebuie sa aibe o clasa (class) sau ID la care sa poata aplica proprietati in css.
Iata un exemplu cu elemente <span> stilizate in css:

<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
.cls_1 {
color:#ee0000;
font-weight:700;
}
#id_sp {
color:#0000ee;
font-size:17px;
}
</style>
</head>
<body>
Un text cu <span class='cls_1'>tag span cu class cls_1</span> in cadrul unei linii.<br>
Alt text cu <span id='id_sp'>tag span cu id id_sp</span> in cadrul liniei.<br>
Alta linie de text cu <span class='cls_1'>span, cu class cls_1</span> in interior.
</body>
</html>

CSS la element DIV

- Elementul <div> creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul lui, fara a avea un stil propriu.
Elementele DIV nu se creaza in interiorul unui text, ci in loc liber, pentru a contine text si alt tip de continut (imagini, alte tag-uri) la care se vor aplica stilul CSS.
Si la <div> se pot adauga atribute "class" si "id", la care in CSS se pot atribui proprietati de stil.

- Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlu</title>
<style>
.cntr {
border:1px solid blue;
text-align:center;
}
#id_dv {
border:1px solid red;
color:#0000ee;
height:80px;
width:250px;
}
</style>
</head>
<body>
<div class='cntr'>Continut in Div cu class .cntr.</div>
<div id='id_dv'>Cele bune sa se adune.</div>
<div class='cntr'>Intre doua nu te ploua, dar mai bine singur.</div>
</body>
</html>
Vedeti si tutorialul HTML -> DIV si SPAN.

Definirea de reguli similare

Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de proprietati, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai multi selectori este urmatoarea:

selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }
In urmatorul exemplu se aplica aceleasi stiluri css la clasa "o_clasa", la tagurile "h3" care au clasa "cls_2" si la elementul cu id "un_id":
.o_clasa, h3.cls_2, #un_id {
background:#fcfcfe;
font-size:18px;
margin:5px auto;
}

Sitluri la elemente imbricate

Cand un element Html este in interiorul altuia, spunem ca aceste etichete sunt imbricate. Elementul exterior se numeste, tag parinte, iar cel din interior, copil. Se pot crea reguli CSS care revin numai etichetelor copil, sintaxa generala a unei astfel de reguli fiind:

selector_Parinte selector_Copil { proprietate:valoare; proprietate2:valoare2; ... }
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor.
Ca si selectorii singuri, selectorii imbricati pot include in lista clase, id_uri sau selectori HTML.
Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte care le inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea stilurilor.
Proprietatile mostenite pot fi anulate prin redefinirea acestora in lista de definitii a etichetei imbricate.

Utilizarea instructiunii !important

Valoarea !important adaugata unei definitii CSS atribuie maximum de prioritate in determinarea ordinii unei executii.
Valoarea !important trebuie plasata la urma, inaintea caracterului ’;’, ca in exempul urmator:

selector { proprietate:valoare !important; }
Exemplu, paragraful cu clasa "clr_b" va avea culoarea blue, chiar daca in tagul lui "style" si la selectorul "p" e definita alta culoare.
<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
p { color:#00d000;}
.clr_b {color:blue !important;}
</style>
</head>
<body>
<p class='clr_b' style='color:red;'>Va avea culoarea de la valoarea cu !important.</p>
</body>
</html>

Determinarea ordinii executiei

Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete sa-i fie aplicate mai multe stiluri din foi de stil (fisiere css) diferite. Exista cateva reguli care determina ordinea executiei (numita si cascada), acestea sunt:


Adaugarea comentariilor la CSS

Comentariile ajuta la intelegerea codului, facandu-se astfel cunoscut, pentru mai tarziu, rolu anumitor elemente din codul CSS.
Comentariile nu au nici un efect si pot fi plasate in jurul regulilor.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:

Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile:
/* Comentariu,
pe mai
multe linii */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

// Comentariu pe o singura linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza o paleta de culori pentru selectare culoare?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Care metoda CSS roteste elementul HTML la un anumit numar de grade?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click pe functia care returneaza numarul cel mai mare.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?
include() include_once() require()
include_once("un_fisier.php");
Care este traducerea corecta pentru: "Ahead of time"?
Peste timp La timp Inainte de vreme
Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Indicati traducerea corecta a cuvantului "buenísimo"
mai bun mai putin bun extrem de bun
Este fruto es buenísimo.
- Acest fruct este extrem /nemaipomenit de bun.
Creare Foi de Stil

Last accessed pages

  1. Verbe Dinamice si Statice - Dynamic and Static Verbs (10940)
  2. Metode ale obiectului String in JS (935)
  3. Numere aleatoare (463)
  4. Array - Avansati (206)
  5. Caractere speciale - Entitati HTML (13443)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (415)
  2. Gramatica limbii engleze - Prezentare Generala (395)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (368)
  4. Exercitii engleza - English Tests and exercises - Grammar (304)
  5. Prezentul simplu - Exercitii si teste incepatori (264)