Stiluri CSS (II)_clase de Proprietati

8/18/2019 Stiluri CSS (II)_clase de Proprietati

http://slidepdf.com/reader/full/stiluri-css-iiclase-de-proprietati 1/40

7. Stiluri CSS

lect . univ. Tîrşu Valentina

1



CONŢINUT 1. Moştenirea

2. Formatarea background-ului

3. Formatarea fonturilor

4. Formatarea textului

5. Formatarea tabelelor

6. Formatarea listelor

7. Blocuri CSS

2



1. Moştenirea

• Conceptul de moştenire CSS este un element-cheie, estemecanismul prin care anumite propietăţi ale unui element

părinte se transferă şi elementelor urmaşi.

• Nu toate propietăţile se moştenesc. De exemplu marginile şi

fundalul nu are sens să fie moştenite. Este puţin probabil ca

urmaşii unui element să aibă toţi nevoie de aceaşi margine,sau fundal.

• Mostenirea previne repetarea anumitor proprietăți într-o

foaie de stil şi permite încărcarea rapidă a paginilor web de

către utilizatori e.t.c.

3



1. Moştenirea <head>

<style>

body {color:green; }ul li{ color:red; }

</style>

</head>

<body>

<p>Limbaje dupa paradigma programarii</p>

<ol>

<li>limbaje ezoterice (Brainfuck)</li><li>limbaje procedurale (C, Java, Perl)</li>

<li>limbaje functionale:(ML, Haskell)</li>

<li>limbaje pentru programarea logica (Prolog, DATALOG)</li>

<li>limbaje mixte (LISP)</li>

</ol>

<p> Limbaje dupa nivelul de abstractizare</p>

<ul>

<li>limbaje de generatia intaia (limbajele cod-masina)</li>

<li>limbaje de generatia a doua (limbajele de asamblare)</li>

<li>limbaje de generatia a treia (limbaje de nivel inalt)</li>

<li>limbaje de generatia a patra (limbajele neprocedurale)</li>

<li>limbaje de generatia a cincea(limbaje de inteligenta artificiala)</li>

</ul></body>

4



1. Moştenirea • Rezultatul rulării programului:

5



2. Formatarea background-ului• Daca HTML permitea configurarea unor elemente grafice de fundal

doar pentru anumite elemente, CSS permite definirea fundaluluipentru orice element din pagina web.

Proprietate Descriere Valori

background

setează toate proprietăţile background într -o singură

declaraţie

background-color, background-image,

background-repeat, background-

attachment, background-position

background-

attachment

stabileşte dacă imaginea defundal este fixă sau defilează

împreună cu restul paginii scroll, fixed

background-

color

setează culoarea de fundal a unuielement

color-rgb, color-hex, color-name,

transparent

background-image setează imaginea de fundal aunui element

url(url), none

background-

position

setează poziţia de început a uneiimagini de fundal

top left, top center, top right, center left,

center center, center right, bottom left,

bottom center, bottom right, x% y%, xpos

ypos

background-

repeat stabileşte dacă şi cum va firepetată imaginea de fundal repeat, repeat-x, repeat-y, no-repeat

6




Fisierul background.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<link rel="stylesheet"

type="text/css"href="../stiluri/stil5.css">

</head>

<body>

Continutul documentului

</body>

</html>

Fisierul stil5.css

body{

background-color:#243CED;

color:yellow;

}

I) Proprietatea background-color - specifică culoarea de fundal a unui element.

Culoarea de fundal pentru întreaga pagină este definită în selectorul body ca înexemplul următor:

7




• Rezultat rulării programului:

Culoarea de fundal poate fi specificată prin:

nume – un nume de culoare, de exemplu "red";

RGB – o valoare RGB, de exemplu "rgb(255,0,0)";

Hex – o valoare hexazecimală, de exemplu "#ff0000".

8



2. Formatarea background-uluiII) Proprietatea background-image - defineşte imaginea folosită ca fundal pentru

