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: 5367 5367 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 mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5565
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5540
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5385
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5365
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
5120
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Lightroom Gimp Vista Swift 3D Java Verilog RoR SEO Javascript JSON HTML Bridge SWF Outlook Dreamweaver Python XML StyleSheet Illustrator Action Script AJAX Sony Vegas Fireworks PHP XHTML Photoshop Flash PSD Excel Fotografie Powerpoint MySQL Word COREL DRAW Ruby on Rails CSS
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