| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
 Trimis: 25/11/2007 06:29 Titlul subiectului: Coduri Css |
|
|
Beneficiile sintaxei CSS sunt:
formatarea este introdusa intr-un solitar loc pentru tot documentul
editarea rapida a etichetelor
datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia
Sintaxa CSS este structurata pe trei nivele:
nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe
Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.
Folosirea unui fisier extern sau indice 3 care sa contina comenzi CSS este extrem de practic fiindcă poate fi utilizat in mai numeroase situatii (mai multe fisiere HTML pot folosi acelasi fisier extern CSS) eliminand momentul necesar introducerii codului corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:
<link rel="stylesheet" type="text/css" href="fisier_css.css">
Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS.
Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete <head> si </head> conform sintaxei:
<style type="text/css">
<!--
... comenzi CSS ...
-->
</style>
Unde style -specifica unde incepe si unde se termina blocul CSS iar type este întrebuințat pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.
Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:
<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este fixat codul CSS...
</eticheta>
Este permisa utilizarea comentariilor in CSS ca si in HTML:
/* Acesta este un comentariu in CSS */ |
|
| Sus » |
|
 |
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
| Trimis: 25/11/2007 06:31 Titlul subiectului: Coduri Css |
|
|
id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor contine caracterul _.
Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.
Exemplu: folosirea elementului id
<html>
<head>
<title>Exemplu 2_1</title>
<style type="text/css">
<!-- #albastru{color: #0000FF;}-->
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>
Elementul class se similar cu id dar spre deosebire de asta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.
Exemplu: utilizarea elementului class
<html>
<head>
<title>Exemplu 2_2</title>
<style type="text/css">
<!-- .rosu{color: #FF0000;}-->
</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html> |
|
| Sus » |
|
|
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
| Trimis: 25/11/2007 06:37 Titlul subiectului: Coduri Css |
|
|
Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.
3.1 font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul întrebuințat va fi debutantul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este propus ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.
CSS/exemplu3_1.html">Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea
<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML
<html>
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>
3.2 font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.
Exemplu: CSS introdus in HEAD așezat etichetei p, dimensiunea exprimata in pixeli
<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc mărimile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
CSS keyword numar FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7
Pentru verificare se poate utiliza exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.
3.3 font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile natural si italic.
<style type="text/css">
<!-- p{font-style: italic;}-->
</style>
3.4 font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>
3.4 Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus fixat etichetei p
<html>
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!--
p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html> |
|
| Sus » |
|
|
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
| Trimis: 25/11/2007 06:42 Titlul subiectului: Coduri Css |
|
|
4.1 Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.
In continuare este prezentat ca exemplu codul întrebuințat in HEAD, aplicat etichetei p:
<style type="text/CSS">
<!--
p{text-align: center;}
-->
</style>
Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului
<html>
<head>
<title>Exemplu 4_1</title>
<style type="text/css">
<!--
p{text-align: center;}
-->
</style>
</head>
<body>
<div class="pecentru"><img src="poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>
vertical-align este utilizat pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.
In exemplul de mai jos este produs clasa sus care va putea fi fixat elementelor <td> ale tabelului
<style type="text/css">
<!--
.sus{vertical-align: top;}
-->
</style>
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in componentă opusa a paginii.
Exemplu: cream clasa auto si o aplicam inaginii
<html>
<head>
<title>Exemplu 4_2</title>
<style type="text/css">
<!--
.auto{float: left;}
-->
</style>
</head>
<body>
<img src="poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html>
4.2 Tabulare
text-indent este folosit pentru alinierea textului in partea interioară avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este așezat etichetei p deplasand textul cu 10 pixeli in interior
<style type="text/css">
<!--
p{text-indent: 10px;}
-->
</style>
4.3 Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>
<title>Exemplu 4_3</title>
<style type="text/css">
<!--
p{text-decoration: underline;}
-->
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>
4.4 Culoare
color defineste nuanță textului dintr-o zona sau intraga pagina.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!--
p{color: #0000FF;}
-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>
4.5 Stiluri pentru legaturi
In HTML colorație legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY.
Acelasi fapt si chiar mai mult poate fi concretizat utilizând sintaxa CSS.
Exemplu
<html>
<head>
<title>Exemplu 4_5</title>
<style type="text/css">
<!--
a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
-->
</style>
</head>
<body>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>
a defineste stilul general pentru legatura
a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii |
|
| Sus » |
|
|
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
| Trimis: 25/11/2007 06:45 Titlul subiectului: Tutorial CSS |
|
|
[color=blue]Background alură sau fotografie poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text.
5.1 Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
CSS/exemplu5_1.html">Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p
<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>
5.2 Poză de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.
Exemplu: definim un stil pentru eticheta p
<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
5.3 Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta
Exemplu: imaginea nu se repeta sub eticheta p
<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
5.4 Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi supravegheat prin comanda CSS background-position.
Sunt acceptate doua valori:
in întâia pozitie poate fi: top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel
Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare
<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">
<!--
body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html> [/color] |
|
| Sus » |
|
|
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
| Trimis: 25/11/2007 06:57 Titlul subiectului: Tutorial CSS |
|
|
6.1 list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. browserul Netscape nu îngăduie asocierea comenzilor CSS decat pentru eticheta li.
Sintaxa este:
<style type="text/css">
<!--
li {list-style-type: valoare;}
-->
</style>
valoarea poate fi:
valoare disc
disc disc
circle cerc
square patrat
decimal numere intregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman numere romane, caractere mari (I, II, III, IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none nimic
Exemplu: lista ordonata folosind marcaje cu litere mici
<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>
6.2 list-style-image
In afara simbolurilor de marcaj prestabilite celebre de browser pot fi utilizate si imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!--
li {list-style-image: url(punct.gif);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html> ce |
|
| Sus » |
|
|
Master
Administrator
Data inscrierii: 05/Noi/2007
Mesaje: 169
Localitate: Craiova
|
| Trimis: 25/11/2007 07:08 Titlul subiectului: Tutorial CSS |
|
|
Pozitionarea îngăduie asezarea unui obiect intr-un anume loc întrebuințând coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).
8.1 Pozitionare absoluta plaseaza obiectul in pagina precis in locatia data de left si top. Astfel poate fi conceput un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.
CSS/exemplu8_1.html">Exemplu: am aplicat pozitionarea absoluta etichetei h4
<html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>
8.2 Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie utilizând proprietatile left si top.
Exemplu: am folosit doua obiecte unul pozitionat perfect celalalt relativ
<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>
8.3 Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="poza.jpg"></div>
<div class="element2"><img src="poza.jpg"></div>
<div class="element3"><img src="poza.jpg"></div>
</body>
</html> |
|
| Sus » |
|
|
publicitate
Hacker Avansat
Data inscrierii: 14/Mai/2013
Mesaje: 166
|
| Trimis: 15/05/2013 01:25 Titlul subiectului: |
|
|
publicitate
_________________
[url=http://api.hostinger.ro/redir/1021758] [/url] |
|
| Sus » |
|
|
|
|
