CSS C2

CSS - incadrarea continutului.
Folosind CSS putem incadra contiunutul, putem stabilii distanta intre continut si border intre border si marginea
paginii. Vom folosi urmatoarele atribute:
- margin - distanta intre border si marginea paginii
- border - marginea si cutia care incadreaza continutul
- padding - distanta intre border si continut
- content - continutul propriu-zis (text, imagini, etc)
Vom aplica atributele de mai sus sub forma:
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
Observatie:
Vom considera exemplul de mai sus un element. Trebuie mentionat ca acest element are o latime totala de 270px
(200+15x2+5x2+15x2=270px).
Concluzie:
latimea continutului + left padding + right padding + left border + right border + left margin + right margin =
Latimea totala
si
inaltimea continutului + top padding + bottom padding + top border + bottom border + top margin + bottom
margin = Inaltimea totala
Aceste doua formule trebuiesc luate in considerare atunci cand stabilim inaltimea si latimea continutului.
Nota:
Trebuie mentionat aici ca Internet Explorer, include padding-ul si border-ul in latime (width) in cazul in care acesta
este specificata. Aceasta eroare se corecteaza introducand un DOCTYPE la inceputul documentului.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
</style>
</head>
CSS - Border Style
Css border nu este altceva decat o bordura de jur-imprejurul continutului. Bordurile realizate cu ajutorul CSS vor
fi puse in scena cu ajutorul atributului border-style cu urmatoarele valori:
- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Valorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt alese culorile corecte
CSS - Border Width

Lungimea bordurii in CSS este determinata de atributul border-width. Acest atribut nu va functiona in cazul in care
nu este specificat in prealabil atributul border-style. Vom folosi ca unitati de masura pixelii sau putem pune valorile
thin, medium sau thick. Iata si un exemplu:
div {
border-style:solid;
border-width:2px;
}
CSS Border Color
Culoarea borduri va fi specificata de catre atributul border-color in sistemul hexazecimal, RGB, sau pur si simplu
numind culorile. De retinut ca se poate stabili ca bordura sa fie transparenta in cazul in care este nevoie.
Pentru a putea stabilii culoarea bordurii in CSS trebuie mai intai sa stabilim stilul acesteia dupa cu urmeaza.
div {
border-style:solid;
border-color:red;
}
Observatie:
Se pot deasemenea stabilii proprietati individuale pentru fiecare dintre laturile chenarului obtinut.
div {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Forma scurta de a scrie toate aceste valori intr-o singura expresie este
div {
border-style:dotted solid;
}
Folosind forma scurta de a scrie CSS putem stabill aceste valori mult mai simplu economisind timp. Iata cateva
exemple:
- div { border-style:dotted solid double dashed; }
Bordura de sus este "dotted", cea din stanga "solid", cea din dreapta "double" iar cea de jos este "dashed".
- div { border-style:dotted solid double; }
Bordura de sus este punctata, cea din dreapta si din stanga sunt solide iar bordura de jos este dubla.
- div { border-style:dotted solid; }
Bordurile de sus si de jos sunt punctate iar cele din dreapta si din stanga sunt solide.
- div { border-style:dotted; }
Desi deasupra s-a luat un exemplu de baza folosind border-style, aceleasi reguli se aplica la toate celelalte atribute
mentionate.
Observatie:
O alta metoda de a coda in CSS toate proprietatile bordurii intr-o singura expresie este:
border: 4px dotted #EFEFEF;

De mentionat ca ordinea va fi mereu aceasta.
CSS - Outline
Atributul outline a aparut odata cu introducerea CSS2 si are urmatoarele proprietati:
- outline
- outline-color
- outline-style
- outline-width
Outline deseneaza un chenar de jur imprejurul continutului
Tabelul de referinte pentru valori disponibile atributului outline.
Proprietate
Descriere
Valuare
outline
Seteaz toate proprietile outline ntr-o declaraie
outline-color
outline-style
outline-width
inherit
outline-color
Seteaz culoarea unui outline
color_name
hex_number
rgb_number
invert
inherit
outline-style
Seteaz stilul unui outline
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width
Seteaz latimea unui outline
thin
medium
thick
length
inherit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p><b>Nota:</b> IE8 suporta proprietatile outline numai daca este specificat un !DOCTYPE.</p>
</body>
</html>
CSS - Margin
Atributul margin stabileste o distanta in afara bordurii stabilite anterior. Marginea definita nu va avea nici o culoare,
cu alte cuvinte va fi transparenta.
Pentru a defini aceasta margine vom stabili valoarea fiecarei margini in parte cea de sus (margin-top) marginea din
dreapta si din stanga ( margin-right si respectiv margin-left), si cea de jos (margin-bottom). Retineti aceasta ordine
intrucat va fi utila atunci cand stabiliti margin folosind expresia scurta:
margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)

margin: 30px 20px 50px; (sus, dreapta si stanga, jos)
margin: 30px 20px (sus si jos, dreapta si stanga)
margin: 30px (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur imprejurul bordurii)
CSS - Padding
Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta regiune in acelasi fel ca si la
atributul margin, folosind:
- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;
Expresia CSS sub forma scurta se formeaza ca si la margin
padding:25px 50px 75px 100px;

