Liste og utvidelsesegenskaper for Cascading Style Sheets (CSS) - dummies

Video: Note liste og ShowNote 2024

Lister stylet med cascading style sheets (CSS) er mye mer robust enn lister utformet med standard liste HTML formatering. Med CSS kan du enkelt velge listetype for både nummererte og punktliste lister, angi posisjonen til kulene i forhold til innholdet i listen, og til og med velge å bruke din egen grafikk for kuldebildet.

liste-stil-type: For bestilte lister angi du listetypen til desimaltall, lavere roman, øvre roman, lavere alfa, øvre alfa eller ingen. Når du oppretter uordnede lister, velger du disken, sirkelen eller den firkantede listetypen. Illustrasjonen viser eksempler på hver av disse listetyper.

li {listestil-type: sirkel;}

listestil-bilde: Hvis du vil bruke ditt eget tilpassede bilde som en kule, skriver du inn plasseringen og filnavnet til ønsket bilde som en attributt for den uordnede listemerken. Du kan også fjerne kuledelen av listestyling ved å bruke eiendomsverdien none.

ul {list-style-image: url (bilder / mybullet. Gif);}

For å lage en liste med forskjellig grafikk for hvert listepost, opprett egendefinerte stiler for hvert listepost og legg deretter til hver

tag med tilhørende klasseattributt, som illustrert nedenfor og vist i følgende kodeeksempel, som også gjør hvert element i listen en hyperkobling:

. redarrow {list-style-image: url (redarrow. gif);}. bluearrow {list-style-image: url (bluearrow. gif);}

Gå til denne siden
Gå til den siden

listestilsposisjon: Med posisjonegenskapen kan du plassere punktposten til innhold i hver liste element. Stillingen kan plasseres enten innenfor eller utenfor teksten. Som vist nedenfor, når teksten sitter under kulen langs venstre marg, og når den er satt til utsiden, forblir kulen utenfor en innpakket tekst, som et hengende innrykk.

li {listestil-posisjon: utenfor;}

Med utvidelsesegenskaper kan du endre måten markøren viser under ulike omstendigheter, opprette sideskift og legge til spesielle effektfiltre til enkelte elementer på siden.

Dessverre, siden starten, er svært få av dem støttet av de mest populære nettleserne. Hvis du vil bruke noen av disse attributter, test dem i så mange nettlesere som mulig på både Mac og PC-plattformer for å sikre at de fungerer og / eller mislykkes på en akseptabel måte.

side-break-før / -after: Dette attributtet tvinger en sideskift når du skriver ut en side, enten før eller etter objektet utformet med dette attributtet. Velg venstre, høyre, alltid eller automatisk verdier for før og / eller etter ønsket stylet objekt, som i følgende:

# sidebar3 {side-break-før: alltid; side-break-after: left;}

markør: Du kan angi en annen markør som skal vises når en besøkende mouses over et objekt som er utformet med dette attributtet.Velg mellom krysshår, tekst, vent, standard, hjelp, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize og auto.

Det finnes også 15 nye CSS3-markøralternativer, som alle fungerer i den nyeste versjonen av Firefox, Chrome, Safari, Opera og IE9 +: ingen, kontekstmeny, celle, vertikal tekst, alias, kopi, slipp, ikke tillatt, ew-resize, ns-resize, nyheter-resize, nwse-resize, col-resize, rad-resize og all-scroll. For å se eksempler på disse markørene i aksjon, besøk Sitepoint.

#helpmenu {cursor: help;}

filter: Du kan velge mellom flere spesialfiltre, blant annet Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH (flip horizontal), FlipV (flip vertikal), Glow, Grey, Invert, Light, Mask, RevealTrans, Shadow, Wave og Xray. De fleste filtre krever numerisk inngang, for eksempel maskefilteret, som må inneholde heksadesimale verdien av fargen for masken, som i filter: Mask (Color = # ffcc33);.

#details {filter: invert;}

Selv om det er sant at disse filtrene kan gjøre noen kule og uvanlige ting, har de i lengst tid ikke jobbet i andre nettlesere enn IE. For å se et eksempel på noen av disse filtrene, åpne følgende lenke i en IE-nettleser: Xentrik. Heldigvis har mange av disse filtrene blitt gjenoppfunnet som nye CSS3-stiler som har mye bedre nettleserstøtte.