Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Tehnici Web

    Încărcat de

    Madalina Georgescu
    13 vizualizări18 pagini
    curs 4

    Titlu original

    tehnici web

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    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
    curs 4

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    13 vizualizări18 pagini

    Tehnici Web

    Încărcat de

    Madalina Georgescu
    curs 4

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 18

    Stiluri, Layer-e

    Documentaie pentru stiluri

    http://www.w3schools.com/css3/ http://www.w3.org/Style/CSS/

    Stiluri
    Grupeaz diverse atribute pentru diferite obiecte (taguri), n special text. Sintaxa:
    CSS (Cascading Style Sheets) JavaScript

    Sintaxa se specific cu <meta http-equiv=content-style-type content=text/css />

    1. Stiluri n pagin
    Se pun n <head>...</head> <style> selector descriere </style> selector indic cui i se aplic stilul descriere {atr1:val1; atr2:val2} h1 {text-align:center; color:red}

    Selectori
    1. Elementul * *{color: red;} 2. Elementele cu nume de tag existent n HTML p {color: red;}

    Selectori
    3. Elementele de forma .numecls selecteaz coninutul elementelor cu class=numecls .numecls {color: red;} 4. Elementele de forma #numeid selecteaz coninutul elementului cu id=numeid #numeid {color: red;}

    Selectori
    5. Selectorul poate fi obinut dintr-o combinaie de mai multe elemente p i em {color: red;} p > em {color: red;} h1 + p {color: red;} *[align=center] {color: red;} #a div>p, p.b[align] {color:red;}

    Selectori
    6. Pseudo-selectorii indic clase create automat de pagin :first-letter, :first-line, :hover, :focus, :visited, :link, :active, etc.

    2. Stiluri in-line
    Sunt definite chiar n tagul care le folosete, cu ajutorul atributului style. Valoarea lui style este definiia stilului care n loc de acolade este cuprins ntre ghilimele <p style="background:blue; color:red">

    3. Stiluri definite n fiiere externe


    Se pune ntr-un fiier cu extensia .css definiia stilului ca n blocul <style> (dar fara <style>) n <head> <link rel=stylesheet href=fisier.css type=text/css />

    Prioritatea stilurilor
    Numai pt. atributele ce intr n conflict Stiluri in-line Stiluri din blocul <style>, are prioritate stilul cel mai recent definit Stiluri din fiiere externe, are prioritate stilul cel mai recent definit Stilul default

    Layer-e
    Un strat reprezint un bloc de elemente HTML ntr-o pagina pot fi definite oricte straturi Straturile pot fi suprapuse parial sau total Straturile pot fi transparente sau opace Straturile pot fi plasate cu precizie ntr-o pagina i pot avea dimensiuni exacte Straturile pot fi imbricate unul n altul

    Layer-e: Definirea
    Proprietile stratului se definesc cu ajutorul unui stil Coninutul stratului se introduce cu tagurile: <div class=nume_stil> </div> <span class=nume_stil> </span>

    Layer-e: Poziionarea
    Atributele: position cu valorile: - absolute (nu se rezerv spaiu) - relative (se rezerv spaiu) - static - fixed top i left cu valori procente sau numere ntregi urmate de unitatea de msur (default px)

    Layer-e: Dimensionarea
    Atributele: width, height Valori: Numere ntregi urmate de unitatea de msur (px, pt, mm) Procente din dimensiunea printelui Auto - stabilit de browser

    Layer-e: Vizibilitatea
    Atributul visibility cu valorile: visible hidden (sau display : none) Atributul clip cu valorile: rect (top, right, bottom, left)

    Layer-e: Stiva
    Straturile sunt puse ntr-o stiva n ordinea n care au fost introduse n pagin Aceast ordine poate fi modificat cu atributul z-index

    Layer-e: Alte aspecte


    Pot avea multe alte atribute Pot fi definite in-line <div style=>

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