Utilizarea Tehnicii CSS

download Utilizarea Tehnicii CSS

of 15

Transcript of Utilizarea Tehnicii CSS

  • 8/8/2019 Utilizarea Tehnicii CSS

    1/15

    I.3. Utilizarea tehnicii CSS10 pentru formatarea documentelor Web

    De ce CSS?

    Aplicarea stilurilor reprezint o extindere important a posibilitilor de stilizare, evitnd

    utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i

    manipularea lor greoaie.

    Folosind stilurile HTML putei fi siguri c vizitatorii paginii dumneavoastr vor vedea

    pagina exact aa cum a fost ea proiectat.

    I.3.1. Ce este un stil?

    A stiliza nseamn a da unui obiect o form corecti expresiv. Un stil reprezint o

    colecie de valori ale atributelor elementelor unui document, valori care pot fi aplicate

    ntregului document sau doar unei pri din acesta. Aceste atribute pot fi: mrimea,

    grosimea, tipul i culoarea fontului, marginile, paragrafele i orice altceva ce poate influena

    aspectul unui element, deci a unei pagini. Gruparea lor n stiluri permite designer-ului saplice aceeai colecie la diferite pri ale unui document. Folosirea stilurilor reduce

    considerabil efortul depus atunci cnd dorii s aducei modificri aspectului i aranjrii

    elementelor din paginile dumneavoastr. n loc s parcurgei fiecare document n parte i s

    facei modificri asupra fiecrui element, operai modificri numai asupra foii de stiluri care

    stilizeaz aceste elemente.

    Sintaxa general a unei declaraii de stil este:

    list_selectori{proprietatea1:list_valori1;

    proprietatea2:list_valori2;

    proprietatean:list_valorin;

    }

    Selectorii sunt utilizai pentru determinarea elementelor HTML asupra crora vor fiaplicate stilurile.

    Urmtorul segment de cod definete proprietile font, font-size, colori text-align pentru

    nivelele de titlu H1, H2 i H3:

    H1,H2,H3 {font-family:Arial,Garamond;text-align:center}11H1 {font-size:18px;color:red;background-color:gray}

    H2 {font-size:16px;color:blue}

    10Cascading Style Sheets n englez11 n scrierea definiiei unui stil este posibil s grupm selectorii n liste, separai prin virgul

  • 8/8/2019 Utilizarea Tehnicii CSS

    2/15

    20

    H3 {font-size:14px;color:blue}

    I.3.2. Definiii de stil

    Stilurile pot fi aplicate elementelor unui document n trei moduri:

    La nivel de element12: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din

    document. Aceasta nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate.

    Este o modalitate mai puin utilizat, deoarece contrazice principiul general al stilurilor, acela

    de a simplifica i de a face mai lizibil codul documentului HTML.

    ncapsulate13: stilurile sunt incluse n documentul asupra cruia se aplic, i anume n

    seciunea a documentului, prin utilizarea marcajului .

    Legate14: stilurile sunt definite n fiiere separate de documentul HTML. Documentul

    face apel la foaia de stiluri prin intermediul etichetei . Avantajul folosirii foilor de stiluri

    externe este dublu. Pe de-o parte, ele se pot aplica la nivelul mai multor documente HTML,

    realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. Pe

    de alt parte, acelai document poate folosi foi de stiluri diferite, oferind vizitatorului

    posibilitatea de a opta la un moment dat, pentru unul sau altul dintre ele, n func ie de

    propriile preferine.

    Includerea stilurilor ntr-un document HTML:

    V

    12inlinen englez13embedded n englez14linkedn englez

    legate

    H1 {color: #008000; font-weight: bold}P {font-family: Arial; color: #800080; font-size: 14px}

    ncapsulate

  • 8/8/2019 Utilizarea Tehnicii CSS

    3/15

    Principii generale ale proiectrii interfeelor Web 21

    I.3.2.1 Definiii de stil inline

    Spre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile inline fac

    parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style nasociere cu etichetele HTML standard.

    Definiiile de stil inline se aplic numai asupra elementelor incluse ntre etichetele care

    au asociat atributul style . Din acest motiv, dac dorim s repetm n alt loc din cuprinsul

    documentului aceleai definiii de stil, ele vor trebui scrise din nou, ncrcnd astfel

    documentul HTML. Totui, utilitatea stilurilor inline este aceea c fiind definite chiar n

    cuprinsul documentului, definiiile lor sunt prioritare fa de cele din stilurile ncapsulate sau

    externe.

    Stil inline pentru acest paragraf

    Exemplu: pagina urmtoare conine o definiie de stil pentru al II-lea titlu de nivel 315

    care nu se aplici celorlalte titluri de acelai nivel.

    I.3.2.2 Definiii de stil ncapsulate (interne)

    Crearea unui astfel de stil se realizeaz folosind eticheta . Eticheta de

    stil este plasat n antetul documentului adic n seciunea .

    15 textele cuprinse ntre etichetele

  • 8/8/2019 Utilizarea Tehnicii CSS

    4/15

    22

    Exemplu: pagina conine o definiie de stil care realizeaz afiarea tuturor titlurilor de

    nivel 1 cu caractere bold i culoare gri. Textele incluse ntre etichetele

    vor fi afiate

    cu fontul arial, de mrime 12 i culoare violet. De asemenea, este creat un stil "stil_text"

    care poate fi aplicat oricrui text. Prin intermediul su, textul este afiat cu caractere de

    dimensiuni mai mari i culoare roie.

    Exemplu: pagina conine o definiie de stil ncapsulat i dou de stil inline.

    Atunci cnd lucrai cu documente HTML deja existente, crora dorii s le aplicai stiluri

    inline, este recomandat s folosii etichetele i . Acestea v permit s aplicai

    stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu

    suport stiluri.

    Eticheta funcioneaz asemntor cu eticheta

    , marcnd un ntreg bloc de

    coninut, dar fr a genera linii albe ntre paragrafe.

  • 8/8/2019 Utilizarea Tehnicii CSS

    5/15

    Principii generale ale proiectrii interfeelor Web 23

    Eticheta este similar cu eticheta aplicndu-se elementelor dintr-o

    poriune mic a documentului, de la cteva cuvinte, la cteva linii.

    I.3.2.3 Definiii de stil extern

    O foaie de stiluri este un fiier text care conine reguli de stil definite n aceeai manier ca la

    stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css.

    Apelul foilor de stiluri se poate realiza n dou moduri:

    folosind eticheta

    folosind funcia @import

    Metoda importului (@import) este puin mai lent, fiind posibil s dureze o secund,dou, pn se ncarc foaia de stil, timp n care coninutul este afiat fr formatarea

    designer-ului.

    Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei

    conform urmtoarei sintaxe:

    Exemplu: pagina urmtoare utilizeaz foaia de stiluri stil.css, prin intermediul

    etichetei cu atributul rel="stylesheet". Atributul href al etichetei are ca valoarenumele16 foii de stiluri apelate. Am utilizat i proprietatea background-repeat pentru

    introducerea unei imagini pe fundal i repetarea ei doar pe axa Ox.

    16i adresa relativ, dac este necesar

    stil.css

    body{background-image:url(i4.gif);background-repeat:repeat-x;background-color:gray;}

    h2{color:yellow}.semafor{color:red;Font-Family:Arial Black;background-color:yellow}

    Referirea unei foi de stil externe

    Pentru acest document am folosit un fisier de tip foaie de stil in interiorul caruia am definit 3 stiluri:

    pentru corpul documentuluipentru titlurile de nivel 2un stil pentru punerea in evidenta a unor pasaje de text, stil numit semafor

  • 8/8/2019 Utilizarea Tehnicii CSS

    6/15

    24

    O regul de stil poate s-i mreasc prioritatea dac este nsoit de declaraia"!important":P {font-size:12pt!important; font-style:italic }

    I.3.3. Stiluri n cascad

    Cele trei tipuri de stiluri pot fi combinate n cadrul aceluiai document. Relaiile dintre

    diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode.

    Browserul rezolv conflictul dintre definiiile de stiluri respectnd urmtoarea regul:

    stilurile inline au cea mai mare prioritate, apoi cele interne i, n cele din urm, stilurile

    externe, cu prioritate minim.

    Dac ne referim la "care dintre cele 3 definiii de stil este mai bun", standarde WEB indic:

    utilizarea foilor .css pentru definirea caracteristicilor care se aplic la formatarea prii

    comune a tuturor paginilor unui document

    utilizarea stilurilor ncapsulate pentru definirea caracteristicilor care se aplic la formatarea

    unei anumite pagini;

    utilizarea stilurilor inline pentru definirea caracteristicilor care se aplic la formatarea unuianumit element.

    I.3.4. Clase de stiluri

    Acestea permit definirea unui stil general (aplicabil n mai multe locuri n cadrul

    aceleiai pagini sau n pagini diferite) n vederea inserrii lui oriunde este necesar prin

    intermediul unei simple referiri. S presupunem c dorim s definim o clas de stiluri "ftext"

    (pe care dorim s o aplicm anumitor poriuni de text pentru a le face s apar de culoare

    roie, aliniate la stnga, avnd culoarea de fundal gri i mrimea fontului de 14).

    all.ftext{text-align:left; color:red;}

    Cuvntul standard "all" aflat n faa clasei de stiluri "ftext" indic faptul c aceast

    clas este aplicabil tuturor blocurilor de text, atunci cnd este necesar. Practic clasa de

    stiluri "ftext" poate fi asociat tuturor tagurilor HTML care opereaz cu text (ca de exemplu:

    H2, H3, P, DIV, etc...) utiliznd n interiorul fiecrui tag vizat o referire explicit la aceast

    clas:

  • 8/8/2019 Utilizarea Tehnicii CSS

    7/15

    Principii generale ale proiectrii interfeelor Web 25

    Dac dorim ca o clas de stiluri s fie aplicabil numai pentru anumite elemente aledocumentului (spre exemplu pentru paragrafele de text desemnate prin marcajul deparagraf "p"), atunci n construcia clasei va aprea acest element (de exemplu "p.ftext").

    Dac dorim s aplicm aceast clas de stiluri unui titlu de nivel 2, atunci scriem:

    Acest header este aliniat la stanga si are culoarea rosie

    Dup cum s-a vzut, pentru apelarea unei clase de stiluri n vederea aplicrii sale

    elementului tag curent se folosete atributul "class", avnd ca valoare numele clasei de stil.

    mpreun cu specificaia "all" din definirea clasei de stiluri, atributul "class" devine un atribut

    universal, adic va putea fi asociat tuturor tagurilor HTML crora li se poate aplica.

    Exemplu: acest exemplu conine o definiie de clas aplicabil doar textelor

    desemnate prin marcajul

    .

    I.3.5. Stiluri identificator

    Denumirea stilurilor identificator este dat de modul n care este asociat stilul respectiv

    unui element, prin intermediul atributului id. Definirea unui stil identificator este similar cu a

    unei clase de stiluri. Vom folosi id-uri doar pentru stilizarea elementelor dintr-o pagina care

    apar doar o singura dat, altfel, folosirea claselor este recomandat.

    # nume_stil { descriere }

    Utilizarea stilului identificator se realizeaz incluznd n interiorul etichetei elementului

    de text secvena:id = nume_stil

    Exemplu: acest exemplu conine dou definiii de stil de tip identificatorcap i corp.

  • 8/8/2019 Utilizarea Tehnicii CSS

    8/15

    26

    I.3.6. Pseudoclase i pseudoelemente

    Pseudoclaselecontroleaz comportamentul dinamic al unor elemente, cum ar fi

    legturile. n CSS, o legtur poate avea 5 stri ce corespund la 5 pseudoclase:

    Atribut Semnificaie

    :link descrie starea normal a unei legturi:visited descrie o legtur vizitat:hover descrierea aspectul legturii cnd aceasta primete focusul:active descrie starea activ a unei legturi:focus descrie o legtur selectat

    Exemplu: n aceast pagin hiperlegturile vor fi subliniate i vor avea culoarearoie. Legturile vizitate sunt scrise cursiv, cele active sunt afiate cu caractere aldine17, iar

    legtura care deine focusul este reprezentat cu majuscule.

    17 italice

  • 8/8/2019 Utilizarea Tehnicii CSS

    9/15

    Principii generale ale proiectrii interfeelor Web 27

    Exemplu: paginaurmtoareutilizeaz foaia de stiluri test.css. n documentul HTML

    am inclus i o legtur, pentru a exemplifica modul n care foaia de stiluri schimb culorile

    legturii.

    Pseudoelementele controleaz aspectul anumitor poriuni ale unui element, cum ar fi

    prima linie a unui paragraf sau prima liter a unui text. Astfel, pentru formatarea paragrafelor,

    avem urmtoarele pseudoelemente:

    selector:first-line {descriere} descrie aspectul primei linii a unui paragraf;selector:first-letter {descriere} descrie aspectul primei litere a unui paragraf;

    unde selector poate descrie orice element de text.

    Exemplu: n aceastpagin am utilizat pseudoelementul first-letter.

  • 8/8/2019 Utilizarea Tehnicii CSS

    10/15

    28

    I.3.7. Stiluri pentru listelist-style-type

    Folosind eticheta ol din HTML putem crea liste ordonate sau numerotate. Adugnd

    comenzi CSS n zona HEAD putem aduga pe lng numere i cifre, alte simboluri.

    Browserul Netscape nu permite asocierea comenzilor CSS dect pentru eticheta li.

    li {list-style-type: valoare;}

    valoare semnificaie

    disc disccircle cercsquare ptratdecimal numere ntregilower-roman numere romane, caractere mici (i, ii, iii, iv)upper-roman numere romane, caractere mari (I, II, III, IV)upper-alpha litere mari (A, B, C, D)lower-alpha litere mici (a, b, c, d)none nimic

    Exemplu: pagina urmtoare conine o list ordonat care utilizeaz ca marcatori literele mari

    ale alfabetului englez

  • 8/8/2019 Utilizarea Tehnicii CSS

    11/15

    Principii generale ale proiectrii interfeelor Web 29

    list-style-image

    n afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite i

    imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url().

    Exemplu: pagina urmtoare conine o list ordonat folosind ca marcaj imaginea i4.gif.

    Exemplu: pagina urmtoare conine un meniu structurat ca o listi stilizat folosind CSS.

    Pentru a crea un sistem de navigare bazat pe o list neordonat18, mai inti se creeaz lista,

    plasnd fiecare legatur ntr-un element . Apoi, se ncadreaz textul cu i i se

    asociaz un id corespunztor.

    18 marcat cu ajutorul tagului

  • 8/8/2019 Utilizarea Tehnicii CSS

    12/15

    30

    I.3.8. Casete n CSS

    Elementele cu care lucreaz HTML sunt afiate

    de browser n interorul unei zone dreptunghiulare ca

    n figur alturat, unde:

    marginea19 este spaiul exterior chenarului

    pn la celelalte elemente,

    chenarul20 este o bordur care nconjoar

    elementul,

    completarea21 stabilete distana dintre coninut i chenar,

    19margin n englez20bordern englez21paddingn englez

  • 8/8/2019 Utilizarea Tehnicii CSS

    13/15

    Principii generale ale proiectrii interfeelor Web 31

    coninutul include informaia util (text, tabele, imagini, formulare etc.) .

    Exemplu: pagina urmtoare conine 3 definiii de clase utiliznd proprietile border-

    width, border-style i border-colori o imagine poziionat la 50px fa de latura stngi

    25px fa de latura de sus i bordat cu chenar portocaliu.

    I.3.9. Poziionare n CSS

    Poziionarea permite aezarea unui obiect ntr-un anume loc folosind coordonatele

    sale. Totodat obiectele pot fi poziionate pe straturi diferite, unul deasupra celuilalt. O astfel

    de aezare se poate face utiliznd atributul position.

    Att poziionarea absolut ct i cea relativ folosesc proprietile lefti top exprimate n px

    (pixeli), in (inci), pt (puncte), cm (centimetri).

    Poziionarea absolut plaseaz obiectul n pagin exact n locaia data de left i top.

    Astfel poate fi creat un element liber fa de celelalte din pagina. Obiectul poate fi orice, de

    exemplu text sau imagine.

    Exemplu: am aplicat poziionarea absolut etichetei h3.

    Poziionarea relativ este poziionarea unui element n funcie de elementele

    anterioare. Un element poate fi deplasat fa de altul folosind proprietile left i top.

  • 8/8/2019 Utilizarea Tehnicii CSS

    14/15

    32

    Exemplu: n pagina urmtoare cuvintele sunt poziionate relativ unul fa de cellalt.

    Poziionarea tridimensional

    Elementele sunt poziionate pe ecran pe o suprafa bidimensional dar pot fi

    aezate i unul deasupra celuilalt, ntr-o stiv utiliznd un indicativ (index-z) ncepnd cu 0,urmtorul 1 i tot aa, n continuare. Elementul cu indexul cel mai mare este aezat

    deasupra.

    Exemplu: pagina urmtoare conine 3 imagini poziionate absolut i suprapuse.

    I.3.10. Notaii i uniti de msur

    Foile de stil utilizeaz dou tipuri de uniti de lungime:

    relative: exprim o dimensiune n raport cu alt dimensiune ,

    absolute: exprim o dimensiune fix.

    Uniti de msur relative:

    http://www.drogoreanu.ro/tutorials/css/exemplu8_2.htmlhttp://www.drogoreanu.ro/tutorials/css/exemplu8_2.html
  • 8/8/2019 Utilizarea Tehnicii CSS

    15/15

    Principii generale ale proiectrii interfeelor Web 33

    Care este diferena dintre CSS i HTML?HTML-ul este utilizat pentru structurareaconinutului unei pagini, iar CSS-ul este

    utilizat pentru formatarea acestuia.

    em-reprezint limea literei M relativ la fontul utilizat22,

    ex- reprezint nlimea literei 'X' relativ la fontul utilizat,

    px-pixeli (dimensiunea este dependent de rezoluia calculatorului) .

    Uniti de msur absolute:

    in-inch (1in=2.54cm),

    cm-centimetri,

    mm-milimetri,

    pt-punct tipografic(1pt=1/72 in).

    Culori

    Atributul culoare pentru un obiect poate fi specificat printr-un cuvnt cheie (aqua, black, blue,

    fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si yellow ) sauprin intermediul unei specificaii numerice RGB. Acestea sunt luate din paleta VGA

    Windows. Specificarea unei culori n forma hexazecimal RGB se prefixeaz cu caracterul #

    i conine ase cifre hexazecimale.

    URL23este soluia aleas de World Wide Web Consortium, pentru specificarea unei resurse

    (unui site sau a unei pagini) n Internet. Sintaxa general este:

    :///

    unde

    protocol este protocolul folosit (de cele mai multe ori HTTP),

    nume_DNS este numele domeniului pe care se afl resursa,

    nume_local este format din calea i numele resursei de pe discul local.

    22 Mrimea celorlalte caractere este ajustat n funcie de acesta23Uniform Resource Locator