|
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:
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:
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":
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.
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!
|
3702 afisari |
15 min
|
Incepator
