Hvordan lage Fargerik HTML Borders

Legge subtile sprut av farge til web sideelementer krever ikke bilderedigering eller programmering. Nettstedet eiere ofte plasserer fargerike HTML kanter rundt elementer på sine websider ved hjelp av Cascading Style Sheets. CSS definerer måten websideelementer ser i en nettleser. Ved å legge til CSS referanser til bilder og avsnitt, kan du omgir dem med HTML grenser som viser alle farger du velger.

Bruksanvisning

1 Åpne en av websiden din dokumenter med Notepad eller en HTML-editor.

2 Legg et avsnitt, en knapp og et bilde til dokumentets "kroppen" seksjonen som vist i følgende HTML-kode:

<P> Dette er et avsnitt </ p>

<Input class = "buttonBorder" type = "button" value = "My Button" />

<Img class = "imageBorder" />

Erstatt "Image_Name.jpg" med navnet på et bilde på harddisken. Du kan også erstatte det navnet med en URL som peker til et bilde på nettet. Merk at bilde og knapp tags inneholde "klasse" egenskaper. Bildet refererer til en CSS-klasse som heter "imageBorder", mens knappen refererer til "buttonBorder" -klassen.

3 Legg til følgende CSS-koden til dokumentets "<style>" -delen:

.imageBorder {border-color: blue; border-style: solid; border-width: 4px; }

Den skaper en CSS-klasse som heter "imageBorder." Klassen setter grense egenskaper for en side element som refererer det. I dette eksempelet er klassens border-fargeverdi "Blue". Bildet er definert i "kroppen" seksjonsreferanser denne klassen så det viser en blå ramme når den vises i en nettleser.

4 Legg denne CSS koden under koden beskrevet i forrige trinn:

.buttonBorder {border-color: red; border-style: prikket; border-width: 2 piksler;}

Denne CSS-klasse, "buttonBorder," setter grensen egenskapene til sidens knappen fordi knappen tag referansene denne klassen. I dette tilfellet, er grensen fargeverdi "Red". Grense-stil og border-bredde egenskaper skape en stiplet kantlinje med bredde er 2 piksler. Andre border-stil egenskaper du kan velge inkludere "solid" - som vist i forrige "imageBorder" klasse - ". Stiplede" og

5 Plasser følgende linje med CSS etter koden vist i forrige trinn:

p {border-farge: Grønn; border-style: dobbel; border-width: 1px;}

Denne koden er forskjellig fra det som vises på bildet og knappen fordi dette CSS bruker en "p" velgeren å definere sine egenskaper. Den "p" velgeren setter stilen for alle avsnittene på siden. Velger grense-fargeverdi er "Green" i dette eksempelet.

6 Lagre dokumentet og vise den i nettleseren din. Bildet, ledd og knappen vil vise grensene du har definert i CSS.

Hint

  • Oppdage flere grensen stil egenskaper ved å gjennomgå CSS tutorials i lærebøker eller på nettet. Når du ønsker å legge til rammer til alle elementer av en bestemt type, for eksempel avsnitt, spare tid ved å bruke en velger som beskrevet i denne fremgangsmåten.