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:
<style>.
<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.
<!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>
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>:href" locatia fisierului ".css".@import.<style> @import url(adresa/nume_fisier.css); </style>- "adresa/nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS definite.
- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se refera, avand urmatoarea forma generala:
- 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>
- 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.
<!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>
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:
.o_clasa, h3.cls_2, #un_id {
background:#fcfcfe;
font-size:18px;
margin:5px auto;
}
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:
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:
<!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>
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:
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:
/* Comentariu,
pe mai
multe linii */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
// Comentariu pe o singura linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
<ul> <li>http://coursesweb.net/html/</li> <li>http://www.marplo.net/html/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.netI`m living here. - Traiesc /Locuiesc aici.
Estoy viviendo aquí. - Traiesc /Locuiesc aici.