duminică, 13 noiembrie 2011

Activitatea nr.11: 02.12 - 06.12

 Foi de stiluri 

Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor Web.

Ce sunt foile de stiluri

Un stil este un set de caracteristici de formatare aplicabile unei etichete HTML. 

O foaie de stiluri (CSS - Cascade Style Sheet) este o colectie de stiluri si se poate afla fie in pagina web, fie intr-un fisier separat. 

Conceptul de stil a fost introdus incepand cu HTML 4 si este intalnit atat in editoarele de text moderne (ex. Word), cat si in editoarele HTML (ex. Dreamweaver - vezi figura). 
Lucrul cu stiluri faciliteaza foarte mult crearea si intretinerea unui site, oferind o serie de avantaje:
  • stabilirea unui aspect unitar pentru toate paginile din site
  • schimbarea aspectului mai multor pagini, prin modificarea foii de stiluri pe care se bazeaza
  • reducerea dimensiunii paginilor - deoarece instructiunile de formatare se transfera intr-o foaie de stil externa (fisier cu extensia .css) apelata din paginile respective
  • operatii de formatare dificile in HTML-ul obisnuit - cum ar fi: marimea fontului = 80 puncte, imagine de fundal pentru cuvinte si altele
In exemplul urmator, grupam intr-un stil cateva caracteristici de formatare pentru eticheta <P>.
Ca rezultat, toate paragrafele vor avea aspectul precizat:
<html>
<head>
<style>
   p {border: thin dotted lime; color: green}
</style>
</head>
<p>Filozoful Blagomirea</p><p>Tine-n mana adevarul</p><p>Si de-aceea se munceste</p><p>A seca tot calimarul</p>
                                            </html>


