W CSS elementy są zasadniczo traktowane jako prostokątne pola lub pasy. Do opisu tych pól używane są następujące - już z pewnością znane Wam - właściwości:
• width – szerokość elementu
• height – wysokość elementu
• left – odległość od lewej strony
• right – odległość od prawej strony
• top – odległość od góry
• bottom – odległość od dołu
• margin – margines zewnętrzny
• border – obramowanie elementu
• padding – wewnętrzny odstęp, czyli odległość od obramowania do zawartości elementu
Te właściwości zostały już przedstawione.
Szerokość całkowita elementu sumuje się z szerokości poszczególnych informacji. (To samo dotyczy też wysokości).
Przykład:
div#box {
width: 100px;
padding: 20px; /* po 20px z lewej i prawej /
border: 2px solid; / po 2px z lewej i prawej /
margin: 0 30px; / po 30px z lewej i prawej */
}Jaka szerokość ma ten obszar div? Sprawdźmy poszczególne wartości:
• 100 pikseli
• 2 razy po 20 pikseli
• 2 razy po 2 piksele
• 2 razy po 30 pikseli
To daje łączną szerokość elementu wynoszącą 204 piksele.
Szerokość i wysokość elementów są określane za pomocą width i height. Jeśli te informacje nie są jawnie określone w arkuszu stylów, obowiązują następujące zasady:
• Jeśli brakuje width, pole jest szerokie jak otaczający element.
• Jeśli brakuje height, element ma wysokość równą swojej zawartości.
Przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* po 2px z lewej i prawej */
margin: 0 30px; /* po 30px z lewej i prawej */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
W przeglądarce wygląda to następująco:
Elementem nadrzędnym elementu div jest element body. Dlatego element faktycznie jest tak szeroki jak element body. Co do wysokości, dostosowuje się ona do zawartości.
Wszystko na zerze
Każda przeglądarka posiada wbudowany arkusz stylów. W tych arkuszach stylów zdefiniowane są pewne wartości domyślne. Dotyczy to między innymi padding i margin. Niestety te wartości domyślne różnią się w różnych przeglądarkach. Aspekt ten sprawia, że trudno jest uzyskać identyczne wyniki w poszczególnych przeglądarkach, szczególnie w związku z modelem pudełkowym. Dlatego zaleca się ustawienie odstępów, które są predefiniowane przez przeglądarki, na zero. Można to zrobić w ten sposób:
* { padding: 0; margin: 0; }
Dodaj ten wiersz na początek arkusza stylów. W ten sposób możesz teraz zacząć umieszczać pudełka w wybranych miejscach.
Typy pudełek
Sposób wyświetlania elementu i jego wpływ na inne elementy zależy od rodzaju elementu. Faktycznie specyfikacja CSS rozróżnia między elementami blokowymi a elementami liniowymi. (Istnieją inne typy, które nie są tu omawiane, ponieważ odgrywają jedynie pomocniczą rolę).
Elementy blokowe zawsze generują nową linię. Następne elementy zaczynają się również w nowej linii. Typowymi elementami blokowymi są na przykład p, div, h1, ul itp. Dla tych elementów obowiązują wcześniej wymienione właściwości marginesu zewnętrznego, marginesu wewnętrznego, wysokości, szerokości i obramowania.
<h1>Digital Painting & Matte Painting: Definiowanie kompozycji obrazu</h1> <p>Moduł 2 - Część 2: Obraz zawsze tworzy całość. Jednak zawsze należy rozważyć, gdzie patrzący powinien się najpierw skupić.</p>
Spójrz na wynik w przeglądarce, gdzie h1 i p generują osobne linie.
Elementy liniowe natomiast nie generują osobistego akapitu, lecz są wyświetlane normalnie w tekście. Typowymi elementami liniowymi są span, em, strong, img, br itp. Dla elementów liniowych nie obowiązują odstępy pionowe, oraz nie mają one określonych szerokości i wysokości.
<h1><em>Digital Painting & Matte Painting</em>: Definiowanie kompozycji obrazu</h1> <p>Moduł 2 - Część dwa: <strong>Obraz zawsze tworzy całość</strong>. Jednak zawsze należy rozważyć, gdzie patrzący powinien się najpierw skupić.</p>
I tutaj również spojrzenie na wynik:
Teraz możecie zamienić elementy blokowe na elementy inline.
<!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>Moduł 2 - Część 2: <em>Obraz zawsze jest całością</em>. Jednak zawsze trzeba zastanowić się, gdzie pierwszy kieruje wzrok obserwator.</p>
</body>
</html>Sprawdźcie wynik w przeglądarce.
Kolor tła nagłówka h1 sygnalizuje, że element zajmuje całą szerokość. Szerokość orientuje się przy elementach nadrzędnych body.
Teraz pojawia się właściwość 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>Moduł 2 - Część 2: <em>Obraz zawsze jest całością</em>. Jednak zawsze trzeba zastanowić się, gdzie pierwszy kieruje wzrok obserwator.</p>
</body>
</html>
Za pomocą display: inline zmienia się szerokość elementu.
Faktycznie teraz szerokość elementu dostosowuje się do zawartości. Oto przegląd, które wartości można jeszcze przypisać właściwości display:
• none – brak wyświetlania
• block – element jest wyświetlany jako element blokowy, tworzy nową linię.
• inline – element jest wyświetlany jako element inline, pojawia się w bieżącym przepływie tekstu.
• inline-block – zewnętrznie wygląda jak element blokowy, dla którego można określić wysokość, szerokość i margines zewnętrzny. Każdy element pozostaje jednak w bieżącym przepływie tekstu. Jest to zatem kombinacja elementu blokowego i elementu inline.
• list-item – element jest wyświetlany jako element blokowy, ale poprzedzony jest znakiem punktowym.
• run-in – w zależności od zawartości tworzy element blokowy lub element inline.
• table – działa jak znane z HTML element table.
• inline-table – działa jak element HTML table, ale w trybie inline.
• table-row – element zawiera kolejno ułożone elementy potomne. Działa jak element HTML tr.
• table-cell – element reprezentuje komórkę tabeli i działa jak dwa elementy HTML th i td.
• table-row-group – element zawiera grupę elementów z kolejno ułożonymi elementami potomnymi i działa jak tbody z HTML.
• table-header-group – element zawiera grupę elementów z kolejno ułożonymi elementami potomnymi i działa jak thead z HTML.
• table-footer-group – element zawiera grupę elementów z kolejno ułożonymi elementami potomnymi i działa jak tfoot z HTML.
• table-column – służy do opisu właściwości komórek kolumny. table-column działa jak element col z HTML.
• table-column-group – ten element zawiera grupę elementów, które opisują właściwości komórek kolumny. Działa jak colgroup z HTML.
• table-caption – służy do zdefiniowania nagłówka tabeli. Ta właściwość działa jak element caption z HTML.
Faktycznie CSS oferuje różne opcje wyświetlania dla różnych typów elementów. Pełnią one istotną rolę w kontekście pozycjonowania elementów. O tym więcej w kolejnych samouczkach.
