CSS elementi tiek apstrādāti pamatā kā taisnstūra kastes vai lentes. Kastu aprakstam tiek izmantotas šādas - jums jau labi zināmas - īpašības:
• width - elementa platums
• height - elementa augstums
• left - attālums pa kreisi
• right - attālums pa labi
• top - attālums uz augšu
• bottom - attālums uz leju
• margin - ārējā mala
• border - rāmis ap elementu
• padding - iekšējais atstarpe, tas ir attālums no rāmja līdz elementa saturam
Šīs īpašības jau ir iepriekš iepazīstinātas.
Elementa kopējais platums sastāv no atsevišķo norāžu platumēm. (Tas pats attiecas arī uz augstumu).
Piemērs:
div#kaste {
platums: 100px;
padding: 20px; /* pa 20px pa kreisi un pa labi /
border: 2px solid; / pa 2px pa kreisi un pa labi /
mala: 0 30px; / pa 30px pa kreisi un pa labi */
}Kādu platumu ir šai div-zonai? Apskatīsim atsevišķās vērtības:
• 100 pikseļi
• 2 reizes 20 pikseļi
• 2 reizes 2 pikseļi
• 2 reizes 30 pikseļi
Tas veido elementa kopējo platumu 204 pikseļi.
Elementu platums un augstums tiek noteikti ar width un height. Ja šīs norādes nav uzskaitītas stila lapā, tad ir šādi:
• Ja trūkst width, kaste tiks rādīta tik plati, cik apkārtējais elements.
• Ja trūkst height, elements tiks rādīts tik augsts, cik tā saturs.
Piemērs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#kaste {
border: 1px solid; /* pa 2px pa kreisi un pa labi */
mala: 0 30px; /* pa 30px pa kreisi un pa labi */
fona-krāsa:#6600CC;
}
</style>
</head>
<body>
<div id="kaste">PSD-Tutorials.de</div>
</body>
</html>
Pārlūkā tas izskatās šādi:
div-elementa pārraudzītājs ir body. Tādējādi elements šķietami tiek rādīts tik plati kā body-elements. Attiecībā uz augstumu tas orientējas pēc satura.
Viss uz Nulli
Katrā pārlūkprogrammā ir iebūvēta stila lapu. Šajos stila lapās ir definētas dažas noklusējuma vērtības. Tas attiecas, piemēram, uz padding un margin. Diemžēl šīs noklusējuma vērtības atšķiras dažādos pārlūkprogrammās. Šis aspekts padara sarežģītu identisku rezultātu sasniegšanu pārlūkprogrammās attiecībā uz kastes modeli. Tāpēc ieteicams uzstādīt nulles atstarpi, kas ir iepriekš noteiktas pārlūkprogrammās. To var izdarīt šādi:
* { padding: 0; margin: 0; }
Pievienojiet šo rindu sava stila lapas sākumā. Šādā veidā jūs tagad varat sākt novietot kastes vēlamajās vietās.
Kastes tipi
Kā elements galu galā tiek attēlots un kā tas ietekmē citus elementus, atkarīgs no elementa veida. Patiesībā CSS specifikācija atšķir starp bloka elementiem un līnijas elementiem. (Ir arī citi veidi, kas šeit netiek minēti, jo tie spēlē tikai otršķirīgu lomu).
Bloka elementi vienmēr izveido jaunu rindi. Sekojošie elementi sākas arī jaunā rindā. Tipiski bloka elementi ir, piemēram, p, div, h1, ul uc. Šiem elementiem ir raksturīgas iepriekš minētās īpašības: ārējā atstarpe, iekšējā atstarpe, augstums, platums un rāmis.
<h1>Digitālais Pasējums un Matējums: Attēla izveide</h1> <p>Modulis 2 - Daļa 2: Attēls vienmēr ir vienots. Tomēr vienmēr ir jāapsver, uz ko skatītājam vajadzētu pirmām skatīties.</p>
h1 un p katrs izveido jaunu rindu.
Līnijas elementi savukārt neliek paši savu rindkopu, tos gan rāda normālā teksta plūsmā. Tipiski līnijas elementi ir span, em, strong, img, br utt. Līnijas elementiem nav vertikālas ārējās atstarpes un nav platuma un augstuma norāžu.
<h1><em>Digitālais Pasējums un Matējums</em>: Attēla izveide</h1> <p>Modulis 2 - Daļa divi: <strong>Attēls vienmēr ir vienots</strong>. Tomēr vienmēri ir jāapsver, uz ko skatītājam vajadzētu pirmām skatīties.</p>
Un šeit ir skats uz rezultātu:
Tagad jūs varat pārvērst elementus, kas faktiski ir bloka elementi, par rindas elementiem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitālais gleznošana un Matte gleznošana</h1>
<p>Modulis 2 - Daļa 2: <em>Attēls vienmēr ir vesels</em>. Tomēr vienmēr jāapsver, uz ko skatītājam vajadzētu skatīties pirmajam.</p>
</body>
</html>Paskatieties uz rezultātu pārlūkprogrammā.
h1 virsraksta fona krāsa norāda, ka elements aizņem visu platumu. Platums tiek noteikts, pamatojoties uz augstāko body elementu.
Tagad nākamajā īpašība display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitālais gleznošana un Matte gleznošana</h1>
<p>Modulis 2 - Daļa 2: <em>Attēls vienmēr ir vesels</em>. Tomēr vienmēr jāapsver, uz ko skatītājam vajadzētu skatīties pirmajam.</p>
</body>
</html>
Ar display: inline elements platumam mainās.
Faktiski tagad elements platumā pielāgojas esošajam saturam. Šeit ir apkopots, kādi vērtības var būt piešķirtas display:
• none – nav parādīts
• block – elements tiek parādīts kā bloka elements, tādējādi radot jaunu rindiņu.
• inline – elements tiek parādīts kā rindas elements, tas parādās teksta plūsmā.
• inline-block – vizuāli veido bloku, kuram var noteikt augstumu, platumu un ārējo atstarpi. Tomēr katrs elements paliek teksta plūsmā. Tas ir bloka un rindas elementa kombinācija.
• list-item – elements tiek rādīts kā bloka elements. Papildus tam tiek pievienots iešķirotājs.
• run-in – atkarībā no satura veido bloka vai rindas elementu.
• table – darbojas kā zināmais table HTML elements.
• inline-table – darbojas kā HTML elements table, bet rindā.
• table-row – elements satur paralēli kārtoti bērnu elementi. Darbojas kā HTML tr elements.
• table-cell – elements norāda uz tabulas šūnu un darbojas kā abas HTML th un td elements.
• table-row-group – elements satur grupu ar vairākiem paralēli kārtotiem bērnu elementiem un darbojas kā tbody HTML elements.
• table-header-group – elements satur grupu ar vairākiem paralēli kārtotiem bērnu elementiem un darbojas kā thead HTML elements.
• table-footer-group – elements satur grupu ar vairākiem paralēli kārtotiem bērnu elementiem un darbojas kā tfoot HTML elements.
• table-column – tā apraksta kolonnas šūnu īpašības. table-column darbojas kā col HTML elements.
• table-column-group – šis elements satur grupu elementu, kas apraksta kolonnas šūnu īpašības. Tas darbojas kā HTML colgroup elements.
• table-caption – šīs ir tabulas virsraksts. Īpašība darbojas kā HTML elements caption.
Tiešām, CSS piedāvā dažādus attēlojuma veidus dažāda veida elementiem. Tie spēlē svarīgu lomu elementu pozicionēšanā. Uzziniet vairāk nākamajos pamācībās.
