Avtor: -primož- 02.08.09

Trije načini, kako vstaviti CSS kodo v HTML dokument.

Kako uvoziti CSS v HTML? Za to obstajajo trije načini. Prvi način vsebuje svojo CSS datoteko in pa značko, s katero uvozimo CSS v HTML dokument. Drugi način vsebuje vstavljanje CSS kode v glavo (head) HTML dokumenta. Tretji način pa je najmanj praktičen in izgleda nekako tako, da CSS kodo pišemo direktno v oznake oz. značke.

Priporočam:

- zunanja CSS datoteka

- CSS dedovanje

Pa si poglejmo vsako možnost posebej!

1. CSS kodo spišemo v eksterno (zunanjo) datoteko (npr. v beležnici) in jo shranimo s končnico .css. Nato pa v HTML datoteki med oznaki <head> in </head> vstavimo značko, ki izgleda takole: <link rel="stylesheet" type="text/css" href="/mystyle.css" />.

Rel="stylesheet" nakazuje, da bo to dokoment, ki bo določal stil nečesa v dokumentu. Type="text/css" pove brskalnikom, da bo ta dokument tekstovna css datoteka. Href="mystyle.css" pa je najpomembnejši atribut saj pove, kje se nahaja vaša CSS datoteka. Mystyle.css je ime vaše CSS datoteke. Ta način uvoza je zelo praktičen in posledično tudi najpogosteje uporabljen. Najbolj je primeren predvsem za oblikovanje večih strani, saj lahko z enim popravkom vplivamo na vse strani, v katerih je uvožena ta koda.

Primer:

_{CSS koda:}

 p {
 color: #0000FF;
 font-size: 40px;
 }

_{HTML koda:}

<html> <head>

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

</head> <body>

<p>Uvoz CSS kode v HTML dokument s pomočjo zunanje datoteke in značke</p>

</body> </html>

Prikaz!

2. CSS kodo lahko pišemo tudi direktno v HTML dokument in sicer v glavo dokumenta (<head></head> Surprised med znački <style type="text/css"> in </style>. Ta način uvoza je primeren za posamezno stran, ki ima svoj poseben stil oblikovanja, ki se loči od drugih strani.

Primer:

_{HTML koda:}

<html> <head>

<style type="text/css"> p { color: #0000FF; font-size: 40px; } </style>

</head> <body>

<p>Uvoz CSS kode s pomočjo vpisa kode v glavo HTML dokumenta</p>

</body> </html>

Prikaz!

3. Tretji način je pisanje CSS kode v obliki atributa direktno v značko HTML dokumenta. Atribut izgleda nekako takole: style=" ". Med narekovaja lahko pišemo katerokoli CSS kodo. Ta način je najmanj praktičen in je uporaben le takrat, ko ima določen element spletne strani svoj stil.

*ta način se uporabljam, ko rabim "na hitro" videti, kakšen vpliv ima določen stil (potem vpišem vse v zunanjo css datoteko)

primer:

_{HTML koda:}

<html> <head></head> <body>

<p style="color: #0000FF; font-size: 40px;">Uvoz CSS kode direktno v značko</p>

</body> </html>

Prikaz!

*Če so v HTML dokumentu prisotni vsi trije uvozi CSS kode jih bodo brskalniki upoštevali po sledečem vrstnem redu:
- najprej bodo pogledali zunanji CSS dokument in si zapomnili vrednosti
- nato bodo pogledali CSS kodo v glavi in popravili zapomnjeno kodo in pa dodali manjkajoče elemente css kode iz glave
- Nazadnje bodo pogledali še css kodo, ki je vstavljena kot atribut v značko in popravili prejšnje zapomnjene vrednosti in nato določili stil HTML elementom

Se pravi največjo veljavo ima koda vstavljena direktno v značke. Vrednosti CSS kode se dedujejo!

Primer:

_{CSS koda:}

p { color: #0000FF; font-size: 100px; }

_{HTML koda:}

<html> <head> <link rel="stylesheet" type="text/css" href="/style.css" /> <style type="text/css"> p { color: #0000FF; font-size: 20px; } </style> </head> <body> <p style="color: #00FF00; font-weight: bold;">Uvoz CSS kode na vse tri načine hkrati</p> </body> </html>

Prikaz!

V tem vodiču ste lahko videli, kako uvoziti CSS v HTML. Jaz vam priporočam uporabo zunanje posebne css datoteke.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
Vodoraven CSS meni Div v divu in problem z višino - overflow: auto CSS senca za besedilo Tabele in CSS CSS Kode 2	Drugačna prva črka Položaj ozadja CSS oblaček za besedilo Zaobljeni robovi s CSSjem Noga spletne strani