CSS skjuler kuler

Cascading -stilarket er en ekstra type HTML -språket som brukes til å legge til forskjellige stilsmaker i HTML -innholdet som er definert og opprettet i HTML -taggene. En webside, enten det er en statisk eller et dynamisk nettsted, er utviklet ved å bruke de tre grunnleggende språkene: HTML, CSS og JavaScript. Men vår bekymring er med de to første språkene, HTML og CSS. Begge språkene utfyller hverandre i å utvikle og designe websiden ved å bruke . CSS er hovedsakelig sammensatt av tre typer: Inline, interne og eksterne CSS.

I denne artikkelen bruker vi inline og interne CSS for å forklare kodene til CSS. Brukeren må ha litt kunnskap om HTML- og CSS -tagger. Når vi kommer mot emnet vårt som diskuteres, vil vi snakke om kulene som spiller en betydelig rolle i å samkjøre og montere innholdet, enten tekst eller bilder osv., på nettstedet for å lage et estetisk utseende av nettstedet til brukeren.

CSS -lister

Når vi snakker om å vise noe av innholdet vårt på nettstedet på en bestemt måte med vertikal demonstrasjon, kommer vi over HTML -listene. Denne funksjonen brukes til å vise teksten i form av kuler. De to typene lister er i HTML.

• Bestilt liste
  1. Uordnet liste

     Begge typene er stylet gjennom CSS -kulene. Hver gang vi lager listene, dannes det ved å bruke kuler eller markører. Den bestilte listen inneholder nummereringen av dataene. Mens den uordnede listen inneholder disker, sirkler, firkanter eller annen form ved å gjøre kuleformen tilpasses.

     Noen ganger trenger vi ingen kule for å bli lagt til listen. Vi vil ganske enkelt at teksten skal vises på siden uten noe symbol eller tegn. Vi ønsker bare en enkel liste som ikke har noen kuler. Dette gjøres ved å bruke en CSS-egenskap som er CSS List-stil-type eiendom.

     CSS-liste-syle-type eiendom

     Dette er eiendommen til CSS som omhandler styling av markørene til listeelementene. Denne egenskapen er viktig når vi trenger å bruke en kule på listen, eller hvis vi vil fjerne eller skjule standardkulen. Vi bruker denne egenskapen med klasser og ID -er for å spesifisere listen som vi må bruke stilen til kulene. Den grunnleggende syntaksen som brukes til CSS -listeegenskapen er som følger:

     List-stil-type: plate;

     Dette er skrevet i stilkoden som denne effekten skal brukes. Det er forskjellige typer eiendomsverdier som brukes på både bestilte og uordnede lister. Få av dem er nevnt i følgende:

     Plate, sirkel, firkantet, desimal, nedre-romersk, øvre-romersk, nedre latin og øvre-latin, nedre alfa, ingen.

     Nå bruker vi en av kulene for å vise eksemplet implementering av listen med en skiveformet kule.

     Vi bruker en kode for bare å vise listen og kulene som brukes til å definere en liste som standard. Det er ikke nødvendig å alltid beskrive kuletypen for listen. Som standard er en bestemt type kule valgt i HTML. Men her bruker vi den skiveformede kulen inne i koden for å forklare erklæringen på listen. Først må du vurdere delen av HTML. Etter å ha brukt en enkel overskrift, bruker vi en uordnet liste. En inline -stil brukes her.

     Dette viser typen kule som skal brukes på den uordnede listen. Inne i

     Tag, vi bruker de tre listene. Hver linje bruker
     • Taggen som skal erklæres. Og så
     Taggen er stengt. I hodeseksjonen gjorde vi litt styling av overskriften ved å gi den farge. Vi kan også bruke listestilen i hodedelen som den interne stylingen.

     HTML og CSS -kode

     Lagre denne koden og deretter utfører vi denne tekstredigereren HTML -filen i nettleseren.

     Produksjon:

     Du vil se at alle elementene er skrevet på listen. For den bestilte listen kan du bruke desimal, nedre alfa, nedre romersk osv. Ved å bruke den samme egenskapen til listestil-stil.

     Skjul kuler

     Ved å bruke CSS-listestil-typen, kan vi også skjule kulene. For dette formålet vil vi ikke spesifisere navnet på kulen, men vi vil bruke "ingen" som verdien for eiendommen. Den grunnleggende stilsyntaksen for listen for å skjule kulene er som følger:

     I denne implementeringen bruker vi en uordnet liste for å vise både listene med kuler og en uten kuler. Så begynn med hodedelen av HTML -koden. Legg til en stil i overskriften. Neste stil er for den uordnede listen med en ID fjernet. Inne.

     UL # Fjern
     List-stil-type: Ingen;
     Polstring: 0;

     Polstring er avstanden mellom linjene i listen. Denne funksjonen som vi la til skjuler kulene fra listen. Tilsvarende for begge listene bruker vi justeringene for venstre og høyre side av siden.

     HTML CSS -kode:

     Etter hodedelen inne i kroppen bruker vi en overskrift først. En div opprettes og justeres til venstre i henhold til CSS. Deretter er det erklært en enkel uordnet liste som har kuler med den fordi vi ikke brukte Fjern ID med denne listen. Alle emnetavnene er skrevet i hver liste. Deretter lukker vi den uordnede listen og DIV -beholderen.

     Neste, er Div -klassen igjen som er plassert ved siden av forrige div. Vi bruker en ID med listen. På grunn av denne IDen blir "ingen" -stilen brukt og kulene er skjult.

     Alle elementene på listen er deklarert inne i listen. Lukk listen, div og HTML -kroppen.

     HTML Body Code:

     Kjør HTML -filen i nettleseren. Du vil se at en webside er dannet. Den ene siden av listen har kuler og den andre siden har ingen kuler. På denne måten hjelper denne CSS-listestil-typen oss til å style kulene eller fjerne dem fra listen.

     Produksjon:

     Konklusjon

     I denne artikkelen hadde vi som mål å kaste et lys på noen grunnleggende, men viktige egenskaper i CSS og HTML. I starten introduserte vi noen grunnleggende kunnskaper om CSS og HTML ved å fremheve typene CSS. Blant alle tre typene fokuserte vi på den interne stylingen med eiendommen til CSS som diskuteres. Deretter forklarte vi en viktig del av HTML -nettsiden som brukes til å opprette og justere innholdet på siden i en vertikal linje som danner en liste. Begge typene på listene blir også introdusert med forskjellige former og typer kuler. Deretter forklares CSS List-stil-type egenskap at det er en viktig ingrediens i styling eller fjerning av utformingen av kuler.

     I implementeringen av den delen av koden implementerte vi først et eksempel for å utdype arbeidet med denne stilegenskapen sammen med kulene i den uordnede listen. Det andre eksemplet forklarer den kombinerte bruken av stilegenskapen for å legge til eller fjerne kulene fra listen.