Modificand doar stilul din linia a 4-a, se schimba aspectul paragrafelor:
<html>
<head>
<style>
   p {background: #0077ff; color: white}
</style>
</head>
<p>Filozoful Blagomirea</p><p>Tine-n mana adevarul</p><p>Si de-aceea se munceste</p><p>A seca tot calimarul</p>
</html>

Browserele actuale, cu mici exceptii, suporta foile de stiluri. Browserele care nu suporta stiluri afiseaza pur si simplu instructiunile de stil in pagina, ceea ce este neplacut. Pentru a preveni aceasta situatie, se inchid instructiunile de stil intre comentarii: <!-- si -->:
<style>
<!--
   p {font-size: 21; color: blue}
-->
</style>

Definirea stilului

Definirea stilului se face conform sintaxei:
selector{proprietate1:valoare1; proprietate2:valoare2, ...}
unde selector este eticheta HTML (neincadrata intre acolade) careia i se aplica stilul. In exemplul de mai sus: p {font-size:21; color:blue}. Daca stilul se aplica la mai multe etichete HTML, acestea se precizeaza prin: selector1, selector2, ... :
selector1, selector2, ... {proprietate1: valoare1; proprietate2:valoare2; ...}
De exemplu, definitia: p, h1, h2 {color:blue} determina aplicarea la paragrafe si la titlurile de rang 1 si 2, a proprietatii color:blue.
COMENTARII. Se pot introduce comentarii in codul CSS, cu rol de explicatie. Textul comentariului se incadreaza intre /* si */ - de exemplu: /* acesta este un comentariu */ - si nu este vizibil in browser.

Inserarea foilor de stiluri in pagina

Exista trei nivele de stiluri. In ordinea prioritatii, acestea sunt:
  1. stilul inline, definit in interiorul etichetelor HTML. Acesta are prioritate maxima - anuleaza efectul stilurilor de nivel 2 si 3 pentru eticheta HTML respectiva.
  2. foaia de stiluri interna (embedded) - definita in antetul paginii (sectiunea HEAD)
  3. foaia de stiluri externa - definita intr-un fisier extern cu extensia .css.
Prezentam in continuare metodele de inserare a stilurilor si situatiile in care se recomanda fiecare dintre ele

Foaia de stiluri interna

Se recomanda pentru aplicarea instructiunilor de stil unei singure pagini, prin definirea stilului implicit cu care apar elementele din pagina. Se insereaza in antetul paginii (in sectiunea HEAD), cu eticheta <style type="text/css">, sau simplu <style>, dupa modelul:
<html> <head>
<style type="text/css">
   <!--
   definitiile de stil
   -->
</style>
</head>
<body> ... restul paginii ... </body></html>
Foaia de stiluri din exemplul urmator precizeaza: aspectul legaturilor nevizitate (a:link), al celor vizitate (a:visited), un efect hover (care apare cand mouse-ul este deasupra legaturii), si aspectul legaturii active (a:active):
<html>
<head>
   <style type="text/css">
      <!--
         a:link {text-decoration: none; color: green}
         a:visited {text-decoration: none; color: magenta}
         a:hover {text-decoration: underline; font-size:30; color: lime}
                                                             a:active {text-decoration: none; color: red}
                                                          -->
                                                       </style>
                                                    </head>
                                                    <body>
                                                        <a href="http://www.webshots.com"> noutati webshots </a>
                                                    </body> </html>

Foaia de stiluri externa

Se foloseste daca dorim aplicarea stilurilor pentru mai multe pagini si este un fisier cu extensia .css care contine definitiile de stil. Paginile se "leaga" la foaia externa cu eticheta <LINK> in antetul fiecareia dintre ele, dupa modelul:
<html> <head>
<link rel = "stylesheet" type = "text/css" href = "numele fisierului .css" >
</head>
<body> ... restul paginii ... </body></html>
Fisierul .css contine numai definitiile de stil (aceleasi ca in cazul foii de stil interne), neinsotite de etichete HTML. Prin simpla modificare a fisierului .css, se modifica in cascada oricat de multe pagini.

Stilul inline

Se foloseste daca dorim sa aplicam alt stil pentru o anumita portiune din pagina, ignorand stilul implicit (definit in foaia interna sau externa de stiluri).
Pentru aceasta, adaugam atributul STYLE:
a) in eticheta HTML, daca este vorba de o singura eticheta. De exemplu, dorim sa apara cu rosu si marime 50 puncte primul paragraf, iar restul sa respecte stilul implicit, cu scris albastru, din antetul paginii:
<html> <head>
<style>
   p {font-size: 21; color: blue}
</style> </head>
<p STYLE="font-size:50; color=red">Filozoful Blagomirea</p>
<p>Tine-n mana adevarul</p> <p>Si de-aceea se munceste</p>
<p>A seca tot calimarul</p> </html>
b) in eticheta <SPAN>, daca dorim sa aplicam stilul unui cuvant sau unei fraze din text. De exemplu, evidentiem cuvantul "adevarul":
<html> <head>
<style>
   p {font-size: 21; color: blue}
</style> </head>
<p>Filozoful Blagomirea</p> <p>Tine-n mana <SPAN STYLE="font-size:50; color:red">adevarul</SPAN></p> <p>Si de-aceea se munceste</p> <p>A seca tot calimarul</p> </html>
c) in eticheta <DIV>, daca aplicam stilul unei sectiuni din pagina, continand diferite etichete HTML. De exemplu, dorim sa apara o imagine de fundal pentru primele doua titluri din pagina:
<html>
<head>
<style>
   body {color:blue}
</style></head>
<div style="background-image: url(star.gif)">
   <h1> La steaua </h1>
   <h2> de Mihai Eminescu </h2>
</div>
La steaua care-a rasarit<br>E-o cale-atat de lunga<br>Ca mii de ani au trebuit<br>Luminii sa ne-ajunga<br>
Poate demult s-a stins din drum<br>In departari albastre<br>Iar raza ei de-abia acum<br>Luci vederii noastre
</html>
Pentru functionarea exemplului de mai sus, trebuie sa existe imaginea star.gif in acelasi director cu pagina.

Clasa de stiluri

