Použitie CSS na umiestnenie prvkov HTML

• Smieť 6, 2024

Pravidlá CSS vám umožňujú umiestniť prvky HTML presne tam, kde ich chcete. Môžete nastaviť, ako reagujú na iné prvky, ktoré okolo nich sedia, alebo ich dokonca úplne skryť. Tu je rozpis vlastností umiestnenia CSS.

Displej: Táto vlastnosť definuje spôsob zobrazenia prvku. Nastavením zobrazenia na „žiadny“ sa prvok úplne skryje, zatiaľ čo iné hodnoty môžu zmeniť, ako prvok reaguje na iné vlastnosti a prvky. Napríklad divs je predvolene nastavený na zobrazovanie ako „block“, čo znamená, že funguje ako obdĺžnikový objekt, ale môžete použiť „display: inline“, aby ste div namiesto toho donútili konať ako odsek. Alebo môžete urobiť pravý opak a použiť príkaz „display: block“ na vynútenie odseku, aby fungoval ako div.

Pozícia: Definuje, ako prvok reaguje na prvky v okolí. Prvky v predvolenom nastavení používajú „position: static“, čo znamená, že sa zobrazujú v poradí, v akom sa zobrazujú v kóde HTML. „Pozícia: relatívna“ znamená, že sa vypočíta statické umiestnenie prvku a potom sa vyrovná podľa toho, čo označíte vo vlastnostiach „hore“ a „vľavo“. Ostatné prvky stránky fungujú, akoby bol relatívny prvok stále na svojom statickom mieste. Prvky „Pozícia: absolútne“ ignorujú svoje statické umiestnenie a svoju polohu zakladajú výlučne na hodnotách v horných, ľavých, pravých a spodných vlastnostiach. Okrem toho budú ďalšie prvky ignorovať tento prvok (takže ak si nie ste opatrní, môžete skončiť s chaotickým prekrývaním). „Pozícia: pevná“ je podobná ako „pozícia: absolútna“ s tým rozdielom, že prvok si zachová svoje miesto, aj keď váš návštevník stránku posúva.

Viditeľnosť: Rozhoduje, či sa prvok zobrazí na stránke alebo nie. Rozdiel medzi „display: none“ a „visibility: hidden“ je ten, že v prvom prípade sa ostatné prvky stránky správajú, akoby neviditeľný objekt neexistoval; v poslednom prípade budú mať iné prvky miesto pre skrytý prvok. Je zrejmé, že predvolené nastavenie je „viditeľné“.

Float: Nastavuje, či sa prvok kaskáduje naľavo alebo napravo od ostatných prvkov (alebo sa vôbec nevstupuje, čo je predvolené). Táto vlastnosť je veľmi užitočná pri správnom umiestnení relatívnych prvkov. Pre každý pohyblivý prvok musíte nastaviť šírku, inak sa nebude správne zobrazovať. Ak použijete float pre jeden prvok, pravdepodobne budete chcieť nastaviť vlastnosť aj pre všetky prvky v okolí.

Vymazať: Táto vlastnosť funguje v spojení s vlastnosťou „plavák“. Rozhoduje o tom, ako prvok nechá okolo neho vznášať ďalšie prvky - „jasný: vľavo“ znamená, že žiadne ďalšie prvky nemôžu vznášať vľavo; „clear: right“ blokuje pravú stranu a „clear: both“ znamená, že na obe strany sa nemôžu vznášať žiadne prvky. Predvolené nastavenie je „clear: none“ (čo znamená, že ostatné prvky sa môžu vznášať na obidve strany).

Video Návody: HTML 07: Obrázky, rozmery obrázkov, obrázky v linkoch, hotlinking (Smieť 2024).