Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Foi de Stiluri CSS

    Încărcat de

    Slava Ibun
    64 vizualizări12 pagini

    Titlu original

    43998475-Foi-de-stiluri -CSS

    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

    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
    64 vizualizări12 pagini

    Foi de Stiluri CSS

    Încărcat de

    Slava Ibun

    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 12

    Foi de stiluri (CSS)

    24.11.10

    Ce este un stil?
    Un stil reprezint o colecie de atribute ale textului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. Aceste atribute pot fi tipul de font, mrimea i grosimea acestuia, marginile, paragrafele i orice altceva ce poate influena aspectul textului n pagin. Stilurile aplicate unui document HTML au multe avantaje pentru creatorii de pagini Web: Ofer control crescut asupra aspectului i plasrii textului n pagin Reduc "nvlmeala" produs de multitudinea de deschideri i nchideri ale etichetelor care descriu elementele individuale ale textului Procesul de modificare a diferitelor elemente din pagin se simplific

    Tipuri de foi de stiluri


    Stilurile HTML pot fi aplicate ntr-o pagin Web n trei moduri: ncapsulate (embedded): stilurile sunt incluse n documentul asupra cruia se aplic, i anume n seciunea <HEAD> a documentului. Prin includerea lor n antetul documentului, stilurile rmn invizibile pentru vizitatorul paginii.

    Legate (linked): stilurile sunt definite n fiiere separate de documentul HTML. Documentul face
    apel la foaia de stiluri prin intermediul etichetei <LINK>. Folosirea acestui tip de stiluri face posibil utilizarea aceleiai foi de stil pentru documente diferite. De asemenea, este posibil aplicarea mai multor foi de stiluri pentru acelai document.

    In-line: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din document. Aceasta

    nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate. Este o modalitate mai puin utilizat deoarece contrazice principiul general al stilurilor, acela de a simplifica i de a face mai lizibil codul documentului HTML.

    Stiluri ncapsulate
    Crearea unui astfel de stil se realizeaz folosind eticheta <STYLE> </STYLE>.

    Eticheta <STYLE> este o etichet container, deci este obligatorie prezena etichetei de nchidere </STYLE>. ntre cele dou etichete se introduc definiiile de stil. Eticheta de stil este plasat n antetul documentului adic n seciunea <HEAD>.

    Exemplul 1
    n exemplul de mai jos este prezentat o definiie de stil care realizeaz afiarea tuturor titlurilor de nivel 1 (adic a textelor cuprinse ntre etichetele <H1> </H1>) cu caractere bold i de culoare verde. n plus, textele incluse ntre etichetele <P> </P> vor fi afiate cu fonturi arial, de mrime 2 i culoare violet. De asemenea, este creat un stil "normal" care poate fi aplicat asupra oricrui text. Prin intermediul su, textul este afiat cu caractere mai mari i de culoare oranj.

    <HTML> <HEAD> <TITLE>stiluri1</TITLE> <STYLE> <!-H1 {color: #008000; font-weight: bold} P {font-family: Arial; color: #800080; font-size: 14px} .normal {font-size: large; color: #FF8000} --> </STYLE> </HEAD> <BODY> <H1 align="center">Stiluri</H1><HR> <P>Textul din acest paragraf este formatat cu ajutorul stilurilor</P> Acesta este un text neformatat <H1>Titlu</H1> <SPAN class="normal">Acesta este stilul normal</SPAN> </BODY> </HTML>

    Stiluri legate foi de stiluri externe


    Stilurile incluse n pagin se aplic elementelor prezente n respectivul document HTML, reducnd dimensiunea codului i efortul de a defini fiecare element n parte. Aceast idee se poate extinde la nivelul mai multor documente care pot beneficia, toate, de aceleai stiluri, reunite ntr-o foaie de stiluri extern. O foaie de stiluri este un fiier text care conine regulile de stil definite n aceeai manier folosit la stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css. Foile de stiluri pot fi stocate ntr-un folder separat sau n acelai folder n care sunt plasate i documentele HTML. Apelul foilor de stiluri se poate realiza n dou moduri: folosind eticheta <LINK> folosind funcia @import Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LINK> conform urmtoarei sintaxe:

    <LINK rel="stylesheet" href="nume_foaie_stiluri.css">

    Exemplul 2
    In acest exemplu este construit o foaie de stiluri extern care va fi apelat cu ajutorul etichetei <LINK>. Foaia de stiluri a fost salvat sub numele stiluri1.css
    BODY {background-color: #CCFFCC; font-family: Arial, sans-serif; color: #330066; padding: 50px, 70px} A:link {color: #CC9900} A:visited {color: #660000} A:hover {color: #FFCC00} A:active {color: #FF0000} H1 {color: #996633; background-color: #FFFFCC} <HTML> <HEAD> <TITLE>stiluri3</TITLE> <LINK rel="stylesheet" href="stiluri1.css"> </HEAD> <BODY> <H1 align="center">Foi de stiluri externe</H1> Acest exemplu ilustreaza modul in care este inclusa in pagina o foaie de stiluri externa <P>Mai multe exemple in <A href="anexa1.html">anexa2</A> </BODY> </HTML>

    Stiluri in-line
    Spre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile in-line fac parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style n asociere cu etichetele HTML standard. Reinei, deci, c style poate fi att etichet n sine ct i atribut al altor etichete. Definiiile de stil in-line se aplic numai asupra elementelor incluse ntre etichetele care au asociat atributul style. Din acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui repetate, ncrcnd astfel documentul HTML. Totui, utilitatea stilurilor in-line este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt mai puternice dect cele din stilurile ncapsulate sau externe. Dac, de exemplu, am creat o foaie de stiluri pe care dorim s o aplicm unui document, i dac n cadrul acestui document avem un anumit element particular cruia dorim s-i dm un alt aspect dect cel prevzut n foaia extern, putem aplica acelui element un stil in-line care se va referi strict la el. Iat un exemplu de aplicare a unui stil in-line asociat etichetei <P>: <P style="color: red; font-family: arial; font-weight: bold">Textul din acest paragraf este scris cu fonturi arial, ingrosate, de culoare rosu</P> Observai c la stilurile in-line definiiile de stil sunt incluse ntre apostrofuri i nu ntre acolade, ca la celelalte tipuri de stiluri. Atunci cnd lucrai cu documente HTML deja existente crora dorii s le aplicai stiluri in-line, este recomandat s folosii etichetele <DIV> i <SPAN>. Acestea v permit s aplicai stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu suport stiluri.

    Exemplul 3 ilustreaz folosirea etichetei <SPAN>


    <HTML> <HEAD> <TITLE>stiluri4</TITLE> </HEAD> <BODY> <H1 style="color:red;font-famyly:arial">Stiluri in-line</H1><HR> <P>Textul din acest paragraf este divizat folosind eticheta span</P> <SPAN style="font-family:arial; color: blue">Text scris cu albastru si fonturi arial</SPAN><BR> <SPAN style="font-family: courier; size: medium; color:green">Text scris cu verde si fonturi courier medium</SPAN> </BODY> </HTML>

    Efecte obinute cu ajutorul stilurilor


    Aspectul textului Iat cteva atribute care se pot asocia cu diverse etichete HTML permind schimbarea aspectului textului.

    Bare de derulare colorate


    Unul dintre efectele des ntlnite n paginile Web este prezena barelor de derulare colorate. Acest efect se poate, de asemenea, obine prin aplicarea stilurilor. Pentru a defini culoarea barelor de derulare se folosesc cteva atribute, pe care le definim mai jos.

    n Exemplul 5 s-a construit o foaie de stiluri extern salvat sub numele stiluri5.css.
    BODY { scrollbar-face-color:blue; scrollbar-arrow-color:yellow; scrollbar-shadow-color:red; scrollbar-3dlight-color:yellow; scrollbar-track-color:cyan; }
    <HTML> <HEAD> <TITLE>stiluri8</TITLE> <LINK rel="stylesheet" href="stiluri5.css"> </HEAD> <BODY> <H1 align="center">Bare de derulare colorate</H1> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a <BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a <BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a <BR> </BODY> </HTML>

    Formulare colorate
    Exemplul care urmeaz (Exemplul 14.9) folosete stiluri in-line pentru a crea formulare colorate care pot da paginii un aspect mai atractiv. Am folosit pentru setarea culorilor codurile hexazecimale pe care le putei gsi n Anexa 3. Ca i la barele de derulare, culorile formularelor trebuie alese cu grij pentru a nu da paginii un aspect ncrcat i lipsit de bun-gust. Pagina descris n acest document arat ca n Figura 14.7. Exemplul 14. 9 <HTML> <HEAD> <TITLE>stiluri9</TITLE> </HEAD> <BODY> <H1 align="center">Formulare colorate</H1><HR> <FORM> <INPUT name="text" style="background-color: #00CCFF; color: #FFFFFF; font-weight: bold" value="Salut! "> <P> <TEXTAREA rows="5" cols="20" style="color: #0066CC; background-color: #CCCCCC; scrollbar-basecolor:red;">Care sunt impresiile tale?</TEXTAREA> <P> <INPUT type="submit" value="trimite" style="background-color: #0066CC"> </FORM> </BODY> </HTML>

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