O clasa de stiluri este un set de instructiuni de stil aplicabile uneia sau mai multor etichete HTML. Astfel, putem aplica fie clase diferite la aceeasi eticheta HTML, fie aceeasi clasa pentru mai multe etichete HTML. 

Avantajul acestei metode, fata de simpla folosire a stilurilor inline, este ca daca ulterior dorim modificarea stilurilor, este suficient sa modificam clasa/clasele de stiluri.

Definirea unei clase se face conform sintaxei: .nume {instructiune1; instructiune2; ...}, unde nume este numele clasei, iar instructiune1, instructiune2, ... sunt instructiunile de stil. Clasele pot fi definite atat intern (in antetul paginii), cat si extern, intr-un fisier .css.
In etichetele HTML care folosesc clasa de stiluri se adauga atributul class = "numeleclasei" (sau class = "nume1 nume2 ... " daca eticheta foloseste mai multe clase)
Exemplu: definim doua clase numite "banda1" si "banda2" si le aplicam la primul titlu si la paragrafele nr. 1 si 3, respectiv la al doilea titlu si la paragrafele nr. 2 si 4:
<html>
<head>
<style>
   .banda1 {color:green; background: moccasin}
   .banda2 {color:white; background: orange}
</style>
</head>
<h1 class="banda1"> La steaua </h1>
<h2 class="banda2"> de Mihai Eminescu </h2>
<hr>
<p class="banda1">La steaua care-a rasarit</p>
<p class="banda2">E-o cale-atat de lunga</p>
<p class="banda1">Ca mii de ani au trebuit</p>
<p class="banda2">Luminii sa ne-ajunga</p>
</html>

Proprietati CSS

Pentru mai multe informatii despre proprietatile CSS, vizitati: 

Font-family

Permite setarea fontului pentru texte, asemanator atributului FACE din eticheta <FONT>. Proprietatea font-family este o lista de familii de fonturi pentru afisarea unui element. Browser-ul parcurge lista si alege prima valoare pe care o poate folosi (fontul respectiv trebuie sa fie instalat pe calculatorul client) - in caz contrar, foloseste fontul implicit. Valorile font-family sunt de doua tipuri:
  • family-name: numele familiei de fonturi dorita (ex: "arial", "courier", etc.)
  • nume generice: "serif", "sans-serif", "cursive", "fantasy", "monospace".
Valorile din lista se separa cu virgula, iar daca sunt formate din mai multe cuvinte se inchid intre ghilimele (ex. "Times New Roman") sau, daca apar deja in cadrul ghilimelelor, intre apostrofuri (ex: "font-family: 'Courier New'"). Se recomanda, ca ultima alternativa, sa precizam la sfarsitul listei un nume generic de familie.

Exemplu:
<html> <head>
<style type="text/css">
   h3 {font-family: times}    p {font-family: pepsi, courier}    p.sansserif {font-family: impact, sans-serif}
</style> </head><body>
<h3>Titlu 3 cu font din familia times</h3>
<p>Paragraf cu font din familia courier (fontul pepsi nu a fost gasit)</p>
<p class="sansserif">Paragraf cu font din familia impact</p> </body></html>

Font-variant

Afiseaza textul cu small-caps.

Exemplu: 
<html><head><style>p {font-variant: small-caps}</style></head><p>Majuscule Mici</p></html>

Font-size

Stabileste marimea fontului (orice marime).

Exemplu:  
<html><head><style>p {font-size: 100}</style></head><p>100 puncte </p></html>

Color

Stabileste culoarea unui element HTML.
Culoarea se specifica cu color: culoare, in urmatoarele moduri:
  • prin numele culorii - exemple: aqua , blue , fuchsia , green , si altele
  • prin #rrggbb - unde rr, gg si bb sunt numere hexazecimale intre 0 si ff inclusiv, reprezentand intensitatea surselor de lumina rosie, verde respectiv albastra, care compun culoarea
  • prin rgb(x,y,z) unde x, y si z sunt numere intregi intre 0 si 255 inclusiv, cu aceeasi semnificatie ca mai sus
  • prin rgb(x%, y%, z%) unde x, y, z reprezinta procentual intensitatea surselor de lumina rosie, verde respectiv albastra fata de intensitatile maxime
