Noiuni Generale Despre Css

NOTIUNI GENERALE DESPRE CSS
pag. 1
NO IUNI GENERALE DESPRE CSS (Cascading Style Sheets) cascad
foi de stil n
Stilurile vin n ajutorul designerilor de pagini web prin completarea codului XHTML. Astfel dac n HTML prin <b> specific m doar ca un text s fie ngro at, prin CSS putem modifica chiar i dimensiunea fontului, culoarea, fundalul etc. Astfel putem spune c stilurile sunt modific ri ale propriet ilor elementelor HTML. Pentru a defini o regul CSS s facem compara ie cu XHTML: valori
<img src = pic.jpg alt = poza1 />
atribute
valori
h1 { color: #333; font-size: 150%; }

selector propriet i
REGULA CSS
Mai simplu am putea defini o regula CSS astfel: selector { proprietate: valoare; }
1. AD UGAREA CSS LA HTML

1.1 INLINE n fi ierul HTML, direct ntr-o etichet : <p> Istoria se repeta ..... <h1 style=font-style:italic; color: #333;> Imperiul Otoman</h1> ..... 1.2 EMBEDED imbricat, nglobat n fi ierul HTML, n zona <head> se adaug regulile CSS: <html><head>

<style type=text/css> p {font-size: 130%; font-weight:bold; } </style> </head> 1.3 CA LEG TUR (LINK)
pag. 2
n fi ierul HTML, n zona <head> se adaug o leg tur c tre fi ierul css ce con ine regulile. <html><head> <link rel=stylesheet type=text/css href=main.css media=all /> </head> 1.4 CA FI IER IMPORTAT n fi ierul HTML, n zona <head> se import fi ierul css ce con ine regulile. <html><head> <style type=text/css> @import url(main.css); </style> </head> Aten ie, aceste patru modele se pot combina. Astfel ntr-un fi ier HTML putem avea dou fi ier legate cu LINK i cteva reguli de tip EMBEDED.
2. APLICAREA REGULILOR CSS

Regulile CSS se pot aplica unor: etichete HTML (p, img, h1, div etc.)
selectori de tip ID selectori de tip clasa

combina ii ale acestora
Selectorii te tip ID sunt unici, adic , putem avea sa zicem un singur id first ntr-un document. Ex: <div id=top> ............. </div> Acest ID va primi regula sub forma #top { width:200px; border: 1px solid green; } Selectorii de tip clas se folosesc pentru a specifica mai multe etichete HTML c rora li se aplic o regul .

<div class=def> ............. </div> <p class=def> .............. </p> Astfel, regula urm toarea se aplic att div-ului ct i paragrafului. .def { font-size: 12px; line-height: 16px; color: blue; } GRUPAREA SELECTORILOR: DESCENDEN A SELECTORILOR: h1, h2 { font-size: 17px; }
pag. 3
.def b {color: red; } --> se aplic etichetei <b> din clasa .def
O zon de text dintr-un paragraf poate suporta o regul CSS folosind eticheta <SPAN>. Exemplu: <p> <span class=first>E</span>rele mezozoic si neozoic.......</p> .first {font-size:150%; font-weight:bold; } Astfel litera E va fi mai mare i ngro at . AD UDAREA DE COMENTARII: // comentariu pe o linie /* comentariu pe mai multe linii */
3. STILURI PENTRU FONTURI

Stabilirea fontului: M rimea fontului: Stilul: Grosimea: Majuscule mici: Combinarea stilurilor: h1 { font-family: times, Times New Roman , serif; } h1 { font-size: 12px; } [ em, %, small, large, medium ]
h1 { font-style: italic; } [ normal, oblique ] h1 { font-weight: bold; } h1{ font-variant: small-caps; } [ normal, lighter, bolder ] [ normal ]
h1{ font: italic small-caps bold 26px serif; }
4. STILURI PENTRU TEXT

Spa ierea: p { letter-spacing: 2em; } p { word-spacing: 8px; } M rimea liniei: Majuscule: Alinierea textului: p { line-height: 2; } [normal, numar, lungime sau % ] [capitalize, lowercase ]
p { text-transform: uppercase; } p { text-align: left; }
[ right, center, justify ]

Alinierea pe vertical : Decalarea paragrafelor: Elemente ornamentale: h1 { vertical-align: super; } p { text-indent: 20%; } [ sub, baseline ] [ lungime sau % ]
pag. 4
.copy { text-decoration: underline; } [none, overline, line-through, blink]
5. STILURI PENTRU LISTE

li { list-style-type: circle; } alpha ] [ disc, square, decimal, upper-roman, lower-roman, upper-alpha, lower-
li { list-style-image: url(bullet1.gif); }
6. STILURI PENTRU MOUSE

.help { cursor: help; } [ crosshair, hand*, pointer, move, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, text, wait, url ]
7. STILURI PENTRU FUNDAL

Culoarea fundalului: Imagine de fundal: body { background-color: #ccc; } body { background-image: url(pic.jpg); } background-repeat [ repeat, repeat-x, repeat-y, no-repeat ] [ scroll, fixed ] [ transparent ]
background-attachment
background-position [ %, lungime, top, center, bottom, left, right ]
8. STILURI PENTRU BORDUR
I MARGINI
sdkjfh sdkjhsdjkhf djksh sjh sd sdkhkdjs hjksdh sdjkh sdh sdjkhsdjk hsdjk sdjkfhsdjkhsd jkf hsdjkh sdjkfhsdjk sdjkhsd jkfh sdjkfh sdjkfh sdjkfhsdjkfh sdjkfhsdjkfh sdjkfh sdjkh jkdh fsdjk
sjk jkshd jksd hjk sdj kjk shfks dhfj ksdh sdjkfsd fsdfsd fsd fds sdffsd fsdf sd ds
border
margin
padding

margin = distan a ntre element i alte elemente din pagin padding = distan a ntre bordur i con inut
pag. 5
Att marginea, padding-ul ct i bordura pot fi definite pentru fiecare latur n parte.
IMEA I N L IMEA: L comun L individual
.cont { width: 200px; height: 100px; } p { margin: 30px; }
[ %, auto ]
MARGINI:
p { margin-top: 20px; } sau p { margin: 20px 0 0 0; } [ margin: sus dreapta jos stanga ] ( top, right, bottom, left )
BORDURI:
L individual
.cont { border-width: 5px; border-style: double; border-color: #ccc; }
L simplificat
.cont { border: 5px double #ccc; }
border-style [ dotted, dashed, solid, double, groove, ridge, inset, outset ] border-width [ thin, medium, thick, lungime ] Bordura poate fi personalizat pentru fiecare latur : border-left; border-top; border-right etc. PADDING L comun L individual p { padding: 30px; } p { padding-top: 20px; } sau p { padding: 20px 0 0 0; } [ padding: sus dreapta jos stanga ] ( top, right, bottom, left )
9. ALINIEREA IMAGINILOR FA
img { float: left; }
DE TEXT
[ right, none ]
Proprietatea float se aplic cu succes i n cazul <div> -urilor pentru a ezarea acestora n pagin .
10. ANULAREA PROPRIET

p { clear: left; }
II FLOAT
[ right, both, none ]
11. CONTROLUL MODULUI DE AFI ARE A UNUI ELEMENT

.list { display: list-item; } [ list-item, block, inline ]
Foarte util afi area elementelor <li> inline, adic pe aceea i linie. Aceast metod se folose te pentru crearea de meniuri orizontale.

12. CONTROLUL POZI ION RII ELEMENTELOR
.cont { position: absolute; top: 200px; left: 20px; } Valori pentru position: static, absolute, relative si fixed.
pag. 6
Static este pozi ionarea normal . Pozi ionarea relativ se face n raport cu alte elemente din fereastr (cel mai adesea n raport cu p rinte), specificndu-se pozi ia folosind propriet iile top i left. Pozi ionarea absolut se face n raport cu fereastra. Obiectul poate fi plasat n func ie de col ul sus-stnga (top, left) sau jos-dreapta (bottom, right). Pozitionarea fixed (interesant pentru faptul ca nu suport defilarea mpreun cu con inutul paginii) nu este suportat complet de multe dintre browser-e.
13. AMPLASAREA SUPRAPUS A ELEMENTELOR

.cont1 { position: absolute; top: 100px; left: 50px; z-index: 4; } .cont2 { position: absolute; top: 150px; left: 50px; z-index: 3; } Elementele cu z-index mai mare apar deasupra (n fa a) elementelor cu z-index mai mic.
14. CONTROLUL VIZIBILIT
II
[ hidden, visible, inherit ]
img {visibility: hidden; }
inherit = determin elementul s mo teneasc vizibilitatea de la elementul p rinte.
pag. 7

Noiuni Generale Despre Css

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Noiuni Generale Despre Css

Încărcat de

Drepturi de autor:

Formate disponibile

NOTIUNI GENERALE DESPRE CSS