Articles
Introduktion til CSS
CSS-egenskaber relateret til brugergrænsefladen

CSS-egenskaber relateret til brugergrænsefladen

Denne artikel forklarer CSS-egenskaber relateret til brugergrænsefladen.

Du kan lære om egenskaberne content, cursor, pointer-events og resize, herunder deres anvendelser og hvordan man skriver dem.

YouTube Video

HTML til forhåndsvisning

css-ui.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

Relateret til brugergrænsefladen

content-egenskab 

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

content-egenskaben bruges til at tilføje indhold til pseudo-elementer, hovedsageligt ::before eller ::after. Denne egenskab bruges til at definere tekst, billeder, tællere osv., som ikke vises direkte inde i elementet. Dens hovedrolle er at tillade kontrol over dekorativt indhold eller supplerende information, der ikke er skrevet direkte i HTML, via stylesheets.

I dette eksempel tilføjes "Note: " før elementet, og "(End)" tilføjes efter. Disse bruger pseudo-elementerne ::before og ::after henholdsvis.

Værdier for content-egenskaben 

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

content-egenskaben kan have følgende værdier:.

  • Tekst: Angiv det direkte ved at omslutte strengen med "". Tilføjer tekst.
  • Billede: Brug url()-funktionen til at indsætte billeder.
  • Tæller: Brug counter()-funktionen til at vise tællere.
  • Attribut: Brug attr()-funktionen til at vise attributværdier for HTML-elementer. For eksempel kan du vise attributten title.
  • none: Angiver, at der ikke vil blive vist noget indhold. Dette er standardtilstanden.

Brugsnoter

  • content-egenskaben gælder kun for pseudo-elementer, ikke for almindelige elementer.
  • Da det ikke tilføjes til DOM'en, kan det ikke manipuleres direkte med JavaScript.
  • Det kan påvirke layoutet, så det bruges ofte til at vise dekorativ eller supplerende information.

Eksempel 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Dette er et eksempel på at tilføje et ikon før et <p>-tag. På denne måde kan du visuelt supplere indhold gennem stylesheets.

cursor-egenskab 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

cursor-egenskaben bruges til at specificere typen af markør, der vises, når musemarkøren placeres over et element. Du kan specificere forskellige markørtyper, og det bruges ofte på interaktive elementer for at forbedre brugeroplevelsen.

Primære markørtyper

Følgende værdier kan specificeres som markørtyper:.

default 
- `default` er den normale pil-markør (standardmarkøren i browseren).
pointer 
- `pointer` er en håndformet markør, der vises, når den placeres over et link.
text 
- `text` er en I-stråle-markør, der vises i områder, hvor tekst kan vælges.
move 
- `move` er en korsformet markør, der bruges, når et element kan trækkes.
crosshair 
- `crosshair` er en sigtekorn-markør til præcist valg.
not-allowed 
- `not-allowed` er en markør til områder eller handlinger, der ikke er tilladt.
help 
- `help` er en markør med et spørgsmålstegn, der vises, når den placeres over elementer, der kan give hjælpsinformation.
wait 
- `wait` er en timeglas- eller cirkulær markør, der repræsenterer en behandlingsstatus.
progress 
- `progress` er en markør, der repræsenterer en igangværende operation. Dog angiver den, at brugeren kan udføre andre handlinger.
grab 
- `grab` er en markør til at gribe elementer, der kan trækkes.
grabbing 
- `grabbing` er en markør, der angiver, at et element bliver trukket.
resize 
- `resize` er en markør, der bruges, når et vindue eller element kan ændres i størrelse. Der er forskellige typer afhængigt af retningen.
    - **`n-resize`**: ændre størrelse opad.
    - **`s-resize`**: ændre størrelse nedad.
    - **`e-resize`**: ændre størrelse til højre.
    - **`w-resize`**: ændre størrelse til venstre.
    - **`ne-resize`**: ændre størrelse til øverst til højre.
    - **`nw-resize`**: ændre størrelse til øverst til venstre.
    - **`se-resize`**: ændre størrelse til nederst til højre.
    - **`sw-resize`**: ændre størrelse til nederst til venstre.

Brugerdefineret markør 

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

Det er også muligt at angive en brugerdefineret markør ved hjælp af url().

  • I dette eksempel er custom-cursor.png billedfilen for markøren. Hvis dette billede ikke er tilgængeligt, vises browserens standardmarkør med auto.

