CSS elementai pagrindžiai yra traktuojami kaip stačiakampiai arba juostos. Aprašant dėžutės yra naudojamos šios jums jau gerai žinomos savybės:
• width – elemento plotis
• height – elemento aukštis
• left – atstumas į kairę
• right – atstumas į dešinę
• top – atstumas į viršų
• bottom – atstumas žemyn
• margin – išorinė kraštinė
• border – rėmas aplink elementą
• padding – vidinis atstumas, tai atstumas nuo rėmo iki elemento turinio
Šios savybės jau buvo pristatytos.
Elemento bendras plotis skaičiuojamas iš atskirų nurodymų pločių suma. (Ta pati taisyklė taikoma ir aukščiui).
Pavyzdys:
div#box {
width: 100px;
padding: 20px; /* po 20px kairėje ir dešinėje /
border: 2px solid; / po 2px kairėje ir dešinėje /
margin: 0 30px; / po 30px kairėje ir dešinėje */
}Koks yra šio div srities plotis? Pažvelkime į atskirus dydžius:
• 100 pikselių
• 2 kartus po 20 pikselių
• 2 kartus po 2 pikselius
• 2 kartus po 30 pikselių
Viso tai sudaro elemento bendrą 204 pikselių plotį.
Elementų plotis ir aukštis nustatomi naudojant width ir height. Jeigu tų nurodymų stiliuose nėra aiškiai nurodyta, tada taikomi šie taisyklės:
• Jeigu trūksta width, dėžutė bus tokio pločio kaip ją apgaubiantis elementas.
• Jeigu trūksta height, elementas bus tokio aukščio kaip jo turinys.
Pavyzdys:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* po 2px kairėje ir dešinėje */
margin: 0 30px; /* po 30px kairėje ir dešinėje */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Naršyklėje tai atrodo taip:
Viršutinis div elemento elementas yra body. Taigi, elementas iš tikrųjų bus tokio pločio kaip body elementas. Dėl aukščio jis orientuosis pagal turinį.
Viskas nulioje
Kiekviena naršyklė turi įmontuotą stiliaus lentelę. Šiose stiliaus lentelėse yra apibrėžti keli numatyti vertės. Tai taip pat taikoma padding ir margin. Deja, šios numatytosios vertės skiriasi tarp skirtingų naršyklės. Šis aspektas sudaro sunkumą pasiekti identiškus rezultatus skirtingose naršyklėse, įskaitant dėžutės modelio susijungimą. Todėl rekomenduojama nustatyti atstumus, kurie yra nustatyti naršyklėse, iki nulio. Tai galima padaryti šitaip:
* { padding: 0; margin: 0; }
Pridėkite šį eilutę į jūsų stiliaus lentelę. Šitaip galėsite pradėti dėžutes vietose, kur jūs norite.
Dėžių tipai
Kaip elementas pateikiamas galiausiai ir kaip jis įtakoja kitus elementus priklauso nuo elemento tipo. Iš tikrųjų CSS specifikacija skiria tarp blokinės ir įterptinės elementų. (Yra ir kitų tipų, kurie šiuo metu čia neapžvelgiami, nes jie vaidina antrinį vaidmenį). Blokiniai elementai visada sukuria naują eilutę. Toliau einantys elementai taip pat pradeda naujoje eilutėje. Tipiniai blokiniai elementai yra pavyzdžiui p, div, h1, ul ir tt. Šiems elementams taikomos anksčiau nurodytos savybės išorinis atstumas, vidinis atstumas, aukštis, plotis ir rėmas.
<h1>Skaitmeninis Piešimas & Matinis Piešimas: Nustatyti paveikslėlio struktūrą</h1> <p>Modulis 2 - Dalis 2: Paveikslėlis visuomet yra vientisas. Vis dėlto visada reikia apgalvoti, kur žiūrovas turėtų pažvelgti pirmiausiai.</p>
p kiekvienas sukuria savo asmeninę eilutę.
Įterptiniai elementai priešingai nesukuria savo atskiro pastraipos, jie tiesiog yra įprasto teksto sraute. Įprasti įterptiniai elementai yra
span, em, strong, img, br ir kt. Šiems elementams netaikomi vertikaliai išoriniai atstumai, plotis ir aukštis.
<h1><em>Skaitmeninis Piešimas & Matinis Piešimas</em>: Nustatyti paveikslėlio struktūrą</h1> <p>Modulis 2 - Dalis du: <strong>Paveikslėlis visuomet yra vientisas</strong>. Vis dėlto visada reikia apgalvoti, kur žiūrovas turėtų pažvelgti pirmiausiai.</p>
I štai čia rezultatas:
Dabar galite paversti elementus, kurie iš esmės yra blokiniai elementai, į linijinius elementus.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Vaizdas visuomet yra vientisas</em>. Tačiau reikia visuomet apmąstyti, į ką pirmiausia turėtų atkreipti dėmesį žiūrovas.</p>
</body>
</html>
Pareikalaukite rezultato naršyklėje.
h1 antraštės fono spalva rodo, kad elementas užima visą pločį. Plotis yra orientuotas pagal viršesnį body elementą.
Dabar būtina pritaikyti savybę 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>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Vaizdas visuomet yra vientisas</em>. Tačiau reikia visuomet apmąstyti, į ką pirmiausia turėtų atkreipti dėmesį žiūrovas.</p>
</body>
</html>
Pakeitus display: inline, elemento plotis pasikeičia.
Iš tikrųjų, dabar elemento plotis prisitaiko prie turinio. Čia pateikiamas sąrašas, kurie rodo, kokie kiti priešdėliai gali būti priskirti display savybei:
• none – nerodoma
• block – elementas yra rodomas kaip blokinis elementas, todėl sukuria naują eilutę.
• inline – elementas yra rodomas kaip linijinis elementas, atrodo kaip teksto srautas.
• inline-block – išoriškai elementas atrodo kaip blokas, jo aukštis, plotis ir išoriniai atstumai gali būti nustatyti. Vis dėlto, kiekvienas elementas lieka teksto sraute. Šis tipas yra bloko ir linijinio elemento derinys.
• list-item – elementas yra rodomas kaip blokinis elementas, bet jam papildomai pridedamas sąrašo žymuo.
• run-in – priklausomai nuo turinio, sukuriamas blokinis arba linijinis elementas.
• table – veikia kaip gerai žinomas HTML table elementas.
• inline-table – veikia kaip HTML table elementas, bet linijiniu būdu.
• table-row – elementai yra išdėstyti vienas šalia kito, veikia kaip HTML tr elementas.
• table-cell – elementas atstovauja lentelės ląstelei ir veikia kaip HTML th ir td elementai.
• table-row-group – elementas apima elementų grupę su daugeliu išsidėsčiusių kūdikių elementų ir veikia kaip tbody HTML elemento.
• table-header-group – elementas apima elementų grupę su daugeliu išsidėsčiusių kūdikių elementų ir veikia kaip thead HTML elemento.
• table-footer-group – elementas apima elementų grupę su daugeliu išsidėsčiusių kūdikių elementų ir veikia kaip tfoot HTML elemento.
• table-column – čia aprašomos stulpelio ląstelių savybės. table-column veikia kaip HTML col elementas.
• table-column-group – šis elementas apima grupę elementų, kuriuose aprašomos stulpelių ląstelių savybės. Jis turi panašumą su HTML colgroup elementu.
• table-caption – čia apibrėžiamas lentelės pavadinimas. Ši savybė veikia kaip HTML elemento caption.
Iš tikrųjų, CSS siūlo labai skirtingas rūšis skirtingų elementų atvaizdavimui. Jos vaidina lemtingą vaidmenį elementų išdėstyme. Apie tai daugiau sužinosite sekantiems pamokų skyriams.
