Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Familiarizarea Cu CSS PDF

    Încărcat de

    mueramon
    4 vizualizări6 pagini

    Titlu original

    6. Familiarizarea cu CSS.pdf

    Drepturi de autor

    © © All Rights Reserved

    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

    Drepturi de autor:

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

    Familiarizarea Cu CSS PDF

    Încărcat de

    mueramon

    Drepturi de autor:

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

    Laborator 6

    Stilizarea textului
    În ceea ce privește stilizarea textului acesta cuprinde două aspecte:

     Structurile de tip text – p, h1,h2,etc sau care pot include text – body, table, div
     Stilizarea la nivel de font

    În primul caz menționăm o serie de proprietăți care pot fi utilizate, conform W3Schools1

    color Stabilește culoarea textului


    direction Stabilește direcția textului
    letter-spacing Permite mărirea sau micșoreare distanței dintre litere
    text-align Stabilește alinierea pe orizontală a textului
    text-decoration Permite adăugare de efecte pe text
    text-indent Permite indentarea primului rând al unei structuri de text
    text-transform Stabilește utilizarea de litere mari sau mici în text
    vertical-align Stabilește alinierea pe verticală a textului
    word-spacing Permite mărirea sau micșoreare distanței dintre cuvinte

    Exercițiul 1

    Exemplele de mai jos vor fi testate pe o structură de tip paragraf și una de tip titlu de nivel 1

    p {color:blue;}

    h1 {text-align:center;}
    p {text-align:right;}

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

    p {text-transform:uppercase;}
    apoi
    p {text-transform:lowercase;}

    În ceea ce privește stilizarea fonturilor vor fi studiate următoarele proprietăți:

    font Permite includerea tutoror celorlalte definiții într-una singură


    font-family Stabilește tipul fontului

    1
    http://www.w3schools.com/css/css_text.asp
    font-size Stabilește dimensiunea fontului
    font-style Stabilește stilul fontului
    font-weight Stabilește grosimea fontului

    Exercițiul 2

    Testați următoarele definiții pe unul din paragrafele de mai sus:

    p{font-family:"Times New Roman", Times, serif;}

    În ceea ce privește tipul de font utilizat se utilizează în general o combinație între un tip de font, subfamilia din
    care acesta face parte, familia de fonturi, astfel încât în cazul în care browserul pe care s vizualizează o pagină
    Web nu suportă acel tip de font, se va utiliza un font disponibil din cadrul subfamiliei sau al familiei.
    Detalii despre tipuri de font și familii:

    http://www.w3schools.com/css/css_font.asp

    p {font-style:normal;}
    p {font-style:italic;}
    p {font-style:oblique;}

    Dimensiunea fontului se poate stabili în pixeli sau în em. Ea poate fi calculată în valori absolute sau
    relative la dimensiunes celorlalte elemente din jur.

    Dimensiunea implicită este de 16 px.

    p {font-size:14px;}

    p {font-size:0.875em;} /* 14px/16=0.875em */

    În cadrul seminarului se va discuta diferența între utilizarea pixel vs em.

    Utilizarea CSS în vederea stilizării fundalului unei pagini Web


    Prezentăm mai jos proprietățile de bază utilizate în astfel de cazuri și câteva cazuri de utilizare.

     background-color – permite definirea culorii de fundal


     background-image – permite inserarea unei imagini de fundal
     background-repeat – permite stabilirea modului în care se repetă imaginea de fundal pe axa
    XY
     background-attachment – permite stabilirea unei imagini fixe sau a unei imagini cu effect de
    scrolling în cadrul paginii.
     background-position – permite poziționarea imaginii de fundal
    Exercițiul 3

    Utilizați proprietățile de mai sus în cadrul selectorului Body pentru a exemplifica utilizarea acestora.

    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Pagina exemplu 2 </title>
    <style>
    Body
    {background-color:#336633}
    </style>
    </head>
    <body>

    </body>
    </html>

    Utilizați o imagine de dimensiunea 200*200 pixeli drept fundal al unei pagini. În exemplul de mai jos imaginea
    utilizată este – Fundal.jpg

    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Pagina exemplu 2 </title>
    <style>
    Body
    {background-image:url('fundal.jpg');}
    </style>
    </head>
    <body>

    </body>
    </html>

    Verificați pe rând utilizarea următoarelor proprietăți

    Body
    {background-image:url('fundal.jpg');
    background-repeat:no-repeat}

    Body
    {background-image:url('fundal.jpg');
    background-repeat:repeat-x}

    Body
    {background-image:url('fundal.jpg');
    background-repeat:repeat-y}

    Body
    {background-image:url('fundal.jpg');
    background-repeat: no-repeat;
    background-position:right top}

    În caz general se poate utiliza proprietatea background pentru a introduce mai multe proprietăți

    body {background:#336699 url('fundal.jpg') no-repeat right top;}

    Stilizarea hyperlegăturilor

    Legăturile pot fi stilizate utilizând proprietățile legate de text, dar există și proprietăți speciale care
    vizează starea legăturilor în momentul utilizării acestora:

     a:link – link nevizitat


     a:visited - link vizitat
     a:hover – link-ul în momentul trecerii cu mouse- peste
     a:active – link-ul în momentul apăsării click

    Exercițiul 4

    Se va discuta stilizarea unui meniu de navigare utilizând stiluri CSS, luând în considerare cazul practic
    de mai jos:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:# 3333CC;
    text-align:center;
    padding:5px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

    </style>
    </head>

    <body>
    <ul>
    <li><a href="# ">Link 1</a></li>
    <li><a href="# ">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="# ">Link 4</a></li>
    </ul>
    </body>
    </html>

    Modelul Box

    Un aspect important în stilizarea elementelor cu CSS este așa-numitul Model Box. Acest model
    stabilește că fiecare element de structură din cadrul unei pagini Web poate fi văzut ca o cutie
    (dreptunghi) definită prin următoarele proprietăți:

     Margin – Permite stabilirea unei zone libere transparente în exteriorul bordurii


     Border – Permite adăugarea unei borduri în jurul elementului luat în considerare
     Padding – Permite stabilirea unei zone libere transparente în interiorul bordurii
     Content – conținutul elementului – text, imagine , etc

    Modelul de mai sus permite stabilirea de borduri și spațieri între elementele din cadrul unei pagini
    Web.

    Sursa: http://www.w3schools.com/css/css_boxmodel.asp

    Exercițiul 5

    Exemplificați Modelul Box în cazul structurii DIV de mai jos. Calculați dimensiunea totală a
    elementului, luând în considerare valorile din cadrul exemplului.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.ex
    {
    width:200px;
    padding:10px;
    border:5px solid black;
    margin:0px;
    }
    </style>
    </head>

    <body>
    <div class="ex">Acesta este un paragraf exemplu </div>
    </body>
    </html>

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