Lesson6 PDF

<html>
Lecia 6
<h1>LECIA 6</h1>
<ul>
<li>Border</li>
<li>Margin</li>
<li>Padding</li>
<li>Dimensiuni</li>
<li>Display</li>
<li>Pozitionare</li>
<li>Float</li>
</ul>
<html>
Border
Proprietile border permit specificarea stilului,

dimensiunii i a culorii borderoului unui element
Este obligatoriu ca proprietatea border-style s fie

specificat pentru a afia un borderou
Exemplu:
div {
border: 10px solid green;
}
<html>
Border
Stilul border-ului
<html>
Border
Stilul border-ului
Exemplu:
div {
border: 5px groove #98bf21;
}
<html>
Border
Limea border-ului
border-width: <medium|thin|thick|length>;
Exemplu:
div {
border-width: 10px;
}
<html>
Margin
Specific spaiul din jurul elementelor (marginile)
Este n exteriorul border-ului
Marginea este complet transparent
Se poate specifica independent marginea: de jos, de sus,

din stnga, din dreapta
<html>
Margin
<html>
Margin
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
sau
body {
margin: 100px 40px 10px 70px;
<html>
Margin
Se pot specifica i margini negative (i astfel elementele se

vor suprapune)
<html>
<body>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
</body>
</html>
#x {
background: blue;
width: 100px;
height: 100px;
}
#y {
background: yellow;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: -50px;
}
#z {
background: red;
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: -50px;
}
<html>
Exemplu margini negative:
Margin
<html>
Margin
Notaii simplificate:
margin: 20px 10px;
/* margine sus, jos = 20px */
/* margine stanga, dreapta = 10px */
margin: 30px;
/* margine sus, jos, stanga, dreapta = 30px */
<html>
Padding
Proprietatea padding definete spaiul ntre coninutul

elementului i chenarul acestuia
Este n interiorul border-ului
Spaiul din padding este colorat conform background-ului

elementului
Se poate specifica independent padding-ul: de jos, de sus,
din stnga, din dreapta
<html>
Padding
<html>
Padding
Sintax
padding-left: 20px;
/* padding la stanga de 20px */
padding-top: 10px;
/* padding sus de 10px */
padding-bottom: 50px;
/* padding jos de 50px */
padding-right: 30px;
/* padding dreapta de 30px */
<html>
Padding
Notaii simplificate:
padding: 20px 10px;
/* padding sus, jos = 20px */
/* padding stanga, dreapta = 10px */
padding: 30px;
/* padding sus, jos, stanga, dreapta = 30px */
<html>
Dimensiuni
Prin CSS se poate specifica limea i nlimea elementelor
Se poate specifica o valoare minima, o valoare fix sau o

valoare maxim
Poate fi o valoare bine definit sau o valoare procentual
<html>
Dimensiuni
Proprietate
Descriere
height
Seteaz nlimea unui element
max-height
Seteaz nlimea maxim a unui element
max-width
Seteaz lungimea maxim a unui element
min-height
Seteaz nlimea minim a unui element
min-width
Seteaz limea minim a unui element
width
Seteaz limea unui element
<html>
<html>
<body>
<div id="x"></div>
<div id="y"></div>
<div id="z">
<div id="z1"></div>
<div id="z2"></div>
</div>
</body>
</html>
Dimensiuni
div {
border: 2px solid blue;
min-height: 50px;
}
#x {
width: 100px;
background: green;
}
#y {
width: 200px;
background: red;
}
#z {
width: 600px;
background: gray;
}
#z1 {
width: 30%;
background: maroon;
}
#z2 {
width: 70%;
background: purple;
}
<html>
Dimensiuni
<html>
Display
Proprietatea display specific dac un element trebuie

afiat i modul n care trebuie afiat
Proprietatea visibility specific dac un element trebuie s

fie vizibil sau nu
Un element poate fi ascuns prin specificarea display: none

sau visibility: hidden
(diferena const n faptul c, n cazul visibility, dei
elementul este ascuns, spaiul pentru acesta este alocat)
<html>
Display
Proprietatea display specific dac un element trebuie

