Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • CSS Ro

    Încărcat de

    Ion Cristian
    71 vizualizări20 pagini
    Tutorial CSS in romana

    Titlu original

    CSS_ro

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Tutorial CSS in romana

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    71 vizualizări20 pagini

    CSS Ro

    Încărcat de

    Ion Cristian
    Tutorial CSS in romana

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 20

    CSS in relatie cu HTML

    Inainte de a continua si in cazul in care nu stapaniti HTML si XHTML va sfatuiesc sa cititi cele doua tutoriale. Ce veti invata in acest Tutorial CSS: cum sa scrieti corect cod CSS unde si cum trebuie plasat codul CSS sa faceti un layout, un meniu folosind CSS sa personalizezi campuri cu ajutorul CSS, si implicit formulare imagini transparente, galerie de imagini folosind CSS s.a.m.d.

    Acestea fiind spuse va invit sa cititi in continuare tutorialul CSS

    Introducere - De ce folosim CSS


    Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau imagine de fond si multe altele. In concluzie CSS te poate scapa de multe batai de cap, ajutandute in a mentine codul html cat mai simplu si mai ordonat.

    Introducere - Ce este CSS - Generalitati


    Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza tagurile HTML.. In principiu HTML a fost conceput pentru a marca elementele unei pagini:
    <html> <head> <title>......</title> </head> <body> <h1>......</h1> <p>........</p> </body> </html>

    Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-urilor precum "font", "color" etc. A fost atunci cand limbajul de programare HTML a devenit greoi. Fiecare pagina a websitului trebuia luata separat si modificate proprietatile elementelor principale. Aceasta problema a fost rezolvata in versiunea 4.0 a HTML-ului. Toate atributele de personalizare au fost scoase si salvate intr-un fisier extern cu extensia ".css". In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem personaliza div-uri, formulare si multe altele. Si cam atat despre ce face si ce este CSS-ul. In capitolul urmator vom trece la lucruri mai practice si vom invata cum anume sa facem tot ce am spus ca se poate face folosind CSS.

    Sintaxa CSS - Sau cum formulam codul


    Sa luam un exemplu practic pe care il vom studia putin.
    h1 { color: green }

    Ce inseamna mai exact? Ca "Titlul de marimea 1 are culoarea verde". Atat de simplu. Sa mai aruncam o privire:
    body { color: black }

    In traducere libera: "Culoarea de fond a continutului este negru" Incearca si tu:


    p { text-align: right;color: green}

    Exact la ce te gandeai si tu. Inseamna "Cai verzi pe peretele din dreapta". Lasand gluma la o parte am putea sa spunem ca sintaxa CSS este urmatoarea
    tag { atribut: valuare }

    sau
    element { proprietate: valuare}

    Oricare dintre cele doua expresii este adevarata.

    Observatii Si reguli de scriere a codului CSS


    In cazul in care valoarea elementului se compune din doua cuvinte le vom pune intre ghilimele
    p { font-family: "times new roman"}

    Daca vom scrie mai mult decat o proprietate le vom separa una de cealalta prin punct si virgula (;).
    p { text-align: right;color: green; }

    Recomandare: Va recomand sa scrieti toate aceste propietati una sub alta pentru o mai buna citire ulterioara a codului. Deasemenea va recomand sa puneti punct si virgula dupa toate proprietatile elementului chiar daca este ultima dintr-un sir sau daca elementul are o singura proprietate. Luand in calcul acestea codul CSS ar deveni urmatorul
    p{ text-align:right; color:green; font-family:"times new roman"; }

    O alta regula CSS spune ca mai multe elemente cu aceleasi proprietati se pot grupa dupa cum urmeaza

    h1, h2, h3, p { font-family:arial; color:green; }

    Comentarii CSS
    Comentariile in CSS au aceasi functie ca si comentariile HTML, de a specifica ce am facut intr-o anumita expresie, sau daca lipseste ceva sau orice altceva iti trece prin cap.
    /*Un comentariu se marcheaza asa*/ p{ text-align:right; color:green; /*Un comentariu se marcheaza asa*/ font-family:"times new roman"; }

    In capitolul urmator vom aborda clase si id-uri ale CSS-ului in html.

    CSS - Class si Id
    Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosii atributul class sau id.

    CSS - Atributul class


    Clasele de elemnte in CSS pot fi stabilite pentru un singur tag HTML sau pentru orice alt tag care are la atributul class valoarea stabilita anterior. Desi suna putin cam complicat este chiar simplu. Sa ne uitam la urmatorul exemplu care stabileste o clasa in CSS.
    p.center {text-align:center} p.right {text-align:right}

    Cu aceasta bucata de cod CSS am stabilit doua clase de paragrafuri, unul centrat si altul aliniat la dreapta. Acum le vom aplica in HTML.
    <p class="center">Paragraf centrat.</p> <p class="right">Paragraf aliniat la dreapta.</p>

    In cazul in care vrem sa folosim aceasi clasa pentru mai multe elemente vom elimina tagul <p> din numele clasei. Sa zicem ca vrem sa centram mai multe elemente. De exemplu un div, un titlu, un paragraf si o imagine. Putem folosi aceasi clasa.
    .center {text-align:center}

    Ar trebuii mentionat ca numele clasei ".center", este un nume generic si nu are nimic de-a face cu actiunea asupra unui tag. Se putea numi la fel de bine si ".clatitecugem".
    .clatitecugem {text-align:center} <div class="clatitecugem"> <h1 class="clatitecugem">Un titlu centrat</h1> <p class="clatitecugem">Clatitele cu gem sunt foarte bune, ele se fac de cate ori are chef nevasta-mea. Ma duc sa o intreb daca vrea (Tot acest paragraf va fi centrat in mijlocul divului).</p> </div>

    Cu toate acestea, va sfatuiesc sa folositi nume descriptive si intuitive. Sunt mult mai simple si servesc mai bine la intelegerea ulterioara a codului CSS Nota: Inceperea numelui cu un numar NU este recomandata. Clasele denumite gen: ".165464" sau ".6ceva" sunt interpretate doar de IE

    CSS - Id
    Id-ul se foloseste la fel ca si class. De fapt singura diferenta intre class si id este sintaxa de definire. Vom folosi un diez (#) in loc de punct pentru a defini id-ul in CSS
    #center { text-align:center; color:blue font-family:"sans serif" }

    CSS - Extern intern sau inline


    In momentul de fata codul CSS se poate stoca sau pune in trei locuri si anume:
    - fisier extern (.css) - in head - in tagul care se vrea personalizat (inline)

    CSS - Fisier .css extern


    In general fisierele externe de CSS sunt cele mai folosite. Este de recomandat sa folositi aceasta metoda pentru o mai simpla modificare a intregului website. In acest fel se poate modicica un site intreg schimband continutul unui singur fisier .css. Singura conditie este ca toate paginile sitului sa contina in sectiunea head tag-ul <link>.
    <head> <link rel="stylesheet" type="text/css" href="fisier_extern.css" /> </head>

    Un fisier CSS se poate scrie in orice editor de text, notepad, notepad++, word, macromedia, etc dar trebuiesc salvate cu extensia ".css" Un exemplu simplu de cod CSS ar fi urmatorul
    body { background-image: url("img/imagine.png"); } hr { color: #efefef;} p { margin-left: 15px;}

    Observatie: NU lasa spatiu intre numarul specificat si unitatea de masura. Folosind "margin-left:15 px;" in loc de "margin-left:15px;" va genera erori in Firefox si Opera.

    CSS intern
    Codul CSS in head, nu ar trebuii folosit prea mult cu exceptia faptului ca ai o pagina care are nevoie de un stil propriu si nu il imparte cu nici o alta pagina. Codul CSS intern este acelasi ca si la cel introdus intr-un CSS extern., cu exceptia unor taguri speciale care il incapsuleaza. Dar sa aruncam o privire la exemplul urmator.

    <head> <style type="text/css"> body { background-image: url("img/imagine.png"); } hr { color: #efefef; } p { margin-left:15px;} </style> </head>
    Dupa cum am mentionat anterior, pentru a plasa CSS in HTML vom folosi tagul <style> impreuna cu atributul type="text/css", pe care le vom pune in sectiunea head a documentului HTML.

    CSS inline
    CSS inline nu inseamna nici mai mult nici mai putin decat CSS in interiorul tagului HTML.. Folosind CSS-ul sub aceasta forma vom pierde toate avantajele pentru care a fost creat si anume pontru a nu amestega tagurile HTML cu formatarea si prezentarea lor. Exista totusi si avantaje in a folosi CSS-ul in aceasta maniera dupa cum vom vedea. Dar mai intai sa vedem cum anume se poate introduce CSS intr-un tag HTML.

    <p style="text-align:right;color:green;fontfamily:`times new roman`;marginleft:15px;">Acesta este un paragraf formatat cu ajutorul CSS.</p>

    Observatie: Dupa cum se observa in exemoplu anterior valoarea fontului este o valoare compusa din trei cuvinte. In acest caz in loc de ghilimele duble am folosit ghilimele simple pentru a evita conflictul cu ghilimele duble folosite pentru a incapsula valoarea atributului style. Sa mai aruncam o privire peste exemplul in discutie:
    style="text-align:right;color:green;fontfamily:`times new roman`;margin-left:15px;"

    Daca am folosii acelasi tip de ghilimele peste tot, browser-ul ar intrerpreta sfarsitul valorii inainte de vreme. Iata bucata de cod CSS care va fi interpretata de browser:
    style="text-align:right;color:green;font-family:"

    Restul codului CSS fiind ignorat.

    Prevalenta metodelor de a insera CSS in documentele HTML


    Dupa cum am spus codul CSS se poate insera in HTML dupa cum urmeaza: - fisier extern (.css) - in head - in tagul care se vrea personalizat (inline) Voi adauga acum si cea de-a 4-a modalitate si anume: - toate trei anterioare. Ce se intampla insa atunci cand formatam un element si folosim mai multe modalitati de inserare a CSS-ului? Ordinea de reproducere in browser va fi urmatoarea: 1. 2. 3. 4. Formatare CSS inline (in interiorul tag-ului HTML) Formatere CSS interna (in sectiunea head a documentului) Formatare CSS externa (fisier .css extern) Standardul browser-ului (valori CSS atribuite standard)

    Concluzie Formatarea inline anuleaza toate celelalte expresii CSS de formatare. Iar standardele de formatare ale browser-ului intervin doar atunci cand nu este specificata o alta formatare CSS. Exceptie: In cazul in care tagul <link> este pus dupa tagul <style> codul CSS aflat in fisierul .css extern va anula codul CSS intern.

    <head> <style type="text/css"> body { background-image: url("img/imagine.png"); } hr { color: #efefef;} p { margin-left: 15px;} </style> <link rel="stylesheet" type="text/css" href="fisier_extern.css" /> </head>

    CSS Background
    Pentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi urmatoarele atribute background-color background-image background-repeat background-attachment background-position

    Background solid
    body { background-color: #efefef; } h1 { background-color:red, } p { background-color:rgb(255,0,0); } div { background-color: black; }

    Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul hexadecimal, RGB sau folosind numele in engleza.

    Background imagine
    Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini pentru a crea un background-ul
    body { background-image: url("o_imagine.gif"); }

    Pentru a repeta imaginea doar pe verticala sau doar pe orizontala vom folosi urmatorul cod CSS:
    body { background-image:url("o_imagine.gif"); background-repeat:repeat-x; }

    Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cu efect gradient. Pentru a repeta inaginea pe verticala in loc de "repeat-x" vom folosi "repeat-y". Daca nu vrei ca imaginea sa se repete trebuie sa specifici acest lucru
    body { background-image:url("o_imagine.gif"); background-repeat:no-repeat; }

    Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu specificam altceva browserul va adauga: background-position:top left; ca valoare standard.

    CSS - background-attachment
    CSS background-attachment se foloseste pentru a pune ca background o imagine care se misca impreuna cu continutul sau pur si simplu este fixa. Sintaxa CSS ar fi urmatoarea:
    body { background-image:url("o_imagine.png"); background-repeat:no-repeat; background-attachment:fixed; }

    Scurtarea codului CSS


    body { background-color:#ffffff;

    background-image:url("o_imagine.gif"); background-repeat:no-repeat; background-position:top right; }

    Tot ce am scris mai sus se poate rezuma la expresia CSS de mai jos
    body { background-color: #ffffff url("o_imagine.gif") no-repeat top right; }

    Cand se foloseste varianta scurta a acestor atribute ordinea lor va fi mereu urmatoarea: -background-color -background-image -background-repeat -background-attachment -background-position Nu conteaza daca unul sau mai multe valori lipsesc atata timp cat se pastreaza aceasta ordine.

    CSS - Text
    Culoarea textului se poate exprima ca si la culoarea de background in sistemul hexadecimal, RGB sau cu numele in engleza a culori respective.
    body { color: #efefef; } h1 { color: red; } p { color: rgb(255,0,0); }

    Cu ajutorul atributului body vom specifica culoarea intregului text continut in pagina cu exceptia cazului in care specificam altceva.

    Alinierea textului
    h1 { text-align: center; } p { text-align: center; }

    In CSS ca si in HTML textul poate fi aliniat la dreapta, la stanga sau justificat (justified).

    CSS - Decorarea si transformarea textului in CSS


    Decorarea textului se foloseste atat pentru stabilirea cat si inlaturarea anumitor proprietati. Cel mai des intalnita este inlaturarea sublinieri linkurilor:
    a { text-decoration: none; }

    Alte valori folosite sunt


    h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } h4 { text-decoration: blink; }

    Folosind CSS putem transforma tot textul in majuscule in minuscule sau sa transformam prima litera a fiecarui cuvant in majuscula.
    p { text-transform: uppercase; } p { text-transform: lowercase; } p { text-transform: capitalize; }

    Tot aici voi mentiona si alinierea paragrafului (spatiu liber la inceputul randului)
    p { text-indent: 30px; }

    CSS Fonturi si familii de fonturi


    Exista doua tipuri principale de fonturi si anume "serif" si "sans serif". Intre ele nu este mare diferenta dar ceea ce este de retinut este ca: fonturile familiei "serif" sunt mai usor de citit. Pentru a specifica fontul cu ajutorul CSS-ului vom folosi codul urmator
    p { font-family: "Times New Roman",Georgia,Serif; }

    Dupa cum se poate observa se pot prestabili mai multe fonturi in cazul in care userul nu are instalat fontul principal, sau browser-ul nu suporta fontul respectiv.

    CSS - font style si font weight


    Font style si font weight in CSS se refera la text normal, inclinat sau ingrosat.
    p { font-style: normal; } p { font-style: italic; } p { font-weight: bold; }

    Sunt si alte valori pe care le pot lua atat font style cat si font weight dar cele de mai sus sunt cele care se folosesc in mod normal in CSS. Am ajaugat totusi o lista cu toate valorile acceptate ceva mai jos.

    CSS - Marimea textului


    Pentru a stabili marimea textului cu ajutorul CSS-ului vom folosii atributul "font-size" dupa cum urmeaza:
    h1 { font-size: 30px; } h2 { font-size: 20px; } p { font-size: 12px; }

    Exemplele de mai sus functioneaza foarte bine in Firefox Opera si Google Cherome, dar nu si in Internet Explorer problema apare atunci cand se mareste textul. Daca nu te intereseaza ca utilizatori paginii tale nu vor putea schimba marimea textului pentru o mai buna vizivilitate poti folosii expresiile de mai sus fara alte complicatii. Dar daca vrei sa elimini si aceasta problema poti folosi "em" ca unitate de masura. Unitatea de masura "em" este recomandata de w3.org si 1em=16px. Dupa cum se poate deduce, formula pt a calcula marimea textului in "em" este em=numar_pixeli/16.
    h1 { font-size: 1.875em; } h2 { font-size: 1.25em; } p { font-size: 0.75em; }

    CSS - font variant


    "Font variant" nu face in principu mare lucru dar nu strica amintit:
    p { font-variant: small-caps; }

    Expresia de mai sus transforma textul formatat cu ajutorul CSS in majuscule ceva mai mici decat cele normale.

    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 intr 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 + left padding + right padding + left border + right border + left margin + right 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 specificat. 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/xhtml1transitional.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 ajutiorul 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 hexazecimar, 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 care sper sa va lamureasca in privinta contruirii acestora: - 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; } Te las sa ghicesti. Desi deasupra am luat un exemplu de baza folosind border-style, aceleasi reguli se aplica la toate celelalte atribute mentionate in acest tutorial CSS.

    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 urmatorile proprietati: outline outline-color outline-style outline-width

    Outline deseneaza un chenar de jur imprejurul continutului Nota: Vezi tabelul de referinte pentru valori disponibile atributului outline.

    CSS - Margin
    Atributul margin stabileste "dupa cum zice si numele" 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 (margintop)marginea din dreapta si din stanga ( margin-right si respectiv margin-left), si cea de jos (marginbottom). Retine aceasta ordine intrucat iti va fi utila atunci cand stabilesti margin-ul folosind expresia scurta: margin: 30px margin: 30px margin: 30px margin: 30px bordurii) 20px 30px 50px; (sus, dreapta, stanga, jos) 20px 50px; (sus, dreapta si stanga, jos) 20px (sus si jos, dreapta si stanga) (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur imprejurul

    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, nuemere romane sau litere - neordonate - cerculete, buline, patratele etc. Atributul list din CSS permite modificarea tipului de lista sau sau folosirea unei imagini ca marcador. 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 marcador 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 marcador 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 comportanduse 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 emente.


    <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 absoluta


    Elementele pozitionate absolut vor fi pozitionate in functie de primul alement 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 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> <style type="text/css"> 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. 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.

    CSS - Elemente vizibile si elemente ascunse in css. Proprietatea display in css


    Vom folosi proprietatea display in css pentru a ascunde un element in html si proprietatea visibility pentrs a nu afisa acelasi element html. Intrebarea logica ar fi: Si care este diferenta?
    p.ascuns {visibility:hidden;}

    visibility:hidden; ascunde paragraful pastrand insa spatiul rezervat in cursul paginii. Celelalte elemente se vor comporta ca si cand paragraful ar fi afisat pe pagina chiar daca acesta nu este vizibil.
    p.ascuns {display:none;}

    display:none; ascunde paragraful fara sa pastreze spatiul rezervat acestuia in pagina. Celelalte elemente vor ocupa spatiul rezervat acestuia.

    Afisarea elementelor in block sau inline


    Exista elemente html care sunt delimitate de celelalte elemente sau de elemente de acelasi tip printr-un salt in linie (enter, line break, br). Spunem ca aceste elemente sunt afisate in block. - <h1>, <h2>, <h3>, etc - <div> <p>, <li> Deasemenea exista elemente care sunt afisate in pe acelasi rand fara sa influienteze cursul pagini. -<span>, <a> Spunem ca aceste elemente sunt afisata inline. Cu ajutorul CSS afisarea elementelor poate fi schimbata si anume putem afisa elemente precum div paragraf etc inline si elemente precum linkuri span etc in block.
    div {display:inline;}

    Exemplul de mai sus va afisa toate div-urile pe aceasi linie.Se foloseste in general cu clase sau id in css pentru a personaliza doar div-urile care se vor personalizate. Ex: bara de meniuri orizontala
    div.bara_orizontala {display:inline;}

    Mai jos am exemplificat un link afisat in block, introducand un salt in linie inainte si dupa el.
    a {display:block;}

    Se foloseste in general cu clase sau id in css pentru a personaliza doar link-urile care se vor personalizate. Ex: sidebar.
    a.sidebar_links {display:block;}

    Proprietatea float in css.


    Float se foloseste in geeral pentru crearea de template-uri si pentru galerii de imagini, dar are mult mai multe intrebuintari. Folosind atributul float elementele vor pluti unul langa altul sau unul in continuarea celuilalt atat cat spatiul rezervat lor o permite. Acesttip de aliniere se refera la o alinire orizontala si nu verticala a elementelor. Sa luam un exemplu practic. Vrem sa facem o galerie de imagini (thumbs) si vrem ca imaginile in miniatura sa fie afisate una langa cealalta in linii si coloane. float:left; va afisa thumb-urile una langa cealalta pe o linie atat cat latimea paginii permite, sarind pe linia urmatoare atunci cand urmatoarea imagine nu incape. Un alt exemplu. Vrem sa afisam o imafine aliniata la dreapta sau la stanga si vrem ca aceasta sa fie inconjurata de text. float:left; sau float:right; va afisa textul in stanga sau in dreapta imaginii depinde de cum a fost aliniata anterior.
    img { float:left; } sau .clasa_de_elemente { float:left; }

    CSS - Ruperea randului - Atributul clear


    Toate elemenetele html care sunt situate dupa alementul aliniat cu float right sau left vor pluti langa acesta. Pentru a impiedica sa se intample acest lucru atunci cand nu vrem sa se intample vom folosi atibutul clear cu valoarea both:
    .enter { clear:both; }

    Bara de navigare in CSS


    De cate ori ai intrat pe un site si ai te-ai gandit: "Cum a facut bara de navigare?". Iata si raspunsul: Pornind de la cod HTML simoplu si stilizandule cu ajutorul CSS. In general pentru a crea o bara de navigare fie ea orizontala sau un meniu vertical sunt folosite listele HTML care ulterior sunt personalizate folosind CSS. Linkuri normale in interiorul tagului <li> care va fi incapsulat in tagul <ul> Am atasat mai jos codul html necesar:

    <ul> <li><a <li><a <li><a <li><a </ul>


    Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none - pentru a inlatura "bulinele" specifice listei. Deasemenea vom inlatura marginea si pading-ul pe care browser-ul il atribuie ca valoare standard.
    ul{ list-style-type:none; margin:0; padding:0; }

    href="#">Acasa</a></li> href="#">Articole</a></li> href="#">RSS feed</a></li> href="#">Contact</a></li>

    Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara orizontala.

    CSS - Bara verticala de meniu


    Pentru a un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea blocului. Sa trecem la treaba.
    a{ display:block; width:100px; }

    ***Nota Desi nu este absolut obligatoriu sa stabilim latimea blocului de elemente, va recomand insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi distorsionata. In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In continuare aveti insa un meniu terminat si finisat decent zic eu. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia.
    ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; font-size:20px; color:#fff; background-color:#d2691e; width:200px;

    padding:8px; text-decoration:none; } a:hover,a:active { background-color:#daa520; } <ul> <li><a href="#">Acasa</a></li> <li><a href="#">Articole</a></li> <li><a href="#">RSS Feedt</a></li> <li><a href="#">Contact</a></li> </ul>

    Am pus aici si rezultatul.

    CSS - Bara verticala de meniu


    Pentru a crea o bara de meniu orizontala in css putem folosi, ori atributul inline, pentru a forta elementele listei sa fie insirate pe aceasi line, ori atributul floating pentru aforta elementele listei sa fie afisate unul langa celalalt.

    Folosind inline
    Pentru a crea o bara de meniuri orizontale cu atributul inline nu trebuie decat sa adaugam urmatoarea linie de cod CSS.
    l i { display:inline; }

    Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine enter-urile inainte si dupa acestea afisand link-urile pe aceasi linie.

    Folosind float
    Vm folosi atributul float pentru a afisa elementele listei unul langa celalalt. Vom folosi deasemenea atributul display:block; pentru a afisa linkul ca si un buton si vom stabili latimea acestuia. Iata csi codul CSS aferent.
    li { float:left; } a{ display:block; width:60px; }

    Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia. In caz contrar acesta va ocupa toata latimea disponibila. Codurile afisate anterior sunt suficiente pentru a crea o bara de meniuri orizontala folosind CSS In continuare aveti insa un meniu terminat si finisat. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia si sa va jucati putin. Am atasat aici doua modele de meniu orizontal, unul folosind inline si altul folosind float. Succes!!!

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