Anexa 2

CSS
În cele ce urmează vor fi prezentate cele mai utilizate proprietăţi incluse în CSS
(Cascading Style Sheets).

Proprietate Valori Observaţii şi exemple

Tipul proprietăţii

{color: red}
{color: #12AD4F;}
Valorile pot fi culori de bază (red, blue,
{color: rgba(255,255,0,.5); }
color etc, ), culori definite prin codul
Cele patru valori definesc componentele culorii în
hexazecimal #rrggbb sau RGBA
ordinea: roşu (0 – 255), verde (0 – 255), albastru (0 –
255) şi transparenţă (0 – 1).

{font-family: "Times New Roman",

Times, serif;}
{font-family: Arial, Helvetica,
sans-serif}
Un şir de tipuri de fonturi, despărţite Fonturile indicate trebuie să fie pe calculatorul pe
font-family
prin virgule care se afişează pagina. Fonturile frecvent utilizate
sunt: Helvetica, Arial, Times, Verdana, Georgia,
Trebuchet, Tahoma, Lucida, Palatino, Courier and
Comic Sans. O listă cu fonturile uzuale se găseşte la
adresa http://cssfontstack.com/

Denumiri utilizate: xx-small, x-small, small, medium,

Se pot folosi denumiri sau valori large, x-large, xx-large, smaller, larger.
font-size numerice, exprimate în diverse unităţi Unităţi acceptate: px, em, %.
de măsură. Denumiri utilizate: xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, larger

Varianta "oblique" se foloseşte pentru a afişa textul cu

font-style "italic", "oblique" sau "normal" o înclinare spore dreapta mai accentuată decât dacă
se foloseşte "italic".

"bold", "bolder", "lighter", "normal", sau Nu toate browser-ele recunosc valorile numerice şi
font-weight o valoare numerică (100–900, 900 fiind chiar atributele "bolder" sau "lighter". E mai sigur să
cel mai "bold"). se folosească varianta clasică, "bold".
Proprietate Valori Observaţii şi exemple

font-variant "Small caps" se aplică şirurilor de caractere formate

"small-caps" sau "normal"
din litere mici.

O dimensiune exprimată în unităţi de

line-height măsură standard, de cele mai multe ori Permite impunerea spaţiului lăsat între liniile de text.
px, em sau %.

text-
"underline", "overline", "line-through" Se pot folosi mai multe valori separate printr-un
decoration and "none" spaţiu.

text- "Capitalize" transformă în literă mare primul caracter

"capitalize", "uppercase", "lowercase",
dintr-o frază. "Uppercase" transformă în majuscule
transform "none".
toate caracterele afectate de regula CSS.

Impunerea fundalurilor

Se pot folosi denumirile culorilor de
background-
bază (red, blue, yellow, magenta etc.),
color valori hexazecimale (#rrggbb) sau
RGBA(rrr, ggg, bbb, a.aa)
rr, gg, bb sunt valori cuprinse între 0 şi 255 exprimate
în hexazecimal. În hexazecimal 255 este FF, deci
valorile vor fi între 00 şi FF.

background-
image "url(file name)" {background-image: url(ducky.jpg);}

"x" se referă la repetarea imaginii folosite ca fundal în

background- "repeat", "repeat-x", "repeat-y", sau
repeat direcţie orizontală iar "y" se referă la repetarea
"no-repeat"
acesteia pe direcţia verticală.

La deplasarea butoanelor de defilare (scroll), un

background-
fundal "fixed" nu se va mişca împreună cu conţinutul
attachment "fixed" sau "scroll"
paginii. Comportamentul implicit corespunde
variantei "scroll".

{background-position: top right}

"left", "center" sau "right" pentru
{background-position: 0px 23px;}
background- orizontală; "top", "middle", sau
position Când se folosesc valori numerice, prima valoare se
"bottom" pentru verticală sau un set de
referă la distanţa de la marginea de sus a paginii şi a
valori numerice.
doua la distanţa de la frontiera din stânga a acesteia.

"auto" impune ca imaginea de fundal să apară la

background- "auto", "dimensiune", "procent", dimensiunile ei normale, (fără scalare); "cover"
size "cover", "contain" sau "initial" impune scalarea imaginii astfel incât să acopere
blocul.
Proprietate Valori Observaţii şi exemple

Proprietăţi impuse la nivel de bloc

letter- Oricare dintre unităţile de măsură

spacing Spaţiul lăsat între caractere.
cunoscute (px, pc, pt, in, cm, em, ex).

Oricare dintre unităţile de măsură

word-spacing Spaţiul lăsat între cuvinte.
cunoscute (px, pc, pt, in, cm, em, ex).

"baseline", "sub", "super", "top", "text-

vertical-
align top", "middle", "bottom", "text-bottom"
or a value.

text-align "left", "center", "right", or "justify"

Oricare dintre unităţile de măsură

text-indent Indentează prima linie a fiecărui paragraf.
cunoscute (px, pc, pt, in, cm, em, ex).

inline, block, list-item, run-in, inline-

block, compact, marker, table, inline-
table, table-row-group, table-header-
display Schimbă modul în care elementul este afişat.
group, table-footer-group, table-row,
table-column-group, table-column,
table-cell, table-caption, inherit, none

Oricare dintre unităţile de măsură

width cunoscute (px, pc, pt, in, cm, em, ex) sau
%.

Oricare dintre unităţile de măsură

height cunoscute (px, pc, pt, in, cm, em, ex), De regulă height nu este folosit.
"auto" sau %.

float "left," "right," or "none."

clear "left," "right," "both," or "none."

margin Oricare dintre unităţile de măsură Mărimea margin poate fi comună sau impusă separat,
margin-top cunoscute (px, pc, pt, in, cm, em, ex). pentru fiecare dintre laturile unui element.
margin-right
margin-bottom {margin-top:0; margin-right:12px}
Proprietate Valori Observaţii şi exemple

Ordinea valorilor este top, right, bottom, left:

margin-left
{margin: 0 12px 6px 18px;}

padding
padding-top
padding-right Oricare dintre unităţile de măsură
Ca şi pentru margin.
padding- cunoscute (px, pc, pt, in, cm, em, ex).

bottom
padding-left

Borders

border-style
"solid", "dotted", "dashed", "double",
border-top- Pentru a fi vizibilă, border trebuie să aibă un stil
"groove", "inset", "outset", "ridge",
style definit.
"none".
etc.

border-width
"thin", "medium", "thick" sau orice
border-top-
unitate de măsură. Pixelii (px) şi "em"
width
sunt cel mai des folosite.
etc.

border-color
border-top- Culorile de bază (red, blue etc.) sau un
color cod hexazecimal.
etc.

Dacă toate laturile unui bloc au acelaşi border.

border Regula se scrie astfel:

{border: 1px solid #0A0A0A}

Liste
Proprietate Valori Observaţii şi exemple

disc, circle, square, decimal, lower-

list-style- roman, upper-roman, lower-alpha,
type upper-alpha, none

list-style- "url(file name)" {list-style-image: url('ducky.jpg');}

image

list-style- "inside" or "outside"

position

Posiţionarea elementelor de tip bloc

"absolute," "fixed," "relative," and Elementele poziţionate absolut sunt obligatoriu

position "static" conţinute în elemente poziţionate relativ.

top
right
Oricare dintre unităţile de măsură

bottom
cunoscute (px, pc, pt, in, cm, em, ex).

left

"rect (amount, amount, amount,

clip amount)"

visibility
"visible," "hidden," "inherit"

z-index
Un număr de la 0 în sus.

overflow
"visible," "hidden," "scroll," "auto"