afiat i modul n care trebuie afiat
Proprietatea visibility specific dac un element trebuie s

fie vizibil sau nu
Un element poate fi ascuns prin specificarea display: none

sau visibility: hidden
<html>
<html>
<body>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
</body>
</html>
Display
div {
height: 50px;
margin: 10px;
}
#x {
background: green;
}
#y {
background: maroon;
visibility: hidden;
}
#z {
background: gray;
}
<html>
Display
<html>
<html>
<body>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
</body>
</html>
Display
div {
height: 50px;
margin: 10px;
}
#x {
background: green;
}
#y {
background: maroon;
display: none;
}
#z {
background: gray;
}
<html>
Display
<html>
Display
Elemente bloc
Elemente care ocup toat limea disponibil
Exemple: <h1>, <p>, <li>, <div>
Aceasta linie va ocupa tot spaiul.
Elemente inline
Elemente care ocup doar atta spaiu ct au nevoie
Exemple: <span>, <a>
Ocup doar o parte din spaiul disponibil. Alt element
<html>
Display
Proprietatea display permite modificarea modului de

afiare (block, inline sau deloc)
<html>
<body>
<ul>
<li>Mere</li>
<li>Pere</li>
<li>Gutui</li>
</ul>
</body>
</html>
<html>
Display
Proprietatea display permite modificarea modului de

afiare (block, inline sau deloc)
<html>
<style>
li {
display: inline;
}
</style>
<body>
<ul>
<li>Mere</li>
<li>Pere</li>
<li>Gutui</li>
</ul>
</body>
</html>
<html>
Display
Valori posibile pentru display:
none
Elementul nu va fi afiat deloc
block
Elementul va fi afiat ca un element de tip block
inline
Elementul va fi afiat ca un element de tip inline
<html>
Display
Valori posibile pentru display:
inline-block
Elementul este afiat ca un element inline fa de restul
elementelor, dar n interior poate fi formatat precum un element
block
<html>
Display
Valori posibile pentru visibility:
visible
Elementul este vizibil
hidden
Elementul este ascuns
<html>
Poziionare
Proprietile de poziionare din CSS permit poziionarea n

pagin a elementelor
Exist 4 metode de poziionare: static, fixed, relative,
absolute
<html>
Poziionare
Poziionarea de tip static

Poziionare implicit
Elementul este afiat n pagin conform aranjrii implicite a

browser-ului
Proprietile top, bottom, left i right nu afecteaz
elementele poziionate static
{ position: static; }
<html>
Poziionare
Poziionarea de tip fixed

Elementele sunt poziionate relativ la fereastra browser-ului
Rmn n aceeai poziie chiar i atunci cnd utilizatorul

mut scroll-ul paginii
Elementele de tip fixed nu afecteaz celelalte elemente ce

urmeaz a fi afiate (ies din fluxul normal de afiare a
paginii)
{ position: fixed; }
<html>
Poziionare
Poziionarea de tip relative

Elementele sunt poziionate relativ la poziia normal (care
ar fi corespuns afirii implicite)
n practic, de multe ori elementele de tip relative sunt
folosite drept containare pentru element de tip absolut
{ position: relative; }
<html>
Poziionare
Poziionarea de tip absolute

Elementele sunt poziionate relativ la primul printe din
arborele HTML care are poziia fixed, relative sau absolute
Dac nu exist nicun astfel de element, atunci vor fi
poziionate relativ la elementul rdcin (<html>)
Elementele se pot suprapune peste alte elemente
{ position: absolute; }
<html>
Poziionare
Suprapunerea elementelor
Gestionarea ordinii de afiare pentru elementele suprapuse
se face folosind proprietatea z-index
Elementele cu valoare z-index mai mare sunt afiate
deasupra
Dac doua elemente au aceeai valoare pentru z-index, se
va afia cel care apare mai jos n codul HTML
{ z-index: valoare; }
<html>
Poziionare
Suprapunerea elementelor
Gestionarea ordinii de afiare pentru elementele suprapuse
se face folosind proprietatea z-index
Elementele cu valoare z-index mai mare sunt afiate
deasupra
Dac doua elemente au aceeai valoare pentru z-index, se
va afia cel care apare mai jos n codul HTML
{ z-index: valoare; }
<html>
Exemple
<html>
<style>
div {
width: 100px;
height: 100px;
}
#x {
background: red;
}
#y {
background: blue;
}
</style>
<body>
<div id="x"></div>
<div id="y"></div>
</body>
</html>
Poziionare
<html>
Exemple
div {
width: 100px;
height: 100px;
}
#x {
background: red;
}
#y {
background: blue;
position: absolute;
left: 20px;
top: 20px;
}
Poziionare
<html>
Float
Proprietatea CSS float permite mutarea elementelor n

