Video: Technology Stacks - Computer Science for Business Leaders 2016 2024
Lijsten gestileerd met cascading style sheets (CSS) zijn veel robuuster dan lijsten gestileerd met standaard HTML-opmaak. Met CSS kunt u eenvoudig het lijsttype selecteren voor zowel genummerde als lijsten met opsommingstekens, de positie van de opsommingstekens ten opzichte van de inhoud in de lijst instellen en zelfs ervoor kiezen om uw eigen afbeelding voor de opsommingsteken te gebruiken.
lijststijltype: voor geordende lijsten stelt u het lijsttype in op decimaal, lager-romeins, hoger-romein, lager-alfa, upper-alpha of geen. Kies bij het maken van niet-geordende lijsten het schijftype, de cirkel of het vierkant. De illustratie toont voorbeelden van elk van deze lijsttypen.
li {list-style-type: circle;}
list-style-image: als u uw eigen aangepaste afbeelding als opsommingsteken wilt gebruiken, voert u de locatie en bestandsnaam van de gewenste afbeelding in als een opsommingsteken. kenmerk voor de ongeordende lijsttag. U kunt ook het opsommingstekengedeelte van lijstopmaak verwijderen door de eigenschapswaarde geen te gebruiken.
ul {list-style-image: url (images / mybullet. Gif);}
Als u een lijst met verschillende afbeeldingen voor elk lijstitem wilt maken, maakt u aangepaste stijlen voor elk lijstitem en voegt u elke
. redarrow {list-style-image: url (redarrow. gif);}. bluearrow {list-style-image: url (bluearrow. gif);}
- Ga naar deze site
- Ga naar die site
list-style-position: met de eigenschap position, kunt u de opsommingsteken relatief positioneren naar inhoud binnen elk lijstitem. De positie kan zich binnen of buiten de tekst bevinden. Zoals hieronder geïllustreerd, wanneer de tekst naar binnen is geplaatst, loopt de tekst onder de opsommingsteken langs de linkermarge en wanneer deze buiten wordt geplaatst, blijft de kogel buiten elke ingepakte tekst, zoals een hangende inspringing.
li {list-style-position: outside;}
Met extensie-eigenschappen kunt u de manier waarop de cursor in verschillende omstandigheden wordt weergegeven wijzigen, pagina-einden maken en filters met speciaal effect toevoegen aan bepaalde elementen op de pagina.
Helaas worden er sinds hun oprichting maar heel weinig ondersteund door de populairste browsers. Als u een van deze kenmerken wilt gebruiken, test u deze in zoveel mogelijk browsers op zowel Mac- als pc-platforms om ervoor te zorgen dat ze op een acceptabele manier werken en / of falen.
page-break-before / -after: dit kenmerk forceert een pagina-einde bij het afdrukken van een pagina, hetzij vóór of na het object dat is opgemaakt met dit kenmerk. Kies links, rechts, altijd of automatische waarden voor vóór en / of na het gewenste gestileerde object, zoals in het volgende:
# sidebar3 {page-break-before: always; page-break-after: left;}
cursor: u kunt een andere cursor opgeven om te verschijnen wanneer een bezoeker een object overhaalt dat met dit kenmerk is gestileerd.Kies uit draadkruis, tekst, wachten, standaard, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize en auto.
Er zijn ook 15 nieuwe CSS3-cursoropties, die allemaal werken in de nieuwste versie van Firefox, Chrome, Safari, Opera en IE9 +: geen, context-menu, cel, verticale tekst, alias, kopiëren, nee drop, niet-toegestaan, ew-resize, ns-resize, news-resize, nwse-resize, col-resize, row-resize en scroll volledig. Ga naar Sitepoint om voorbeelden van deze cursors in actie te zien.
#helpmenu {cursor: help;}
filter: u kunt kiezen uit verschillende filters met speciaal effect, waaronder Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH (horizontaal spiegelen), FlipV (verticaal spiegelen), Glow, Grijs, Omkeren, Licht, Masker, RevealTrans, Schaduw, Golf en Xray. De meeste filters vereisen numerieke invoer, zoals het maskerfilter, dat de hexadecimale waarde van de kleur voor het masker moet bevatten, zoals in filter: Mask (Kleur = # ffcc33);.
#details {filter: invert;}
Hoewel het waar is dat deze filters een aantal coole en ongewone dingen kunnen doen, werken ze lang niet altijd in andere browsers dan IE. Als u een voorbeeld van een paar van deze filters wilt zien, opent u de volgende koppeling in een IE-browser: Xentrik. Gelukkig zijn veel van deze filters opnieuw uitgevonden als nieuwe CSS3-stijlen met veel betere browserondersteuning.
