Există trei metode de a aplica CSS pentru HTML.
În interiorul liniilor de cod HTML
În liniile de cod, CSS-ul este inserat în interiorul tag-urilor din documentul HTML, aplicăm stilul pentru text folosind atribului style.Şi arată cam aşa:
<p style=“color: red”>text</p>
Această funcţie va face ca acel paragraf să apară scris cu roşu.
Dar dacă vei tine minte că cel mai practic şi pentru utilizator, dar şi pentru tine, ar fi să faci un document separat pentru CSS, dar hai să îţi arăt şi celelalte două metode.
În documentul HTML
Acest stil se va aplica în interiorul documentului HTML, mai exact în interiorul elementului head, şi funcţiile vor fi aplicate pentru pagina respectivă, deaceea va trebui să faci la fel pentru oricare pagina doreşti. Avem tag-ul style, care are aplicarea pentru toată pagina.Un exemplu ar trebui să arate cam aşa :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Exemplu CSS</title>
<style type=“text/css”>
p {
color: red;
}
a {
color: blue;
}
</style>
...
Această funcţieva face tot textul din pagină, roşu, iar toate link-urile vor fi albastre.
Aceeaşi concluzie o voi enunţa şi acum, că ar fi bine să ţineţi HTML-ul se parat de CSS, şi iată cum anume faceţi asta.
În exterior
Stilul extern se va aplica pentru toate paginile din directorul siteului, şi să menţionez că vom avea un fisier separat ce va conţine doar codul CSS care va arăta cam aşa :
p {
color: red;
}
a {
color: blue;
}
Să presupunem că acest document este salvat web.css atunci în documentul HTML vom scrie aşa :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Exemplu CSS</title>
<link rel=“stylesheet” type=“text/css” href=“web.css” />
...
În tutorialul CSS pentru avansaţi vom observa că sunt mai multe metode de a lega documentul CSS de HTML, dar deocamdată e suficientă metoda asta.
A şadar vom reţine din acest tutorial că trebuie să îţ faci un alt fişier pentru documentul CSS, pe care îl vei pune acolo unde ai documentele HTML.
Relatări aferente :
- Pagina următoare: Selectori, proprietăți și valori
- Pagina anterioară: Introducere
