Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Seminar 02 V2 - Enunturi

    Încărcat de

    Claudia Neacsu
    2 vizualizări10 pagini
    web design

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

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

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    web design

    Drepturi de autor:

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

    Seminar 02 V2 - Enunturi

    Încărcat de

    Claudia Neacsu
    web design

    Drepturi de autor:

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

    WEB DESIGN

    SEMINAR 2
    CSS
    Proprieti CSS pentru text
    color culoarea textului
    text-align alinierea orizontal. Valori posibile:
    center
    right
    justify
    text-decoration decoraiuni pentru text. Valori:
    overline
    line-through
    underline
    blink
    text-transform transformare n majuscule sau
    minuscule. Valori posibile:
    uppercase tot textul n majuscule
    lower-case tot textul n minuscule
    capitalize prima liter a fiecrui cuvnt este majuscul
    text-indent alinierea primului rnd dintr-un paragraf
    Proprieti CSS pentru caractre
    font-family determin familia de caractere
    font-style valori posibile:
    normal
    italic
    oblique
    font-size mrimea caracterelor, exprimat:
    Absolut, folosind px
    Relativ, folosind em: pixels/16 = em
    font-weight greutatea caracterelor. Variante:
    lighter
    normal
    bold



    Exerciiul 2.1
    Continutul fiierului ex_2-1.html:
    <html>
    <head>
    <link rel=stylesheet type=text/css
    href=stiluri_ex_2-1.css />
    </head>
    <body>
    Introducei coninutul aici!
    </body>
    </html>

    Coninutul fiierului stiluri_ex_2-1.css:
    h1 {
    font-size: 18px;
    color: red;
    }
    Completai stilurile!

    Exerciiul 2.1
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    font-size: 25px;
    color: red
    }
    h2 {
    font-size: 20px;
    color: blue;
    text-align: center;
    }
    .class_1 {
    text-align: justify;
    text-indent: 30px;
    }
    .class_2 {
    color: green;
    font-size: 20px;
    }
    #subliniat {
    text-decoration: underline;
    }
    </style>
    </head>
    <body>
    <h1> Titlul este scris cu H1, mrime 25 px si culoare rosie</h1>
    <h2> Titlul H2 este de 18 px, albastru, centrat </h2>

    <p class="class_1">Pentru a determina stilul primului paragraf,
    folositi o clasa CSS, denumita clasa_1. Primul paragraf are alinierea
    de 30px si aliniament "justify", astfel nct toate rndurile sunt
    aliniate la marginea din stanga si din dreapta a paginii, prin
    introducerea unui numar variabil de spatii intre cuvinte.</p>

    <p class="class_2">Al doilea paragraf foloseste class_2, este scris
    cu verde si are dimensiunea de 20px.</p>

    <p id="subliniat">Pentru al treilea paragraf folosim un selector
    de element, pe care il numim #subliniat</p>

    </body>
    </html>


    CSS motenirea atributelor
    Noiunea de cascad definete ce proprieti modific
    un anume element
    Se refer la 3 concepte:
    Importan: browser, user, autor
    Specificitate cea mai specific regul are prioritate
    Ordinea ultima definiie are prioritate
    Ierarhia specificitii:
    Stilurile embedded (n seciunea <head>) au specificitate
    mai mare dect stilurile externe
    Specificitatea n funcie de selectori (ascendent):
    Selectorii de tip (body)
    Selectorii de clas (.copyright)
    Selectorii de element (#paragraf)
    Regulile in-line (<p style=color:red>) au preceden fa
    de cele definite n selectori.

    Exerciiul 2.2
    Creai un fiier CSS extern. Introducei un selector de tip, care
    specific culoarea galen pentru eticheta body:
    body {
    color: yellow;
    }
    Creai un fiier HTML (folosind structura din exemplul anterior) n
    care introducei un singur paragraf: <p>Culoarea textului
    demonstreaza conceptul de cascada a atributelor</p>. Textul
    trebuie s apar n culoarea galben;
    Introducei n seciunea <head> a documentului HTML o regul CSS
    care specific culoarea verde pentru eticheta body. Textul trebuie
    s apar n culoarea verde;
    Introducei o regula care definete clasa .blue-text albastru.
    Modificai paragraful astfel nct s foloseasc clasa blue, trebuie
    s apar n albastru;
    Introducei o regul de element: red text rosu. Folositi-o pentru
    paragraf, textul trebuie s apar n rou;
    Introducei o regula in-line care schimb culoarea textului n
    magenta.

    Exerciiul 2.2 - rezolvare
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    color: yellow;
    }

    #red {
    color: red;
    }

    .blue {
    color: blue;
    }
    </style>
    </head>
    <body>
    <p class="blue" id="red" style="color: magenta">Culoarea
    textului demonstreaza conceptul de cascada a atributelor.</p>
    </body>
    </html>

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