c) Modele externe de stiluri (definite intr-un fisier separat)

Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink

c) Modele externe de stiluri (definite intr-un fisier separat; pot fi referite de orice pagina din site)

Modelele externe de stiluri sunt definite intr-un fisier de tip text, care poate fi construit cu un editor simplu de texte (Notepad); cand il salvati, in caseta "Save as type" lasati "Text Documents", iar in caseta "File name" ii dati un nume cu extensia ".css". De exemplu, pentru acest site fisierul se numeste "stil.css" si este situat pe primul nivel al site-ului, ca si fisierul paginii principale (de start) "index.html"; o parte din el este listat mai jos:

a.gros:link {color:blue; text-decoration:none; font-weight:bold;
text-align:right}
a.gros:visited {color:red; text-decoration:none; font-weight:bold;
text-align:right}
a.gros:hover {color:blue; text-decoration:none; font-weight:bold;
background:yellow; text-align:right}

.fond { background:yellow; color:black; font-weight:bold}
a.fond:link {color:blue; text-decoration:none; font-weight:bold}
a.fond:visited {color:red; text-decoration:none; font-weight:bold}
a.fond:hover {color:yellow; text-decoration:none; font-weight:bold;
background:black}

a:link {color:blue; text-decoration:none}
a:visited {color:red; text-decoration:none}
a:hover {color:blue; text-decoration:none; background:yellow}

.cod {background:#dddddd}
.alin {text-indent:60px; text-align:justify}
.alinst {text-indent:60px; text-align:justify; margin-left:50px}
.alindr {text-indent:60px; text-align:justify; margin-right:50px}
.alinstdr {text-indent:60px; text-align:justify; margin-left:80px;
margin-right:80px}
.mic {font-size:10pt; text-align:right}

pre.50stgalben {background:yellow; text-align:justify; margin-left:50px}

Fiecare fisier care apeleaza "stil.css" are deasupra instructiunii </head> urmatoarea instructiune:

<LINK href="cale-spre-fisierul-css/numele-fisierului-css.css"
 rel=stylesheet type="text/css">
</head>

unde "cale-spre-fisierul-css" poate fi absoluta (http://www.etc...) sau relativa.

De exemplu, fisierul care va este afisat acum pe monitor se numeste "extern.htm" si este situat in directorul "L" ("www. notiuni. html. go. ro/ l/"); fisierele "index.html" si "stil.css" sunt pe primul nivel al site-ului ("www. notiuni. html. go. ro/"); pentru "extern.htm" instructiunea "link href = ..." arata astfel:
- folosind calea relativa:

<LINK href="../stil.css" rel=stylesheet type="text/css">

sau ar putea arata astfel:
- folosind calea absoluta:

<LINK href="http://www.notiuni.html.go.ro/stil.css" rel=stylesheet
type="text/css">

Exemple ce folosesc stiluri de text definite in "stil.css":

pre.50stgalben {background:#dddddd; text-align:justify; margin-left:50px}

<pre class=50stgalben>text ... text</pre>

text ... text text ... text text ... text text ... text text ... text
text ... text text ... text text ... text text ... text text ... text

50stgalben nu poate fi folosita decat cu PRE, deoarece a fost definita cu PRE in fata punctului, adica PRE.50stgalben:

<div class=50stgalben>text ... text</div>

text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text text ... text

.alin {text-indent:60px; text-align:justify}

<div class=alin>text ... text</div>

.alinst {text-indent:60px; text-align:justify; margin-left:50px}

<div class=alinst>text ... text</div>

.alindr {text-indent:60px; text-align:justify; margin-right:50px}

<div class=alindr>text ... text</div>

.alinstdr {text-indent:60px; text-align:justify; margin-left:80px;
margin-right:80px}

<div class=alinstdr>text ... text</div>

.mic {font-size:10pt; text-align:right}

<div class=mic>text ... text text ... text</div>

text ... text text ... text

.fond { background:yellow; color:black; font-weight:bold}
a.fond:link {color:blue; text-decoration:none; font-weight:bold}
a.fond:visited {color:red; text-decoration:none; font-weight:bold}
a.fond:hover {color:yellow; text-decoration:none; font-weight:bold;
background:black}

<font class=fond>Stiluri definite :
<a class=fond href="extern.htm">a) intern;</a>
<a class=fond href="antet.htm">b) in antet;</a>
<span class=fond>c) extern;</span>
</font>

Stiluri definite : a) intern; b) in antet; c) extern;

a.gros:link {color:blue; text-decoration:none; font-weight:bold;
text-align:right}
a.gros:visited {color:red; text-decoration:none; font-weight:bold;
text-align:right}
a.gros:hover {color:blue; text-decoration:none; font-weight:bold;
background:yellow; text-align:right}

[ <a class=gros href="../index.html">Home</a> ] 
[ <a class=gros href="../l/stil.htm">Stiluri de text</a> (atribute) ]

[ Home ] [ Stiluri de text (atribute) ]