CSS-ul poate fi folosit in trei moduri: intern, extren si inline (in dreptul fiecarui element, in interiorul codului). Noi ne vom ocupain special de cele interne si externe, deoarece acestea sint cele pe care ar trebui sa le foloseasca un web designer veritabil. In acest curs vom acoperi structurile de baza al modului cel mai usor de utilizare al CSS-ului. Atunci cind folosesti CSS intern, trebuie sa adaugi un nou tag, <style>, i ninteriorul tag-ului <head>. Codul de mai jos contine un exemplu de utilizare al tag-ului <style>.

Code
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. </style>
  5. </head>
  6. <body>
  7. <p>Continutul paginii tale de internet aici</p>
  8. </body>
  9. </html>

Acest cod nu face de fapt nimic vizibil. Acest tag <style> ii spune browser-ului ca urmeaza sa definim un stil CSS pe care il vom folosi in pagina.

Creearea codului CSS intern

Codul CSS nu este scris in acelasi mod ca si codul HTML. Asta are sens, deoarece CSS nu este HTML, dar mai degraba o metoda de a manipula HTML-ul. Mai jos avem un exemplu de cod CSS simplu, dar functional.

Code
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p {color: white; }
  5. body {background-color: black; }
  6. </style>
  7. </head>
  8. <body>
  9. <p>Continutul paginii tale de internet aici</p>
  10. </body>
  11. </html>

Afisare:
Continutul paginii tale va arata asa

Tag-urile HTML. Un lucru grozav la CSS este ca limbajul e foarte intuitiv. Odata inteles formatul general al codului CSS, drumul spre invatare nu mai e lung.

Formatul general al codului CSS

  • “Tag HTML” { “Proprietate CSS” : “Valoare” }
Intorcindu-ne la exemplul nostru, in el am controlat aspectul tag-urilor HTML <p> si <body>. Pentru a clarifica, vom merge pas cu pas in explicarea primei linii de cod CSS in care ne-am jucat cu <p>.
  • am ales elementul HTML pe care am vrut sa-l controlam. -p { : ; }
  • apoi am ales culoarea atributului CSS. -p { color: ; }
  • apoi am ales culoarea fontului sa fie alba. -p { color : #FFFFFF }
Acum intregul text din tag-ul paragraf va fi alb. Acum, o explicatie a codului CSS care a schimbat tag-ul <body>:
  • am ales elementul HTML body. – body { : ; }
  • am ales apoi atributul CSS. – body { background-color : ; }
  • apoi am ales ca fundalul sa fie negru. body { background-color : #000000 ; }
Pina te vi obisnui cu codul CSS, vei observa probabil ca CSS-ul tau nu functioneaza chiar cum ai vrea. Una dintre cauze ar putea fi un : , ; , { sau } nelalocul lui sau care lipseste. Intoarce-te pe aceasta pagina ori de cite ori ai intrebari legate de formatul corect al CSS-ului.

Ce trebuie retinut in legatura cu CSS-ul intern

  • aseaza codul CSS intre <style> si </style>
  • asigura-te ca stii sintaxa / formatul corect al codului CSS
  • CSS-ul iti va salva ore bune din timpul de lucru…
Optiuni pentru acest articol:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • RSS
  • StumbleUpon
  • Technorati
  • Faves
  • MySpace
  • Reddit
  • Twitter
  • email
  • Print
  • PDF

Related posts:

  1. Curs CSS: CSS extern
  2. Curs CSS: Selectoare CSS
  3. Titluri de Pagina
  4. Curs HTML: Introducerea de obiecte in pagina
  5. Formatarea Textului