un element. Implicit, imaginea se repetă pe suprafaţa întregului element.• Imaginea de fundal a paginii poate fi setată ca în exemplul următor:

• Rezultatul rulării programului:

Fisierul stil5.css

body{

background-color:#243CED;background-image:url("../images/m5.jpg");

}

9



2. Formatarea background-uluiIII) Proprietatea background-repeat repetă imaginea pe axa verticală şi

orizontală. Poate avea 4 valori:• repeat - repetă imaginea pe verticală şi orizontală (valoare implicită).

• repeat-x - repetă imaginea pe orizontală.

• repeat-y - repetă imaginea pe verticală.

• no-repeat - repetarea este exclusă.


Fisierul stil5.cssbody{


background-image:url("../images/m5.jpg");

background-repeat:no-repeat;

}

10



2. Formatarea background-uluiIV) Pentru a schimba poziţia imaginii de fundal, folosiţi roprietatea background-

position ca în exemplul următor: • Deplasarea imaginii cu ajutorul cuvintelor cheie.


Fisierul stil5.css

body{


background-image:url("../images/m5.jpg");background-repeat:no-repeat;

background-position: top right;

}

11



2. Formatarea background-ului• Deplasarea imaginii poate fi indicată şi în procente:


Fisierul stil5.css

body{




background-position: 20% -40%;}

12



2. Formatarea background-uluiV) background-attachment- indică dacă imaginea de fundal se va derula

împreună cu textul, sau va fi fixată. Aceasta poate lua două valori: • scroll – imaginea se derulează împreună cu textul (valoare implicită).• fixed - imaginea de fundal este fixată în raport cu fereastra browser-ului.

Cod program:





background-position: 20% -40%;

background-attachment: fixed;}

13



2. Formatarea background-uluiVI) Proprietăţi multiple pentru fundal se indică cu proprietatea background,

care permite scurtarea codului de program şi precizarea tuturor proprietăţilor într -o proprietate conform următoarei sintaxe:

background: [<background-color>||<background-image>

||<background-repeat>||<background-attachment>||

<background-position>]



background:#243CED url("../images/m5.jpg") no-repeat 20% -40%;

}

14



Proprietate Descriere Valori

font Setează toate proprietăţile fontuluiîntr -o singură declaraţie

font-style, font-variant, font-weight, font-

size, font-family

font-family

Specifică familia de fonturi serif, sans-serif, monospace, cursive,fantasy

font-size Specifică dimensiunea fontului xx-small, x-small, small, medium, large, x-

large, xx-large, smaller, larger, length , %

font-style Specifică stilul fontului normal, italic, oblique

font-

variant

Specifică dacă textul este afişat sau

nu cu majuscule micinormal, small-caps

font-

weight Specifică grosimea fontului

normal, bold, bolder, lighter, 100, 200,

300, 400, 500, 600, 700, 800, 900

3. Formatarea fonturilor În CSS există un set de proprietăţi pentru fontul conţinutului unui element HTML.

Acestea ne permit să schimbăm fontul (caracteristicile tipului de literă) şi sunt grupate în clasa FONT. Proprietăţile pentru fonturi şi valorile lor sunt descrise în continuare.

15



3. Formatarea fonturilor Familiile de fonturi în CSS (font-family)

În CSS, numele unei familii de fonturi se poate defini în două moduri:

• Familie generică – un grup de familii de fonturi care au un aspect similar (ca "Serif"

sau "Monospace");

• Familie de fonturi – o familie specifică de fonturi (ca "Times New Roman" sau

"Arial").

Exemplu:

Familia

generică Familia specifică Descriere

SerifTimes New Roman

Georgia

Fonturile de tip serif au linii mici la sfârşitul unora

dintre caractere.

Sans-serif Arial

Verdana

"Sans" înseamnă fără – aceste fonturi nu au linii

la sfârşitul caracterelor

Monospace Courier NewLucida Console

Toate caracterele monospace auaceeaşi lăţime

16



3. Formatarea fonturilor Proprietate font-family ar trebui să precizeze cel puţin două familii de fonturi. Dacă

