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ă)

O altă modalitate este de a include codurile CSS utilizând tag-ul HTML <style>. De exemplu ca aceasta:

<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ă este de creare a unei așa-numite foaie de stil externă. O foaie de stil externă este pur și simplu un fișier text cu extensia .css. Ca orice alt fișier, puteți plasa foaia de stil pe serverul de web sau hard disk.

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

Ideea este de a crea o legătură între documentul HTML (default.htm) la foaia de stil (style.css). O astfel de legătură pot fi create cu o singură linie de cod HTML. Observați cum este indicat calea foaie de stil noastră folosind href atribut.

Linia de cod 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ă ar trebui să folosească aranjarea din fișierul CSS atunci când afișează fișierul 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.

Exemplu de fisier .css:

p {
    text-align: center;
    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: red;
} /* 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" */