Index

Culori și fundaluri

Culoarea prim-planului: proprietatea "color"

Proprietatea de culoare descrie culoarea prim-planului unui element.

De exemplu, imaginați-vă că vrem toate titlurile dintr-un document să fie roșu închis. Titlurile sunt toate marcate cu elementul HTML <h1>.Codul de mai jos stabilește culoarea <h1> elemente la roșu.

h1 {  		color: #ff0000;  	}

Culorile pot fi introduse ca valori hexazecimale ca în exemplul de mai sus (# FF0000), sau puteți utiliza numele culorilor ("red") sau RGB-valori (rgb (255,0,0)).

Proprietatea 'background-color'

Proprietatea background-color descrie culoarea de fundal a elementelor.

Elementul <body> conține toate conținutul unui document HTML. Astfel, pentru a schimba culoarea de fundal a unei întregi pagini, proprietatea background-color ar trebui să se aplice la <body> elementului.

Puteți aplica, de asemenea, culorile de fundal de alte elemente, inclusiv titluri și text. În exemplul de mai jos, de fundal culori diferite sunt aplicate la <body> și <h1> elemente.

body {  		
		background-color: #FFCC66;  	
}    
h1 {  		
		color: #990000;  		
		background-color: #FC9804;  	
}

Observați că am aplicat două proprietăți la <h1> prin delimitarea prin punct și virgulă.

Imagini de fundal[background-image]

Proprietatea CSS background-image este folosită pentru a insera o imagine de fundal.

Pentru a insera o imagine ca imagine de fundal pentru o pagină web, aplicam pur și simplu proprietatea background-image pentru <body> și specificăm locația imaginii.

body {  		
		background-color: #FFCC66;  		
		background-image: url("butterfly.gif");  	
}    	
h1 {  		
		color: #990000;
  		background-color: #FC9804;  	
}

Observați cum am specificat locația imaginii ca url ("butterfly.gif"). Acest lucru înseamnă că imaginea se află în același folder ca și foaia de stil. Puteți face legături, de asemenea, la imagini din alte dosare cu ajutorul url relative ("imagini ../ / butterfly.gif") sau chiar pe internet indicând adresa completă a fișierului: url ("http://www.html.net/butterfly .gif ").

Repetiția imaginii de fundal [background-repeat]

Proprietatea background-repeat , cntrolează modul de repetiție al imaginilor. Tabelul de mai jos prezintă cele patru valori diferite pentru repetiția fundalului.

Valoare Descriere
background-repeat: repeat-x Imaginea se repetă orizontal
background-repeat: repeat-y Imaginea se repetă vertical
background-repeat: repeat Imaginea se repetă atât orizontal cât și vertical
background-repeat: no-repeat Imaginea nu se repetă

Blocarea imaginii de fundal [background-attachment]

Proprietatea de background-attachment specifică dacă o imagine de fundal este fix sau flotantă, împreună cu elementul care o conține.

O imagine de fundal fixă nu se va muta cu textul atunci când un cititor se defilare pagina, în timp ce o imagine de fundal deblocat va defila împreună cu textul paginii web.

Tabelul de mai jos prezintă cele două valori diferite pentru background-attachment.

Valoare Descriere
Background-attachment: scroll Imaginea este flotantă în pagină
Background-attachment: fixed Imaginea este fixă

 Poziționarea imaginii de fundal[background-position]

Valoare Descriere
background-position: 2cm 2cm Imaginea este poziționată la 2 cm de marginea din stânga și 2 cm față de partea superioară a paginii
background-position: 50% 25% Imaginea este central poziționată și la o pătrime față de începutul paginii
background-position: top right Imaginea este poziționată în conțul din dreapta sus al paginii

Codul de mai jos poziționează imaginea de fundal din colțul din dreapta jos:

	body {
  			background-color: #FFCC66;  		
			background-image: url("butterfly.gif");
	  		background-repeat: no-repeat;
	  		background-attachment: fixed;  	
			background-position: right bottom;
  	}
  	h1 {
  		color: #990000;
  		background-color: #FC9804;  	
	}  	

Compilarea [background]

Proprietatea background este o metodă mai simplă de declarare a proprietăților fundalului. Folosind-o, puteți comprima mai multe proprietăți și, prin urmare, scrie foaie de stil într-un mod mai compact, ceea ce îl face mai ușor de citit. De exemplu aceste cinci linii:

	background-color: #FFCC66;  	
	background-image: url("butterfly.gif");  	
	background-repeat: no-repeat;  	
	background-attachment: fixed;  	
	background-position: right bottom;  	
Se poate reduce la o singură linie de cod folosind proprietatea background:
	background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;  

Ordinea corectă este următoarea:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Compilarea [font]

Folosind compilarea font este posibilă acoperirea tuturor proprietășilor caracterelor într-o singură linie.

De exemplu, fie aceste 4 linii de cod folosite în descrierea proprietăților cararterelor unui paragraf<p>:

	  	p {  		
			font-style: italic;
	  		font-weight: bold;
	  		font-size: 30px;
	  		font-family: arial, sans-serif;
	  	}  	  	

Using the short hand property, the code can be simplified:

	  	p {  		
			font: italic bold 30px arial, sans-serif;  	
		}  	  	

Ordinea valorilor pentru font este:

font-style | font-variant | font-weight | font-size | font-family

Compilarea [border]

Proprietățile marginilor se pot agrega folosind compilarea border. Fiind dat exemplul:

	  	p {
			border-width: 1px;
	  		border-style: solid;
	  		border-color: blue;
	  	}

Poate fi agregat în:

	  	p {
			border: 1px solid blue;
		}

Stilizarea unui element cu id="Lastname" se realizează astfel:

#Lastname { 
background-color: yellow;
}

<p>My name is <span id="Firstname" class="center">Donald.</span> <span id="Lastname" class="center">Duck.</span></p>

TODO: Să se stilizeze folosind CSS, un tabel al carui celule sa formeze tricolorul folosind cele 3 metode de lucru in css prezentate la punctul 9 folosind ca identificatori id-urile.