Hvordan sette to Borders til et element

Webdesignere bruke grenser for å skille elementene fra sine omgivelser. Borders legge visuell interesse til websider og fange oppmerksomheten til besøkende. I de tidlige dagene av Nettpublisering, utviklerne lagt grenser til nettsteder ved koding grense parametre direkte inn HTML-kode. I dag kan du bruke Cascading Style Sheets, ofte kalt CSS, for å legge til to eller flere grenser til Web sideelementer uten å endre HTML-koden.

Bruksanvisning

1 Åpne Notisblokk og opprette et nytt dokument. Legg til følgende HTML-kode i dokumentet:

<Html>

<! - Begin Leder Seksjon ->

<Head>

<! - Begin Tittel Section ->

&lt;title>&lt;/title>

<! - Legg CSS koden nedenfor ->

</ Head>

<! - End Leder Seksjon ->

<! - Begin Body Seksjon ->

<Body>

<P class = "topBottom"> Dette avsnittet har en venstre og høyre kant </ p>

<P class = "leftRight"> Dette avsnittet har en venstre og høyre kant </ p>

</ Body>

<! - End Body Seksjon ->

</ Html>

Dette skaper to avsnitt. Hvert avsnitt refererer til en CSS-klasse.

2 Legg til følgende CSS-koden etter linjen som leser, "Legg til CSS koden under:"

<Style type = "text / css">

.topBottom {border-top: 2px solid rød; border-bottom: 2px solid rød; }

.leftRight {border-left: 2 piksler stiplet blå; border-right: 2 piksler stiplet grønn; }

</ Style>

Dette er CSS klasser. De to avsnittene i dokumentet "<body>" -delen refererer til disse klassene. Den første klassen, "topBottom," legger solide røde grenser til de øverste og nederste kant av første ledd. Den "leftRight" class legger prikkete grønne grenser til venstre og høyre kant av andre ledd. Grensene har en bredde på 2 piksler.

3 Trykk "CTRL" og "S" for å åpne "Lagre som" -vinduet. Skriv "Test_Add_Borders.html" i "File Name" feltet og trykk "Enter" for å lagre filen i en mappe.

4 Åpne Windows Utforsker og finn filen. Dobbeltklikk på den for å åpne den i nettleseren din. Kontroller at hvert avsnitt har de to grensene som er definert i CSS-koden.

Hint

  • Du kan også justere padding, margin og andre CSS grense egenskaper (se Ressurser). Tweak disse egenskapene for å skreddersy en side element utseende som passer dine design mål.
  • Siden du definerte grense eiendommer i CSS i stedet for HTML, kan du endre kantlinjer uten å berøre HTML-koden. For eksempel vil endre første ledd grensen farge til gult, erstatte "rødt" med "gul" i at avsnittet CSS definisjon.