stnga sau n dreapta astfel nct alte elemente s poat
aprea pe aceeai linie
Un element poate pluti (float) doar pe orizontal

(stnga/dreapta) nu i pe vertical
Elementele obinuite de dup un elemente de tip float vor

pluti lng acesta n partea corespunztoare (n dreapta
pentru elemente cu float: left i n stnga pentru elemente
cu float: right)
<html>
Exemple
<html>
<style>
div {
width: 100px;
height: 100px;
}
#x {
background: red;
float: right;
}
#y {
background: blue;
}
</style>
<body>
<div id="x"></div>
<div id="y"></div>
</body>
</html>
Poziionare
<html>
Float
Pentru a evita ca elementele ulterioare s pluteasc lng

elementul care are setat atributul float se poate folosi
atributul clear
Valorile posibile pentru clear sunt left, right sau both
{ z-index: left|right|both; }
<html>
Float
<html>
<style>
div {
float: left;
margin: 10px;
}
</style>
<body>
<div><img src="cat.jpg" /><br/>Poza 1</div>
</body>
</html>
<html>
Float
<html>
Float
<html>
<style>
div {
float: left;
margin: 10px;
}
</style>
<body>
<div style="clear: both;"><img src="cat.jpg" /><br/>Poza 3</div>
</body>
</html>
<html>
Float

Lesson6 PDF

Încărcat de

Informații document

Titlu original

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

Lesson6 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

<html>

Proprietile border permit specificarea stilului,

Este obligatoriu ca proprietatea border-style s fie

Specific spaiul din jurul elementelor (marginile)

Este n exteriorul border-ului

Marginea este complet transparent

Se poate specifica independent marginea: de jos, de sus,

Se pot specifica i margini negative (i astfel elementele se

Proprietatea padding definete spaiul ntre coninutul

Spaiul din padding este colorat conform background-ului

Prin CSS se poate specifica limea i nlimea elementelor

Se poate specifica o valoare minima, o valoare fix sau o

Poate fi o valoare bine definit sau o valoare procentual

Seteaz nlimea unui element

Seteaz nlimea maxim a unui element

Seteaz lungimea maxim a unui element

Seteaz nlimea minim a unui element

Seteaz limea minim a unui element

Seteaz limea unui element

Proprietatea display specific dac un element trebuie

Proprietatea visibility specific dac un element trebuie s

Un element poate fi ascuns prin specificarea display: none

Proprietatea display specific dac un element trebuie

Proprietatea visibility specific dac un element trebuie s

Un element poate fi ascuns prin specificarea display: none

Aceasta linie va ocupa tot spaiul.

Ocup doar o parte din spaiul disponibil. Alt element

Proprietatea display permite modificarea modului de

Proprietatea display permite modificarea modului de

Valori posibile pentru display:

Valori posibile pentru display:

Valori posibile pentru visibility:

Proprietile de poziionare din CSS permit poziionarea n

Poziionarea de tip static

Elementul este afiat n pagin conform aranjrii implicite a

Poziionarea de tip fixed

Rmn n aceeai poziie chiar i atunci cnd utilizatorul

Elementele de tip fixed nu afecteaz celelalte elemente ce

Poziionarea de tip relative

Poziionarea de tip absolute

Proprietatea CSS float permite mutarea elementelor n

Un element poate pluti (float) doar pe orizontal

Elementele obinuite de dup un elemente de tip float vor

Pentru a evita ca elementele ulterioare s pluteasc lng

Valorile posibile pentru clear sunt left, right sau both

S-ar putea să vă placă și