Scurt tutorial CSS: formatarea textului

Nu de mult spuneam cate ceva despre cum poti formata un text folosind doar css-ul. Insa cum procedam in cazul in care ne dorim mai multe tipuri si mai multe formate de text in aceasi pagina? Voi incerca sa spun doar cateva cuvinte despre asta, nu inainte de a preciza ca acest tutorial este valabil doar daca se folosesc div-uri in crearea unui site sau a unei pagini. Dar sa pornesc la drum.

Pentru simplitate, presupunem ca avem urmatoarea structura pentru o pagina simpla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titlu pagina</title>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Titlu site</h1>
		<p>descriere site</p>
	</div> <!-- sfarsit header -->
	
	<div id="continut">
       <h1>Titlu articol</h1>
	<p> acesta este continutul, iar acesta este un <a href="#">link</a>
	</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>


Dupa cum se vede, aceasta este o structura simpla, in care am folosit un div denumit “container” in care practic voi ingloba tot continutul, iar apoi inca doua div-uri pentru partea de inceput a site-ului (header) si continut. Nu am mai inclus si partea de final sau un meniu pentru a simplifica acest tutorial. In header avem un “heading” pentru titlul site-ului si o mica descriere, iar in continut, un titlu, un paragraf cu un text si un link. Acestea sunt si elementele pe care dorim sa le formatam folosind CSS-ul. Pentru fiecare din aceste div-uri, am folosit ID-uri (click aici pentru e afla de ce).

Cea mai simpla metoda e sa definim in tag-ul “body” proprietatile textului pe care il dorim, de exemplu:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #0066CC;
}

In acest fel insa, toate textele de pe site vor avea culoarea albastra si marimea de 16 pixeli, mai putin heading-ul h1 care va avea o marime standard, ceva mai mare. Pentru a evita acest lucru, vom formata practic fiecare text in parte. Sa spunem ca ne dorim ca textul din header sa fie scris cu Arial, heading-ul il vrem negru si scris mare, iar descrierea site-ului, o vrem sa fie ceva mai mica si scrisa cu un font gri. Pentru asta va trebui sa definim in css fiecare element, insa va trebui sa precizam si locatia elementului. Daca am defini doar un singur element h1 ca avand marimea de 20 pixeli, atunci toate heading-urile h1 din site vor avea marimea de 20 de pixeli. Daca insa definim elementul h1 din div-ul “header”, atunci toate proprietatile definite pentru el vor avea efect doar in “header”, iar asta se face asa:

#header, #header h1, #header p {
	font-family: Arial;
	margin: 0px;
}
#header h1 {
	font-size: 24px;
	color: #000000;
}
#header p {
	font-size: 16px;
	color: #CCCCCC;
}

Ce am facut mai sus? Practic i-am spus browser-ului ca fiecare text din interior-ul div-ului “header” sa fie de tip Arial. Puteam sa definesc fontul pentru fiecare element in parte, insa asta ar insemna sa scriu de cel putin doua ori acelasi lucru, fapt care mareste inutil marimea fisierului CSS.
Este indicat sa se foloseasca mai multe elemente care au proprietati comune, in acelasi loc, separate prin virgula.
Mai departe, am definit heading-ul H1 ca fiind negru si avand marimea de 24 pixeli, iar mai jos, descrierea site-ului care se afla in paragraf, ca fiind de doar 16 pixeli, de culoare gri.
Pentru ca in general atat un paragraf cat si un heading au implicit marginea ceva mai indepartata decat marginea textului efectiv, am adaugat si un “margin: 0px;” pentru a elimina distanta dintre cele doua elemente.

In acest fel am formatat elementele din header, pentru cele din paragrag, procedura fiind aceeasi, cu diferenta ca aici am definit si un link:

#continut, #continut h1, #continut p {
	font-family: Tahoma;
	margin: 0px;
}
#continut h1 {
	font-size: 20px;
	color: #990000;
}
#continut p {
	font-size: 1apx;
	color: #666666;
}
#continut a {
	font-size: 1apx;
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}

Nu o mai lungesc pentru ca pana acum v-ati dat seama ca aici fontul si culorile sunt schimbate, nu-i asa? Codul final, unde sunt adaugate toate cele de mai sus arata asa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titlu pagina</title>
<style type="text/css">
<!--
body {
	margin: 10px;
}
#header, #header h1, #header p {
	font-family: Arial;
	margin: 0px;
}
#header h1 {
	font-size: 24px;
	color: #000000;
}
#header p {
	font-size: 16px;
	color: #CCCCCC;
}

#continut, #continut h1, #continut p {
	font-family: Tahoma;
	margin: 0px;
}
#continut h1 {
	font-size: 20px;
	color: #990000;
}
#continut p {
	font-size: 1apx;
	color: #666666;
}
#continut a {
	font-size: 1apx;
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Titlu site</h1>
		<p>descriere site</p>
	</div> <!-- sfarsit header -->
	
	<div id="continut">
	<h1>Titlu articol</h1>
	<p> acesta este continutul, iar acesta este un <a href="#">link</a>
	</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>

Iar pentru a vedea rezultatul final, este suficient sa introduceti acest cod intr-un fisier html pe care sa il vizualizati in browerul vostru preferat. Retineti insa ca aici eu am inclus css-ul in fisierul html, insa aceasta practica nu este deloc recomandata. Eu am folosit-o doar pentru a vizualiza mai bine formatarea textelor din diferite zone ale unei pagini sau a unui site. Daca nu stiti inca cum se adauga fisierele CSS, click aici.

2 thoughts on “Scurt tutorial CSS: formatarea textului

  1. silvia says:

    ioi, CSS-ul!
    a trebuit sa fac un site pt. “assignment”. XHTML si CSS (extern). NUma’ eu stiu cat m-am zdrobit pana am nimerit patratele ca lumea pt text.
    cand reparam o treaba se strica footerul. cand reparam footerul, se desfigura headerul.

    cu paddingul mergeam la nimereala. dupa 48 de incercari am nimerit dimensiunea cea buna. dar macar am testat cum ii mai bine :D

    ii mai dulce victoria dupa ce incerci 2 ore sa dregi o chestie. :)

  2. E cea mai dulce victorie :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>