A weboldalon lévő elemek elhelyezése elengedhetetlen az átfogó tervhez. Bár vannak olyan módok, amelyek befolyásolhatják az elrendezést, például asztalok használatát ( amit nem javasolunk ), a legjobb a CSS használata .
Az alábbiakban megnézzük, hogyan használhatunk egy egyszerű CSS-stílusú in-line tulajdonságot a képek, táblázatok, bekezdések stb.
Megjegyzés: Ugyanezek a módszerek használhatók külső stíluslapokon is, de mivel ezek egyéni elemekre vonatkoznak, és valószínűleg szükség van arra, hogy így maradjanak, a legjobb, ha az online stílusban, mint az alábbiakban említettük.
Szöveges bekezdések összehangolása
A bekezdéscímke az első olyan hely, ahol meg kell kezdeni a weboldalt. A címkék megnyitása és zárása így néz ki:
A bekezdésben lévő szöveg alapértelmezett beállítása az oldal bal oldalán található, de a bekezdéseket jobbra és középre is igazíthatja.
Az úszó tulajdonság használatával a bekezdéseket a szülőelem jobb vagy bal oldalához igazíthatja. Minden olyan elem, amely a szülőelem belsejében áramlik, a lebegő elem körül áramlik.
A legjobb hatás elérése egy bekezdéssel a legjobb, ha szélességet állít be a bekezdésnél kisebbre, mint a tartály (szülő) elem.
Állítsa be a szöveget belülről szóló bekezdéseket
Nyilvánvaló, hogy a bekezdés szövegének legérdekesebb igazítása a "justify" (igazolás), ami azt mondja a böngészőnek, hogy az ablaknak a jobb és a bal oldalához igazított szöveget jelenítse meg.
A bekezdés szövegének igazolásához a szöveges igazítás tulajdonságát használja.
A bekezdés belsejében lévő szöveget a jobb oldali vagy a bal oldali (alapértelmezett) értékhez igazíthatja, a szöveges igazítás tulajdonság használatával.
A text-align tulajdonság igazítja az elemen belüli szöveget. Technikailag nem célszerű összehangolni azokat a képeket, amelyek a bekezdésben vagy más elemben szerepelnek, de a legtöbb böngésző a képeket vonja be a tulajdonság vonalaként.
Képek összehangolása
A float tulajdonság használatával képcímke segítségével meghatározhatja a képek elhelyezését az oldalon, és hogyan kezeli a szöveg.
A fenti bekezdésekhez hasonlóan a képcímke úszó-stílus tulajdonsága elhelyezi a képet az oldalon, és megmondja a böngészőnek, hogyan kell a kép körül lévő szövegeket és más elemeket átadni.
A fenti képcímke után a szöveg a kép jobb oldalára áramlik, ahogy a kép a képernyő bal oldalán jelenik meg.
Ha azt szeretném, hogy a szöveg lefagyjon a kép körül, akkor a tiszta tulajdonságot használom:
Több bekezdés összehangolása
Mi a teendő azonban, ha többet akarsz rendezni, mint egy bekezdést vagy egy képet? Bármely paragrafushoz egyszerűen elhelyezheted a stílus tulajdonságait, de van egy címke, amelyet hatékonyabban lehet használni:
Egyszerűen körülveszi a szöveget és a képeket (beleértve a HTML-címkéket ) a címkével és a stílus tulajdonsággal (float vagy text-align), és mindent, ami ebben a körzetben igazodik, hogyan szeretné.
Ne felejtsük el, hogy a szakaszon belüli bekezdésekhez vagy képekhez hozzáadott igazításokat tiszteletben tartják, és felülírják a címkét.