Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Lesson 7

    Încărcat de

    Dragos Cazaceanu
    5 vizualizări23 pagini
    Lesson 7

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

    Drepturi de autor:

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

    Lesson 7

    Încărcat de

    Dragos Cazaceanu
    Lesson 7

    Drepturi de autor:

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

    <html>

    Lecia 7

    <h1>LECIA 7</h1>
    <ul>
    <li>List</li>
    <li>Table</li>
    <li>Pseudo-clase</li>
    <li>Pseudo-elemente</li>
    </ul>

    <html>

    List

    Atributele list din CSS permit stilizarea listelor

    Prin stilizarea listelor se poate specifica un marker diferit


    pentru elementele listei sau se poate folosi o imagine

    n HTML exist dou tipuri de liste: ordonate (<ol>) i


    neordonate (<ul>)

    <html>

    List

    Exempl stilizare (HTML)


    <html>
    <body>
    <p>Liste neordonate:</p>
    <ul class="a">
    <li>Cafea</li>
    <li>Ceai</li>
    <li>Bere</li>
    </ul>
    <ul class="b">
    <li>Rosu</li>
    <li>Negru</li>
    <li>Albastru</li>
    </ul>

    <p>Exemple de liste ordonate:</p>


    <ol class="c">
    <li>Primavara</li>
    <li>Vara</li>
    <li>Toamna</li>
    <li>Iarna</li>
    </ol>
    <ol class="d">
    <li>1900</li>
    <li>2000</li>
    <li>2100</li>
    </ol>
    </body>
    </html>

    <html>

    List

    Exemplu stilizare (CSS)


    ul.a {
    list-style-type: circle;
    }
    ul.b {
    list-style-type: square;
    }
    ol.c {
    list-style-type: upper-roman;
    }
    ol.d {
    list-style-type: lower-alpha;
    }

    <html>

    List

    Exemplu stilizare (OUTPUT)

    <html>

    List

    Folosirea unei imagini ca marker


    <html>
    <head>
    <style>
    ul.a {
    list-style-image: url("arrow.png");
    }
    </style>
    </head>
    <body>
    <ul class="a">
    <li>Cafea</li>
    <li>Ceai</li>
    <li>Bere</li>
    </ul>
    </body>
    </html>

    <html>

    List

    Proprieti
    Proprietate

    Descriere

    Valori posibile

    list-style

    Seteaz toate proprietile

    list-style-image

    Seteaz o imagine ca
    marker

    url(cale/catre/imagine.jpg);

    list-style-position

    Specific dac markerii


    trebuie s apar n
    interiorul coninutului sau
    n afara acestuia

    inside | outside

    list-style-type

    Specific tipul markerului

    disc | armenian | circle | decimal


    Vezi w3schools.com/cssref/pr_list-style-type.asp

    <html>

    Table

    Aspectul tabelelor poate fi mbuntit considerabil folosind


    CSS
    Fr CSS

    Cu CSS

    <html>

    Table

    Codul CSS folosit pentru tabelul de mai sus este:


    table {
    font-family: arial;
    border-spacing: 0px;
    }
    table th {
    background: #000;
    color: orange;
    padding: 5px;
    font-size: 13px;
    }
    table td {
    background: #EAEAEA;
    padding: 5px;
    font-size: 12px;
    }
    table td.nep {
    color: red;
    font-weight: bold;
    }

    <html>

    Table

    Pentru stilizarea tabelelor se pot aplica toate proprietile


    de CSS deja nvate (border, padding, background etc)
    Pentru afiarea unui chenar pentru tabel se poate folosi
    codul de mai jos:
    table {
    border: 1px solid #CCC;
    }

    Pentru afiarea unui chenar att pentru tabel ct i pentru


    celule se poate folosi codul de mai jos:
    table, td, th {
    border: 1px solid #CCC;
    }

    <html>

    Table

    Dac se specific un border att pentru tabel ct i pentru


    celule atunci chenar-ul va fi dublat, ca n exemplul de mai
    jos:
    Dac nu acesta este efectul
    dorit, se poate chenarul dublu
    se poate elimina folosind
    proprietatea border-collapse:
    table {
    border-collapse: collapse;
    }

    <html>

    Table

    Sintax proprietate border-collapse

    border-collapse: separate|collapse;

    <html>

    Pseudo-clase

    Pseudo-clasele permit stilizarea unei element care se afl


    ntr-o anumit situaie.
    De exemplu:
    - un element deasupra crui utilizatorul ine cursorul
    mouse-ului
    - un link care a fost deja vizitat
    Sintax:
    selector:pseudo-clasa {
    proprietate: valoare;
    }

    <html>

    Pseudo-clase

    Pseudo-clase pentru ancore


    /* link nevizitat */
    a:link {
    color: #FF0000;
    }
    /* link vizitat */
    a:visited {
    color: #00FF00;
    }
    /* mouse over pe un link */
    a:hover {
    color: #FF00FF;
    }
    /* link selectat */
    a:active {
    color: #0000FF;
    }

    <html>

    Pseudo-clase

    Combinare pseudo-clase i clase obinuite


    a.red:hover {
    color: #FFFF00;
    }

    <html>

    Pseudo-clase

    Pseudo-clasa :first-child
    :first-child selecteaz primul copil al unui anume printe
    <html>
    <head>
    <style>
    p:first-child {
    color: red;
    }
    </style>
    </head>
    <body>
    <p>Ana are mere.</p>
    <p>George are pere.</p>
    </body>
    </html>

    <html>

    Pseudo-clase

    Pseudo-clasa :first-child
    Primul span din fiecare paragraf
    <html>
    <head>
    <style>
    p span:first-child {
    color: red;
    }
    </style>
    </head>
    <body>
    <p><span>Ana</span> are <span>mere</span>.</p>
    <p><span>George</span> are <span>pere</span>.</p>
    </body>
    </html>

    <html>

    Pseudo-clase

    Selector

    Exemplu

    Explicarea exemplului

    :link

    a:link

    Selecteaz toate link-urile nevizitate

    :visited

    a:visited

    Selecteaz toate link-urile vizitate

    :active

    a:active

    Selecteaz toate link-urile active

    :hover

    a:hover

    Selecteaz link-urile cu mouse over

    :focus

    input:focus

    Selecteaz input-urile care au focus

    :first-child

    p:first-child

    Selecteaz elementele p <p> care sunt i primul copil


    din lista de descendei

    :lang(language)

    p:lang(ro)

    Selecteaz fiecare element <p> care are o valoare


    ncepnd cu "ro" pentru atributul lang

    <html>

    Pseudo-elemente

    Pseudo-elementele sunt expresii din limbajul CSS prin care


    se pot selecta pri dintr-un element.
    De exemplu:
    - prima liter dintr-un element
    - prima linie dintr-un element
    - Introducerea de coninut nainte sau dup un element

    <html>

    Pseudo-elemente

    Pseudo-elementul ::first-line
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    p::first-line {
    color: red;
    }
    </style>
    </head>
    <body>
    <p>Populaia oraului Timioara a fost
    iniiatoarea Revoluiei romne. ntre 16 i 20
    decembrie 1989, ea a purtat, de una singur, un
    nverunat rzboi cu unul dintre cele mai puternice i
    mai odioase sisteme represive din lume. A fost o
    ncletare cumplit pe care noi, timiorenii, o
    cunoatem la adevratele ei proporii.</p>
    </body>
    </html>

    <html>

    Pseudo-elemente

    Pseudo-elementul ::first-letter
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    p::first-letter {
    font-weight: bold;
    font-size: 30px;
    }
    </style>
    </head>
    <body>
    <p>Nu tiu alii cum sunt, dar eu, cnd m
    gndesc la locul naterii mele, la casa
    parinteasc din Humuleti ...</p>
    </body>
    </html>

    <html>

    Pseudo-elemente

    Pseudo-elementele ::before i ::after


    <html>
    <head>
    <meta charset="utf-8">
    <style>
    p::before {
    content: "{{{ ";
    color: red;
    }
    p::after {
    content: "}}} ";
    color: red;
    }
    </style>
    </head>
    <body>
    <p>"<i>Nu toate citatele de pe internet sunt autentice!</i>" Albert Einstein</p>
    </body>
    </html>

    <html>

    Pseudo-elemente

    Selector

    Exemplu

    Explicarea exemplului

    ::first-letter

    p::first-letter

    Selecteaz prima liter a elementelor <p>

    ::first-line

    p::first-line

    Selecteaz prima linie a fiecrui element <p>

    ::before

    p::before

    Introducere de coninut nainte de fiecare element <p>

    ::after

    p::after

    Introducere de coninut dup fiecare element <p>

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