Plasseringen av elementer på en nettside er viktig for den overordnede utformingen. Selv om det finnes andre måter å påvirke oppsettet på, for eksempel å bruke tabeller (som vi ikke anbefaler), er det best å bruke CSS.
Nedenfor tar vi en titt på hvordan du bruker en enkel CSS-stil in-line-eiendom for å justere bilder, tabeller, avsnitt og mer.
Merk: Disse samme metodene kan også brukes på eksterne stilark, men siden disse gjelder for individuelle elementer og sannsynligvis må være på den måten, er det best å bruke in-line styling som det som er nevnt nedenfor.
Juster tekstparagrafene
Stikkordet er det første stedet å starte med å legge ut websiden din. Det åpnes og lukkes, ser slik ut:
Standardjusteringen av tekst i et avsnitt er til venstre på siden, men du kan også justere avsnittene til høyre og midtpunkt.
Ved hjelp av flytegenskapen kan du justere avsnittene til høyre eller venstre for foreldreelementet. Eventuelle andre elementer i det overordnede elementet vil strømme rundt det flytede elementet.
For å få best mulig effekt med et avsnitt, er det best å sette en bredde på avsnittet som er mindre enn beholderen (foreldreelementet).
Juster innvendige avsnitt i teksten
Kanskje, den mest interessante tilpasningen for avsnittet tekst er "rettferdiggjør", som forteller nettleseren å vise teksten justert, i hovedsak til både høyre og venstre side av vinduet.
For å rettferdiggjøre teksten i et avsnitt, vil du bruke egenskapen for tekstjustering.
Du kan også justere all teksten i et avsnitt til høyre eller venstre (standard), ved hjelp av tekstjusteringsegenskapen.
Tekstjusteringsegenskapen vil justere teksten inne i elementet. Teknisk sett er det ikke meningen å justere bilder som finnes i avsnittet eller annet element, men de fleste nettlesere behandler bilder som inline for denne egenskapen.
Justere bilder
Ved å bruke flytegenskapen på en bildetikett kan du definere plasseringen av bilder på siden og hvordan teksten vil vikle rundt dem.
På samme måte som avsnittene ovenfor, plasserer egenskapen float-stil i bildemerket ditt bildet på siden og forteller nettleseren hvordan man kan flytte tekst og andre elementer rundt det bildet.
Tekst som følger bildeteksten ovenfor, flyter rundt bildet til høyre som bildet vises til venstre for skjermen.
Hvis jeg vil at teksten skal stoppe innpakning rundt bildet, bruker jeg den klare egenskapen:
Justere mer enn avsnitt
Men hva om du vil justere mer enn bare et avsnitt eller et bilde? Du kan ganske enkelt sette en stilegenskap i hvert avsnitt, men det er en tag du kan bruke som er mer effektiv:
Bare omgjø teksten og bildene (inkludert HTML-koder) med taggen og stilegenskapen (flyt eller tekstjustering) og alt i den delen vil bli justert slik du vil.
Husk at justeringer lagt til avsnitt eller bilder i divisjonen, vil bli æret, overstyrer taggen.
