Hvordan skrive innhold Med en div tag

Når du utformer en webside med CSS (Cascading Style Sheets) og HTML, er det viktig å forstå hvordan du skal bruke <div> tagger for å sette stilattributter. En <div> tag, en forkortelse for "divisjon," splitter opp en region i enkelte deler som hver kan ha sine egne stiler. En <div> er en blokk-nivå container, så linjeskift er plassert etter den avsluttende </ div> tag. Du kan angi CSS stil for en <div> tag inline, internt eller eksternt.

Bruksanvisning

1 Åpne HTML-filen i et tekstredigeringsprogram, for eksempel Windows Notisblokk.

2 Legg en <div> tag med "stil" attributt å bruke en innebygd stil ved å legge til følgende kode i kroppen av HTML-filen:

<Div style = "font-weight: bold; color: # FF0000">. Fet rød tekst </ div>

Separer noen stilegenskaper med et semikolon (;).

3 Legg en <div> tag med en "klasse" attributt for å laste CSS-kode fra en intern eller ekstern kilde ved å legge til følgende kode i kroppen av HTML-filen:

<Div class = "MyClass"> Blå tekst </ div>

Du kan bruke en CSS-klasse gjentatte ganger gjennom koden din.

Du kan definere intern CSS-kode ved å skrive inn følgende kode øverst i HTML-filen:

<Head>

<Style type = "text / css">

div.myclass {color: blue; font-size: 10px; }

</ Style>

</ Head>

Alternativt kan du legge til eksterne CSS-kode ved å referere til en CSS-filen i "head" -seksjonen med koden:

<Head>

<Link rel = "stylesheet" type = "text / css" href = "myfile.css" />

</ Head>

Den "myfile.css" filen må inneholde kode:

div.myclass {color: blue; font-size: 10px; }

4 Legg en <div> tag med en "id" attributt for å laste CSS-kode fra en intern eller ekstern kilde ved å legge til følgende kode i kroppen av HTML-filen:

<Div id = "myid"> gul tekst </ div>

En CSS "id" kan bare refereres til en gang i løpet av en webside.

Du kan definere intern CSS-kode ved å skrive inn følgende kode øverst i HTML-filen:

<Head>

<Style type = "text / css">

div # myid {color: gul; font-size: 20px; }

</ Style>

</ Head>

Alternativt kan du legge til eksterne CSS-kode ved å referere til en CSS-filen i "head" -seksjonen med koden:

<Head>

<Link rel = "stylesheet" type = "text / css" href = "myfile.css" />

</ Head>

Den "myfile.css" filen må inneholde kode:

div # myid {color: gul; font-size: 20px; }

5 Lagre HTML-fil og laste den opp på serveren din for å se det nye innholdet.