CSS - Ce este si cum functioneaza?

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial CSS - Ce este si cum functioneaza?

Mesaj Scris de Cassius Dio la data de Dum 12 Mai - 10:12

CSS - Ce este si cum functioneaza?

Bun gasit! Foarte fericit

Sageată In acest tutorial ne propunem sa facem o introducere despre CSS si foaia de stil.

I. Introducere despre CSS

Sageată CSS este un limbaj de calculator folosit pentru a personaliza redarea grafica a paginilor web. Acest limbaj ofera o multime de beneficii pentru paginile web si actualmente este suportat de orice browser modern.
CSS este acronim cu Cascading Style Sheets, iar in limba romana se poate traduce - Foaie de stil CSS.

II. Functionarea codurilor

Sageată Scrierea unui cod CSS se incepe printr-un selector. Cele mai folositi selectori in CSS sunt clasele, id-urile si elementele in sine. Pentru a indica browser-ului ca selectorul este o clasa vom scrie denumirea clasei cu un punct "." inainte; pentru id cu "#"; iar pentru element - nu vom scrie decat denumirea elementului.
- Exemple pentru clase: .bodyline, .forumline (phpBB2), .post, .postbody (toate versiunile);
- Exemplu pentru id: #wrap (phpBB3), #page-body (toate versiunile);
- Exemplu pentru element: div, body, table (toate versiunile).
In HTML acestea vor fi reprezentate dupa cum urmeaza:
- Pentru clase:
Cod:
<div class="clasa">Continut</div>
- Pentru id:
Cod:
<div id="identificator">Continut</div>
- Pentru element:
Cod:
<div>Continut</div>
Exclamare Id-ul nu trebuie sa se repete intr-o pagina web. Asadar, daca doriti sa atribuiti mai multe id-uri elementelor acestea trebuie sa fie diferite.

Sa presupunem ca avem deja acele coduri in pagina noastra si ca dorim sa le personalizam aspectul prin CSS. Vom adauga in foaia de stil CSS:
Cod:
div{
background-color: blue;
}

.clasa{
background-color: yellow;
}

#identificator{
background-color: red;
}
In acest exemplu am personalizat culoarea de fundal prin proprietatea background-color.

Putem adauga si o pagina CSS externa. Se foloseste acest cod in interiorul tag-ului <head>:
Cod:
<link rel="stylesheet" type="text/css" href="foaiameadestil.css" />
Unde foaiameadestil.css reprezinta link-ul catre pagina CSS.

Daca dorim sa adaugam codurile direct in pagina HTML, folosim:
Cod:
<style type="text/css">
div{
background-color: blue;
}

.clasa{
background-color: yellow;
}

#identificator{
background-color: red;
}
</style>

Dupa cum puteti observa, codurile CSS sunt introduse intre doua acolade "{" si "}" si proprietatile sunt separate prin punct si virgula ";". Selectorii insa sunt adaugati inainte de deschiderea acoladei "{".

Puteti adauga si un comentariu pe langa coduri, care nu vor influenta in nici un fel aspectul paginii. Comentariul se adauga in acest fel:
Cod:
/* Comentariul meu aici */

III. Balizele rudimentare

  • Pentru text:
    - personalizare culoare:
    Cod:
    selector{
    color: #culoare;
    }
    #culoare - exemple de culori

    - alinierea textului:
    Cod:
    selector{
    text-align: parte;
    }
    parte - left (stanga) | center (centru) | right (dreapta)

    - schimbarea font-ului:
    Cod:
    selector{
    font-family: titlu;
    }
    titlu - exemple font-uri

    - marime text:
    Cod:
    selector{
    font-size: Xpx;
    }
    X - dimensiunea in pixeli a textului

    - subliniere text:
    Cod:
    selector{
    text-decoration: tip;
    }
    tip - none (nimic) | underline (subliniat) | overline (subliniat deasupra) | line-through (taiat)

    - text cursiv:
    Cod:
    selector{
    font-style: italic;
    }

    - text ingrosat:
    Cod:
    selector{
    font-weight: bold;
    }



  • Pentru obiecte:
    - culoare de fundal:
    Cod:
    selector{
    background-color: #culoare;
    }
    #culoare - exemple de culori

    - imagine de fundal:
    Cod:
    selector{
    background-image: url(link);
    }
    link - adresa URL catre imaginea de fundal

    - chenar:
    Cod:
    selector{
    border: Xpx tip #culoare;
    }
    X - grosimea in pixeli a chenarului
    tip - solid (obisnuit) | dotted (punctat) | dashed (liniar-intrerupt) etc.
    #culoare - exemple de culori

    - spatiu interior:
    Cod:
    selector{
    padding: Xpx;
    }
    sau:
    Cod:
    selector{
    padding-left: Xpx;
    padding-right: Xpx;
    padding-top: Xpx;
    padding-bottom: Xpx;
    }
    X - spatiu in pixeli gol in interiorul elementului HTML

    - spatiu exterior:
    Cod:
    selector{
    margin: Xpx;
    }
    sau:
    Cod:
    selector{
    margin-left: Xpx;
    margin-right: Xpx;
    margin-top: Xpx;
    margin-bottom: Xpx;
    }
    X - spatiu liber in pixeli intre elemente HTML

    - inaltime si latime:
    Cod:
    selector{
    height: Xpx;
    width: Xpx;
    }
    X - dimensiunea in pixeli


IV. Adaugarea codurilor
Forumgratuit.ro va pune la dispozitie foaia de stil CSS, cu ajutorul careia puteti adauga propriile coduri CSS. Puteti insera codurile chiar in foaia de stil, si acestea vor fi functionabile pe orice pagina de forum; sau le puteti adauga intr-o pagina HTML daca aveti nevoie.

Va reamintim ca foaia de stil se afla in:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

Iar paginile HTML in:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Administrare pagini HTML
Exclamare In paginile HTML se adauga fie o foaie de stil externa, fie codurile CSS se scriu in interiorul elementului <style>, dupa cum s-a mentionat la capitolul II.
Daca veti selecta Da pentru optiunea Doriti sa utilizati partea de sus si de jos a paginii forumului dvs.? CSS-ul va fi preluat automat din foaia de stil CSS. Bineinteles, acest lucru nu va impedica sa adaugati si alte coduri in pagina HTML.

Exemple de cateva coduri "gata-facute":
- schimbarea culorii link-urilor la deplasarea cursorului peste ele:
Cod:
a:hover{
color: #008DFF;
}

- schimbarea culorii de fundal a forumului:
Cod:
body{
background-color: #008DFF;
}

- inserarea in chenar a forumului:
Cod:
#wrap, #ipbwrapper, .pun, .bodyline{
border: 1px solid #008DFF !important;
}

Succes! Noroc

Tutorial scris de Alex Fowl, tradus si completat de SGSS

Copyright ? Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 83
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum