Index

Introducere în CSS

Sintaxa CSS de bază

Să presupunem că vrem o culoare roșie ca fundal al unei pagini web:

Utilizând HTML am fi putut declara:

	<body bgcolor="#FF0000">

Cu CSS același rezultat poate fi atins astfel:

	body {background-color: #FF0000;}  

După cum veți observa, codurile sunt mai mult sau mai puțin identice pentru HTML și CSS. Exemplul de mai sus, de asemenea, arată modelul CSS fundamental.

Anatomia unei declarații

O regulă constă din două părți:

 

Aplicarea CSS la un document HTML

Există trei moduri în care puteți aplica CSS la un document HTML. Aceste metode sunt toate prezentate mai jos. Se recomandă să se folosească cea de a treia metodă anume cea cu fișier extern.

Metoda 1: in-line (stilul atribut)

O modalitate de a aplica CSS pentru HTML este folosind stilul atribut HTML. Bazându-se pe exemplul de mai sus cu culoarea de fundal roșu, acesta poate fi aplicat astfel:

	<html>
  	  <head>  		
			<title>Example</title>
  	  </head>
  	  <body style="background-color: #FF0000;">  		
			<p>This is a red page</p>  	  
     </body>  	
   </html>

Metoda 2: Interne (stilul etichetă)

Această metodă constă în includerea codului CSS în cadrul paginii HTML utilizând tag-ul HTML <style>, ca în exemplul de mai jos:

<html>  	  
	<head>
  		<title>Example</title>  		
		<style type="text/css">  		  
			body {background-color: #FF0000;}  		
		</style>  	  
	</head>  	  
	<body>  		
		<p>This is a red page</p>  	  
	</body>  	
</html>  	

Metoda 3: Fișier extern (legătură către o foaie de stil)

Metoda recomandată constă în realizarea unei foi de stil externă. O foaie de stil externă este un fișier text cu extensia .css.

De exemplu, dacă foaia de stil se numește style.css și este situată într-un director numit style, situația poate fi ilustrată ca în figura de mai jos:

Pentru a aplica un stil folosind un fișier extern, trebuie creată o legătură între documentul HTML (default.htm) și foaia de stil (style.css). O astfel de legătură poate fi creată cu o singură linie de cod HTML. Observați cum este indicat calea foaie de stil noastră folosind atributul href.

Linia de cod care include fișierul de stil trebuie să fie introdusă în secțiunea antet a codului HTML adică între tag-urile <head> și </ head>:

<html> 
 	  <head>
  		<title>My document</title>  		
		<link rel="stylesheet" type="text/css" href="style/style.css" />  	  
     </head>
  	  <body>  	  
...  	

Această legătură spune browser-ului că trebuie să folosească aranjarea din fișierul CSS atunci când afișează conținutul fișierului HTML.
Acest lucru este foarte util mail ales că mai multe documente HTML pot fi legate de aceeași foaie de stil. Cu alte cuvinte, un fișier CSS poate fi folosit pentru a controla structura mai multor documente HTML.

În figura de mai jos se află un exemplu de foaie de stil.
ATENȚIE! Fișierele de stil nu conțin tag-uri HTML:

p {
    text-align: right;
    color: blue;
} /* modificarile se aplica tuturor paragrafele */ h1, h2 {
    text-align: center;
    color: red;
} /* modificarile se aplica pentru h1 si h2 */ .center {
    text-align: center;
    color: green;
} /* modificarile se aplicata tuturor elementelor din clasa "center" */ p.center {
    text-align: center;
    color: red;
} /* modificarile se aplicata tuturor paragrafelor din clasa "center" */ #Lastname {  background-color: yellow;
} /* modificarile se aplicata doar elementului cu id-ul "lastname" */

TODO: Să se realizeze o pagină HTML care utilizează stilizările descrise în exemplul de mai sus.