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:
Nereti ir tā, ka atsevišķus tagus vajag noformēt atšķirīgi no pamatnoformējuma. Piemēram, visu rindkopu burtu krāsa ir noteikta pelēka, bet šad un tad, lai uzsvērtu kādu domu, ir nepieciešams kādas rindkopas tekstu attēlot sarkanā krāsā. Šim nolūkam lieliski kalpo CSS kategorijas!
Lai labāk izprastu CSS kategorijas, varētu lietot piemēru par kādu 10. klasi, kurā mācījās trīs Jāņi. Parasti, lai konkretizētu, kuram Jānim šoreiz būs jāatbild, skolotājs vārdam "Jānis" mēdza "piekabināt" kādu papildus apzīmējumu - vai nu uzvārdu, vai arī "Jānis Nr.1", "Jānis Nr.2" utt. Tā arī mēs varam nošķirt un konkretizēt HTML tagus. Lūk CSS kods, kurā noformulēti trīs atšķirīgi rindkopu attēlošanas veidi, kur "p" būs parastais noformējums, bet pēc izvēles būs pieejami vēl divi. Pie tam šiem pārējiem diviem rindkopu noformējuma veidiem jāpiešķir kāds apzīmējums, kuru no HTML elementa atdala ar punktu:
p {font-family: arial; color: gray}
p.x {font-family: tahoma; color: red}
p.melnais {font-family: "sans-serif"; color: black}
Tagad sasaistīsim HTML dokumentu ar mūsu CSS failu ar <link> tagu un pielietosim visus trīs rindkopu noformējuma veidus. Lai to izdarītu, <p> tagā mums būs jānorāda, kuru nodefinēto CSS rindkopas kategoriju (class) gribam pielietot šīs rindkopas teksta noformēšanā. To norāda pēc formulas: class="mūsu dotais noformējuma varianta nosaukums", pie tam nosaukums jāliek pēdiņās. Lūk piemērs..
<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>Pelēks arials!</p>
<p class="x">Sarkana tahoma!</p>
<p class="melnais">Melns sans-serifs!</p>
</body>
</html>
..un rezultāts!
Pelēks arials!
Sarkana tahoma!
Melns sans-serifs!
Vēl gribu pieskarties kādai lietai, kas saistīta ar CSS ID. ID varētu tulkot kā kāda unikālu, tam vien piemītošu atpazīšanas zīmi. Cilvēkam tas, piemēram, ir personas kods.
ID pamatdoma ir nedaudz līdzīga CSS kategorijām, kad tiek nodefinēts kāda elementa īpašs attēlošanas veids un tam tiek piešķirts savs ID- unikāls vārds. Taču pamatatšķirība ir tajā, ka W3C standarti nosaka, ka vienu un to pašu ID vārdu lapā vai dokumentā var pielietot tikai vienreiz (t.i., tas ir unikāls, tikai šajā vienīgajā gadījumā šis elements lapā attēlojams sekojoši..), piemēram, lapas vienīgā reklāmkaroga (banner) noformēšanai un tml.
CSS ID kods, kur ID sastāv no simbola"#" un "nosaukuma",..
#specvirsr {font-family: arial; color: red}
#spectext {font-family: arial; color: red}
..tagi HTML dokumentā, ar atsauci uz CSS ID..
<h3 id="specvirsr">Sarkans arials virsrakstā!</h3>
<p id="spectext">Sarkans arials rindkopas tekstā.</p>
..un rezultāts!
Sarkans arials rindkopas tekstā.
Piebilde - vienam un tam pašam HTML elementam vienlaicīgi drīkst pielietot gan "ID" gan "class"!
Autortiesības © 2005-2009, kasis.lv. Visas tiesības aizsargātas.