Hvordan lage Mindre CSS Bullets

Den Cascading Style Sheets språk gir brukerne mange ulike alternativer å velge mellom når du velger en liste kule stil ved å bruke "list-style-type" eiendom. Dessverre er ingen av disse forskjellige stiler er en mindre kule, så for å gjøre det du har for å få en litt mer kreativ og bruke "list-style-image" eiendom. For å gjøre dette må du også designe dine egne kuler, men du trenger bare å gjøre det en gang, og det er enkelt nok å gjøre.

Bruksanvisning

1 Åpne et nytt bilde dokument i Paint, som kommer med operativsystemet Windows, eller andre bildeskaping programmet du foretrekker. Endre størrelse på bildet slik at det er den størrelsen du vil at punktene skal være, som vil trolig bare være noen få piksler bred og høy. Male hele bildet svart, eller den fargen du foretrekker, og lagre det.

2 Last opp bildet til et praktisk sted på serveren din. Å ha en mappe spesielt for bilder er ofte en god idé, men laste opp bildefilen dit fungerer for deg.

3 Åpne CSS-filen som tilsvarer den nettsiden du vil de nye kulene skal vises på. Hvis du vil at nye kuler til å tilsvare en viss liste bare da definere en id for den listen ved å inkludere "id =" listname "" i åpningslisten koden i HTML-filen. Deretter definerer den listen i CSS-filen og inkludere nettadressen under så egenskapene på "list-style-image". Så for eksempel din CSS-koden kan se slik ut, "#listname {list-style-image: URL (http: //www.yourwebsite/images/image.gif);}"

4 Sett "list-style-image: URL (http: //www.yourwebsite/images/image.gif); & quot; under egenskaper for alle sorterte lister - ul {list-style-image: URL (http: // www.yourwebsite / images / image.gif);} -, bestilte lister - ol {list-style-image: url (http: //www.yourwebsite/images/image.gif);} - eller visse listene bare ved å tilordne en klasse ID til de aktuelle listene i HTML-fil og deretter definere disse listene i CSS-filen, for eksempel .lists {list-style-image: url (http: //www.yourwebsite/images/image. gif);}.