CSS - Liste
In HTML avem doua tipuri de liste:
- ordonate - numere, numere romane sau litere
- neordonate - cerculete, buline, patratele etc.
Atributul list din CSS permite modificarea tipului de lista sau folosirea unei imagini ca marcator.
Un exemplu practic de a folosi atributul list este:
ul {list-style-type:disc;}
ol {list-style-type:upper-roman;}
Pentru a folosi o imagine ca marcator vom folosi:
ul { list-style-image:url("image.png"); }
Mentiune:
NU toate browser-ele vor afisa imaginea in aceasi pozitie. De exemplu Internet Explorer si Opera va afisa imaginea
ceva mai sus decat Firefox si Google Chrome.
Pentru a plasa imaginea in pozitia dorita si sa ramana acolo in orice navigator vom:
- folosi imaginea ca background fara sa o repetam.
- vom stabili distanta fata de marginea din stanga si cea de sus.
- vom stabili ca lista sa nu aibe nici un marcator si vom egala margin si padding cu 0 pentru a fi afisat la fel in toate
browser-ele.
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
li {
background-image:url(image.png);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:15px;
}
Alinierea unei liste
ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside}
Valuarea standard pentru o lista este outside. O valuare precum inside va impinge lista spre interiorul paginii.
CSS - Forma scurta a unei liste
list-style:none inside url("arrow.gif");

Va trebuii sa pastram ordinea mentionata mai sus.
CSS - Pozitionare
Pozitionarea elementelor este de patru tipuri.
- statica
- fixa
- relativa
- absoluta
CSS - Pozitionare statica
Pozitionarea statica este valoarea standard in browser atribuita unui element cand vine vorba de pozitionare.
CSS - Pozitionare fixa
Folosind valuarea "fixed" pentru atributul "position" vom obtine un element pe pagina care are o pozitie fixa
indiferent de celelalte elemente. Cu altea cuvinte elementul pluteste in pozitia stabilita chiar daca dam de rotita
mouseului. Folosind valoarea "fixed" elementele se pot suprapune, celelalte elemente comportandu-se ca si cand
elementul fix nu ar exista.
.pozitie_fixa {
position:fixed;
top:25px;
right:10px;
}
Mentiune: IE nu interpreteaza acest atribut daca nu este specificat un !DOCTYPE.
CSS - Pozitionare relativa
Pozitionarea relativa se refera la o pozitie diferita fata de pozitia statica
.pozitionare_relativa {
position:relative;
left:15px;
top:30px;
}
Valorile lui top si left pot fi deasemenea negative.
.pozitionare_relativa{
position:relative;
left:-15px;
top:-30px;
}
Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe elemente.
.element_suprapus {
position:relative;
top:-20px;
}
</style>
<h2>Acest element are o pozitionare statica</h2>
<h2 class="element_suprapus">Titlul va fi urcat mai sus fata de pozitia
initiala</h2>
<p><b>Note:</b> Trebuie mentionat ca spatiul corespunzator
elementului, va fi pastarat</p>
De multe ori pozitionarea relativa sau div-urile pozitionate relativ sunt folosite ca si container pentru alte divuri sau
elemente pozitionate absolut.
CSS - Pozitionare absoluta
Elementele pozitionate absolut vor fi pozitionate in functie de primul element parinte care are o pozitionare nonstatica. Daca nu este gasit un astfel de element, elementul parinte va fi considerat <html>.
Spatiul rezervat elementelor pozitionate absolut nu va fi pastrat. In acest sens celelalte elemente se comporta ca si
cand elementul pozitionat absolut nu ar exista. In felul acesta se pot suprapune mai multe elemente.
p
{
position:absolute;
left:200px;
top:200px;
}
Suprapunerea mai multor elemente in CSS
Cu ajutorul CSS pot fi suprapuse mai multe elemente.
Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si
negative.
<html>
<head>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
& <body>
<h1>Suprapunerea mai multor elemente in CSS</h1>
<img src="imagine.jpg" width="100" height="100" />
<p>Vom folosi atributul z-index pentru a specifica ordinea elementelor. zindex poate avea atat valori pozitive cat si negative.</p>
</body>
</html>
Datorita faptului ca "z-index"-ul imagini are valoarea -1, imaginea va fi pozitionata in spatele textului. De aici
regula ca un element cu "z-index" mai mare va fi pozitionat in fata unui element cu "z-index" mai mic.

CSS C2

Î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

CSS C2

Încărcat de

Drepturi de autor:

Formate disponibile

CSS - incadrarea continutului.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

CSS - Border Width

border: 4px dotted #EFEFEF;

Seteaz toate proprietile outline ntr-o declaraie

Seteaz culoarea unui outline

Seteaz stilul unui outline

Seteaz latimea unui outline

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)

padding:25px 50px 75px 100px;

list-style:none inside url("arrow.gif");

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