În CSS, elementele sunt tratate în mod fundamental ca pătrate sau benzi. Pentru descrierea pătratelor sunt folosite următoarele proprietăți - deja familiare pentru voi -:
• width - lățimea elementului
• height - înălțimea elementului
• left - distanță la stânga
• right - distanță la dreapta
• top - distanță în sus
• bottom - distanță în jos
• margin - marginea exterioară
• border - marginea în jurul elementului
• padding - distanța interioară, adică distanța de la margine la conținutul elementului
Aceste proprietăți au fost deja prezentate.
Lățimea totală a unui element se adaugă din lățimea fiecărei mențiuni. (Același lucru se aplică și pentru înălțime).
Un exemplu:
div#box {
width: 100px;
padding: 20px; /* câte 20px la stânga și la dreapta */
border: 2px solid; /* câte 2px la stânga și la dreapta */
margin: 0 30px; /* câte 30px la stânga și la dreapta */
}Ce lățime are acest zona div? Să aruncăm o privire asupra fiecărei valori:
• 100 de pixeli
• 2 ori 20 de pixeli
• 2 ori 2 pixeli
• 2 ori 30 de pixeli
Aceasta duce la o lățime totală a elementului de 204 pixeli.
Lățimea și înălțimea elementelor sunt determinate prin width și height. Dacă aceste mențiuni lipsesc în fișierul de stiluri, se aplică următoarele:
• Dacă lipsește width, caseta se va afișa cu lățimea elementului înconjurător.
• Dacă lipsește height, elementul va fi afișat la înălțimea conținutului său.
Un exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* câte 2px la stânga și la dreapta */
margin: 0 30px; /* câte 30px la stânga și la dreapta */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Aceasta se va afișa în browser astfel:
Elementul superior al elementului div este body. Prin urmare, elementul se va afișa de fapt cu lățimea elementului body. În ceea ce privește înălțimea, se va orienta după conținut.
Totul la Zero
Fiecare browser are un fișier de stiluri încorporat. În aceste stiluri sunt definite unele valori implicite. Acest lucru este valabil și pentru padding și margin. Aceste valori implicite variază, din păcate, în diferitele browsere. Acest aspect face dificil obținerea de rezultate identice în diverse browsere, în contextul modelului de casetă. Prin urmare, este recomandat să setați marginile impuse de browsere la zero. Acest lucru poate fi realizat astfel:
* { padding: 0; margin: 0; }
Adăugați această linie la începutul fișierului de stiluri. Astfel, puteți începe să plasați casetele în locurile dorite.
Tipuri de Casetă
Modul în care un element este afișat în final și cum influențează alte elemente depinde de tipul elementului. De fapt, specificația CSS face distincția între elementele de bloc și elementele de inline. (Mai există și alte tipuri, dar acestea sunt lăsate la o parte aici, deoarece au un rol secundar).
Elementele de bloc generează întotdeauna o nouă linie. Elementele ulterioare încep de asemenea pe o nouă linie. Elemente tipice de bloc sunt, de exemplu, p, div, h1, ul etc. Pentru aceste elemente se aplică proprietățile menționate anterior: margini exterioare, padding, înălțime, lățime și margini.
<h1>Digital Painting & Matte Painting: Definirea structurii imaginii</h1> <p>Modul 2 - Partea 2: O imagine este întotdeauna un întreg. Cu toate acestea, trebuie să vă gândiți întotdeauna unde ar trebui să se uite observatorul mai întâi.</p>
O privire asupra rezultatului în browser indică faptul că h1 și p generează fiecare o linie proprie.
Elementele Inline, pe de altă parte, nu generează un paragraf propriu, ci sunt afișate în fluxul textului normal. Elementele Inline tipice sunt span, em, strong, img, br etc. Pentru elementele Inline nu se aplică margini verticale sau lățimi și înălțimi.
<h1><em>Digital Painting & Matte Painting</em>: Definirea structurii imaginii</h1> <p>Modul 2 - Partea doua: <strong>O imagine este întotdeauna un întreg</strong>. Cu toate acestea, trebuie să vă gândiți întotdeauna unde ar trebui să se uite observatorul mai întâi.</p>
Și aici o privire asupra rezultatului:
Acum puteți transforma elemente care sunt, de fapt, elemente de bloc, în elemente 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>Modul 2 - Partea 2: <em>O imagine este întotdeauna o entitate întreagă</em>. Cu toate acestea, trebuie întotdeauna să vă gândiți unde ar trebui să se uite privitorul mai întâi.</p>
</body>
</html>Vizualizați rezultatul în browser.
Culoarea de fundal a titlului h1 semnalează că elementul se întinde pe întreaga lățime. Lățimea se orientează în acest caz pe elementul superior body.
Acum intervine proprietatea 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 - Partea 2: <em>O imagine este întotdeauna o entitate întreagă</em>. Cu toate acestea, trebuie întotdeauna să vă gândiți unde ar trebui să se uite privitorul mai întâi.</p>
</body>
</html>
Prin display: inline se schimbă lățimea elementului.
De fapt, acum lățimea elementului se adaptează conținutului existent. Iată o prezentare a valorilor pe care proprietatea display le poate primi:
• none – fără afișare
• block – elementul este afișat ca un element de bloc, generând astfel o nouă linie.
• inline – elementul este afișat ca un element inline, apărând în fluxul textului.
• inline-block – generează vizual un bloc, pentru care se pot specifica înălțimea, lățimea și marginile exterioare. Fiecare element rămâne totuși în fluxul textului. Prin urmare, este o combinație între un element de block și unul inline.
• list-item – elementul este afișat ca un element de bloc, dar este precedat de un marker de listă.
• run-in – generează un element de bloc sau inline în funcție de conținut.
• table – funcționează ca elementul table din HTML.
• inline-table – funcționează ca elementul table din HTML, dar este inline.
• table-row – elementul conține elemente copil aliniate lateral. Funcționează ca elementul tr din HTML.
• table-cell – elementul reprezintă o celulă dintr-o tabelă și funcționează ca elementele th și td din HTML.
• table-row-group – elementul conține un grup de elemente cu mai multe elemente copil aliniate lateral și funcționează ca elementul tbody din HTML.
• table-header-group – elementul conține un grup de elemente cu mai multe elemente copil aliniate lateral și funcționează ca elementul thead din HTML.
• table-footer-group – elementul conține un grup de elemente cu mai multe elemente copil aliniate lateral și funcționează ca elementul tfoot din HTML.
• table-column – aici sunt descrise proprietățile celulelor unei coloane. table-column funcționează ca elementul col din HTML.
• table-column-group – acest element conține un grup de elemente pentru descrierea proprietăților celulelor unei coloane. Funcționează ca elementul colgroup din HTML.
• table-caption – aici este definit titlul tabelei. Proprietatea funcționează ca elementul caption din HTML.
De fapt, CSS oferă opțiuni de afișare diferite pentru o varietate de tipuri de elemente. Acestea joacă un rol important în contextul poziționării elementelor. Mai multe detalii în tutorialele următoare.
