kasis :: CSS sasaiste ar HTML

Sākumlapa
"Pirmā web lapa"
HTML
Citi materiāli

Ceļošana - kalni

CSS

Sintakse
Sasaiste ar HTML
Kategorijas un ID
Šrifts
Teksts
Fons
Saraksta noformējums
Saites

Vēl iesaku:

W3Schools
Krāsu palete

Pārlūku atbalsts CSS
(1), (2)

Sasaiste ar HTML

1. Ārējs CSS fails (datne :))

Atveram kādu vienkāršu teksta redaktora programmu, piemēram "Notepad" (iekš Windows XP: Start > Programms > Accessories > Notepad) un ierakstam mūsu kodu:

p {color: gray}

Tad saglabājam dokumentu ar brīvi izvēlētu nosaukumu, bet kā faila paplašinājumu liekam ".css", t.i., neatstājam noklusēti piedāvāto ".txt". Varētu būt, piemēram tā: "noformejums.css".
Mūsu HTML dokumentā "head" sadaļā norādām atsauci (link) uz mūsu failu, kurā glabājas jaunie noformējuma nosacījumi:

Pilns HTML lapas kods varētu izskatīties šādi:

<html>
<title>Eksperiments</title>
<meta http-equiv="content-type" content="text/html; charset= windows-1257">
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>
<body>
<p>Lūk, kāds noformējums!!</p>
</body>
</html>

Šis arī ir galvenais CSS pielietošanas veids, kad visas Web lapas daudzo HTML dokumentu noformējums glabājas atsevišķi un HTML dokumentos atrodas tikai saite jeb links uz ".css". Patiesi ir vērts atklāt šīs domas diženumu!

2. Lapas iekšējais CSS

Šajā gadījumā CSS noformējumu saglabā nevis atsevišķā failā, bet visu ievieto konkrētā HTML dokumenta "head" sadaļā. Šo variantu ir vērts izmantot, ja konkrētajam dokumentam būs atšķirīgs (unikāls) noformējums no visiem citiem. Šoreiz būs jālieto tags <style> nevis <link>!

<head>
<style type="text/css">
p {color: red}
</style>
</head>

3. Elementa iekšējais CSS

Ir iespēja iekļaut savu CSS noformējumu arī kādā atsevišķā, konkrētā HTML elementā jeb tagā (t.i., "tikai šī rindkopa tiks noformēta tā un tā.."), taču to sīkāk neapskatīsim, jo principā to pašu var izdarīt ar HTML līdzekļiem, kā arī tiek pazaudēta CSS jēga - vienlaicīgi noformēt veselu HTML dokumentu vai tagu attēlošanu. Pie tam praksē daudz biežāk līdzīgas problēmas risina ar CSS kategoriju (classes) palīdzību, jo parasti pat unikālus noformējumus Web projektā pielieto vairāk kā vienu reizi. Protams, vienmēr ir izņēmumi :).

Visbeidzot varētu rasties jautājums: "Vai vienā HTML dokumentā var lietot pat visus trīs CSS pielietojuma variantus?" Atbilde ir: "Jā, protams!" Tikai šajā gadījumā būtu jāņem vērā piesaistītā CSS subordinācija, jeb prioritāte. Tā ir sekojoša:

Elementa iekšējais CSS. Šim ir visaugstākā prioritāte. Piemēram, ja esam noteikuši, ka šīs rindkopas burtu krāsa būs sarkana, tad, neatkarīgi no tā, kādu burtu krāsu rindkopām paredz citi CSS noformējuma noteikumi, šīs rindkopas burti tomēr paliks sarkanā krāsā. Tomēr, ja citi CSS noteikumi paredz vēl kaut ko papildus, kas nav minēts šajā augstākas prioritātes CSS-ā, tad šie konkrētie papildus noteikumi tiks ņemti vērā (piemēram, lapas iekšējais CSS nosaka, ka visu rindkopu tekstam jāatrodas kursīvā utt.). Šis pats princips attiecas arī uz "lapas iekšējo" un "ārējo" CSS, t.i., augstāka ranga CSS-am vienmēr ir "pirmā roka".
Lapas iekšējais CSS.
Ārējais CSS fails.

<< Atpakaļ

Tālāk >>