Hvordan lage en horisontal linje i ekstern Cascading Style Sheets

Du trenger ikke å bruke et bilderedigeringsprogram til å lage fargerike linjer for websidene. Linjer og former - når plassert strategisk - kan legge interesse til nettsteder og hjelpe deg å organisere og separat informasjon om overfylte websider. Ved hjelp av et eksternt stilark, kan du slå hvilken som helst nettleser inn i en tegning maskin som lar deg plassere tilpassede horisontale linjer hvor som helst på hvilken som helst webside.

Bruksanvisning

1 Åpne Notisblokk og lim inn følgende kode i et nytt dokument:

div.line {
background-color: blue;
width: 200px;
høyde: 2 piksler;
}

Denne CSS-kode definerer attributter for div du vil bruke til å lage din horisontal linje. Den background-color attributtet angir linjens farge. Bredde og høyde attributter avgjør linjens bredde og høyde i piksler. Endre bredde- og høydeverdier til noe du liker. Erstatt "Blue" med noen gyldig HTML fargenavn. Finn gyldige farge HTML fargenavn på nettet ved å søke etter HTML fargenavn.

2 Lagre dokumentet med filtypen "Css." Å gjøre dette skaper et eksternt stilark.

3 Lansere noen HTML editor og åpne en av HTML-dokumenter.

4 Lim inn koden nedenfor inn i dokumentet hode seksjon:

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

Erstatt "STYLE_SHEET_NAME.css" med navnet på stilark du lagret. Legge denne koden legger stilark til HTML-dokumentet.

5 Finn dokumentets hoveddel og lim inn følgende kode der du vil at linjen skal vises:

<Div class = "line" />

Dette eneste linje med kode oppretter linjen du definert i eksterne stilark.

6 Lagre dokumentet og vise den i en nettleser for å se linjen på websiden.

Hint

  • Lag en horisontal linje dekke bredden på websiden ved å endre sin bredde verdien til "100%".
  • Plasser så mange linjer som du trenger på websidene ved å legge til div kode vist tidligere i koden.
  • Gjør tykkere linjer ved å øke bredden verdien i det eksterne stilark.