»  Pagina principala  »  Tutoriale »  Introducere in CSS (Cascading Style Sheets)

Introducere in CSS (Cascading Style Sheets)

CSS ofera Web designerilor multe facilitati, inleslindu-le astfel munca. Cu CSS se poate seta marimea fonturilor, atributele acestora (italic, bold, underline etc.), marginile paginilor, culori, pozitionare, vizibilitate si multe altele.

Folosind CSS puteti aplica mai multe atribute la fiecare tag pe care il folositi in paginile Dumneavoastra. Aceste atribute sunt exprimate in "reguli"; o regula este facuta dintr-un selector (tagul la care se aplica) si o declaratie (atributele care trebuie aplicate). De exemplu, daca vrem sa setam tagurile <P>  sa afiseze textul de 12 point Ms Sans Serif cu fundal galben cream urmatoarea regula: p { font-family: "ms sans serif"
font-size: 12pt; background-color: yellow; }
In regula de deasupra, P este selectorul -- codul HTML la care se va aplica stilul. Acolade marcheaza inceputul si sfarsitul declaratiei de stil care se aplica la selector. Este foarte important sa separam fiecare declaratie cu punct si virgula ";"
Haideti sa pornim cu un simplu cod HTML <html>
  <head>
    <title>Welcome to my Web Page</title>
  </head>

  <body>
    <h1>Welcome to my Web Page</h1>
    <p>Today I'm going to learn CSS</p>
  </body>
</html>
Acum haideti sa adaugam un stil! Schimbam tributele tagului <H1> pentru headerul nostru si <P> pentru pagina noastra introducand urmatorul cod in tagul <HEAD> al documentului HTML.
<STYLE TYPE="text/css">
<!--
P { font-family: "ms sans serif";
    font-size: 12pt;
    background-color: yellow; }
H1 { font-family: "impact, arial";
    font-size: 35pt;
    color: blue; }
-->
</STYLE>
Adaugarea atributelor la taguri specifice pot fi folositoare, dar designerii de obicei nu se gandesc sa conceapa paginile lor dupa modul in care sunt asezate tagurile <H1> si <P> . De obicei pagina se desparte in continuturi cum ar fi "header," "continut," "nav bar," etc. CSS inlesneste atribuirea de stiluri prin folosirea claselor. Subiect pe care il voi aborda intr-un articol pe acest site mai tarziu.





Comentarii




Voteaza acest articol!
 



Trimite un comentariu!

Nume *
E-mail *
Comentariu *
  Vreau sa fiu anuntat de urmatoarele mesaje la acest articol

Security image

Bilen Mujdaba

A inceput ca freelancer in 1999 iar acum lucreaza la melbo.ro ca grafician web si colaboreaza cu mai multe tipografii. Specializat in grafica vectoriala: Adobe Illustrator si Corel Draw, lucreaza si in programe de editare grafica: Adobe Photoshop. De asemenea detine cunostinte de html, css si Macromedia Flash.
http://www.melbo.ro

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php