| CATEGORII DOCUMENTE |
CSS este prescurtarea de la Cascading Style Sheets. Acestea specifica cum vor fi afisate elemente din HTML. Stilurile sunt scrise in paginile web, sau intr-un alt fisier. Atunci cand sunt scrise in fisiere separate pot salva foarte multa munca in momentul in care se doreste schimbarea felului in care arata paginile web.
Modul de afisare al informatiilor dintr-o pagina web este dat de marcajele HTML. Pe masura ce numarul acestora a crescut, a devenit tot mai dificil de organizat informatiile. Dificultatea poate fi scoasa in evidenta in cazul siturilor web cu multe pagini, in care modificarea felului cum apare un anume element (titlurile de exemplu) este un lucru foarte anevoios.
Stilurile permit introducerea de informatii suplimentare despre modul in care se afiseaza datele corespunzatoare unui anume marcaj. Astfel, in momentul in care se doreste schimbarea modului de afisare a marcajului respectiv, se mofifica numai fisierul care contine definitiile stilurilor respective. Daca toate paginile de pe site incarca stilurile din acelasi fisier, schimbarea se va observa automat in toate paginile.
Sintaxa folosita pentru CSS este:
marcaj
Pentru a semnala inceputul sectiunii cu stiluri se foloseste marcajul <style>. Parametrul type specifica modul in care sunt codificate aceste stiluri. In acest laborator este redat modul de cofificare "text/css". In exemplul de mai este indicat modul de utilizare al stilurilor. Se modifica numai modul de afisare pentru marcajele <body> si <p>. Textul obisnuit, care apartine de marcajul body este afisat cu albastru, iar textul din parcajul p va fi afisat cu 20 puncte mai la dreapta si culoare rosie. Mai multe detalii despre marcaje sunt date in continuare.
Exemplu 1:
<html>
<head>
<title>Stiluri</title>
<style type='text/css'>
p
body
</style>
</head>
<body>
Acesta este un text obisnuit
<p>
Acesta este un text scris cu marcajul p
</p>
</body>
</html>
Atunci cand exista mai multe pagini si modul de afisare pentru anume elemente este identic in toate paginile se recomanda scrierea stilurilor intr-un fisier separat cu extensia css. Acesta va fi incarcat apoi in paginile in care este nevoie.
Fisierul cu extensia css va contine numai definitiile stilurilor. Incarcarea acestora in pagina se face cu ajutorul marcajului <link>. Acest marcaj are urmatorii parametri: rel specifica ce informatii sun in fisier (in cazul nostru valoare este stylesheet, type indica modul de codificare al informatiilor din fisier (in cazul nostru text/css), href specifica fisierul care contine definitia stilurilor).
Exemplu 2:
Acest exemplu este compus din doua fisiere: stil.css contine definitia stilurilor si pagina web. Incarcat in browser, acest exemplu arata la fel ca exemplul anterior
Fisierul stil.css:
p
body
Pagina web:
<html>
<head>
<title>Stiluri</title>
<link rel='stylesheet' type='text/css' href='stil.css'>
</head>
<body>
Acesta este un text obisnuit
<p>
Acesta este un text scris cu marcajul p
</p>
</body>
</html>
Exemplele de mai sus modifica modul de afisare al marcajelor. In pagina toate marcajele <p> se afiseaza la fel. De multe ori, este necesar sa a existe mai multe tipuri de paragraf. Pentru a defini o clasa anume a unui marcaj, la scrierea stilului, dupa numele marcajului se pune punct (.) dupa care urmeaza numele clasei. Folosirea marcajului din clasa respectiva se face folosind parametrul class. Valoarea acestui parametru este numele clasei respective. In exemplul de mai jos, eset ilustrat modul de folosire a claselor. Stilurile au fost definite in interiorul paginii web.
Exemplul 3:
<html>
<head>
<title>Stiluri</title>
<style type='text/css'>
p.p1
p.p2
</style>
</head>
<body>
<p>
Acesta este un text scris cu marcajul p
</p>
<p class='p1'>
Acesta este un text scris cu marcajul p clasa p1
</p>
<p class='p2'>
Acesta este un text scris cu marcajul p clasa p2
</p>
</body>
</html>
Tabelele de mai jos enunta o serie de proprietati ale marcajelor care pot fi modificate. Unele proprietati pot avea anumite valori standard. Valorile standard sunt notate cu caractere ingrosate (bold).
Proprietatile care permit controlul asupra fundalului elementelor din pagina incep cu background.
|
Nume |
Semnificatie |
Valori posibile |
|
background-color |
Culoarea de fundal pentru marcajul respectiv |
Orice culoare |
|
background-image |
Imaginea folosita la fundalul marcajul respectiv (in cazul in care pentru fundal se va folosi o anume imagine |
Numele imaginii. Acesta se va sepecifica folosind functia url |
|
background-repeat |
Modul de repetare al imaginii pentru fundal |
repeat repeat-x repeat-y no-repeat |
|
background-attachment |
Modul cum se ataseaza imaginea de fundal |
scroll fixed |
Exemplul 4:
<html>
<head>
<title>Stiluri</title>
<style type='text/css'>
td.rosu
td.verde
td.albastru
</style>
</head>
<body>
<table width=50% border=0>
<tr>
<td class='rosu'>unu</td>
<td class='verde'>doi</td>
</tr>
<tr>
<td>trei</td>
<td class='albastru'>patru</td>
</tr>
</table>
</body>
</html>
Exemplul 5:
<html>
<head>
<title>Stiluri</title>
<style type='text/css'>
td.rosu
td.verde
td.albastru
td.imgback
body
</style>
</head>
<body>
<table width=50% border=0>
<tr>
<td class='rosu'>unu</td>
<td class='verde'>doi</td>
</tr>
<tr>
<td class='imgback'>trei</td>
<td class='albastru'>patru</td>
</tr>
</table>
</body>
</html>
Proprietatile care modifica modul de afisare a textului pentru diferite elemente sunt:
|
Nume |
Semnificatie |
Valori |
|
color |
modifica culoarea textului |
orice culoare |
|
direction |
modifica sensul de scriere al textului |
ltr rtl |
|
letter-spacing |
mareste spatiul dintre caractere |
normal cifra reprezentand spatiul |
|
text-align |
alinierea textului pentru marcajul respectiv |
left right center justify |
|
text-decoration |
"decoreaza" textul |
none underline overline line-through blink |
|
text-indent |
identeaza prima linie din text |
procentul cu care se identeaza numarul de puncte cu care se face identarea |
|
text-transform |
transforma elementele textului |
none capitalize uppercase lowercase |
|
word-spacing |
creste spatiul dintre cuvinte |
normal cifra reprezentand spatiul dintre cuvinte |
Exemplul 6:
<html>
<head>
<title>Stiluri</title>
<style type='text/css'>
p.litere_rare
p.text_identat
</style>
</head>
<body>
<p class='litere_rare'>
Text rar de tot
<p>
<p class='text_identat'>
Pentru acest paragraf, prim alinie incepe undeva mai de la dreapta.
Daca fereastra va fi micsorata si si textul afisat ep mai multe randuri,
se va identa numai prima linie
<p>
</body>
</html>
Proprietatile folosite pentru a odifica fonturile sunt:
|
Nume |
Semnificatie |
Valori |
|
font-family |
fontul folosit pentru a scrie un nume text |
numele unui font |
|
font-size |
dimensiunea fontului |
small medium large smaller larger procentaj care specifica de cate ori este mai mare fontul |
|
font-stzle |
stilul fontului |
normal italic |
|
font-weight |
grosimea literelor folosite la font |
normal bold |
Elementele unei pagini pot fi incadrate de chenare. Proprietatile care definesc aceste chenare sunt date in tabelul de mai jos:
|
Nume |
Semnificatie |
Valori posibile |
|
Border-style |
Modul in care va fi afisat chenarul |
None Hidden Dotted Dashed Solid Double Groove Ridge Inset Outset |
|
Border-color |
Culoarea chenarului |
Orice culoare |
|
Border-width |
Latimea chenarului |
Thin Medium Thick Cifra care semnifica dimensiunea chenarului |
|
Border-left-style |
Modul de afisare a liniei din stanga |
Vezi border-style |
|
Border-left-color |
Culoarea liniei din stanga a chenarului |
Vezi border-color |
|
Border-left-width |
Latimea liniei din stanga a chenarului |
Vezi border-width |
|
Border-right-style |
Modul de afisare a liniei din dreapta |
Vezi border-style |
|
Border-right-color |
Culoarea liniei din dreapta |
Vezi border-color |
|
Border-right-width |
Latimea liniei din dreapta |
Vezi border-width |
|
Border-top-style |
Modul de afisare liniei de sus |
Vezi border-style |
|
Border-top-color |
Culoarea liniei de sus |
Vezi border-color |
|
Border-top-width |
Latimea liniei de sus |
Vezi border-width |
|
Border-bottom-style |
Modul de afisare liniei de jos |
Vezi border-style |
|
Border-bottom-color |
Culoarea liniei de jos |
Vezi border-color |
|
Border-bottom-width |
Latimea liniei de jos |
Vezi border-width |
Prin margin se intelege spatiul dintre elemente (spatiul lasat intre marginea browserului sau e elementului anterior si locul pe unde ar trebui spa treaca chenarul care inconjoaraa acel element). Prin padding se intelege spatiul dintre marginea obiectului (chenarul acestuia) si reprezentarea acestuia.
Pentru a vedea diferenta dintre margin si padding trebuie rulat exemplul 7. In acesta se vor modifica valorile pentru margin si padding iar apoi vor trebui observate efectul acestor modificari.
Exemplul 7
<html>
<head>
<title>Stiluri</title>
<style type='text/css'>
p.chenar
</style>
</head>
<body>
<p class='chenar'>
Acesta este un paragraf cu chenar. spatiul dintre chenar si text inseamna padding.
Spatiul dintre margine browserului si chanar inseamna margin.
<p>
</body>
</html>
Proprietati folosite pentru margin:
|
Nume |
Semnificatie |
Valoare |
|
margin |
marginea dintre elementul curent si celelalte |
numar reprezentand dimensiunea marginii |
|
margin-bottom |
marginea de jos |
numar reprezentand dimensiunea marginii |
|
margin-left |
marginea din stanga |
numar reprezentand dimensiunea marginii |
|
martin-right |
marginea din dreapta |
numar reprezentand dimensiunea marginii |
|
margin-top |
marginea de sus |
numar reprezentand dimensiunea marginii |
Proprietati folosite pentru padding:
|
Nume |
Semnificatie |
Valoare |
|
padding |
marginea dintre reprezentarea elementului si chenarul sau |
numar reprezentand dimensiunea marginii |
|
padding -bottom |
marginea de jos |
numar reprezentand dimensiunea marginii |
|
padding -left |
marginea din stanga |
numar reprezentand dimensiunea marginii |
|
padding -right |
marginea din dreapta |
numar reprezentand dimensiunea marginii |
|
padding -top |
marginea de sus |
numar reprezentand dimensiunea marginii |
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1632
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
