CSS_C2
8
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> 1
description
Curs css 2
Transcript of 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 totalasiinaltimea continutului + top padding + bottom padding + top border + bottom border + top margin + bottom margin = Inaltimea totalaAceste 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 StyleCss 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
1
- inset- outsetValorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt alese culorile corecte
CSS - Border WidthLungimea 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 ColorCuloarea 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:
2
border: 4px dotted #EFEFEF;De mentionat ca ordinea va fi mereu aceasta.
CSS - OutlineAtributul 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 Valuareoutline Setează toate proprietăţile outline într-o declaraţie outline-color
outline-styleoutline-widthinherit
outline-color Setează culoarea unui outline color_namehex_numberrgb_numberinvertinherit
outline-style Setează stilul unui outline nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit
outline-width Setează latimea unui outline thinmediumthicklengthinherit
<!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">p {border:1px solid red;outline:green dotted thick;}</style></head><body>
3
<p><b>Nota:</b> IE8 suporta proprietatile outline numai daca este specificat un !DOCTYPE.</p></body></html>
CSS - MarginAtributul 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 - PaddingPadding 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 - ListeIn 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 {
4
background-image:url(image.png);background-repeat:no-repeat;background-position:0px 5px; padding-left:15px; }
Alinierea unei listeul.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 - PozitionarePozitionarea elementelor este de patru tipuri.
- statica- fixa- relativa- absoluta
CSS - Pozitionare staticaPozitionarea statica este valoarea standard in browser atribuita unui element cand vine vorba de pozitionare. CSS - Pozitionare fixaFolosind 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 relativaPozitionarea 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.
5
.pozitionare_relativa{position:relative; left:-15px;top:-30px;}
Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe elemente.
<style type="text/css">.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 absolutaElementele pozitionate absolut vor fi pozitionate in functie de primul element parinte care are o pozitionare non-statica. 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 CSSCu 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><style type="text/css">img{position:absolute;left:0px;top:0px;z-index:-1;}</style></head> & <body>
6
<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. z-index 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.
7