De exemplu, specificatiile: rgb( 255,69,0), # ff4500 si OrangeRed desemneaza toate aceeasi culoare:

<html><head><style>
h1 {color: orangered}
h2 {color: #ff4500}
hr {color: rgb(255,69,0)}
</style></head>
<h1> La steaua </h1> <h2> de Mihai Eminescu </h2> <hr>
La steaua care-a rasarit<br>E-o cale-atat de lunga<br>Ca mii de ani au trebuit<br>Luminii sa ne-ajunga<br> Poate demult s-a stins din drum<br>In departari albastre<br>Iar raza ei de-abia acum<br>Luci vederii noastre</html>


Pentru lista completa cu numele de culori, codurile RGB si mostrele de culoare, accesati pagina: http://www.w3schools.com/html/html_colornames.asp

Background-color

Seteaza culoarea de background pentru un element HTML - vezi exemplul dat mai sus la Clase de stiluri.

Background-image

Seteaza imaginea de background pentru un element HTML - vezi exemplul dat mai sus la Stilul inline - c) eticheta <DIV>. Se foloseste dupa modelul: background-image: url(imagine) unde imagine este calea catre fisierul imagine folosit.

Background-position

Stabileste pozitia de start pentru imaginea de background (fata de coltul stanga-sus al elementului HTML). Se foloseste dupa modelul: background-position: pozitie_verticala pozitie_orizontala, unde:
  • pozitie_verticala poate fi: top, center, bottom sau o valoare numerica sau procentuala
  • pozitie_orizontala poate fi: left, center, right sau o valoare numerica sau procentuala

Background-repeat

Stabileste daca imaginea se repeta in cadrul elementului HTML. Se foloseste dupa modelul: background-repeat: mod_de_repetare, unde mod_de_repetare poate fi: repeat-x (repetare pe orizontala), repeat-y (repetare pe verticala), repeat (repetare pe orizontala si pe verticala) si no-repeat (fara repetare).

Background-attachment

Stabileste daca imaginea de background este fixa sau se deruleaza odata cu pagina: background-attachment: fixed sau background-attachment: scroll

Exemplu pentru proprietatile Background de mai sus: stabilim imaginea de fundal  pentru pagina, care sa fie: fixa (background-attachment: fixed), cu repetare numai pe orizontala (background-repeat: repeat-x) si sa inceapa cu 81 de puncte mai jos decat coltul stanga-sus al paginii, cu aliniere la stanga (background-position: 81px left).
<html> <head>
<style>
   <!--
   body {
      color: blue;
      background-attachment: fixed;
      background-image: url(star.gif);
      background-repeat: repeat-x;
      background-position: 81px left;
   }
   -->
</style> </head>
<body><h1> La steaua </h1> <h2> de Mihai Eminescu </h2> <hr>
<p>La steaua care-a rasarit</p><p>E-o cale-atat de lunga</p><p>Ca mii de ani au trebuit</p><p>Luminii sa ne-ajunga</p><br><p>Poate demult s-a stins din drum</p><p>In departari albastre</p><p>Iar raza ei de-abia acum</p><p>Luci vederii noastre</p><br><p>Tot astfel cand al nostru dor</p><p>Pieri in noapte-adanca</p><p>Lumina stinsului amor</p><p>Mai straluceste inca</p></body></html>
Pentru a va convinge ca imaginea este fixa, micsorati fereastra browser-ului pana cand apare bara de derulare verticala, apoi derulati pagina !

List-style-image

Stabileste o imagine ca marcator in liste, dupa modelul: list-style-image: url('fisierul imagine folosit').




Pentru ca exemplul urmator sa functioneze, trebuie sa existe in acelasi director cu pagina, imaginea arrow.gif:
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('arrow.gif')
}
</style> </head> <body> <ul> <li>Lamai</li> <li>Portocale</li> <li>Mandarine</li> </ul> </body> </html>

