E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Formatare si pozitionare (1)

Aplicarea CSS

22.04.2008
Aplicarea CSS

Sunt trei metode prin care se poate aplica CSS pe un HTML: in-line, intern, extern.

Total vizualizari: 4980 4980 afisari   |   Comentarii  0   |   Rating   |   (3 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Htmldog.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

In-line
Formatarile in-line sunt aruncate direct in tagurile HTML folosind atributul style si arata cam asa:

<p style="color: red">text</p>

Codul de mai sus face un anumit paragraf rosu. Cea mai buna abordare practica consta in faptul ca HTML-ul ar trebui sa fie intr-un document de sine statator deci formatarile de tipul in-line ar trebui evitate.

Interna
Formatarea interna este folosita pentru intreaga pagina. In interiorul tag-urilor head, tagurile style rescrie toate celelalte formatari ale paginii.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
} a {
color: blue;
}
</style>
...

Codul de mai sus face toate paragrafele din pagina rosii si toate link-urile albastre. Fiind o metoda similara cu cea in-line nu este foarte recomandata.

Externa
Formatarile externe sunt folosite pentru un intreg site cu multiple pagini. Exista in fisier separat CSS, care va arata cam asa:

p {
color: red;
} 
a {
color: blue;
}

Daca acest fisier este salvat ca "web.css" atunci poate fi legat de HTML astfel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...

Pentru a profita mai mult de acest ghid deschide un nou document cu editorul de text si salveaza documentul gol sub denumirea web.css  in acelasi director unde este si fisierul HTML. Acum modifica fisierul HTML astfel incat sa inceapa ca mai jos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...

Salveasa documentull HTML. Acum este legat de documentul CSS, care este gol momentan deci nu se va modifica nimic. Daca aduci modificari documentului CSS ele se vor genera schimbari.

Pagina:
1
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(3 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4080
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4055
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3870
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
XML Powerpoint Sony Vegas Outlook Ruby on Rails Flash Excel Python XHTML JSON SEO Vista Verilog Fireworks Dreamweaver SWF Fotografie COREL DRAW Bridge Illustrator Photoshop Swift 3D MySQL Javascript Word Action Script AJAX CSS PHP StyleSheet Java Lightroom PSD HTML RoR Gimp
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software