Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  


AccessAdobe photoshopAlgoritmiAutocadBaze de dateC
C sharpCalculatoareCorel drawDot netExcelFox pro
FrontpageHardwareHtmlInternetJavaLinux
MatlabMs dosPascalPhpPower pointRetele calculatoare
SqlTutorialsWebdesignWindowsWordXml

Informatica Multimedia - CSS

calculatoare

+ Font mai mare | - Font mai mic



Informatica Multimedia - CSS

Introducere

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

Introducerea de stiluri in interiorul paginii 

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>

Introducerea de stiluri intr-un fisier separat

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>

Folosirea de clase

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>

Descrierea proprietatilor care pot fi modificate

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).

Fundalul (background)

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>

Textul (text)

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>

Modificarea fonturilor:

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

Chenare (border)

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

Marginile unui element (margin, padding)

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



DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 933
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2021 . All rights reserved

Distribuie URL

Adauga cod HTML in site