Sammendrag

  • cursor-egenskaben angiver, hvilken markør der skal vises, når brugeren er over et element.
  • Der er forskellige markørtyper tilgængelige afhængigt af brugen, og brugerdefinerede markører kan også sættes.
  • Ved at vælge passende markørtyper i henhold til interaktive elementer og begrænsede operationer kan der tilbydes en mere brugervenlig brugergrænseflade.

pointer-events-egenskaben 

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

pointer-events-egenskaben bruges til at kontrollere, hvordan et element håndterer hændelser fra pegede enheder som mus, touch og stylus. Normalt, når et element klikkes på eller holdes over af en bruger, modtager det pointer-hændelser, men denne adfærd kan ændres ved hjælp af denne egenskab.

  • I klassen pointer-events-auto er pointer-events-egenskaben indstillet til auto, hvilket tillader normale klik og hover-hændelser at blive behandlet. Elementet er klikbart, så en besked vises, når det klikkes på.
  • I klassen pointer-events-auto er pointer-events-egenskaben indstillet til none, så elementet ikke modtager pointer-hændelser. Selv hvis cursor-egenskaben er indstillet til pointer, ændres musemarkøren ikke, og andre elementer nedenunder bliver klikbare.

Værdityper

  • pointer-events-egenskaben angiver, om og hvordan et element modtager pointer-hændelser. Du kan angive følgende værdier.
auto
  • auto er standardværdien, hvor elementet modtager pegerhændelser normalt.
none
  • Når none er angivet, modtager elementet ikke pegerhændelser. Elementet deaktiverer interaktioner som klik og svævning, men andre elementer nedenunder kan modtage pegerhændelser.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit 
1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;
  • Disse værdier bruges hovedsageligt til SVG-elementer. Hver værdi styrer, om specifikke dele af et element (som fyld, kontur osv.) reagerer på pegerhændelser. Det bruges ikke almindeligt med almindelige HTML-elementer.

Vigtige punkter for brug

Her er nogle eksempler på, hvordan man bruger pointer-events-egenskaben.

  1. Valg af elementer, du vil deaktivere

    • none-værdien er nyttig til midlertidigt at deaktivere elementer som knapper eller links.

  2. Brug med overlappende elementer

    • Når position-egenskaben er sat til absolute, eller elementer er lagdelt ved hjælp af z-index-egenskaben, gør indstilling af pointer-events til none på det øverste element det muligt at sende pegerhændelser til elementet nedenunder.

resize-egenskab 

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

resize-egenskaben er en CSS-egenskab, der angiver, i hvilken retning en bruger kan ændre størrelsen på et element. Ved at bruge denne egenskab kan du tillade, at elementer ændres i størrelse lodret eller vandret ved at trække, eller du kan deaktivere størrelsesændring helt.

I dette eksempel angives retningen, hvori en tekstboks kan ændres i størrelse, ved hjælp af resize-egenskaben.

  • Med resize: both; kan et element ændres i størrelse både vandret og lodret.
  • Med resize: horizontal; kan et element kun ændres i størrelse vandret.
  • Med resize: vertical; kan et element kun ændres i størrelse lodret.
  • Med resize: none; kan et element ikke ændres i størrelse.

Værdityper

  • resize-egenskaben tildeles en værdi, der angiver, i hvilken retning et element kan ændres i størrelse. Du kan angive følgende værdier.
none
  • Angivelse af none deaktiverer ændring af størrelsen på elementet. Dette er standardværdien.
both
  • Angivelse af both tillader, at elementet ændres i størrelse i både lodret og vandret retning.
horizontal
  • Angivelse af horizontal tillader, at elementet kun ændres i størrelse i den vandrette retning (bredde).
vertical
  • Angivelse af vertical tillader, at elementet kun ændres i størrelse i den lodrette retning (højde).
inherit
  • Angivelse af inherit får elementet til at arve værdien af resize-egenskaben fra sin forælder.

Noter

  • For at gøre et element justerbart i størrelse, skal du indstille både overflow-egenskaben og resize-egenskaben. Elementer med justerbar størrelse kan kræve rullebjælker, og overflow: auto anvendes typisk.
  • Størrelsesjustering anvendes generelt på blokelementer som div og textarea.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber relateret til 3D-animation