CSS jeb kaskadētas stila lapas (Cascading Style Sheets) ir īpaša valoda, kas paredzēta, lai aprakstītu izskatu iezīmēšanas valodās veidotiem dokumentiem. Visplašāk tā tiek lietota Interneta mājas lapās, lai aprakstītu HTML elementu izskatu.

Ar CSS palīdzību var izmainīt jebkura HTML elementa ārējo izskatu - krāsu, izmēru, novietojumu un dažādus citus atribūtus.

CSS izmantošana gan atvieglo darbu izstrādātājiem un sniedz plašākas dizaina iespējas, gan samazina HTML dokumentu apjomu, kas paātrina mājas lapas ielādi lietotājam.

 

Kā pievienot CSS savam dokumentam?

Pavisam ir trīs veidi, kā piesaistīt CSS stilu dokumentam vai HTML elementam.

Pirmais, visvairāk ieteicamais veids ir izveidot atsevišķu failu css formātā, kuru iekļaut dokumentā, galvenē ievietojot īpašu saiti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
   <title>Mana mājas lapa</title>
   <link rel="stylesheet" href="stils.css" type="text/css" />
</head>

<body>
   Sveiki! Šī ir mana mājas lapa ar CSS!
</body>

</html>

Šis variants dod iespēju neierobežotam skaitam dokumentu izmantot vienu un to pašu CSS kodu. Ja Tev ir HTML lapa, kas sastāv no 20 failiem, un Tev ienāktu prātā nedaudz pamainīt visu saišu krāsu, tad izmantojot šo metodi, vajadzētu izmaizīt tikai vienu rindiņu CSS failā, nevis labot katru no 20 HTML dokumentiem. Tā pat šī metode uzlabo lapas ātrdarbību, jo pārlūkprogramma CSS failu ielādē tikai vienu reizi - kad atver pirmo lappusi. Pēc tam CSS kods tiek ielādēts no pārlūkprogrammas kešatmiņas. Sarežģītām mājas lapām ar daudziem un apjomīgiem CSS faileim, tas ir ļoti būtiski.

Otra metode, kura parasti izmantojama tikai tad, ja lapa sastāv tikai no viena dokumenta, ir visa CSS koda iekļaušana galvenē:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
   <title>Mana mājas lapa</title>
   <style type="text/css">
   body {
     font-family: arial;
   }
   </style>
</head>

<body>
   Sveiki! Šī ir mana mājas lapa ar CSS!
</body>

</html>

Trešā metode, no kuras vispārīgos gadījumos vajadzētu censties izvairīties, ir CSS koda rakstīšana uzreiz pie vajadzīgā elementa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
   <title>Mana mājas lapa</title>
</head>

<body>
   Sveiki! Šī ir mana <span style="color:red;text-decoration:underline;">mājas lapa</span> ar CSS!
</body>

</html>

Šis variants ir slikts, jo būtībā tādejādi tiek zaudēta visa CSS jēga - satura atdalīšana no izskata. Šādā veidā izvietots kods ir visgrūtāk maināms, kā arī būtiski palielina HTML dokumenta izmēru. Šajā pamācībā šī metode netiks izmantota, taču atsevišķos gadījumos tā var būt noderīga, piemēram, ja veido nevis visu mājas lapu, bet gan tikai saturu, kurā atļauta HTML un CSS izmantošana, bet Tev nav iespējas rediģēt lapas CSS failus.

Laboja mad, labots 6x