browserul nu recunoaşte prima familie, o va încerca pe a doua. Începeţi cu fontul pe careîl doriţi şi terminaţi cu o familie generică.

Obs.: numele familiei de fonturi formate din mai multe cuvinte se scriu în ghilimele:

"Times New Roman". Dacă folosiţi mai multe nume de fonturi, ele trebuie separate în

listă prin virgulă.

Fisierul font.html

<head>

<link rel="stylesheet" type="text/css"

href="../stiluri/stil6.css">

</head>

<body>

<h1> familia de fonturi in CSS</h1><p class="serif"> Acesta este un paragraf

- fontul Times New Roman</p>

<p class="sansserif"> Acesta este un

paragraf - fontul Arial</p></body>

Fisierul stil6.css

.serif { font-family:"Times New

Roman", Times, Serif; }

.sansserif { font-family:Arial,Helvetica, Sans-Serif; }

17




Rezultatul rulării programului:

18



3. Formatarea fonturilor Fonturi standarde pentru proprietate font-family :

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

19




• Font-style - specifică stilul fontului: normal (implicit), oblique

(înclinat), italic (cursiv):

#id1{ font-style:normal; }

#id2{ font-style:oblique; }

#id3{ font-style:italic; }

• Font-variant – două variante ortografice: normal (implicit) şi small-caps (cu litere mici).

#id3{

font-style:italic;

font-variant:small-caps;}20




• Font-weight - specifică grosimea caracterelor de font.

Valori: 100, 200, 300, 400, 500, 600, 700, 800 și 900. Cuvinte

cheie: normal (normal), bold (caractere aldine), bolder (îngroşat)lightere.

#id1{font-weight:bold; }

#id2{ font-weight:lighter; }

#id3{ font-weight:900; }

21




• Font-size - setează mărimea fontului.

Dimensiunile pot fi setate în trei moduri:

1. folosind cuvinte cheie (xx-small, x-small, small, medium,

large, x-large, xx-large, smaller, large);

2. utilizând unităț i relative (%, em, px,…);

3. Utilizând unităț i de măsură de lungime (in, pt, px, mm, sm).

#id1{ font-size:1.2em; }

#id2{ font-size:16px; }

#id3{ font-size:xx-small; }

22




Proprietăţile multiple pentru font pot fi setate prin spaţiu conform

următoarei sintaxe:

font:[<font-style>||<font-variant>||<font-weight>]?<font-size> <font-family>

Obs.: Oricare dintre proprietăț ile enumerate pot fi omise, cu excepț ia

proprietăţilor : font-size şi font-family.

• Exemplu:

23

.new{

font-style:italic;

font-weight:bold;

font-size:16px;

font-family:Tahoma;

}

.new{

font:italic bold 16px Tahoma;

}




• Proprietăț ile de text permit setarea parametrilor pentru cuvinte și fraze, precum și poziț ia lor relativă în pagina web.

Propietate Descriere Valori

text-align alinierea pe orizontala a textului left, right, center, justify

text-

decorationaplicarea unor linii pe text

none, underline, overline, line-

through, blink

text-indent aliniatul tradiţional pentru text length, %

text-transform caractere majuscule sau litere micinone, capitalize, uppercase,

lowercase

text-shadowadaugă umbră unui text: <x> < y> <neclaritate> <culoare>

none, length, color

color culoarea textului culoare

direction sensul afişării textului ltr, rtl

line-height spaţiul dintre linii normal, length, %

letter-spacing spaţiul dintre caracterele cuvintelor normal, length

vertical-align alinierea verticala a textului

baseline, sub, super

top, text-top, iddle, bottom, text-

bottom, length, %

word-spacing spatiul dintre cuvintele textului normal, pre, nowrap

24




Exemple de formatare a textului:

p{color:purple; text-align:right;

text-transform: uppercase; font-size:14px;

text-indent: 50px; letter-spacing: 4px;

l ine-height: 90%; text-shadow: 1px 1px #222222;

}

