CSS este o foaie de stil în cascadă, care este un limbaj pentru descrierea aspectului paginilor web. Unul dintre principalele avantaje ale CSS este capacitatea de a înlocui aspectul tabelului cu aspectul blocului.
Este necesar
Editor de cod HTML
Instrucțiuni
Pasul 1
Creați primul bloc. În formă HTML, va arăta ca o etichetă div cu ID-ul „block01”. Aici, identificatorul block01 indică faptul că în descrierea CSS, toate proprietățile acestui bloc sunt specificate pentru selectorul # block01.
Pasul 2
Descrieți blocul în CSS. În stilurile CSS, specificați numele identificatorului (# block01), iar în acolade descrieți parametrii - lățime, poziționare, decalaj, culoare de fundal etc. De exemplu, ar putea arăta astfel: # block01 {width: 150px; înălțime: 150px; poziție: absolută; sus: 0px; stânga: 0px; culoare de fundal: roz}. Această descriere presupune că caseta va avea 150 pixeli lungime și 150 pixeli lățime, va fi poziționată rigid în colțul din stânga sus al documentului, iar fundalul acesteia va fi colorat în roz.
Pasul 3
Acordați blocului o poziționare relativă. Dacă utilizați poziționarea nu absolută, ci relativă în descrierea CSS, atunci puteți plasa blocuri nu cu o fixare rigidă la o grilă de coordonate, ci relativ la alte blocuri deja existente. Pentru a face acest lucru, modificați poziția codului: absolut; sus: 0px; stânga: 0px după poziție: relativă; partea de sus: 200 px; stânga: 100 px.
Pasul 4
Dați blocului o rotunjire. În CSS, declarația frontieră-rază este responsabilă pentru acest lucru. Adăugați următorul cod în foaia de stil: border-radius: 8px. Blocul va avea acum colțuri rotunjite. Dacă doriți doar să rotunjiți câteva colțuri, descrieți raza separat pentru fiecare dintre ele: border-radius: 8px 8px 0px 0px.
Pasul 5
Dați blocului o lovitură. Pentru a evidenția conturul unui bloc cu o linie subțire, adăugați următorul cod la descrierea CSS: border-top: 1px negru punctat. Această instrucțiune înseamnă că marginea blocului va fi neagră și va avea o grosime de un pixel. În acest caz, linia de contur în sine va fi afișată ca o linie punctată (punctată - o linie punctată, punctată - puncte, continuă - o linie continuă).
Pasul 6
Setați proprietățile blocului rămase. Specificați în descrierea CSS ce tip de literă trebuie utilizat pentru textul din interiorul blocului, care ar trebui să fie dimensiunea fontului, alinierea și indentarea de la marginile blocului. Aceste proprietăți sunt descrise în definițiile font-family, font-size, text-align și padding.
Pasul 7
Puteți utiliza proprietatea float pentru a personaliza fluxul unui bloc peste altul. Dacă îl setați la „stânga”, atunci restul elementelor vor curge în jurul blocului din stânga și „dreapta” - în dreapta. Dacă setați valoarea float ca „none”, alinierea blocului nu va fi setată. Proprietatea clear din CSS împiedică blocul să curgă spre dreapta, stânga sau ambele părți și suprascrie instrucțiunea float.
