Programarea calculatoarelor si limbaje de
programare
Foi de stiluri in cascada
Foi de stiluri in
cascada
Obiectivele cursului
Prin parcurgerea acestui curs vom:
►Defini CSS-urile
►Invata sa lucram cu CSS
Introducere
Foi de stiluri in
cascada
Definitie
►CSS : Cascading Style Sheet
►Limbaj diferit de (x)HTML
►Utilizate pentru a proiecta un site Web
Foi de stiluri in
cascada
Avantaje
►Centralizeaza elementele de design
intr-un
fisier extern
►Separa continutul de design (proiectare)
►Simplifica intretinerea paginilor Web
►Reduce marimea paginilor
Foi de stiluri in
cascada
Posibilitati
►Defineste aspectul documentului cum ar
fi:
- Culoare sau imagine de fundal
- Font (stil, dimensiune, culoare etc)
- Borduri si margini
►Proprietatile pot fi specificate prin
atribute
Utilizare CSS
Introducere in atribute CSS
Programare in
CSS
Obiective
►Unde plasam CCS-urile?!
►Sintaxa
►Atribute
►Suport
Introducere in
CSS
Unde plasam CSS-urile
- in linia HTML
<span style=“color : red;”> Text rosu…</span>
Introducere in
CSS
Unde plasam CSS-urile (continuare)
- in antetul fisierului HTML (sectiunea
HEAD)
<head>
<style type=“text/css”>
p { color: blue;}
</style>
</head>
Introducere in
CSS
Unde plasam CSS-urile (continuare)
- intr-un fisier extern
<head>
<link rel="stylesheet" href="[Link]“ type=“text/css”>
</head>
Programarea in
CSS
Sintaxa
-selector {
property: value;
…
}
Exemplu:
Programarea in
CSS
Sintaxa
- selectorii pot fi grupati
Exemplu
-Stilul se aplica in ordinea definirii
-In caz de conflict (mai mlte stiluri), ultimul
definit suprascrie cele anterioara
Programarea in
CSS
Comentarii
- Comentariile: /* … */
- Nu se poate utiliza asa //
Exemplu:
Programarea in
CSS
Atributul class
- Se aplica stilul la un grup definit de un tag
Exemplu in CSS:
Pot fi asociate cu orice eticheta
Programarea in
CSS
Atributul id
- Se aplica stilul doar la un singur obiect
Exemplu in CSS:
Pot fi asociate cu orice eticheta
Programarea in
CSS
Culori
- Nume culoare
Exemplu : red
- rgb(x, x, x), unde [0 ≤ x ≤ 255]
Exemplu : rgb(255, 0, 0)
- rgb(x%, x%, x%), unde [0 ≤ x ≤ 100]
Exemplu : rgb(100%, 0%, 0%)
- #rrggbb, unde [00 ≤ (rr,gg,bb) ≤ FF]
Exemplu : #FF0000
Programarea in
CSS
Unitati de masura
Unitate Descriere
% Procentual
in, cm, mm Inch, centimetru. milimetru
em 1em este egal cu marimea fontului.
De exemplu daca marimea fontului egal cu 16pt
atunci 2em = 16x2pt=32pt
ex 1 ex este egal cu inaltimea x-height a unui font
(x-height este egala de obicei cu 1/2 din font-size)
pt Point. 1 pt este egala cu 1/72 inch
pc Pica. 1 pc este egal cu 12pt
px Pixel. 1px egal cu un punct de pe ecran
Exemplu :
Programarea in
CSS
Atributul :: text
Programarea in
CSS
Atributul :: text
Programarea in
CSS
Atributul :: background
Programarea in
CSS
Atributul :: background
Programarea in
CSS
Atributul :: margin
- Specifica marginile exterioare
Programarea in
CSS
Atributul :: padding
- Specifica marginile interioare
Programarea in
CSS
Atributul :: border
Programarea in
CSS
Atributul :: border
Programarea in
CSS
Atributul :: list
Programarea in
CSS
Atributul :: float
Programarea in
CSS
Atributul :: position
- Determina modul de pozitionare al unui
element
Valori posibile:
- static: element in pozitie normala
- relative: element relativ fata de normal
- absolute: element relativ fata de “parinte”
- fixed: ca si absolute dar fixat in pagina
Programarea in
CSS
Atributul :: positioning
Programarea in
CSS
Exemplu CSS extern
body
{background-color: #CCFFCC;
font-family: Arial, sans-serif;
color: #330066;
padding: 50px, 70px}
a:link {color: #CC9900}
a:visited {color: #660000}
a:hover {color: #FFCC00}
a:active {color: #FF0000}
h1 {color: #996633;
background-color: #FFFFCC}
Programarea in
CSS
Exemplu formular colorat
<FORM>
<INPUT name="text" style="background-color:
#00CCFF; color: #FFFFFF; font-weight: bold"
value="Hello!">
<P>
<TEXTAREA rows="5" cols="20" style="color:
#0066CC; background-color: #CCCCCC;
scrollbar-base-color:red;">Introduceri un
comentariu</TEXTAREA>
<P>
<INPUT type="submit" value="trimite"
style="background-color: #0066CC">
De retinut!
Un fisier extern CSS, se apeleaza din HTML,
scriind linia de mai jos in sectiunea <head>
…</head>
<link rel="stylesheet" href=“fisier_extern.css">
sau
<style type="text/css">
@import url(“fisier_extern.css");
Foi de stiluri in cascada ::
CSS
Rezumatul cursului
Ce este Proprietati
CSS ? CSS