25






27


list-style setează toate proprietăţile pentru o listă

list-style-type; list-style- position; list-style-image

list-style-imagespecifică o imagine ce va marca

fiecare element din listă none; url

list-style-position

indică dacă marcatorii elementelor din listă apar în

interiorul sau în exteriorul listei

inside; outside

list-style-type indică tipul de marcator folosit pentru elementele din listă

none; disc; circle; square;

decimal decimal-leading-zero;

lower-roman upper-roman;

lower-alpha; upper-alpha lower-

greek; lower-latin; upper-latin;hebrew armenian;

georgian; cjk-ideographic

hiragana; katakana; hiragana-

iroha



5. Formatarea listelor Lista valorilor pentru proprietatea list-style-type :

Valoare Descriere

Valorile proprietă ii pentru liste neordonate

none fără marcator disk implicit (cerc)

circle cerc gol

square pătrat Valorile proprietăţii pentru liste ordonate

armenian număr tradiţional armenesc

decimal număr în baza zece

decimal-leading-zero număr precedat de zero (01, 02, 03, etc.)

georgian număr tradiț ional georgian (an, ban, gan, etc.)

lower-alpha litera mica (a, b, c, d, e, etc.)

lower-greek literă mică grecească (alpha, beta, gamma, etc.) lower-roman număr roman mic (i, ii, iii, iv, v, etc.) upper-roman număr roman mare (i, ii, iii, iv, v, etc.)

28




Cod program:

ol{ list-style-type:upper-roman; }

ul{list-style-type:square;}


29




Cod program:

ol{ list-style-type:upper-roman; color:green;}

ul{list-style-image:square; color:blue;}

#selectat{ list-style-image:url("../images/arrow.png"); }


30



6. Blocuri CSS • Dacă în HTML toate elementele pot fi împăr ț ite în două tipuri: bloc

și linie. Modelul documentului CSS se prezintă ca un bloc: fiecare

element din document este o unitate independentă. Mai mult decât atât, există blocuri, structural separat de celelalte și blocuri plasate,

care pot fi în interiorul unităț ilor structurale.

• Blocul are o formă dreptunghiulară:

31



6. Blocuri CSS

Cod program:

p{

border: 1px solid blue;

padding:10px;

margin:50px;

width:100px;

height:50px;

}

Rezultatul rulări rpogramului:

32



6. Blocuri CSS (Border) Chenare• Proprietatea CSS border defineşte chenarul din jurul unui element. Puteț i specifica

grosimea, stilul (border-style) și culoarea chenarului pentru un anumit element.

• Proprietăţile multiple pentru border pot fi setate prin spaţiu conform următoarei sintaxe: border:[<border-width>||<border-style>||<border-color>]

Obs: Nici-una din celelalte proprietăț i ale chenarului nu va avea efect, dacă

proprietatea border-style nu este setată.


bordersetează toate proprietăț ile într -o singură declaraț ie

border-width, border-style,

border-color

border-style stilul chenaruluinone, dotted, solid, double, dashed,

groove, ridge, inset, outset, hiden

border-color culoarea chenarului color_name, hex_number,rgb_number, transparent

border-width grosimea chenarului thin, medium, thick, length

border-bottom setează toate proprietăț ile laturii de jos

border-top setează toate proprietăț ile laturii de sus

border-right setează toate proprietăț ile laturii din dreapta

border-left setează toate proprietăț ile laturii din stânga

33



6. Blocuri CSS (Border) fişierul chenare.html

<!DOCTYPE HTML5>

<head>

<link href="../stiluri/stil7.css" type="text/css"

rel="stylesheet">

</head>

<body>

<p id="none">Chenar fara latura de jos</p>

<p id="dotted">Chenar cu latura de jos punctata</p>

<p id="dashed">Chenar cu latura de jos

intrerupta</p>

<p id="solid">Chenar cu latura de jos plina</p>

<p id="double">Chenar cu latura de jos dubla</p>

