BluePink
XHost

Oferim servicii de instalare, configurare si monitorizare servere linux (router, firewall, dns, web, email, baze de date, aplicatii, server de backup, domain controller, share de retea) de la 50 eur / instalare. Pentru detalii accesati site-ul BluePink.

b) Stiluri definite in antet

Sunt definite intre instructiunile STYLE si /STYLE; pentru ca browserele care nu inteleg marcajul STYLE sa nu afiseze ca text continutul marcajului, continutul este situat intre marcajele pentru comentarii (  ).

Codul sursa al acestei pagini este:

<html> <head> <title>b) Modele de stiluri definite in antetul fisierului</title> <style type="text/css">  </style> </head> <body bgcolor=white> <h2>b) Stiluri definite in antet</h2> <p class=aliniat>Codul sursa al acestei pagini este: < xmp > ... codul sursa ... < /xmp > Restul corpului fisierului ......... </body> </html>

Observati in codul sursa ca ".general", ".sursa" si ".aliniat" au fost definite fara o instructiune in fata punctului care le precede; aceasta inseamna ca ele pot fi folosite cu mai multe instructiuni: p, div, i, b, u, td, etc.:

.aliniat {text-indent:1in; text-align:justify;}
.sursa {color: black; background:#cccccc}
.sursa1 {color: black; background:yellow}
.general { font:12pt; margin-left:30pt; margin-right:30pt; text-indent:20pt;
 color:yellow; background:red}

Cu instructiunea <p class=general>text ... text </p> obtinem:

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

Cu instructiunea <div class=aliniat>text ... text </div> obtinem:

Cu instructiunea <b class=sursa>text ... text </b> obtinem:
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
Cu instructiunea <font class=sursa1>text ... text </font> obtinem:
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

Stilul ".mic" a fost definit cu "p" in fata punctului, adica "p.mic"; acest stil poate fi folosit doar cu instructiunea P (paragraf), nu si cu altele:

p.mic { font: 8pt; color:red; background:yellow}

Cu instructiunea <p class=mic>text ... text </p> obtinem:

Cu instructiunea <i class=mic>text ... text </i> obtinem:
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
adica un text cu fontul de tipul si marimea implicite, formatat "italic"; nu a tinut cont de "class=mic".

Instructiunea h1 a fost redefinita in antet:

h1 { font-size: 15pt; color:red; font-style:italic}

Cu instructiunea <h1>text ... text </h1> obtinem:

text ... text

In mod normal, cu instructiunile H i ( i = 1 ... 6 ) obtinem:

text cu h2

text cu h3

text cu h4

text cu h5

text cu h6

Stilul ".gros" a fost definit cu "div" in fata punctului, adica "div.gros"; acest stil poate fi folosit doar cu instructiunea "div", nu si cu altele:

div.gros { font: 20pt; color:blue; background: #dddddd;
 font-weight: bold; font-family:fantasy}

Cu instructiunea <div class=gros>text ... text </div> obtinem:

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

Cu instructiunea <p class=gros>text ... text </p> obtinem:

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

adica un text cu fontul de tipul si marimea implicite; nu a tinut cont de "class=gros" deoarece ".gros" a fost definit pentru instructiunea div ("div.gros").

Modificarea aspectului legaturilor:

a.leg:link {font-weight:bold; font:18pt; color:blue}
a.leg:visited {font:14pt; color:red}
a.leg:hover {font:18pt; color:green; background:yellow}
link - pentru legaturile nevizitate
visited - pentru legaturile vizitate
hover - cand mouse-ul este deasupra legaturii

<font type="text/css" style="font:20pt; color:red; font-family:cursive">
Stiluri definite :</font>
<a class=leg href="intern.htm">a) intern</a>
<a class=leg href="extern.htm">c) extern</a>
<a class=leg href="nu-exista.html">d) spre un fisier care nu exista</a>

Stiluri definite : a) intern; b) in antet; c) extern; d) spre un fisier care nu exista

a:link {color:blue; text-decoration:none; font-weight:bold}
a:visited {color:red; text-decoration:none;font-weight:bold}
a:hover {color:blue; text-decoration:none; font-weight:bold; background:yellow}
link - pentru legaturile nevizitate
visited - pentru legaturile vizitate
hover - cand mouse-ul este deasupra legaturii

<div align=right>
[ <a href="../index.html">Home</a> ]
 [ <a href="../l/stil.htm">Stiluri de text</a> (atribute) ]
 [ <a href="suprapus.htm">text suprapus</a> ]
</div>

[ Home ] [ Stiluri de text (atribute) ] [ text suprapus ]