Korištenje CSS-a za postavljanje HTML elemenata

• Travanj 18, 2024

CSS pravila omogućuju vam postavljanje HTML elemenata tamo gdje ih želite. Možete prilagoditi način reagiranja na druge elemente koji sjede oko njih ili ih čak u potpunosti sakriti. Evo raščlanjivanja svojstava CSS položaja.

Zaslon: Ovo svojstvo definira kako se element prikazuje. Podešavanje prikaza na "none" skriva element u potpunosti, dok druge vrijednosti mogu promijeniti način reagiranja na druga svojstva i elemente. Na primjer, div su postavljeni da se prema zadanom prikazuju kao "blok", što znači da djeluje kao pravokutni objekt, ali možete koristiti "display: inline" da prisilite div da djeluje poput odlomka. Ili možete učiniti suprotno i upotrijebiti "display: block" kako biste prisilili odlomak da djeluje kao div.

Pozicija: definira kako element reagira na elemente oko sebe. Elementi prema zadanom koriste "položaj: statički", što znači da se prikazuju redom kao što su prikazani u HTML kodu. "Položaj: relativan" znači da se izračunava statička lokacija elementa, a zatim se nadoknađuje onim što navedete u "gornjim" i "lijevim" svojstvima. Ostali elementi stranice djeluju kao da se relativni element još uvijek nalazio u statičkom položaju. Elementi "Položaj: apsolutni" zanemaruju svoj statički položaj, zasnivajući svoj položaj isključivo na vrijednostima u gornjem, lijevom, desnom i donjem svojstvu. Pored toga, drugi će elementi zanemariti taj element (tako da ako niste pažljivi možete završiti s nekim neurednim preklapanjem). "Pozicija: fiksno" slično je "položaju: apsolutno", osim što će element zadržati svoje mjesto čak i ako vaš posjetitelj pomiče stranicu.

Vidljivost: Odlučuje hoće li se element prikazati na stranici ili ne. Razlika između "prikaza: nema" i "vidljivosti: skriveno" je u tome što se u prvom slučaju drugi elementi stranice ponašaju kao da nevidljivi objekt ne postoji; u potonjem će drugi elementi zadržati mjesto za skriveni element. Očito je da je zadana postavka "vidljiva".

Float: Postavlja li element kaskadno s lijeve ili desne strane od ostalih elemenata (ili ne kaskadno uopće, što je zadana postavka). Ovo svojstvo izuzetno je korisno za pravilno postavljanje relativnih elemenata. Morate postaviti širinu bilo kojeg plutajućeg elementa ili se neće ispravno prikazati. Također, ako koristite float za jedan element, vjerojatno ćete htjeti postaviti svojstvo i za sve elemente oko njega.

Obriši: ovo svojstvo djeluje zajedno sa svojstvom "float". Odlučuje kako će element dopustiti drugim elementima da lebde oko njega - "jasno: lijevo" znači da nijedan drugi element ne može plutati s njegove lijeve strane; "clear: right" blokira s desne strane i "clear: oboje" znači da nijedan element ne može plutati na bilo koju stranu. Zadana postavka je "jasno: nijedno" (što znači da drugi elementi mogu plutati na obje strane).

Upute Video: xHTML - CSS za početnike Tutorijal 30 - Upotreba taga "div" (Travanj 2024).