Bullet Point Styles

Når HTML først kom i bruk i begynnelsen av 1990, alle sorterte lister så det samme, fordi det var bare standard svart prikk symbol å bruke som et punkt. Med Cascading Style Sheets (CSS), så mye mer er mulig. Lister kan bli stylet med ulike former, en brukervalgt bilde eller en kombinasjon av alternativer.

Standard CSS Bullet Styles

Standard bullet stiler du kan velge i CSS inkluderer en plate, firkant eller sirkel eller en lavere-roman, upper-roman, lavere-alfa eller øvre bokstav. Koden for en lavere roman karakter ser ut som følgende:

ul {

list-style-type: lower-roman;

}

For å endre en utpekt liste til denne stilen, lage en klasse og gi den nedre roman attributt, som for eksempel:

.ul_new {

list-style-type: lower-roman;

}

Listen kode vil vises i hoveddelen av dokumentet som sådan:

<Ul style = "ul_new">

<Li> første bullet </ li>

</ Ul>

Styling gjennom bullet stilling

Du kan også endre plasseringen av kulen, endre enten det er innrykket eller outdented.

Denne koden er nå skrives:

.ul_new {

list-style-type: lower-roman;

list-style-posisjon: inside;

}

Dette er nyttig når du vil kulen på linje med annet innhold (inne).

Endre stil med et annet bilde

En mer kontrollert måte å få den eksakte utseendet på punktet er å bruke din egen pre-designet kule image. Pass på at bildet er lite nok til å være et punkt, som større bilder kan kaste siden formatering av. Koden vil se omtrent slik ut:

ul {

list-style-image: URL(http://locationoffile/nameoffile.jpg);

}

URLen peker til plasseringen av bildet på serveren.

i HTML

Hvis du ønsker å direkte endre listen i HTML, angi listestilen i hvert kulepunkt:

<Ul>

<Li type = torget> tekst 1 <li>

<Li type = torget> text2 </ li>

</ Ul>

Den raskeste måten er gjennom CSS.