Hvordan lage en stiplet Web Kantlinje med HTML

June 7

Borders med spesielle typer linjer trekke oppmerksomhet til et bestemt område på en webside. Med HTML og CSS, kan du bruke forskjellige kantlinjer rundt teksten, som stiplede, prikkete og solide grenselinjer. En stiplet kantlinje omgir et tekstområde med en rekke dash - linjer. Prøv å bruke en stiplet kantlinje effekt på en spesiell kunngjøring, en advarsel eller en bilderamme. Som med andre dekorative elementer i HTML, ikke bruk grenselinjestiler overdrevent eller siden vil se rotete.

Bruksanvisning

inline Styles

1 Åpne websiden i en webside editor eller tekst editor. Rull ned forbi <body> til du kommer til den delen av dokumentet der du vil sette inn en stiplet kantlinje. Ikke gå forbi </ body> -koden, som indikerer slutten av synlig sideinnhold.

2 Sett inn eller finne et HTML-element som du vil bruke en stiplet kantlinje. Eksempler er <p> tag for avsnitt og <div> tag for divisjoner på en webside. Skriv inn HTML-koden i området i dokumentet der du vil at grenselinjen skal vises.

For eksempel, her er en DIV element med noen eksempler teksten mellom taggene:

<Html>

<Body>

<Div> Eksempel tekst her. </ Div>

</ Body>

</ Html>

3 Legg en CSS (Cascading Style Sheets) erklæring til HTML-koden ved å legge til "style =" (uten anførselstegn) og eiendommen "border-style" med verdien "knust." Eiendommen og verdien må være i anførselstegn sammen og separert med kolon. Inkluder eiendommen "border-width" også, og satt sin tykkelse verdien til det du ønsker. Du kan også legge til farge. Hver eiendom med sin verdi må være atskilt fra annen eiendom og verdien av et semikolon. For eksempel:

For en illustrasjon av CSS syntaks for inline stiler, se "Ressurser".

4 Lagre websiden. Åpne siden i en nettleser for å sørge for at den stiplede kantlinjen ser ut som planlagt.

style Sheet

5 Åpne stilark for Web-siden i en teksteditor eller CSS editor. Du kan også opprette et tomt nye stilark hvis du ikke har gjort ennå. Et stilark er en tekstfil med Css forlengelse.

6 Klikk på en blank ny linje i dokumentet.

7 Lag en ny erklæring for en CSS selector tilsvarende HTML-elementet du vil legge til en stiplet kantlinje til. For eksempel, "p" (uten anførselstegn) for HTML-elementet <p> "div" (uten anførselstegn) for <div>. Legg en klasse til velger hvis du vil at grenselinjen effekt du vil bruke bare en bestemt klasse av dette elementet på websiden. (Hvis du ikke bruker klasser eller er usikker på hva de er, trenger du ikke å legge dem.)

Et eksempel på en erklæring, der "p" er velgeren og "kunngjøring" er klassen:

p.announcement {

}

8 Sett eiendommen for grensen stil og verdien "stiplede" mellom klammeparentes {og}. Skill eiendom og verdi med et kolon og ende med et semikolon.

Eksempel:

p.announcement {

border-style: dashed;

}

Se "Ressurser" for en kort beskrivelse av de deler av en CSS erklæring.

9 Bruk ramme farge og bredde egenskaper for å definere grenselinjen.

Eksempel:

p.announcement {

border-style: dashed;

border-width: 3px;

border-color: # 00FF00;

}

10 Lagre endringer i stilarket i tekstredigeringsprogram eller CSS editor.

11 Åpne websiden. Link til stilarket hvis du ikke allerede har. Koblingen må være mellom <head> og </ head> taggene. Hvis stilark er oppkalt annet enn "style.css" endre koden for å vise til det navnet.

Eksempel:

<Head>

</ Head>

12 Rull ned forbi <body> -koden, men før den avsluttende koden </ body>. Klikk hvor som helst i dokumentet mellom disse kodene, hvor du vil den stiplede kantlinjen skal vises.

1. 3 Skriv inn HTML-elementet for teksten du vil legge til en stiplet kantlinje til. Hvis du har gjort en erklæring for "p" for avsnitt i stilarket, pluss en klasse som heter "kunngjøring", skriver HTML-elementet som følger.

Eksempel:

<P class = "kunngjøring"> OBS! Dette er en stiplet kantlinje prøven. </ P>

14 Lagre websiden. Dobbeltklikk på websiden filen fra sin mappe for å åpne den i din standard nettleser og vise den stiplede grensen effekt.