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
Kastes
Pozicionēšana

Vēl iesaku:

W3Schools
Krāsu palete

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

Kastes (box)

Katrs elements (rindkopa utt.) nosacīti tiek uztverts kā kastīte, kura saturu vēl ietver iekšējās apmales (padding), rāmis (border) un ārējās apmales (margin). Katrai no šīm ietverošajām sastāvdaļām (faktiski īpašībām) atsevišķi var regulēt augšas (top), labās puses (right), apakšas (bottom) un kreisās puses (left) vērtības (platumu), vai arī minētās vērtības var noteikt uzreiz visām pusēm vienādas (ievērojiet pušu nosaukšanas secību!! - skatīt attēlā un koda piemēros!).

Lai gan piemēra attēlā ir lietotas krāsas uzskatāmības labad, patiesībā margin fons vienmēr ir caurspīdīgs, bet pārējo fonu nosaka elementam piešķirtā fona krāsa vai attēls.

Kastītes izmēru nosaka dažādi faktori, tajā skaitā vai elementa kastītei ir noteikts platums (width) un augstums (height), vai tas ietver citas kastītes utt. Tomēr pamatprincips ir, ka platumu nosaka vecāka (parent) platums, t.i, ja konkrētais elements ir iekļauts citā (vecāka) elementā, bet augstumu nosaka bērna (child, t.i., iekļautā elementa) augstums, t.i., "pēdējā" elementa satura apjoms (izņēmums ir absolūti pozicionēti elementi un body elements, kuram nav augstākstāvošu elementu, tamdēļ tā platumu nosaka interneta pārlūkprogrammas loga platums).

Nosakot platumu, var lietot sekojošu pierakstu:

• "margin: 5px" - 5px platas būs visas puses;
• "margin: 5px 4px 5px 4px" - augša 5px, labā puse 4px, apakša 5px, kreisā puse 4px platas;
• "margin: 5px 4px" - uzrādot tikai divas vērtības, pirmā attiecas uz augšu un apakšu (5px), bet otrā uz abiem sāniem (4px);
• "margin: 5px 4px 3px" - uzrādot trīs vērtības, pirmā attiecas uz augšu (5px), otrā uz abiem sāniem (4px), bet trešā uz apakšu (3px);
• "margin-top: 5px" - izmantojot domu zīmi var konkretizēt tikai kādu atsevišķu pusi (top, right, bottom, left).

CSS kods..

..HTML kods..

..rezultāts!

Aplūkosim piemēru! Ir div kastīte, kas ir vecāks (parent) tajā esošajai rindkopai (bērnam). "Rindkopas kastītei" pieejamo platumu nosaka vecāka elementa satura daļas platums, t.i. tā daļa, kas ir "iekšpus vecāka paddinga" :). Savukārt kreisās malas "atkāpe" līdz rindkopas rāmim veidojas no vecāka 10px padding un bērna 30px margin. Vēl ir vērts ievērot, ka, lai gan rindkopai padding vērtības netiek definētas, tām tomēr tiek piemērotas kādas noklusētās vērtības un tā nav nulle, t.i., teksts tomēr nav "pielipis" rāmim! Minēto ir sevišķi vērtīgi atcerēties, veidojot lapas struktūru, jo ja veidotājs margin un padding vērtības nedefinēs, tām būs noklusētās vērtības un elementi var netikt izvietoti kur iecerēts! Un vēl - ievērojiet HTML kodā, ka pirmajai rindkopai apakšējā margin ir 20px, bet otrajai rindkopai augšējā ir 15px. Šādos gadījumos vērtības netiek saskaitītas, bet gan pārklājas (collapse), t.i., šajā gadījumā starp rindkopām ir 20px margin!

Margin vērtības var izteikt kā fiksētu (piemēram, pikseļos), procentuālu un auto platumu (vērtība būs atkarīga no citu īpašību vērtībām). Ir pieļaujamas arī negatīvas vērtības.

Padding vērtības var izteikt kā fiksētas (piemēram, pikseļos) vai procentuālas (tiek rēķinātas no kastītes satura daļas platuma!). Negatīvas vērtības nav pieļaujamas! Padding attiecas uz visiem elementiem, izņemot tabulas sastāvdaļām, piemēram, rindām, kolonnām un to grupām, bet ir attiecināms uz pašu tabulas elementu.

Rāmis (border)

Rāmim var noteikt sekojošas īpašības:

• platumu (border-width) - var būt fiksēta vērtība, vai "thin" (plāna), "medium" (vidēja), "thick" (bieza). Lai definētu kādu konkrētu līniju, var lietot, piemēram, īpašību border-right-width;
• krāsu (border-color) - vērtību pierakstu var skatīt CSS sadaļā "Šrifts". Vētība var būt arī "transparent", bet caurspīdīgums nenozīmē līnijas neesamību - runa ir tikai par krāsu!. Lai definētu kādas konkrētas līnijas krāsu, var lietot, piemēram, īpašību border-right-color;
• stilu jeb līnijas veidu (border-style) - ar sekojošām vērtībām (skat. zemāk). Lai definētu kādas konkrētas līnijas stilu, var lietot, piemēram, īpašību border-right-style:
• "none" - t.i., līnijas platums ir nulle. Šī ir noklusētā vērtība!;
• "hidden" - vizuāli līnija nav redzama, taču tās vieta tiek ierēķināta;
• "dotted" - punktēta līnija;
• "dashed" - t.s. raustītā līnija;
• "solid" - nepārtraukta līnija;
• "double" - dubultlīnija. Šādas līnijas platumus = kopējo abu līniju un tās atdalošās atstarpes platumu;
• "groove" - vizuāli atgādina iegravētu līniju;
• "ridge" - uz āru vērsta līnija, pretējs iegravētajam stilam;
• "inset" - vizuāli atgādina iespiestu līniju;
• "outset" - uz āru vērsta līnija, pretējs iespiestajam stilam;

Protams, var definēt visas īpašības uzreiz gan visam rāmim, gan tikai kādai no pusēm, piemēram, border-right

CSS kods..

..HTML kods..

..rezultāts!



Autortiesības © 2005-2011, kasis.lv. Visas tiesības aizsargātas.