Border

Stabileste o bordura in jurul unui element HTML, dupa modelul: border: grosime stil culoare. Se pot preciza numai o parte din aceste valori

- in exemplul urmator, stilul de bordura si culoarea:
<html> <head>
<style>
   .bordura {border: double orangered}
</style> </head>
<div class="bordura"> <p>La steaua care-a rasarit</p><p>E-o cale-atat de lunga<p>Ca mii de ani au trebuit</p><p>Luminii sa ne-ajunga</p> </div> </html>

Text-indent

Indenteaza prima linie dintr-un text, dupa modelul: text-indent: x, unde x este distanta pana la marginea din stanga a elementului parinte din care face parte textul (pagina, o celula de tabel, etc.) si poate fi exprimata in unitati de masura, in puncte sau procente din latimea elementului parinte.
Exemplu:
<html> <head>
<style type="text/css">
p {text-indent: 1cm}
</style> </head>
<body> <p>La steaua care-a rasarit/E-o cale-atat de lunga/Ca mii de ani au trebuit/Luminii sa ne-ajunga/Poate demult s-a stins din drum/In departari albastre/Iar raza ei de-abia acum/Luci vederii noastre/Tot astfel cand al nostru dor/Pieri in noapte-adanca/Lumina stinsului amor/Mai straluceste inca</p> </body></html>

Margin

Stabileste marginile unui element HTML, dupa modelul: margin: margini , unde margini este o lista de 1-4 valori separate prin spatiu.
  • Daca precizam o valoare (ex: margin: 10px} - toate patru marginile vor fi de 10 puncte.
  • Daca precizam doua valori (ex: margin: 30px 10px} - marginile sus si jos vor fi de 30, iar stanga si dreapta de 10 puncte
  • Daca precizam trei valori (ex: margin: 30px 10px 20px}- marginea de sus va fi de 30, marginile stanga si dreapta de 10, iar marginea de jos de 20 puncte
  • Daca precizam patru valori, atunci acestea se refera, in ordine, la marginile: sus, dreapta, jos si stanga.
Marginile pot fi: procente din latimea/inaltimea paginii, puncte (margine fixa) sau auto (browser-ul stabileste marginea).
In exemplul urmator se stabileste marginea paginii de 50 puncte peste tot (sus-jos-stanga-dreapta). Puteti incerca si alte optiuni in locul celei folosite (din cele patru de mai sus)
<html> <head>
<style type="text/css">
.margine {margin: 50}
</style> </head>
<body class="margine"> La steaua care-a rasarit/E-o cale-atat de lunga/Ca mii de ani au trebuit/Luminii sa ne-ajunga/Poate demult s-a stins din drum/In departari albastre/Iar raza ei de-abia acum/Luci vederii noastre/Tot astfel cand al nostru dor/Pieri in noapte-adanca/Lumina stinsului amor/Mai straluceste inca</body></html>

:Hover

Precizeaza cum sa apara un element HTML cand il indicam cu mouse-ul - vezi exemplul prezentat mai sus la Foaia de stiluri interna.

:First-letter

Aplica un stil special pentru prima litera dintr-un text

:First-line

Aplica un stil special pentru prima linie dintr-un text.





Exemplu pentru :first-letter si :first-line:
<html> <head>
<style type="text/css">
h1:first-letter { color: #ff0000 }
p:first-line {color: orangered}
</style> </head>
<body> <h1>La steaua</h1> <h2>de Mihai Eminescu</h2> <p>La steaua care-a rasarit/E-o cale-atat de lunga/Ca mii de ani au trebuit/Luminii sa ne-ajunga/Poate demult s-a stins din drum/In departari albastre/Iar raza ei de-abia acum/Luci vederii noastre/Tot astfel cand al nostru dor/Pieri in noapte-adanca/Lumina stinsului amor/Mai straluceste inca</p></body></html>
la

9 comentarii:

Abonați-vă la: Postare comentarii (Atom)