Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Foile de Stil CSS (Cascading Style Sheets)

    Încărcat de

    Dan Hagea
    22 vizualizări16 pagini

    Titlu original

    4. Foile de Stil CSS (Cascading Style Sheets) (1)

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPTX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    22 vizualizări16 pagini

    Foile de Stil CSS (Cascading Style Sheets)

    Încărcat de

    Dan Hagea

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 16

    Grafic

    Cursul 3. CSS (Cascading Style


    Sheets)

    Lect.univ.dr. Daniel MICAN


    daniel.mican@econ.ubbcluj.ro

    CSS (Cascading Style Sheets)

    CSS este un standard W3C pentru definirea prezentrii


    documentelor scrise n HTML
    CSS definete cum vor fi afiate elemente HTML
    CSS este un limbaj separat cu propria sintax
    Stilurile, n mod normal, trebuie salvate n fiiere CSS
    externe
    Foile de stil externe permit schimbarea aranjrii i
    aspectului tuturor paginilor dintr-un site Web, doar prin
    simpla editaree a unui singur fiier CSS
    Stilurile CSS au rezolvat o mare problem i salveaz o
    mulime de timp n activitile de dezvoltare a site-urilor
    web
    CSS funcioneaz prin asocierea unor reguli elementelor
    HTML

    Reguli CSS
    O regul CSS conine dou pri: un selector i o declaraie.
    Declaraie
    selector { proprietate:
    valoare; }
    Selectorii indic crui element i se aplic regula.
    Declaraiile indic cum ar trebui s fie stilizate
    elementele menionate prin intermediul selectorului.
    Proprietile indic aspectele elementului pe care dorim
    s le modificm.
    Valorile specific setrile pe care dorim s le utilizm
    pentru proprietile alese.

    Bloc de declaraii CSS

    selector {
    proprietate1: valoare1;
    proprietate2: valoare2; bloc de declaraii
    proprietate3: valoare3;
    }

    Inserarea declaraiilor CSS n paginile


    HTML

    Inserarea declaraiilor CSS n cadrul paginilor HTML se


    realizeaz in trei moduri:

    Foaie de stil extern (declarat ntr-un fisier CSS extern)


    Foaie de stil intern (declarata n seciunea de head a
    documentului HTML)
    Stilul declarat inline (declarat n interiorul unui element
    HTML)

    Adugarea declaraiilor CSS n foile de


    stil externe

    ead>
    nk rel="stylesheet" type="text/css" href="stiluri.css">
    ead>

    Fiierul stiluri.css conine urmtorul cod CSS:


    h1 { color: red; }
    p { color: blue; }

    Adugarea declaraiilor CSS n foaia de


    stil intern

    <head>
    <style>
    h1 { color: red; }
    p { color: blue; }
    </style>
    </head>

    Adugarea declaraiilor CSS inline

    <h1 style = "color: red"> Titlu </h1>

    <p style = "color: blue"> Paragraf </p>

    Selectorii CSS
    Selectorul universal - se aplic la toate elementele din
    document
    * {}
    Se aplic tuturor elementelor de pe pagin
    Selectorul de tip - se aplic numelor de elemente
    h1, h2, h3 {}
    Se aplic elementelor <h1>, <h2> i <h3>
    Selectorul de clas - se aplic unui element al crui
    atribut clas are o valoare care se potrivete cu cel
    specificat dup simbolul . (punct)
    .azorel {}
    Se aplic tuturor elementelor care au atributul class egal
    cu azorel
    p.azorel {}
    Se aplic doar elementelor <p> al cror atribut class
    este egal cu azorel

    Selectorii CSS

    Selectorul ID - se aplic unui element al crui atribut id-ul are o


    valoare care se potrivete cu cel specificat dup simbolul # (diez)
    #cnp {}
    Se aplic elementului a crui atribut id este egal cu cnp
    Selectorii grupai- se aplic numelor de elemente specificate
    h1, p, em, img {}
    Se aplic elementelor <h1>, <p>, <em> i <img>

    Selectorii CSS
    Selectorul copil - se aplic unui element care este un copil
    direct al unui alt element
    li>a {}
    Se aplic elementelor <a> care sunt coninute n cadrul unui
    element <li>
    Selectorul descendent - se aplic unui element care este
    un descendent din cadrul unui alt element specificat (nu doar
    unui copil direct al acestui element)
    p a {}
    Se aplic elementelor <a> care sunt coninute n cadrul unui
    element <p>, chiar dac exist i alte elemente imbricate
    ntre ele

    Agregarea n cascad a stilurilor


    Agregarea se face respectnd urmtoarea ordine, innd cont
    c declaraiile inline au cea mai mare prioritate:

    Foaia de stil implicit a browser-ului


    Foaie de stil extern (declarat ntr-un fiier CSS extern)
    Foaie de stil intern (declarat n seciunea de head a
    documentului HTML)
    Stilul declarat inline (declarat n interiorul unui element
    HTML)

    <html>
    <head>
    <title>Exemplu de agregare in cascada a stilurilor</title>
    <link rel="stylesheet" type="text/css" href="stilulmeu.css">
    <style>
    h1{color: red;}
    p{color: blue;}
    </style>
    </head>
    <body>
    <h1 style="color: indigo">Titlu</h1>
    <p style="color: violet">Paragraf</p>
    <body>
    </html>
    Codului CSS coninut n cadrul fiierului stilulmeu.css:
    h1{color: green;}
    p{color: orange;}

    <html>
    <head>
    <title>Exemplu de specificitate si prioritate</title>
    <style>
    * { color: blue; }
    h1 { color: purple; }
    p b { color: violet; }
    b { color: orange; }
    b { color: red; }
    p { color: chocolate; }
    p#abstract{ color: green; }
    </style>
    </head>
    <body>
    <h1>Titlu</h1>
    <p id="abstract">Acesta este un <b>abstract</b></p>
    <p>Acesta este un text dintr-un paragraf</p>
    Acesta e un text <b>oarecare</b>
    <body>
    </html>

    Motenirea in CSS

    Motenirea se poate folosi pentru a crea un avantaj atunci


    cnd scriem foile de stil.
    De exemplu, dac dorim ca toate elementele de tip text s
    fie formatate cu fontul Verdana avem dou opiuni:
    Am putea scrie declaraii pentru fiecare element din
    cadrul documentului HTML i s setm proprietatea fontface astfel nct textul s fie formatat cu Verdana
    s scriem o singur regul de stil prin care s se aplice
    proprietatea font-face la elementul <body>, iar toate
    elementele de tip text incluse n elementul <body> s
    moteneasc acel stil

    <html>
    <head>
    <title>Exemplu de mostenire</title>
    <style>
    body {
    font-family: Arial, Verdana, sans-serif;
    font-weight: bold;
    color: blue;
    background-color: yellow; }
    .cutie {
    color: white;
    background-color: green;
    border: 1px solid red; }
    .cutiutza {
    color: gold; }
    </style>
    </head>
    <body>
    <div>
    <p>Mostenesc de la body fontul, proprietatea bold si culoarea albastra</p>
    </div>
    <div class="cutie">
    <p>Mostenesc de la body fontul si proprietatea bold. Dar am culoarea alba,
    culoarea de fundal verde si bordura rosie.</p>
    <div class="cutiutza">
    <p>Mostenesc de la body fontul si proprietatea bold. Am culoarea aurita, dar
    mostenesc culoarea de fundal verde de la cutie. Bordura nu se mosteneste.</p>
    </div>
    </div>
    <body>
    </html>

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