, etc.
Elemente în linie
Spre deosebire de un element bloc, un element inline nu se încadrează într-o linie nouă, ci este plasat pe aceeași linie ca și elementul anterior. Astfel de elemente se găsesc de obicei în interiorul elementelor bloc și lățimea lor depinde doar de conținut și de setările CSS. O altă diferență între un element inline și un element bloc este că poate conține doar conținut și alte elemente inline. Elementele bloc nu pot fi imbricate în elementele inline.
Exemple de elemente inline: , , , , ![]()
etc.
Notă:În HTML5, ordinea în care sunt imbricate etichetele nu joacă un asemenea rol. Elementele nu mai sunt pur și simplu împărțite în bloc și inline, ci sunt grupate în funcție de sens și scop, reprezentând categorii de conținut.
Proprietate de afișare CSS: modificarea tipului de element
Folosind proprietatea de afișare extrem de utilă în CSS, puteți face ca un element bloc să apară ca element inline și invers. Pentru ca un element bloc să se comporte ca un element inline (adică să nu fie tradus într-o linie nouă), trebuie să scrieți o regulă pentru el:
Display: inline;
Dacă doriți să afișați un element inline ca element bloc (astfel încât să existe o întrerupere de linie înainte și după element), scrieți următoarele:
Display: bloc;
Acțiune (display:inline) și (display:block)
De asemenea, puteți crea un „hibrid” - un element bloc cu un comportament ca un element cu litere mici. În acest caz, tot conținutul unor astfel de elemente de bloc va fi afișat ca de obicei, dar blocurile se vor comporta ca elemente inline, aliniându-se pe o linie după alta și înfășurându-se pe o linie nouă numai atunci când este necesar. Marja de colaps în astfel de cazuri încetează să funcționeze. Pentru a transforma un element într-un element bloc-inline, scrieți:
Display: inline-block;
Acțiune (afișare:inline-block)
Mai departe în tutorial: Proprietatea marginii CSS. Veți învăța cum să adăugați chenare elementelor paginii web și ce personalizări le puteți aplica folosind foile de stil în cascadă.
In acest capitol:
Sintaxa elementului
element HTML este unitatea structurală de bază a unei pagini web, scrisă în HTML. Imaginea de mai jos demonstrează sintaxa elementului. Pentru majoritatea etichetelor, sintaxa elementului va arăta la fel, cu excepția etichetelor individuale.
Toate elementele din HTML urmează același format:
- Elementul începe cu o etichetă de deschidere.
- Elementul se termină cu o etichetă de închidere.
- Conținutul unui element este totul între etichetele de deschidere și de închidere.
- Unele elemente nu au conținut (elemente goale).
- Majoritatea elementelor pot conține atribute
Notă: nu uitați să puneți simbolul „ în eticheta de închidere /
„, îi spune browserului că elementul tău s-a încheiat și că ceea ce vine după el este un alt element.
Elemente goale
Există mai multe elemente în HTML care nu au o etichetă de închidere, cum ar fi ![]()
sau
. Astfel de elemente sunt numite gol, deoarece nu conțin niciun conținut și nu au o etichetă de închidere.
Elemente imbricate
Toate documentele HTML sunt alcătuite din elemente imbricate. Cele mai multe dintre ele pot conține fie alte elemente, fie pot fi ele însele imbricate în alte elemente, iar adâncimea de imbricare a elementelor nu este limitată.
Următorul exemplu este format din trei elemente, dintre care două sunt imbricate:
Primul meu paragraf
Când plasați un element în altul, ar trebui să aveți grijă să vă asigurați că elementul imbricat începe și se termină în același element. Astfel, următorul exemplu este incorect:
Acest Foarte
Interesant
Elementele bloc ocupă toată lățimea părintelui lor (container), creând în mod oficial un „bloc” (de unde și numele).
Browserele afișează de obicei elemente la nivel de bloc cu un avans de linie înainte și după element. Elementele bloc pot fi gândite ca un teanc de cutii. Următorul exemplu demonstrează cum arată:
Elemente de bloc
HTML
Acest paragraf este un element bloc; culoarea sa de fundal este colorată pentru a afișa elementul părinte al paragrafului.
CSS
p (culoare de fundal: #8ABB55; ) Utilizare
- Elementele bloc pot fi afișate numai în interiorul unui element si urmasii lui.
Bloc vs. Linear
Există mai multe diferențe cheie între elementele bloc și inline:
Conținut De obicei, elementele bloc pot conține elemente în linie și alte elemente bloc. O parte integrantă a acestui lucru diferenta structurala este ideea că elemente de bloc creați o structură „mai mare” decât elemente încorporate.
Formatare implicită În mod implicit, elementele bloc încep pe o linie nouă, dar elementele inline pot începe oriunde pe linie.
Împărțirea elementelor în bloc și linie utilizat în caietul de sarcini HTML până la versiunea 4.01. HTML5 înlocuiește această dihotomie cu un set mai complex de categorii de conținut. Categorie« litere mici» elemente aproximativ corespunde categoriei, iar pentru Nu există elemente „bloc” cu potrivire directă, ci elemente „bloc” și „inline” împreună corespund aproximativ streaming categorii de conținut în HTML5 (adică, în linii mari, elementele „bloch” sunt conținut în flux minus conținut text).În plus, există și alte categorii, cum ar fi conținutul interactiv.
Elemente
Mai jos este lista completa a tuturor elemente de bloc (deși oficial concept« bloc" nu se aplică la elemente noi în HTML5).
!} Informații de contact.) reprezintă o parte independentă a unui document, pagină, aplicație sau site web, destinată distribuirii ulterioare sau reutilizarii. Acest element poate reprezenta un articol de forum, o revistă sau un articol de ziar, o postare pe blog sau un alt conținut de sine stătător.”> HTML5
Conținutul articolului. reprezintă o secțiune a unui document cu conținut legat indirect de conținutul principal al documentului (deseori prezentat ca o bară laterală)."> HTML5
Conținut secundar.(din limba engleză Block Quotation) indică faptul că textul conținut în acesta este un citat extins. De obicei, acesta (textul) este evidențiat vizual ca înclinat (consultați Nota despre cum să schimbați acest lucru). URI-ul sursei citației poate fi specificat în atributul cite, în timp ce reprezentarea textuală a sursei poate fi specificată de elementul .">
Citate lungă („bloc”). folosit pentru a dezvălui informații (suplimentare) ascunse."> HTML5 Bloc derulant cu detalii. definește o casetă de dialog sau alt element interactiv, cum ar fi un inspector sau o fereastră. Elemente
