В CSS елементите основно се третират като правоъгълни кутии или ленти. За описание на кутиите се използват следните свойства – които вече сигурно познавате:
• width – широчина на елемента
• height – височина на елемента
• left – отстояние отляво
• right – отстояние отдясно
• top – отстояние отгоре
• bottom – отстояние отдолу
• margin – външен отстъп
• border – рамка около елемента
• padding – вътрешен отстъп, с други думи отстояние от рамката до съдържанието на елемента
Тези свойства вече бяха представени.
Общата широчина на елемент се събира от широчината на всеки отделен аргумент. (Същото важи също и за височината).
Пример:
div#box {
width: 100px;
padding: 20px; /* по 20px отляво и отдясно */
border: 2px solid; /* по 2px отляво и отдясно */
margin: 0 30px; /* по 30px отляво и отдясно */
}Каква е ширината на тази област div? Нека се запознаем с отделните стойности:
• 100 пиксела
• 2 пъти по 20 пиксела
• 2 пъти по 2 пиксела
• 2 пъти по 30 пиксела
Това дава обща широчина на елемента от 204 пиксела.
Ширината и височината на елементите се определят чрез width и height. Ако тези стойности не са ясно посочени в таблицата ви, важи следното:
• Ако липсва width, кутията ще бъде широка колкото околният елемент.
• Ако липсва height, елементът ще бъде висок колкото съдържанието му.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* по 2px отляво и отдясно */
margin: 0 30px; /* по 30px отляво и отдясно */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
В браузъра това изглежда по следния начин:
Надгорният елемент на елемента div е body. Следователно елементът се показва точно колкото широк елементът body. За височината се ориентира към съдържанието си.
Всичко на нула
Всеки браузър има вграден стил. В тези стилове са дефинирани някои стандартни стойности. Това важи например и за padding и margin. За съжаление, тези стандартни стойности варират в различните браузъри. Този аспект затруднява постигането на идентични резултати в различните браузъри, по отношение на Box модела. Затова е препоръчително да нулирате отстъпите, които са предварително зададени в браузъра. Това може да се направи по следния начин:
* { padding: 0; margin: 0; }
Добавете този ред в началото на вашия стил. По този начин може да започнете да поставяте кутиите на желаните места.
Типове кутии
Как елементът накрая ще се покаже и как ще повлияе на други елементи зависи от типа на елемента. Фактически CSS спецификацията разграничава между Блок елементи и Inline елементи. (Всъщност има и други типове, които обаче не се споменават тук, защото играят подчинена роля).
Блок елементите винаги създават нов ред. Следващите елементи също започват в нов ред. Типични блок елементи са например p, div, h1, ul и т.н. За тези елементи важат предишните обяснени външен отстъп, вътрешен отстъп, височина, широчина и рамка.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
При поглед във браузъра, видяхме, че h1 и p създават отделни редове.
Inline елементите, от своя страна, не създават собствен абзац, а се показват в нормалния текстов поток. Типични инлайн елементи са span, em, strong, img, br и т.н. За инлайн елементите няма вертикален външен отстъп и няма зададени широчини и височини.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
И тук един поглед към резултата:
Сега вече можете да правите елементи, които по същество са блокови елементи, инлайн елементи.
<!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>Модул 2 - Част 2: <em>Една картина винаги е цяло</em>. Винаги обаче трябва да се премисли къде първо трябва да погледне зрителят.</p>
</body>
</html>Вижте резултата в браузъра.
Цветът на фона на h1 заглавието сигнализира, че елементът заема цялата ширина. Ширината зависи от по-горния body елемент.
Сега идва свойството 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>Модул 2 - Част 2: <em>Една картина винаги е цяло</em>. Винаги обаче трябва да се премисли къде първо трябва да погледне зрителят.</p>
</body>
</html>
С display: inline ширината на елемента се променя.
Наистина сега ширината на елемента се адаптира към наличното съдържание. Тук е преглед на това, кои стойности все още могат да се определят за display:
• none – няма показване
• block – елементът се показва като блоков елемент, създавайки нов ред.
• inline – елементът се показва като инлайн елемент, който се появява в тека на текста.
• inline-block – създава външно блок, за който могат да бъдат определени височина, ширина и външно положение. Всеки елемент обаче остава в тека на текста. Това е комбинация от блоков и инлайн елемент.
• list-item – елементът се показва като блоков елемент. Представен е с маркер за списък.
• run-in – създава блоков или инлайн елемент в зависимост от съдържанието.
• table – има същото действие като познатият ни table елемент от HTML.
• inline-table – действа като HTML елемента table, но инлайн.
• table-row – елементът съдържа деца, които са подредени едно до друго, работи като HTML елемента tr.
• table-cell – елементът представлява клетка в таблица и работи като двата HTML елемента th и td.
• table-row-group – елементът съдържа група от елементи с подредени деца и работи като tbody елемента в HTML.
• table-header-group – елементът съдържа група от елементи с подредени деца и работи като thead елемента в HTML.
• table-footer-group – елементът съдържа група от елементи с подредени деца и работи като tfoot елемента в HTML.
• table-column – тук се описват свойствата на клетките в колона. table-column работи като елементът col от HTML.
• table-column-group – този елемент съдържа група от елементи, чрез които се описват свойствата на клетките в колона. Той действа като HTML елемента colgroup.
• table-caption – с този елемент се дефинира заглавието на таблицата. Свойството работи като HTML елемента caption.
Наистина CSS предоставя различни опции за представяне на различни типове елементи. Те играят решаваща роля във връзка с позиционирането на елементите. Повече за това в следващите уроци.
