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  /  Introducere in CSS (2)

Cum functioneaza CSS ?

17.04.2008
Cum functioneaza CSS ?

In aceasta lectie vei invata sa faci un stylesheet(foaie cu stiluri). Vei invata modelul de baza CSS si ce coduri sunt necesare pentru a folosi CSS intr-un document HTML.

Total vizualizari: 10073 10073 afisari   |   Comentarii  2   |   Rating   |   (2 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

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

In aceasta lectie vei invata sa faci unstylesheet(foaie cu stiluri). Vei invata modelul de baza CSS si ce cod este necesar pentru a folosi CSS intr-un document HTML. Multe din proprietatile folosite in CSS sunt similare cu cele din HTML, deci daca esti familiarizat cu folosirea HTML pentru layout vei recunoaste multe atribute si proprietati.

Sintaxa de baza CSS

Daca dorim ca fundal culoarea rosie pentru pagina web:

Folosind HTML:

<body bgcolor="#FF0000">

Folosind CSS, acelasi rezultat poate fi obtinut astfel:

body {background-color: #FF0000;}

Sintaxele HTML si CSS sunt mai mult sau mai putin asemanatoare. Exemplul de mai sus arata si modelul fundamental CSS:

Cum functioneaza CSS? - img1

Aplicarea codului CSS unui document HTML

Exista trei metode prin care poti aplica CSS. Recomandarea noastra e sa te concentrezi pe cea de-a treia metoda, si anume includerea unui fisier extern cu toate clasele css.

Metoda 1: Adaugarea formatarii in interiorul unui element (In-line)

Exemplul de mai sus cu fundalul rosu poate fi aplicat astfel:

<html>
<head>
<title>Exemplu</title>
</head>
<body style="background-color: #FF0000;">
<p>Pagina cu fundal rosu</p>
</body>
</html>

Metoda 2: Definirea claselor css in sectiunea head a documentului html


<html>
<head>
<title>Exemplu</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Pagina cu fundal rosu</p>
</body>
</html>

Metoda 3: Includerea unui fisier .css

Dintre toate cele 3 metode, aceasta este cea mai eficienta deoarece permite definirea unui singur fisier cu stiluri (.css) ce poate fi inclus in toate paginile unui site.

Ca in cazul oricarui fisier, un style sheet (fisier text cu extensia .css) poate fi salvat pe server sau pe hard disk. De exemplu, daca style sheet-ul nostru se numeste "style.css" si este localizat in folderul "style":

Cum functioneaza CSS? - img1

el poate fi incarcat in documentul html prin utilizarea tag-ului link, astfel:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Cu alte cuvinte, ce este important este sa creezi un link (o legatura) de la documentul HTML ("default.htm") la style sheet ("style.css").

Linia de cod trebuie inserata in sectiunea head a documentului HTML, intre tag-urile <head> si </head>:

 
<html>
<head>
<title>Documentul meu</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
</body>
</html>

Aceasta legatura ii comunica browserului ca trebuie sa utilizeze clasele dintr-un fisier CSS atunci cand afiseaza fisierul HTML. Lucrul ingenios este acela ca mai multe documente HTML pot legate la acelasi style sheet. Astfel, un fisier CSS poate fi folosit pentru a controla layout-ul mai multor documente HTML.

Cum functioneaza CSS? - img1

Aceasta tehnica salveaza si economiseste mult timp. Daca vrei de exemplu sa schimbi culoarea de fundal a unui site cu 100 de pagini, un style sheet te poate ajuta sa nu introduci manual modificarea de 100 de ori. Folosind CSS, modificarea poate fi facuta in cateva secunde prin schimbarea unui cod din fisierul css.

Acum pune in practica teoria. Deschide Notepad (sau orice alt editor de text) si creeaza doua fisiere - unul HTML si unul CSS - cu urmatorul continut:

default.htm

 
<html>
<head>
<title>Documentul meu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Primul meu document css</h1>
</body>
</html>

style.css

body {
background-color: #FF0000;
}

Acum pune cele doua fisiere in acelasi director. Nu uita sa salvezi documentele cu extensiile corespunzatoare (.htm si .css). Deschide "default.htm" intr-un browser si observa fundalul rosu al paginii. Felicitari, ai facut primul tau style sheet!

Pagina:
1
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(2 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
soshy25 , Marti, 16 Februarie 2010, ora 18:22
#2

interesant tutorialul si foarte concis

Raporteaza acest comentariu ca injurios!
soshy25 , Marti, 16 Februarie 2010, ora 18:22
#1

interesant tutorialul si foarte concis

Raporteaza acest comentariu ca injurios!
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
4425
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4320
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4280
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4120
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
CSS Swift 3D Vista MySQL Gimp Verilog Flash Bridge Excel Powerpoint Lightroom JSON RoR StyleSheet PSD Action Script Outlook HTML Word SEO Illustrator XHTML COREL DRAW Fireworks PHP Java Ruby on Rails Sony Vegas AJAX Fotografie SWF Photoshop Dreamweaver XML Javascript Python
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