Fisier CSS extern
March 6, 2008 – 10:44 amMai concret, ne vom ocupa de cazul în care dorim un fisier separat, extern, în care definim stilurile pe care le vom folosi în toate documentele dintr-un site.
Acest fisier se creaza în Notepad si se salveaza cu extensia css.
Deschide Notepad, defineste generic paragraful ca având caracteristicile cerute mai sus, apoi definiti titlul de nivel 1 (H1), dupa modelul urmator:
|
p { font-family:Tahoma; font-size:12px; color:red; font-weight:bold; font-style:italic; } h1 { font-family:Times, serif; font-size:18px; color:yellow; font-weight:bold; background-color:blue; } |
Salveaza fisierul creat cu numele “stilulmeu.css”, într-un director gol.
Apoi creaza, în acelasi director, un fisier html, în antetul caruia apeleaza fisierul de stiluri (neaparat în sectiunea HEAD):
|
<html> <head> <title>Pagina mea cu stilurile mele</title> <link rel=”stylesheet” type=”text/css” href=”stilulmeu.css” /> </head> <body> <h1>Acesta este titlul, asa cum l-am definit</h1> <p>Acesta este primul paragraf, care are caracteristicile definite în fisierul de stiluri “stilulmeu.css”. Prin modificarea fisierului css voi obtine efecte în toate paginile html care îl apeleaza.</p> <p>Pot, de exemplu, sa schimb culoarea în “blue”.</p> <p>Al treilea paragraf, ca si toate care ar putea urma, se conformeaza normelor stilului meu.</p> </body> </html> |
Salveaza, apoi deschide-l într-un browser.
Experimental, întoarce-te în Notepad, deschide fisierul de stiluri si modifica dupa cum urmeaza:
|
h1 { font-family:Times, serif; font-size:18px; color:yellow; font-weight:bold; background-color:blue; } p { font-family:Verdana; font-size:11px; color:blue; } |
Apoi salveaza fisierul css, revino în browser si apasa F5, pentru Refresh.
Poti defini, în fisierul CSS, stilurile favorite pentru textele cuprinse în paragraf (p), titluri (de la h1 pâna la h6), celule de tabel (td) etc. Apoi poti apela acest fisier din toate paginile web pe care le creezi.
De 3 ani de zile InfoSlabire.ro se sustine financiar doar datorita partenerilor din linkurile recomandate. Daca acest articol te-a ajutat, atunci ajuta-ma si tu sa mentin calitatea informatiei si viziteaza siturile partenerilor mei.
Iti Multumesc!
Olimpiu