| PROIECTARE SITE WEB > DOCUMENTATIE - CSS - Stiluri definite
in fisere externe |
Proiectare Site si Web Design - Standardul CSS
Stiluri in Fisiere Externe
Stilurile definite in interiorul unui bloc <style>...</style>
pot fi transferate intr-un fisier extern existand astfel posibilitatea
asocierii lor mai multor fisiere HTML.
Pentru a utiliza un stil definit intr-un fisier
extern se procedeaza astfel:
1. Se creaza un fisier care sa contina numai descrierea stilurilor
si se salveaza cu extensia ".css". Continutul acestui fisier
coincide cu continutul unui bloc <style>...</style>, fara
ca acesti delimitatori sa fie inclusi.
2. In fisierul HTML care utilizeaza stilurile definite in fisierul
creat la punctul 1, se include in blocul <head>...</head>
o eticheta <link>, avand trei atribute:
- atributul
"rel"
cu valoarea "stylesheet";
- atributul "type"
cu valoarea "text/css".
- atributul "href"
avand ca valoare adresa URL a fisierului creat la punctul 1;
Stilurile definite din fisierul CSS extern se activeaza
ca si cum ar fi stiluri definite in fisierul HTML curent intr-un bloc
<style>...</style>.
Iata
un fisier HTML cu un CSS extern:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<LINK REL= "stylesheet" TYPE= "text/css"
HREF= "stil.css">
<title>Pagina de text stilizat</title>
</head>
<body>
<H2>Acesta este text formatat ca Header 1</H2>
<p>Acesta este un paragraf</p>
<H3>Acesta este text formatat ca Header 2, urmat de un tabel</H3>
<table width="100%" border="1">
<tr>
<th align="left">Nume</th>
<th align="left">Prenume</th>
<th align="left">Telefon</th>
<th align="left">E-mail</th>
</tr>
<tr>
<td width="25%">Popescu</td>
<td width="25%">Valentin</td>
<td width="25%">4433978</td>
<td width="25%">popescu@yahoo.com</td>
</tr>
<tr>
<td width="25%">Ionescu</td>
<td width="25%">Mihai</td>
<td width="25%">5599786</td>
<td width="25%">ionescu@yahoo.com </td>
</tr>
</table>
<br>
<h3>Acesta este un text formatat ca Header 3, urmat
de 2 liste:</h3>
<ol>
<li>Date personale student;</li>
<li>Calificari student;</li>
<li>Program zilnic:</li>
</ol>
<ul>
<li>Program dimineata</li>
<li>Pauza de masa</li>
<li>Program dupamiaza</li>
</ul>
</body>
</html>
Fiserul
CSS asociat (plasat in acelasi director) cu fisierul
HTML de mai sus, este:
H2,H3,h3
{
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 10pt;
}
body
{
background-color:#fffaf0;
}
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-style: square;)
Mentiune suplimentara
In cazul in care, dintr-un fisier HTML se face o referire la un fisier
CSS care insa lipseste, atunci fisierul HTML va fi afisat in browser
fara elementele de stilizare, exact asa cum ar arata daca stilizarile
nu ar fi existat.
|
Creare
si actualizare site