Definire foi de stil – CSS

No comments -

Foile de stil pentru documente HTML, denumite CSS  (Cascading Style Sheets) reprezinta un mecanism prin care dezvoltatorul paginilor Web separa elementele de structura, definite prin tag-uri HTML, de proprietatile si atributele acestora. Toate aceste atribute definesc stilul paginii Web influentand modul in care sunt reprezentate vizual elementele HTML.

CSS-urile au aparut dupa ce au fost definite specificatiile HTML 3.2 deoarece acestea introduceau tag-uri noi prin intermediul carora se puteau defini proprietati pentru font, culoare, dimensiune pentru a schimba modul in care este afisat elementul HTML. Acestea erau asociate tag-urilor HTML existente si permiteau particularizarea paginilor Web prin definirea unui stil propriu pentru un site sau pagina Web. Noile atribute au avut un impact pozitiv asupra imaginii paginei Web, insa din punct de vedere al dezvoltarii eficienta a scazut deoarece trebuia definit stilul pentru fiecare element in parte, chiar daca acesta se repeta. Aceasta problema a fost rezolvata de foile de stil, CSS-uri, deoarece permit definirea stilului pentru un tag html o singura data, iar browser-ul aplica stilul specificat pentru fiecare aparitie a elementului html.

Incepand cu specificatiile HTML 4.0 este permisa definirea stilului intr-un fisier extern, cu extensia .CSS, fapt ce a a asigurat separarea totala intre stil si structura paginii HTML.

Avantajele utilizarii foilor de stil CSS:

  • separa stilul paginii de continut acesteia, permitand modificarea acestuia fara a afecta sursa paginii HTML;
  • eficienta in dezvoltarea de pagini Web deoarece se poate lucra pe stil independent de continut.

Stilul unui element HTML poate fi definit:

  • in interiorul elementului prin intermediul atributului style=”" separand proprietatile prin punct si virgula (;);  daca dorim sa afisam un element de tip paragraf (

    ) in modul urmator :


  • Element HTML de tip paragraf cu stil definit

    , atunci definirea stilului si a elementului se face prin

    <p style="border: thin dotted; background-color: #0099FF;text-align: center;
    font-style: normal;font-size: medium; font-weight: bold; font-family: Arial Tahoma;
    color: #ffffff;text-indent: 0px; width: 70%; height: 40px;">
            Element HTML de tip paragraf cu stil definit
    </p>

    Atentie ! La definirea valorilor pentru proprietati NU trebuie lasata spatiu intre valoare si unitatea de masura (de exemplu, text-indent: 0 px) deoarece browsere ca Firefox sau Opera vor ignora stilul.

  • in zona de header a paginii Web, delimitata de <head>  </head>, prin intermediul tag-urilor <style> </style>; in aceasta stituatie toate elementele HTML pentru care a fost definit un stil vor fi afisate conform regulilor acestuia; daca se defineste stilul anterior in sectiunea  <head>  </head> atunci toate elementele de tip paragraf (p) vor fi afectate de stil; sectiunea header a documentului HTML se modifica prin adaugarea secventei
  • <head>
        <style type="text/css">
            p
            {
                border: thin dotted;
                background-color: #0099FF;
                text-align: center;
                font-style: normal;
                font-size: medium;
                font-weight: bold;
                font-family: Arial Tahoma;
                color: #ffffff;
                text-indent: 0px;
                width: 70%;
                height: 40px;
            }
        </style>
    </head>
  • intr-un fisier CSS extern; la o pagina Web pot fi atasate mai multe foi de stil CSS; stilul definit pentru un element va fi aplicat tuturor aparitiilor acelui element; legatura intre pagina HTML si stilul ei, definit in documentul CSS, stil.css, se face prin
  • <link href="stil.css" rel="stylesheet" type="text/css">
    <head>
    ...
    </head>
    <body>
    ...
    </body>

In situatia in care pentru acelasi element HTML sunt definite mai multe stiluri, ordinea in care acestea sunt aplicate este:

  1. foaie de stil externa (CSS)
  2. reguli de stil definite in interiorul paginii Web in sectiunea <head>; ATENTIE, daca foaia de stil externa este definita dupa regulile de stil din sectiunea <head> atunci aceasta va suprascrie regulile interne;
  3. reguli de stil defnite in interiorul elementului HTML;
  4. utilizarea atributului !important – confera prioritate maxima stilului respectiv.

Eficienta utilizarii foilor de stil externe din CSS-uri se vede in practica. Daca se considera pagina HTML



[Link to the final HTML page]

Pagina HTML, fara stil definit.

si foaia de stil, stil.css

body
{
	background-color:#dddddd;
	font-family: Arial Tahoma;
}
h1
{
	color:White;
	background-color:#003366;
	font-family:Tahoma Arial;
	font-size:300%;
}
h3
{
	font-style:italic;
	border-bottom-width:thin;
	border-bottom-style:dashed;
	border-bottom-color:Black;
}
ul
{
	list-style-type:square;
}
p 
{
	margin-left:20px;
}
div
{
	background-color:White;
}

rezultatul este



[Link to the final HTML page]

Pagina HTML, cu foaie de stil atasata.

Daca modificam foia de stil

body
{
	background-color: #0099FF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: bold;
	font-style: normal;
	color: #000024;
}
h1
{
	padding: 0px;
	margin: 0px;
	border: 2px groove #FFFFFF;
	color: White;
	background-color: #003366;
	font-family: Tahoma Arial;
	font-size: 300%;
	text-transform: lowercase;
	font-variant: normal;
	text-align: center;
	letter-spacing: 3px;
	width: 800px;
}
h3
{
	font-style: normal;
	width: 800px;
	text-decoration: underline;
 
	font-size: 110%;
	color: #FFFFFF;
}
ul
{
	list-style-type:decimal;
	font-style:italic;
	font-weight:normal;
}
p
{
	margin-left: 20px;
	text-align: left;
}
div
{
	border-color: #000000;
	background-color: #99CCFF;
	width: 800px;
	border-bottom-style: solid;
	border-bottom-width: medium;
}

atunci rezultatul este



[Link to the final HTML page]

Pagina HTML, cu foaie de stil atasata.

, , ,


  1. No comments yet.
(will not be published)

  1. No trackbacks yet.