Verkkosivun kohteiden sijoittaminen on olennaista sen yleiselle suunnittelulle. Vaikka ulkoasussa on muita tapoja, kuten taulukkojen käyttämistä ( jota emme suosittele ), paras on käyttää CSS: ää .
Alla tarkastelemme, kuinka voit käyttää yksinkertaista CSS-tyyliä verkko-ominaisuudessa kuvien, taulukoiden, kappaleiden ja muiden vastaavien kohdista.
Huomaa: näitä samoja menetelmiä voidaan käyttää myös ulkoisissa tyyliarkeissa, mutta koska nämä koskevat yksittäisiä kohteita ja todennäköisesti on pysyttävä tällä tavoin, on parasta käyttää line-tyylinen muotoilua, kuten alla mainitut.
Kohdista tekstin kohdat
Kappalemerkintä on ensimmäinen paikka aloittaessasi verkkosivuasi. Se avaa ja sulkee tagit näyttävät tältä:
Kohdassa olevan tekstin oletuslinjaus on sivun vasemmalla puolella, mutta voit myös kohdistaa kappaleesi oikealle ja keskelle.
Float-ominaisuuden avulla voit kohdistaa kohdat elementin oikealle tai vasemmalle puolelle. Kaikki muut elementit, jotka sijaitsevat tämän vanhemman elementin sisällä, virtaavat kelluvan elementin ympärillä.
Parhaan vaikutuksen aikaansaamiseksi kappaleella on parasta asettaa leveys kappaleeseen, joka on pienempi kuin kontin (vanhempi) elementti.
Kohdista tekstin sisältämät kappaleet
Mielenkiintoisimmin kappaleen tekstin kohdistus on perusteltua, mikä kertoo selaimelle, että teksti näytetään olennaisesti ikkunan oikealle ja vasemmalle puolelle.
Jos haluat perustella kappaleen tekstin, käytä teksti-align-ominaisuutta.
Voit myös kohdistaa kaikki kappaleen sisältämän tekstin oikeaan tai vasempaan (oletusasetus) käyttäen tekstin kohdistusominaisuutta.
Tekstin kohdistusominaisuus kohdistaa tekstin elementin sisälle. Teknisesti se ei saisi kohdistaa kappaleen tai muun elementin sisältämiä kuvia, mutta useimmat selaimet käsittelevät kuvia tämän ominaisuuden inline-muodossa.
Kuvien kohdistaminen
Kuvakkeen float-ominaisuuden avulla voit määrittää sivun sijoittelun ja tekstin ympärillä olevan tekstin sijoittamisen.
Aivan kuten yllä olevat kappaleet, kuvamagneetin float style -ominaisuus sijoittaa kuvan sivulle ja kertoo selaimelle, miten tekstin ja muiden elementtien ympärillä näkyy kuvan ympärillä.
Kuvan yläpuolella oleva teksti kulkee kuvan ympärille oikealle, kun kuva näkyy näytön vasemmalla puolella.
Jos haluan tekstin lopettavan kuvan käärimisen, käytän selvää ominaisuutta:
Yhdenmukaistaminen enemmän kuin kappaleet
Mitä kuitenkin haluat, jos haluat kohdistaa enemmän kuin vain kappaletta tai kuvaa? Voit yksinkertaisesti laittaa tyyliominaisuuden jokaiseen kappaleeseen, mutta on tunniste, jota voit käyttää, joka on tehokkaampi:
Yksinkertaisesti ympäröi tekstiä ja kuvia (mukaan lukien HTML-koodit ) tunnisteen ja tyyliominaisuuden (float tai text-align) kanssa, ja kaikki tässä osastossa kohdistetaan haluamaasi kohtaan.
Muista, että osuuksien kappaleisiin tai kuviin lisättyjä kohdistuksia kunnioitetaan, mikä korvaa tunnisteen.