Hvordan afkast påvirker websider?

Hvordan afkast påvirker websider?


Websider vise indhold i HTML-elementer. De fleste hjemmesider bruger også CSS (Cascading Style Sheet) kode for at bestemme layout og udseende af disse elementer. CSS erklæringer bestemme dimensionerne af elementer, såvel som områder med polstring og margener omkring dem. Padding er et yderligere område i et element, omkring dens indhold, mens en margin ligger uden for rammerne af elementet. Marginalerne vises inden for de fleste hjemmesider, så udviklere at skabe klare layouts med plads mellem synlige elementer.

Vejledning

1

Opret en prøve HTML webside. Som med de fleste tekniske emner, den nemmeste måde at forstå webudvikling begreber er ved at prøve dem selv. For at gøre dette, skal du oprette en stikprøve HTML-side omrids ved hjælp af følgende syntaks:

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

Dette er den grundlæggende struktur i en webside i HTML-markup. Kopier koden i en ny fil i en teksteditor og gemme den med ".html" udvidelse.

2

Tilføj noget indhold til din side. Ved hjælp af HTML-elementer, tilføje nogle sidens indhold mellem åbning og lukning krop tags i din fil. Følgende eksempelkode viser tilføje to elementer med noget tekst i dem:

<Div id = "første"> Her er noget indhold. </ Div>

<Div class = "andet"> Her er nogle flere. </ Div>

Det første element har et ID attribut, mens den anden har en klasse attribut. Dette vil give din CSS kode til at identificere de elementer, der giver særlige stil regler for hver af dem.

3

Opret en sektion til din CSS kode. Tilføj følgende skitse til en CSS området mellem åbning og lukning hovedet tags på din side:

<Style type = "text / css">

</ Style>

Din CSS kode vil gå mellem disse stil tags. At erklære stil ejendomme til et element ved hjælp af sin id attribut, kan du bruge følgende syntaks:

først {

/ Stilarter for "første" element her /

}

At erklære stil for et element med en klasse attribut, kan du bruge følgende kode:

div.other {

/ Stilarter for "andre" elementer her /

}

4

Tilføj margin egenskaber til dine elementer. Indsæt følgende CSS kode i sektionen for din "første" element:

margin: 10px;

background-color: # FFFF00;

Indstillingen baggrundsfarve er ikke nødvendigt, men vil lade dig se effekten af ​​din margin ejendom erklæring på et øjeblik. Tilføj følgende i sektionen for din "andet" klasse:

bredde: 200px;

højde: 400px;

margin: 10%;

background-color: # 0000FF;

Denne kode gælder en fast bredde og højde på elementet, med en relativ margin ejendom. Marginen er udtrykt ved hjælp af en procentværdi, der repræsenterer en procentdel af elementets dimensioner. Gem din fil og åbne den i en webbrowser for at se effekten af ​​margenen egenskaber.

5

Alter din kode for at anvende forskellige margin egenskaber på hver side af et element. I stedet for at anvende de samme margin egenskaber til alle fire sider af et element, kan du anvende dem individuelt. Følgende eksempel CSS kode demonstrerer anvende alle fire sider på en enkelt linje:

margin: 5px 10px 15px 20px;

Alternativt kan koden angiver to værdier, én for siderne, og en til både top og bund:

margin: 10px 20px;

Du kan også angive hver linje individuelt som følger:

margin-top: 10px;

Eksperimentere med din side ved at ændre værdierne i CSS kode, og visning af resultaterne i din browser.

TIPS

  • Margenen ejendom af et HTML-element fungerer sammen med polstring og grænsekontrol egenskaber som en del af CSS Box Model.
  • Faste værdier for CSS-elementer kan reducere muligheden for en side til at klare godt med forskellige bruger skærmstørrelser.

relaterade artiklar