Hvilke css-egenskaper endrer listemarkører. Listestil: eiendomsgruppe i listestil i CSS

Uten noen ekstra stylingregler, vil listen i base DIV se slik ut:

Posisjonering

Noen ganger kan standardlisteinnrykk være for stor for designet ditt. Men endringen er bare marginegenskaper eller polstring for et element

Fungerer ikke for alle nettlesere. For at listen skal flyttes helt til venstre, for eksempel, må du endre begge egenskapene: margin og utfylling. Dette skyldes det faktum at Internet Explorer og Opera oppretter et venstreinnrykk for listen ved å bruke venstre marg, og Mozilla/Netscape bruker venstre utfylling for dette.

I følgende eksempel er egenskapene margin-venstre og polstring-venstre for et UL-element satt til 0:



Vær oppmerksom på at markørene ligger utenfor DIV-grensen. Hvis beholderen ikke var en DIV, men et dokument, ville markørene vært utenfor nettleservinduet, dvs. ville forsvinne ut av syne. Hvis du vil at markørene skal ligge innenfor DIVs grenser, langs dens venstre kant, sett enten egenskapen for venstre utfylling eller egenskapen venstre marg til "1em".



Markører

La oss si at du trengte en liste med spesielle kuler. Hva gjorde du før? Vi laget en tabell, plasserte et GIF-bilde av markøren i én kolonne og flyttet det opp og til høyre i cellen. Den andre kolonnen inneholdt tekst som skulle ha vært i elementene

• . CSS lar deg nå bruke et bilde som en markør. Hvis nettleseren ikke støtter dette CSS funksjon(eller ikke støtter grafikkutgang), vil standardmarkøren brukes (eller den du angir i dette tilfellet).

  Stilregelen ser slik ut:

  ul ( liste-stil-bilde: url(bullet.gif); )

  Og nettleseren vil vise listen slik:

  

  For nettlesere som ikke støtter grafikkutdata, legg til følgende linje i reglene:

  liste-stil-type: plate;

  Bildet du velger som markør kan "krype" utenfor listens grenser. For å forhindre at dette skjer, plasser bildet inne i blokken

• . For å gjøre dette, legg til følgende linje:

  liste-stil-posisjon: inne;

  Alle tre erklæringene kan kombineres til en kort regel:

  ul ( liste-stil: disk url(bullet.gif) inne; )

  som tilsvarer

  ul ( liste-stil-type: plate; liste-stil-bilde: url(bullet.gif); liste-stil-posisjon: inne; )

  Resultatlisten vil se slik ut:

  

  Det kan hende du har en liste, men du trenger ikke kuler, eller du vil bruke en annen karakter som kule. Nok en gang kommer CSS til unnsetning. Legg til regellistestilen: ingen; og lage elementene