<p id="groove">Chenar cu latura de jos groove</p><p id="ridge">Chenar cu latura de jos ridge</p>

<p id="inset">Chenar cu latura de jos inset</p>

<p id="outset">Chenar cu latura de jos outset</p>

</body>

fişierul stil7.css

p{ border-style:solid}

#none{

border-bottom-style:none;}

#dotted{

border-bottom-style:dotted;}

#dashed{

border-bottom-style:dashed;}

#solid{

border-bottom-style:solid;}

#double{

border-bottom-style:double;}

#groove{

border-bottom-style:groove;}#ridge{

border-bottom-style:ridge;}

#inset{

border-bottom-style:inset;}

#outset{

border-bottom-style:outset;}

34



6. Blocuri CSS (Border)


35



6. Blocuri CSS (Margin) • Proprietatea CSS margin definește spaț iul din jurul unui element (în afara

chenarului). Marginea nu are culoare de fundal și este complet transparentă.

Cele patru margini ale elementului pot fi modificate în mod independent,

folosind proprietăț i separate. O proprietate scurtă poate fi, de asemenea,

folosită pentru a schimba toate cele patru margini simultan.

• Valori posibile:


margin

proprietate

prescurtată pentrua seta simultan

toate marginile

auto - marginile sunt stabilite de către browser ; length - definește o margine fixă (px, pt, em, etc.)

% - definește o margine în procente faț ă deelementul conț inut

margin-top stabilește marginea de sus

margin-right stabilește marginea din dreapta

margin-

bottom stabilește marginea de jos

margin-left stabilește marginea din stânga

36



6. Blocuri CSS (Margin)

Obs. :Proprietatea margin poate avea între una și patru valori.

Ex.: margin:25px 50px 75px 100px;

• marginea de sus este 25px

• marginea dreaptă este 50px • marginea de jos este 75px

• marginea stângă este 100px

.ex1{margin-top:2cm;}

.ex2{margin-top:25%;}

.ex3{margin-top:50px;}

37



6. Blocuri CSS (Margin) fişierul marhin.html fişierul stil7.css

<!DOCTYPE HTML5>

<head>

<link href="../stiluri/stil7.css"

type="text/css" rel="stylesheet">

</head>

<body><p id="unu">text - unu</p>

<div id="patru">

<p id="doi">text - doi</p>

<p id="trei">text - trei</p>

text - patru

</div></body>

#unu{border-style:double;

border-color:blue; margin-top:2cm;}

#doi{border-style:solid;

border-color:yellow; margin-bottom:2cm;}

#trei{border-style:dotted;

border-color:green; margin-left:25%;}

#patru{border-style:dashed;

border-color:red; text-align:right;}

38



6. Blocuri CSS (Padding) • Proprietatea CSS padding definește spaț iul dintre chenar și conț inut. Acest

spaț iu este afectat de culoarea de fundal a elementului.

• Valori posibile:


padding

proprietatea scurtă

pentru a stabili toatespaț iile cu o singurădeclaraț ie

length - definește o margine fixă

(px, pt, em, etc.)

% - definește o margine în procentefaț ă de elementul conț inut

padding-top Stabileşte spaț iul de sus

padding-right stabileşte spaț iul din dreapta

padding-bottom stabileşte spaț iul de jos

padding-left stabileşte spaț iul din stânga

39



6. Blocuri CSS (Padding) fişierul marhin.html fişierul stil7.css

<!DOCTYPE HTML5>

<head>

<link href="../stiluri/stil7.css"

type="text/css" rel="stylesheet">

</head>

<body><p id="unu">text - unu</p>

<div id="patru">

<p id="doi">text - doi</p>

<p id="trei">text - trei</p>

text - patru

</div></body>

#unu{border-style:double; border-

color:blue; padding-bottom:0.5cm;}

#doi{border-style:solid; border-

color:yellow; padding-bottom:2cm;}

#trei{border-style:dotted;border-

color:green; padding-bottom:5%;}

40

Documents

Stiluri CSS (II)_clase de Proprietati