simple-webdesign.com » CSS

Scurt tutorial CSS: formatarea textului

Simple — Tue, 10 Feb 2009 11:34:47 +0000

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:





Titlu pagina



	
		Titlu site
		descriere site
	
 

	
       Titlu articol
	 acesta este continutul, iar acesta este un link

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:





Titlu pagina




	
		Titlu site
		descriere site
	
 

	
	Titlu articol
	 acesta este continutul, iar acesta este un link

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.

Scurt tutorial CSS: elementul text

Simple — Tue, 20 Jan 2009 09:14:12 +0000

De astazi voi incerca (din nou) sa reiau seria tutorialelor CSS, nu de alta, dar poate pentru unii sunt folositoare. Astazi, incerc sa spun doar cateva cuvinte despre formatarea textului folosind proprietatile CSS-ului.

Sa luam exemplul de mai jos:

Acest cod practic va controla cum se afiseaza text-ul dintr-un paragraf, adica cam tot ce se afla intre

. Ce face insa fiecare linie in parte:

color: #003366; - am atribuit o culoare textului. Aceasta poate sa fie o valoare scrisa in hexa, ca in acest exemplu sau pur si simplu se poate preciza direct culoarea, de exemplu red.
word-spacing: 10px; – face exact ceea ce spune ca face. Adica mareste spatiul dintre cuvinte cu 12 pixeli. Valoarea implicita este normal, daca nu se specifica nimic.
letter-spacing: 10px; – ca si mai sus, aceasta proprietate mareste practic distanta dintre litere cu 10 pixeli sau desigur, cu cat se specifica. Aceasta valoare poate sa fie si negativa
text-decoration: underline; - si aici cred ca e destul de evident, nu? Aceasta proprietate practic ii spune textului sa fie subliniat. Mai poate lua valorile: overline, blink, line-through.
text-transform: capitalize; – transforma afisarea cu majuscula a primei litere dintr-un cuvant. Mai poate lua valorile: uppercase si lowercase.
text-align: right; – am aliniat textul la stanga. Valoarea implicita este left, insa poate sa fie si center.

Daca e sa aplicam toate aceste proprietati unui paragraf aflat intr-un html, rezultatul ar arata asa:

Pe langa cele precizate mai sus, pentru formatarea unui text folosind CSS-ul, se mai pot utiliza si urmatoarele proprietati:

line-height – pentru a stabili distanta dintre 2 randuri de text succesive.
font-style – pentru a face textul italic.
font-size – pentru a stabili marimea fontului.
font-family – pentru a preciza ce fonturi se vor folosi.

Legat de font-family e bine de stiut ca cel putin deocamdata este indicat sa se foloseasca doar urmatoarele fonturi:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Si asta pentru ca aceste fonturi sunt prezente pe majoritatea calculatoarelor. Folosirea unui font mai special face ca pagina sa se afiseze corect doar pe calculatoarele care are instalat acel font.

In mare cam asta este, desi se mai pot spune multe despre formatarea unui text dintr-o pagina web. Promit sa revin insa cat de curand cu detalii legate de aceste aspecte (de exemplu, cum aranjam si formatam textele in zone diferite ale unui site).

Free download: The Art & Science of CSS

Simple — Wed, 26 Nov 2008 07:25:17 +0000

Aham, ati citit bine. Sitepoint.com ofera gratuit spre download, o carte (format PDF) ce in mod normal costa aproape 30$. Acum insa, pentru o perioada scurta, puteti sa descarcati aceasta carte gratuit. De fapt, va trebui sa avetit totusi un cont de twitter, de unde sa dati un Folow celor de la sitepoint.com. Contul lor de twitter este aici. Dupa ce intrati in “urmarire generala”, veti primi in foarte scurt timp si link-ul de download.

Cat despre carte, inca nu am apucat sa o citesc, insa am “rasfoit-o” putin si pot sa va spun ca merita un mic efort pentru a o avea.

Un site frumos: getdressed.ro

Simple — Fri, 23 Nov 2007 07:26:04 +0000

Am dat astazi de un site frumos. Nu extraordinar, insa frumusel, bine structurat si cu un aspect vizual care chiar mi-a atras atentia. E drept, imaginile sunt putin cam mari si astfel site-ul se incarca mai greu, insa era dial-up-ului e pe duca, iar in orasele mari (si nu numai) internetul este tot mai accesibil si are o viteza tot mai mare, asa ca asta nu cred ca e o problema pentru getdressed.ro.

Scurt tutorial CSS – Introducerea CSS in pagina

Simple — Mon, 13 Mar 2006 21:57:40 +0000

Pentru ca tot am vorbit in post-ul anterior despre modificarea unui tabel folosind Fisierele de tip CSS, am sa incerc sa vi le explic putin si pe acestea.

Mai intai, Wikipedia ne spune asa:

In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

CSS este un acronim provenind din Cascading Style Sheets, care inseamna “foi de stil in cascada” (cea mai apropiata traducere). In documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML.
CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai CSS, care a fost proiectat astfel incat sa conlucreze cu HTML-ul. Folosind CSS, se ajunge la:
1. un control mai fin asupra paginii web
2. scaderea dimensiunii in KB a paginii web, atunci cand codul CSS e continut intr-un fisier extern
3. o mai mare comoditate: modificand fisierul CSS extern, modificati simultan toate paginile web in care acesta e inclus
4. efecte mai sofisticate decat cele produse de codul HTML: suprapunerea unei imagini peste alta imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decat h1 si multe altele.
Dezavantaj: Pagina continand cod CSS poate arata diferit in navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS.
Daca mai adaugi si cod JavaScript, vei obtine efecte si mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML ( Dynamic HTML ).

In documentul HTML, poti sa introdici codul CSS in mai multe moduri:

1.Codul CSS e prezent �n pagina web, iar efectul s�u se aplic� asupra �ntregului document.

Orice text cuprins �ntre tag-urile de bold (b) va fi afisat cu rosu, oriunde s-ar afla �n document. Orice text afisat cu italice va fi de culoare albastra. Vei observa ca daca introduci codul CSS in head-ul paginii, vei mari putin marimea fisierului html.

2. Codul e prezent in pagina web, iar efectul sau se aplica elementelor izolate.

Observi acum ca nu mai avem o eticheta style, ci un atribut style al etichetei link. Orice eticheta HTML poate beneficia de acest atribut. Pentru formatarea unor portiuni mari de text, puteti folosi containerele div sau span.

3. Codul CSS se afla intr-un fisier extern, cu extensia css. Efectul sau se aplica �ntregului document.

Fisierul extern poti sa-l scri in Notepad si salvat cu extensia .css. Includerea lui in pagina web o poti face folosind tag-ul link, care trebuie sa se afle intre portiunile de head si /head ale documentului.

Intr-un fisier html, pot sa incluzi astfel oricate alte fisiere cu extensia css, htm, html, etc.

Aceasta metoda de includere a CSS-ului in pagina web e mai avantajoasa ca primele doua.

Codul CSS introdus astfel conlucreaza cu cel scris direct in pagina.

Fisierul CSS se poate importa �n pagina web

Importul trebuie declarat imediat dupa tag-ul < style >, inaintea oricarei alte linii de cod.
In exemplul alaturat, s-a realizat importul in pagina curenta a fisierului css.css din directorul “director” al site-ului www.simple-webdesign.com.

Pentru moment cam atat despre CSS, insa va promit ca am sa revin cu mai multe detalii si explicatii legate de folosierea CSS-ului si a fisierelor de tip CSS.