CSS -listestiltype

Et kaskaderende stilark inneholder koden som er ansvarlig for å legge til effektene og egenskapene til innholdet som er utviklet av HTML. Både HTML og CSS brukes til å lage en statisk webside eller et dynamisk nettsted. CSS inneholder flere effekter, en av dem er en stilegenskap som brukes på listen over HTML. Denne egenskapen er å forbedre listeelementene, det er sannsynligvis tekst, ved å legge til effekten på kulene. I dag handler diskusjonen vår om stiltypen på listen. I artikkelen nevner vi et par eksempler for å style kulene på listen unikt.

En HTML -kode inneholder to grunnleggende deler: og . Hodedelen inneholder tittelkoden og taggen hvis vi bruker en intern CSS. Taggen inneholder taggene til alt innholdet vi ønsker å lage på nettsiden. Liste -taggen er også skrevet inne i kroppskoden.

Tilsvarende er CSS -koden kategorisert som inline, intern og ekstern CSS. Effekten som er skrevet med taggen inne i innholdskoden er Inline CSS. Den som er skrevet i HTML -hodeseksjonen er den interne CSS. Og den tredje, den eksterne CSS, erklært i en annen tekstredaktørens fil med en ".CSS ”-forlengelse.

Hva er en HTML -liste?

Hypertext Markup -språk lager innhold for å danne et nettsted inkludert tekst, bilder, tabeller, former, avsnitt osv. Teksten er byggesteinen til et hvilket som helst nettsted. Dette kan skrives på flere måter, og en tilnærming er HTML "-listen". Listen er den vertikale demonstrasjonen av en tekst sammen med eller uten kuler. HTML -listen vises bare på samme måte som vi oppretter en manuell liste. En liste er delt inn i ytterligere kategorier. Når teksten er representert med tall, gjøres den av en bestilt liste

. Hvis representasjonen er gjennom noe symbol eller form, er det en uordnet liste
. Syntaksen som brukes til å lage en liste er nevnt som følger:


• Element1


• element2



Den uordnede listesyntaks er gitt i forrige eksempel. De første åpnings- og lukkende tagger for listen er erklært. Disse ytre taggene bestemmer om listen er bestilt eller uordnet. Inne i begge tagger,

• Tag brukes til å legge til varenavnene som vi vil være en del av listen.

  Liste -stilegenskaper

  CSS List Style -egenskapen er effektene som brukes på listekulene. Det er flere typer stilegenskaper til lister. Noen av dem er forklart her. Den grunnleggende syntaksen er skrevet som:

  La oss implementere og forklare arbeidet med denne eiendommen.

  Listestiltype for uordnet liste

  Først bruker vi noen effekter på kulene på den uordnede listen. Disse kulene er symboler og former. For eksempel sirkler, firkanter, plater osv.

  Eiendomsverdi: plate

  Vi lager en enkel webside der en overskrift er gitt inne i kroppsdelen. Vi bruker et avsnittskode for å skrive litt tekst. Deretter opprettes en uordnet liste som vi tidligere beskrev. Den samme syntaksen følger. Inne i

  Tag, vi erklærer klassenavnet som tilhører den interne CSS. Alle effektene som er nevnt i klassen blir brukt på denne listen her:

  Inne i taggen er tre elementer på listen erklært. Lukk listen og den ytre taggen. Det er alt fra kroppsdelen av HTML -koden.

  Nå fører vi mot hodeseksjonen. Inne i hodet gir vi en tittel på siden. Deretter er den interne CSS -stilkoden erklært. Inne i den er en "sub" -klasse, navnet som brukes inne i den uordnede listekoden, erklært. Alle effektene brukes i denne klassen.

  ID -ene og klassene er opprettet for å bruke effektene kollektivt du vil bruke. Bruk deretter disse navnene inne i taggene der vi ønsker å bruke disse effektene.

  .under
  List-stil-type: plate;
  

  Listestilen som brukes her er en plate. Hvis vi ikke bruker denne egenskapen i listeopprettelsen, er standardkulene som dannes skiveformet.

  Ytterligere effekter er i overskriften. Fontfargen legges til overskriften. I tillegg til kroppen, blir bakgrunnsfargen og skriftfargen brukt.

  Lagre koden i Text Editor med en HTML -utvidelse for å opprette en webside som skal utføres i nettleseren. Ved å bruke denne utvidelsen, vil du se at symbolet på tekstredigeringsfilen du lagret blir endret til ikonet i nettleseren. Det er indikasjonen på at dette er en webside.

  Du vil se på utførelsen at websiden som er opprettet inneholder listen over forsøkspersonenes navn, og disse elementene er erklært gjennom platebullene.

  Eiendomsverdi: sirkel

  Etter å ha brukt standard skive -kuleverdien, bruker vi en annen form for å style en uordnet liste. Denne gangen inneholder stilegenskapen klassen med listestiltypen av sirkelen. Mens resten av koden, enten det er hodedelen eller kroppsseksjonen, er den samme. Bare gjøre endringer i stiltypen for å se effektene fungere.

  List-stil-type: sirkel;

  CSS -kode:	Produksjon:

  Lukk stilkoden og utfør koden i nettleseren. Du vil se at de fylte skivekulene erstattes gjennom de sirkelformede kulene.

  Listestiltype for bestilt liste

  Nå bruker vi de numeriske og alfabetiske verdiene for å anvende effekten på kulene på den bestilte listen.

  Eiendomsverdi: desimal

  Når det gjelder den bestilte listen som skal opprettes, bruker vi hvilken som helst numerisk verdi. Den som normalt brukes i manuell telling eller nummerering er desimalnotasjonen. Vi vil gå for desimalnummereringen først. Hele HTML -koden er den samme, og CSS -koden underholdes bare gjennom kulenavnet som blir referert til som "desimal". Listestiltypen som er nevnt i CSS -klassen er desimal.

  List-stil-type: desimal;

  CSS -kode	Produksjon:

  Ved utførelse vil du se at kulene blir endret fra en sirkel til desimaltall.

  Eiendomsverdi: lavere gresk
  Listestilegenskapen er navngitt i lavere gresk for å bruke denne effekten og endre listenes egenskap til listen.

  CSS -kode	Produksjon:

  Eiendomsverdi: Ingen

  Vi kan også skjule listekulene ved å bruke nøkkelordene "Ingen" i eiendommen til listen Style Type.

  CSS -kode	Produksjon

  Eiendomsverdi: Georgian

  Den siste, men ikke minst, verdien som brukes er den "georgiske" verdien som legges til kulene på listen.

  CSS -kode	Produksjon

  Konklusjon

  CSS List Style -egenskap er effekten som brukes på kulene på listen om listen er bestilt eller uordnet. Vi startet med en enkel introduksjon av både HTML- og CSS -språk, inkludert deres erklæring om tagger. Deretter utdypet vi strukturen til HTML -lister sammen med deres typer. Egenskapen for listestil er utdypet og vi implementerte noen få stiler for å se hvordan denne egenskapen fungerer. Vi brukte noen eksempler for både bestilte og uordnede lister separat.