Definire foi de stil – CSS

July 22, 2009 by Catalin B.
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 proprietățile și atributele acestora. Toate aceste atribute definesc stilul paginii Web influențând modul în care sunt reprezentate vizual elementele HTML.

CSS-urile au apărut dupa ce au fost definite specificațiile HTML 3.2 deoarece acestea introduceau tag-uri noi prin intermediul cărora se puteau defini proprietăți 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 păgânei Web, însa din punct de vedere al dezvoltării eficienta a scăzut 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 apariție a elementului html.

Începând cu specificațiile HTML 4.0 este permisa definirea stilului într-un fișier extern, cu extensia .CSS, fapt ce a a asigurat separarea totala intre stil si structura paginii HTML.

Avantajele utilizării 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 următor :

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>

Element HTML de tip paragraf cu stil definit

Atentie ! La definirea valorilor pentru proprietăți NU trebuie lăsat spațiu intre valoare si unitatea de măsură (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>
  • într-un fisier CSS extern; la o pagina Web pot fi atașate mai multe foi de stil CSS; stilul definit pentru un element va fi aplicat tuturor aparițiilor acelui element; legătura 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 situația in care pentru același 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 utilizării foilor de stil externe din CSS-uri se vede in practica. Daca se considera pagina HTML

[Link catre pagina HTML initiala, fara stil atasat]

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 catre pagina HTML cu stil]

agina 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 catre pagina HTML finala]

Tags: , , ,