Hvordan lage en HTML-Border Bruke DIV

January 29

Når du designe og bygge HTML websider, kan du definere innholdet og utseende. Ved hjelp av HTML sammen med CSS, eller Cascading Style Sheets, kan du lage websideelementer med bestemte stiler brukt på dem. CSS lar deg definere ulike stilegenskaper, blant annet grenser. Når erklære grense egenskaper for et element som en "div" i HTML, kan du angi grensen stil, bredde og farge. Du kan også sette grensen for å se annerledes på hver av elementets fire sider.

Bruksanvisning

1 Lag din HTML-side. Åpne en ny fil i et tekstredigeringsprogram og lagre det med ".html" som forlengelse. Skriv inn følgende kode disposisjon:

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

Denne strukturen skaper en grunnleggende Web-side med to "div" elementer i det for demonstrasjon.

2 Opprett CSS-regler for siden din. Åpne en ny fil i en tekst editor og lagre det som "borderstyle.css" eller noen andre navn du foretrekker, så lenge du bruker "Css" forlengelse. Skriv inn følgende CSS-kode:

div.style1 {

border-style: solid;

border-width: 2 piksler;

border-color: # FF0000;}

div.style2 {

border: 5px dobbel # 0000FF;}

Denne koden setter stilen, bredde og farge på grenser for hver av de to "div" klasser i siden. I den første stilen, er hver ramme eiendom erklært separat, mens i andre forkortelsene syntaksen brukes for å sette alle eiendommer i en enkelt erklæring.

3 Legg en link til CSS erklæringer i websiden. Ved hjelp av følgende syntaks, kobler du HTML og CSS-kode ved å legge mellom åpning og lukking "hodet" tagger:

Hvis du har lagret din CSS-filen med et annet navn, endre denne koden innenfor "href" attributt for å gjenspeile navnet du velger. Åpne websiden i en nettleser for å se effekten av din stil erklæringer.

4 Legg til en annen "div" element på siden din. Sett inn følgende kode før siden slutt "head" tag:

<Div class = "style3"> <p> Div style 3 </ p> </ div>

5 Legg til flere stil erklæringer til CSS-filen:

div.style3 {

border-left: 3px stiplede # 00FF00;

border-top: tykk groove # FFFF00;

border-right: tynne ryggen # 00FFFF;

border-bottom: medium innfelt # FF00FF;}

Denne koden setter ulike grense egenskaper for hver side av den nye "div", viser de mulige innstillinger du kan velge.

6 Legg egenskaper for padding og marginer i din CSS-koden. The Box Model i CSS bestemmer hvor grensen ser ut i forhold til andre element egenskaper. Elementet Området umiddelbart omgitt av polstring, da grensen, deretter et område for marginer utenfor dette. Legg til følgende til en av dine CSS "div" stiler å se effekten av disse egenskapene:

padding: 10px;

margin: 5px;

Når du tester siden din i en nettleser, vil du se at området mellom element innhold og grensen - samt gapet mellom elementet og den omkringliggende siden - har økt.

Hint

Bruk CSS grenser for å gjøre deler av teksten i HTML innholdet lettere lesbar, ved å dele en side i klare seksjoner.
CSS vises forskjellig på tvers av nettlesere, så det er best å teste sidene dine i mer enn én.