• "overhengende". Hele regelen vil se slik ut:

  ul ( listestil: ingen; marg-venstre: 0; polstring-venstre: 1em; tekstinnrykk: -1em; )

  Enten den venstre utfyllingsegenskapen eller den venstre margegenskapen skal ha en verdi på 0, og den andre skal ha en verdi på 1em. Ved å endre denne egenskapen kan du justere størrelsen på innrykk fra markøren til en akseptabel. En negativ verdi i tekstinnrykk-egenskapen fører til at den første linjen i hvert listeelement flyttes til venstre og "overhenger" resten av teksten.

  Vår neste liste vil være normal, bare standard HML-symbolet vil bli brukt som en markør, for eksempel ", som tilsvarer det avsluttende typografiske anførselstegn: ".

  

  Det skal bemerkes her at Netscape6/7/Mozilla (og andre Gecko-avledede nettlesere) så vel som Opera kan generere innhold ved å bruke :before pseudo-elementet fra CSS2-standarden. La oss bruke denne funksjonen og automatisk generere symbolet "eller et annet symbol som en markør. På denne måten trenger vi ikke å legge det inn manuelt i hvert LI-element. Hvis du bruker Opera-nettleseren eller Gecko-familien av nettlesere, vil følgende CSS lage den samme listen som den forrige, uten å måtte legge til noe ekstra til selve listen.

  #custom-gen ul li:before ( innhold: "0BB 020"; )

  Innholdsegenskapen kan settes til en tekststreng, en URL eller noe annet, inkludert Spesielle symboler. Hvis du har valgt et symbol som "", må du spesifisere i egenskapen heksadesimal kode dette symbolet. Det høyre typografiske anførselstegn har koden 0BB (det andre tegnet 020 er et mellomrom, lagt til av estetiske grunner). Det endelige resultatet vises nedenfor (se med Opera eller Mozilla/Netscape-nettleseren):

  

  Ordne listen på rad

  Hvem sa at lister skal gå vertikalt og formateres med markører til venstre? Du vil for eksempel ha en nummerert liste med lenker, men visuelt vil du at listen skal se ut som en vertikal navigasjonslinje på siden. Eller la oss si at du vil at koblingene skal kjøre horisontalt langs den øverste kanten av siden.

  Dette gjelder ikke bare listen over lenker. Du må kanskje liste flere ganger i et avsnitt (for eksempel en liste over bøker). Strukturelt sett er det en liste, men før, hvis du gjorde det, ville listen bryte opp avsnittet ditt. CSS kommer deg til unnsetning igjen!

  Fordi denne listen vil ikke vises som noe separat på siden, jeg vil ikke legge det i en base DIV som de forrige listene. Denne gangen vil markeringen se slik ut: avsnitt, liste, neste avsnitt.

  Jeg kan allerede høre ropene: «Din idiot! Vi tenkte at du ville lære oss hvordan vi legger lister i et avsnitt i stedet for mellom to avsnitt."

  Og til dette vil jeg svare: «Vel, ja, du har rett. Dessverre tillater ikke (X)HTML at lister plasseres i et avsnitt. Men med stiler kan du gjøre dette.»

  Først, her er stilreglene:

  #inline-list ( kantlinje: 1px solid #000; margin: 2em; width: 80%; polstring: 5px; font-family: Verdana, sans-serif; ) #inline-list p (display: inline; ) #inline- list ul, #inline-list li (display: inline; margin: 0; padding: 0; color: #339; font-weight: bold; )

  All kode legges inn

  . Den inneholder altså et avsnitt standard liste UL, etterfulgt av et annet avsnitt. UL-listen er redigert slik at hvert punkt er etterfulgt av komma og siste punkt etterfulgt av punktum.

  Resultatet ser slik ut (listen er uthevet i blått):

  

  Akkurat som i punkteksemplet ovenfor, kan vi bruke CSS til automatisk å generere komma og punktum. Hvis de besøkende bare bruker Opera og Gecko nettlesere, har du ingenting å bekymre deg for. Stilreglene vil se slik ut:

  #inline-list-gen ul li:after ( innhold: ", "; ) #inline-list-gen ul li.last:after ( innhold: "."; )

  Her bruker vi :after pseudo-elementet for å legge til et komma på slutten av hvert listeelement, og legge til et punktum ved å bruke class="last". Resultatet blir slik (husk at det bare fungerer i Opera eller Mozilla/Netscape):

  

  Navigasjon

  Som jeg sa helt i begynnelsen, bør menyene med lenker som vi ser på hvert nettsted være utformet som lister, som er det de egentlig er. Siden vi ikke ønsker å se denne listen slik standardnettleseren viser den, bruker vi CSS til å gjøre noen kosmetiske endringer. Vi vet allerede at lister spesifikt kan vises horisontalt (på én linje), og ikke bare vertikalt (som de vises som standard). Ved hjelp av stiler kan markører fjernes, og du har en lang rekke alternativer for hvordan du visuelt skiller ett listeelement fra et annet.

  Her er eksempler horisontale lister, plassert i samme base DIV med følgende regler.

  De to eksemplene nedenfor bruker samme UL bare uten lang tekst i siste avsnitt. Det er også lagt til en ekstra klasse som lar deg jobbe separat med en av LI-ene i listen.

  Grenser

  Symbol | ofte brukt til å referere til ulike alternativer valg. Det er naturlig å bruke det på en meny. La oss simulere dette symbolet ved å bruke grensene til LI.

  #pipe ul ( margin-venstre: 0; polstring-venstre: 0; display: inline; ) #pipe ul li ( margin-left: 0; polstring: 3px 15px; kantlinje-venstre: 1px solid #000; listestil: ingen; display: inline; ) #pipe ul li.first ( margin-left: 0; border-left: none; list-style: none; display: inline; )

  Reglene kan endres for å få listen til å se ut som bokmerker:

  #tabs ul ( margin-left: 0; padding-left: 0; display: inline; ) #tabs ul li ( margin-left: 0; margin-bottom: 0; polstring: 2px 15px 5px; kantlinje: 1px solid #000 ; listestil: ingen; display: inline; ) #tabs ul li.here ( border-bottom: 1px solid #ffc; listestil: ingen; display: inline; )

  Merk: Denne teknikken ble foreslått av Randal Rust og senere forbedret av abonnenter på css-discuss e-postlisten

  Kjedelenker

  En annen type lenker som vanligvis er plassert horisontalt på en nettside er de kjente brødsmulekoblingene. Disse koblingene viser tydelig hvor du er nå i nettstedhierarkiet – hele veien fra hjemmeside til gjeldende seksjon eller side. Hvis du virkelig ønsker å gjøre sidens kode semantisk korrekt, bør denne typen lenker utformes som en serie nestede lister, siden hver del er en del av den forrige delen:

  • Hjem
    • " Produkter
      • » Datamaskiner
        • » Programvare

  som et resultat får vi:

  

  Bruk av følgende regler:

  #brød (farge: #ccc; bakgrunnsfarge: #006; polstring: 3px; margin-bottom: 25px; ) #bread ul ( margin-venstre: 0; polstring-venstre: 0; display: inline; kantlinje: ingen; ) #bread ul li ( margin-venstre: 0; polstring-venstre: 2px; kantlinje: ingen; listestil: ingen; display: inline; )

  vi får dette:

  Igjen kan """-tegnet (eller et hvilket som helst annet passende tegn) genereres automatisk ved å bruke :before-pseudo-elementet i kombinasjon med class="first"-klassen slik at det første LI-elementet ikke har dette tegnet.

  #bread-gen ul li:before ( innhold: "020 020 020 0BB 020"; farge: #ff9; ) #bread-gen ul li.first:before ( innhold: " "; )

  Endelig resultat:

  Verden av virkeligheter

  Jeg avslutter artikkelen min ekte eksempel, som bruker trikset beskrevet ovenfor. Vi tar en standard UL-oppføring med lenker og oppretter dynamisk meny med rullende effekter. For å skape en rullende effekt, vil visuelle stiler bli brukt på A-elementene, og UL- og LI-elementene vil kun tjene som et strukturelt rammeverk.

  

  Denne menyen er faktisk et svar på et spørsmål stilt av Michael Efford på css-discuss e-postlisten. Michael opprettet nøyaktig samme meny ved hjelp av tabeller, grafikk og JavaScript. Han spurte så på e-postlisten om det samme kunne oppnås med CSS.

  • Hjem
  • Skjulte kameraer
  • CCTV kameraer
  • Ansatt tyveri
  • Hjelpsomme hint
  • FAQ
  • Om oss
  • Kontakt oss

  La oss se på stilarket regel for regel, og jeg vil forklare hvorfor hver av dem er nødvendig.

  #button ( width: 12em; border-right: 1px solid #000; polstring: 0 0 1em 0; margin-bottom: 1em; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica , Arial, sans-serif; bakgrunnsfarge: #90bade; farge: #333; )

  Den første regelen er for #knappen DIV. Den definerer hvor mye plass menyen vil ta opp og skaper kontekst slik at vi kan kontrollere oppførselen til lenker og listeelementer. Jeg foretrakk å gjøre menyen fleksibel og avhengig av nettleserinnstillinger, så (nesten) alle verdier er spesifisert i "em"s. Inkludert menybredde. Den svarte kanten ble hentet fra Michaels originale design. Den store bunnen av menyen er laget slik at du kan se bakgrunnen til DIV. Igjen ble dette gjort for å gjenskape det originale designet. Bunnmargen (margin) brukes til å skille menyen fra det som følger etter den. Alle farger er hentet fra det originale designet.

  #button ul ( listestil: ingen; margin: 0; polstring: 0; kantlinje: ingen; ) #button li ( kantlinje-bunn: 1px solid #90bade; margin: 0; )

  Her bestemte jeg hvordan listen skulle se ut. Siden alle listeelementene våre er lenker, og den rullende effekten kun er tilgjengelig for lenker så langt, har jeg med vilje fjernet alle stilistiske regler fra listene. Jeg har nettopp lagt til en én piksel bred kant hvis farge matcher bakgrunnsfargen til #button DIV. Denne grensen fungerer som en skillelinje mellom menyelementer. Det originale designet brukte et eget bilde for dette.

  23.02.2017

  Ikke ennå

  
  

  Hei alle sammen!
  I dagens opplæring vil jeg snakke om hvordan du kan kontrollere utseende, nemlig opprette punktlister og nummererte lister, designe lister over markører med et bilde, og også, om nødvendig, fjerne enhver punktlistebetegnelse helt.
  Jeg vil prøve å ikke trekke ut denne leksjonen og ikke skrive mye informasjon. Men jeg skal bare prøve og se hvordan det går.

  Type markør i listen
  

  Eiendom "LIST-STYLE-TYPE"
  Ved å bruke "listestil-type"-regelen kan du angi typen markør, for eksempel for å vise tall, bokstaver, firkanter, sirkler, etc.

  Eiendom:

  • ingen – uten markør

  - punktlister:

  • disk- en markør i form av en fylt sirkel;
  • sirkel- en markør i form av en åpen sirkel;
  • torget– en markør i form av en fylt firkant;

  - nummererte lister:

  • desimal– vanlig desimaltall(1,2,3,4,5, etc.);
  • øvre roman– store romertall (I, II, III, IV, V, etc.);
  • lavere-romersk- små romertall (i, ii, iii, iv, v, etc.);
  • øvre alfa – store bokstaver(A, B, C, D, E, etc.);
  • lavere alfa– små bokstaver (a,b,c,d,e, etc.)

  Li ( liste-stil-type: sirkel; /* Markører i form av en åpen sirkel */ )

  Fullstendig eksempel:

  • tekst nr. 1
  • tekst nr. 2

  Resultat:

  

  Hvis du trenger å fjerne en markør fra listen, bruk egenskapen "ingen":

  Li ( liste-stil-type: ingen; /* Fjern markører */ )

  Resultat:

  

  Markørposisjon i listen
  

  Eiendom "LISTE-STIL-POSISJON »
  Regelen "listestil-posisjon" kan brukes til å spesifisere posisjonen til markøren.

  Eiendom:

  • utenfor– utenfor hovedblokken på listen;
  • innsiden– inne i hovedblokken på listen.

  

  Li ( listestil-posisjon: inni; /* markørposisjon */ )

  Listemarkørfarge
  

  Eiendom "FARGE »
  Du kjenner allerede "farge" -regelen, som du ikke bare kan endre fargen på teksten med, men også fargen på markøren. Ta en titt.

  • Tekst nr. 1
  • Tekst nr. 2

  Resultat:

  

  Bilde i stedet for en markør i listen
  

  Eiendom "LISTE-STIL-BILDE »
  Hvis du ikke liker det standard visning nummerert eller punktlister, kan du bruke «liste-stil-bilde»-regelen og sette bildemarkører i stedet for vanlige markører.

  Syntaks:

  Liste-stil-bilde: url(image.png);

  LI ( list-style-image: url("marker1.png"); /* markørbilde */ )

  "marker1.png" er bildet av markøren.

  Resultat:

  

  Listemarkørinnrykk
  

  Eiendom "PADDING-LEFT"
  Hvis du trenger å rykke inn kulen fra teksten, bruk "padding-venstre"-regelen.

  Li ( padding-venstre: 30px; /* Innrykk fra markør til tekst */ )

  Resultat:

  

  EN GAVE TIL DE SOM LES TIL SLUTTEN

  Nummerering av listen fra et hvilket som helst nummer
  Du trenger ikke vite dette, men jeg bestemte meg for å lage en gave til de som har lest så langt. Hvis du trenger å nummerere listen ikke fra 1, men for eksempel fra 6, kan du gjøre følgende:

  Li ( liste-stil-type: ingen; /* Fjern den første nummereringen fra listen */ ) ul ( counter-reset: list 5; /* Start telleren */ ) ul li:before ( counter-increment: list; /* Øk tellerverdi */ innhold: teller(liste) "."; /* Skriv ut tallet */ )

  Resultat:

  

  Jeg ser frem til å se deg i de neste timene! Ikke glem å abonnere!

  Forrige innlegg
  Neste oppføring
  

  Syntaks

  Liste-stil-type: sirkel | plate | kvadrat | armensk | desimal | desimal-ledende-null | georgisk | lavere alfa | lavere-gresk | lavere-latinsk | lavere-romersk | øvre-alfa | øvre-latinsk | øvre-romersk | ingen

  Betegnelser

  	Beskrivelse	Eksempel
  <тип>	Indikerer typen av verdien.	<размер>
  A && B	Verdiene må skrives ut i den angitte rekkefølgen.	<размер> && <цвет>
  A | B	Indikerer at du bare trenger å velge én verdi fra de foreslåtte (A eller B).	normal | small-caps
  A || B	Hver verdi kan brukes uavhengig eller sammen med andre i hvilken som helst rekkefølge.	bredde || telle
  	Grupper verdier.	[ beskjære || kryss ]
  *	Gjenta null eller flere ganger.	[,<время>]*
  +	Gjenta en eller flere ganger.	<число>+
  ?	Den angitte typen, ordet eller gruppen er valgfri.	innfelt?
  (A, B)	Gjenta minst A, men ikke mer enn B ganger.	<радиус>{1,4}
  #	Gjenta én eller flere ganger atskilt med komma.	<время>#

  ×

  Verdier

  Verdiene avhenger av om de brukes på en punktliste eller nummerert listetype.

  Punktliste

  sirkel Markør i form av en sirkel. skivemarkør i form av en prikk. firkantet Markør i form av en firkant.

  Nummerert liste

  armensk Tradisjonell armensk nummerering. desimal arabiske tall (1, 2, 3, 4,...). desimal-ledende-null
  Arabiske tall med innledende null for sifre mindre enn ti (01, 02, 03,...). georgisk Tradisjonell georgisk nummerering. liten alfa Små bokstaver bokstaver(a, b, c, d,...). smågresk Små greske bokstaver (α, β, γ, δ,...). lavere-latin Denne verdien er den samme som lavere-alfa . lavere romerske tall med små bokstaver (i, ii, iii, iv, v,...). øvre alfa store latinske bokstaver (A, B, C, D,...). upper-latin Denne verdien er den samme som upper-alpha . øvre romerske romerske tall i stor bokstav(I, II, III, IV, V,...). ingen Deaktiverer punkttegn for listen.

  Sandkasse

  1. Fire

  ul (liste-stil-type: desimal; )

  Eksempel

  1. Gaius Octavius ​​Thurinus
  2. Tiberius Claudius Nero
  3. Gaius Iulius Caesar Augustus Germanicus
  4. Tiberius Claudius Drusus
  5. Lucius Arruntius Camillus Scribonianus
  6. Nero Claudius Caesar Drusus Germanicus
  7. Lucius Clodius Macer

  Resultatet av dette eksemplet er vist i fig. 1.

  Ris. 1. Bruke egenskapen listestil-type

  Objektmodell

  En gjenstand.style.listStyleType

  Merk

  I nettleser Explorer 6 når du bruker en nummerert liste

  og indre verdier liste-stil-posisjon egenskaper, tall som starter fra 10 begynner å overlappe teksten i listen.

  Internet Explorer opp til versjon 7 støtter ikke verdiene armensk, desimal-ledende-null, georgisk, nedre-gresk, nedre-latin, øvre-latin. I stedet vises nummerering i arabiske tall. I denne nettleseren vises ikke nummerering eller kuler for flytende elementer (ul ( flytende: venstre; ) ).

  Internet Explorer 8 forstår i tillegg verdien øvre-gresk , som setter nummereringen til store greske bokstaver (Α, Β, Γ, Δ,...).

  Spesifikasjon

  Hver spesifikasjon går gjennom flere stadier av godkjenning.

  • Anbefaling - Spesifikasjonen er godkjent av W3C og anbefales som standard.
  • Kandidatanbefaling ( Mulig anbefaling ) - gruppen ansvarlig for standarden er fornøyd med at den oppfyller sine mål, men krever hjelp fra utviklingsmiljøet for å implementere standarden.
  • Forslag til anbefaling Foreslått anbefaling) - på dette stadiet sendes dokumentet til W3C Advisory Council for endelig godkjenning.
  • Arbeidsutkast - En mer moden versjon av et utkast som har blitt diskutert og endret for gjennomgang av fellesskapet.
  • Redaktørens utkast ( Redaksjonelt utkast) - et utkast til standarden etter endringer ble gjort av prosjektredaktørene.
  • Utkast ( Utkast til spesifikasjon) - det første utkastet til standarden.
  ×

  Nettlesere

  ingen, plate, sirkel, kvadrat, desimal, nedre-alfa, øvre-alfa, nedre-romersk, øvre-romersk	4	12	1	7	1	1
  nedre-latinsk, øvre-latinsk, nedre-gresk, armensk, georgisk	8	12	1	6	1	1
  desimal-ledende-null	8	12	1	8	1	1