În cazul în care sunt create blocuri
Mai întâi de toate, trebuie să înțelegeți că CSS nu creează blocuri - le face. Prin ele însele, ele sunt formate în HTML - limba de marcare hipertext. În mod prestabilit, blocul în înălțime va ocupa un spațiu egal cu înălțimea conținutului acestuia. În lățime, va ocupa tot spațiul disponibil în părinte.
De exemplu: dacă lățimea containerului părinte este de 300 de pixeli și un bloc este creat în el, va ocupa și această lățime (numai dacă părintele nu are indentare). Toate celelalte elemente care vor fi create în container nu pot sta pe aceeași linie cu primul bloc și vor fi mutate în continuare.
Un element normal de bloc gol este scris folosind tag-ul pereche - div. În sine, nu face nimic. De exemplu, să ne amintim că multe etichete au un anumit sens: paragraful face parte dintr-un text, sunt necesare subtitrate pentru a îmbunătăți navigația și percepția etc. Dar eticheta div este doar un container.
Modelul obișnuit de blocare
În comportamentul obișnuit, mai multe blocuri create vor merge de sus în jos unul după altul. Există o problemă serioasă acum, nu-i așa? Și cum să facem o coloană laterală, deoarece, în cele din urmă, face site-uri pe care într-o singură linie există 3-5 anunțuri de știri și chiar cu imagini? Aici suntem și CSS vine la ajutor, cu care puteți aranja elementele de pe pagină în orice fel.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Blocarea aspectului site-ului folosind css: proprietăți de bază
După cum am văzut mai sus, blocurile implicite sunt foarte încăpățânate. Nu admiteți alții, dar ocupă și întreaga lățime. Desigur, acest lucru ar trebui, uneori, să fie corectat, deoarece structura multor site-uri necesită acest lucru.
Să vedem mai întâi dimensiunea. În css, puteți înregistra dimensiunile elementelor utilizând proprietățile de lățime și înălțime. Adesea, valorile sunt date în pixeli, deși uneori în procente sau alte unități relative.
Să ne imaginăm că există un container mare părinte și că există un element bloc în el. Pentru a defini proprietățile pentru aceasta prin foaia de stil, trebuie să o abordați cumva. Dacă scriem aceasta:
Că absolut toate blocurile vor ajunge la o lățime pe care evident nu avem nevoie. Deci, trebuie să adăugați o blocare unei clase de stil sau unui identificator. Ele sunt adăugate folosind atributele de clasă și id, iar valoarea este un nume arbitrar, dar ar trebui să înceapă cu o literă engleză. Puteți utiliza, de asemenea, numere, cratime și sublinieri. De obicei cele mai importante elemente de pe pagină obțin un identificator (antet, conținut, subsol) și clase de stil mai puțin importante (elemente de meniu, titluri etc.).
Aș spune chiar că nu este o chestiune de importanță, ci dacă este unică. Este clar că două pălării de pe site nu pot fi, în principiu, (se referă la pălăria din partea de sus a site-ului), dar elementele de meniu pot fi atâta timp cât se dorește.
Cel mai important lucru este să ne amintim - identificatorul este atribuit unui element, unul și mai multe nu pot fi scrise pentru niciun alt element. Aceasta este o etichetă unică. O clasă de stil poate scrie cel puțin o sută de elemente, iar un bloc poate fi setat printr-un spațiu cât mai multe clase pe care le doriți. Aici:
Și ce crezi, ce i se va întâmpla acum, când scriem astfel de proprietăți?
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Toate aceste reguli se aplică blocului și acum la orice element specificați, de exemplu, clasa de frontieră, va primi un cadru verde gros de 10 pixeli.
Mai multe blocuri pe o linie
Apoi, voi descrie pe scurt două proprietăți importante care vor permite blocurilor să fie amplasate într-o singură linie. Doar un exemplu: există un container cu o lățime de 1000 de pixeli. Sarcina dvs. este de a împinge 3 blocuri de 300 pixeli lățime, astfel încât acestea să fie situate pe o linie orizontală. Cum se face acest lucru? Există două moduri.
Mai întâi, fiecărui bloc trebuie să i se atribuie o clasă. În general, unii dezvoltatori adaugă clase generale pentru blocarea elementelor:
Astfel, fiecare element poate fi proiectat în felul său, dar toate pot primi aceleași instrucțiuni, deoarece toate conțin clasa inline. Și în ea putem scrie:
Prima proprietate convertește elementele la blocuri de linii. Ei nu își pierd proprietățile, dar pot fi plasați într-o linie dacă au suficientă lățime în părinte.
A doua proprietate fixează fiecare element la marginea din stânga a recipientului părinte. Dar din moment ce al doilea și al treilea element nu pot cuibări până la margine, ele stau în spatele primei și formează și o linie.
Dimensiuni relative
Cum este codarea site-ului de cauciuc în css? Acest model are un mare avantaj față de fix, deoarece poate varia în funcție de lățimea ferestrei. Se face în principiu pe acest principiu: elementul comun al containerului are o lățime fixă și deja în el sunt plasate părțile structurale, la care dimensiunea este scrisă în procente.
Așa se întâmplă totul. Restul de 8% din lățime va fi lăsat indentat, să zicem. Șablonul nostru va avea deja o anumită adaptabilitate - se va micșora atunci când lățimea ferestrei este redusă în browser.
Desigur, aspectul adaptiv este departe, dar astfel de reguli stau la baza acestuia. Apoi, cu ajutorul interogărilor media, puteți controla lățimea șablonului pentru a fi convertit într-un șablon cu o singură coloană, unde și când să reduceți lățimea etc. și altele asemenea.
Astăzi aș vrea să termin. Mai multe informații despre aspectul blocului pot fi obținute din lecțiile noastre premium, în special din manualul de pe CSS pentru începători. care descrie proprietățile de bază pe care trebuie să le cunoașteți atunci când lucrați cu elemente de bloc.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
Trimiteți-le prietenilor: