|
In-line
Formatarile in-line sunt aruncate direct in tagurile HTML folosind atributul style si arata cam asa:
<p style="color: red">text</p> Codul de mai sus face un anumit paragraf rosu. Cea mai buna abordare practica consta in faptul ca HTML-ul ar trebui sa fie intr-un document de sine statator deci formatarile de tipul in-line ar trebui evitate.
Interna
Formatarea interna este folosita pentru intreaga pagina. In interiorul tag-urilor head, tagurile style rescrie toate celelalte formatari ale paginii.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
} a {
color: blue;
}
</style>
...
Codul de mai sus face toate paragrafele din pagina rosii si toate link-urile albastre. Fiind o metoda similara cu cea in-line nu este foarte recomandata.
Externa
Formatarile externe sunt folosite pentru un intreg site cu multiple pagini. Exista in fisier separat CSS, care va arata cam asa:
p {
color: red;
}
a {
color: blue;
}
Daca acest fisier este salvat ca "web.css" atunci poate fi legat de HTML astfel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...
Pentru a profita mai mult de acest ghid deschide un nou document cu editorul de text si salveaza documentul gol sub denumirea web.css in acelasi director unde este si fisierul HTML.
Acum modifica fisierul HTML astfel incat sa inceapa ca mai jos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...
Salveasa documentull HTML. Acum este legat de documentul CSS, care este gol momentan deci nu se va modifica nimic. Daca aduci modificari documentului CSS ele se vor genera schimbari.
|
2509 afisari |
15 min
|
Incepator
