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

CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head> </head>, este urmatoarea: - Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini.
Iata un exemplu practic de cod css:
<style type="text/css">
h1 { font-family:’Arial’; font-size:15px; font-weight:bold; color:#1111ff; }
p {font-family:’Arial’; font-size:12px; color:blue; }
</style>

Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creata o foaie de stil externa intr-un fisier separat, de preferat cu extensia ".css", care poate fi inclus in pagina 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 Windows), sau specializat in acest sens (precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>: - Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de legatura ("rel" – legatura cu o foaie de stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" – calea si numele complet al fisierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea: Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta STYLE. In cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "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 documentului HTML.

2. 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:

Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi.

Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este: Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in mod direct un anume selector HTML, se foloseste urmatoarea sintaxa: Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat sa fie diferit de cuvantele rezervate JavaScript.

- Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este: Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.

3. Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie raman asa cum sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste crearea unor etichete personalizate, pornind de la zero. In acest caz se folosesc etichetele <span> si <div>.
Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida care creaza o eticheta in linie.
Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator care sa poata fi aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, in care selectori sunt precedati de eticheta <span> :

...
<span class="nume_clasa"> ... </span>
...
<span id="span1"> ... </span>
...
<span class="clasa_span"> ... </span>
...
Acum iata cum pot fi definiti acestia in interiorul unei foi de stil:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#span1 { proprietate1:valoare1; proprietate2:valoare2; ... }
span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... }

In momentul in care se doreste configurarea unui bloc separat de restul continutului unui document HTML, solutia este eticheta <div>. Aceasta creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau.
Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in linie SPAN, prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>.
Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML :
...
<div class="nume_clasa"> ... </div>
...
<div id="div1"> ... </div>
...
Definirea acestor etichete <div> intr-un cod CSS se face astfel:
div { proprietate1:valoare1; proprietate2:valoare2; ... }
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca si celelalte tipuri de selectoare, in sectiunea "head" a documentului in interiorul etichetei "style", sau intr-un fisier extern carev ulterior este legat sau importat in documentul HTML.

Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN.

4. Definirea de reguli similare

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

Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie, valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori.

5. Definirea etichetelor in context (imbricate)

Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia), spunem ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz, eticheta parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai etichetelor copil, sintaxa generala a unei astfel de reguli fiind:

- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.
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, identificatori 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.
Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin redefinirea acestora in lista de definitii a etichetei imbricate.

6. Cresterea prioritatii unei definitii

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

7. 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. Foile de stil din doua sau mai multe surse, folosite simultan, pot cauza contradictii. De aceea exista cateva reguli care determina ordinea executiei (numita si cascada), acestea sunt:

8. Adaugarea comentariilor la CSS

Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul fisierelor externe. 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, fiind utile si in cazul navigatoarelor care nu suporta CSS.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:

In cazul folosirii comentariilor cu ’//’ se pot adauga oricate slash-uri, minimul fiind de doua.
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 tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Creare Foi de Stil

Last accessed pages

  1. Clasificarea adverbelor - Adverbs classification (195)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2253)
  3. Turkey Escape (6)
  4. Bubble Hit (141)
  5. Gramatica limbii engleze - Prezentare Generala (2487)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2484)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2253)
  4. Butterfly Kyodai (2022)
  5. Zuma Deluxe (1953)