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

Servere virtuale de la 20 eur / luna. Servere dedicate de la 100 eur / luna - servicii de administrare si monitorizare incluse. Colocare servere si echipamente de la 75 eur / luna. Pentru detalii 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) ]