Hvordan lage punkter i HTML

Hvordan lage punkter i HTML


Ved hjelp av punkter bidrar til å bryte opp store biter av tekst og påpeke lister med nyttig informasjon. Bullet poeng er enkle å lage i tekstbehandlingsprogrammet, men når du skriver et HTML-dokument, må du vite koden for å lage dem. Ikke mye koden kreves for å opprette en punktliste. Pakk hver liste i <li> tags og deretter vikle hele listen i <ul> eller "uordnet liste" tags. Du kan deretter gjøre hva du vil med den punktliste ved hjelp av Cascading Style Sheet kode.

Bruksanvisning

1 Skriv inn teksten til dine punkter. Begynn hvert punkt på en egen linje. Pakk hver linje i <li> og </ li> tagger som så:

<Li> Dette er en punktpunkt </ li>

<Li> Dette er et annet kulepunkt </ li>

2 Lag en blank linje over punktliste og skriv deretter en åpning <ul> tag på den linjen. Finn slutten av en punktliste, og deretter opprette en ny tom linje der. Skriv en avsluttende </ ul> tag på den linjen. Hvis du ønsker å style en liste med CSS senere, og deretter legge en klasse eller ID-attributtet til åpningen <ul> tag. Her er et eksempel på en kort punktliste med et ID-attributt:

<Ul id = "myList">

<Li> Bullet en </ li>

<Li> Bullet to </ li>

</ Ul>

3 Bruk "stil" for å lage din punktliste ved hjelp av CSS-koden. Legg CSS-koden mellom <style> og </ style> -kodene mellom <head> og </ head> tags, eller du kan skrive CSS-koden i en ekstern CSS-fil og legge filen ved hjelp av en <link> -kode som denne: <link rel = "stylesheet" href = "sti / til / stylesheet.css" type = "text / css" />. Change "sti / til / stylesheet.css" med banen til CSS-filen du oppretter. Bruk ID eller klasse attributt for å velge punktlister, som så:

myList li {font-style: italic; }

Koden ovenfor velger alle <li> kodene i en tag med en ID "myList." Bytt hash mark med en periode ved valg av klassen attributtet.

4 Bruk "list-style" eiendom i CSS for å endre bullet type. De tilgjengelige kuletyper inkluderer åpne sirkler, utfylte plater og torg for ikke-nummerert, ikke-alfabetisert lister. Her er et eksempel for firkantede kuler:

myList li {list-style: square;}

Hint

  • Bruk <ol> tag i stedet for <ul> for å opprette bestilt lister. Deretter kan du sette "list-style" type til varierende typer tall eller bokstaver.
  • Lag bilde kuler ved å angi "ingen" for "list-style" attributt og deretter gi hver <li> tag en ikke-repeterende, venstrejustert bakgrunnsbilde. Legg padding til venstre side av hver <li> tag å flytte teksten over, ellers vil den overlapper bildet.