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>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</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:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • Tekst
    • Du kan tilføje tekst ved at omslutte en streng direkte med dobbelte anførselstegn ("").
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • Billede
    • Du kan indsætte et billede ved at bruge url()-funktionen.
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • Tæller
    • Brug counter()-funktionen til at vise en tæller.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Attribute
    • attr()-funktionen kan bruges til at vise attributværdien for et HTML-element. For eksempel kan du vise attributten title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • ingen
    • Angiver, at intet indhold skal vises. Dette er standardtilstanden.

Brugsnoter

Når du bruger content-egenskaben, skal du være opmærksom på følgende:.

  • 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.

cursor-egenskab

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:.

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
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: En ændringsmarkør, der peger opad.

  • s-resize: En ændringsmarkør, der peger nedad.

  • e-resize: En ændringsmarkør, der peger til højre.

  • w-resize: En ændringsmarkør, der peger til venstre.

  • ne-resize: En ændringsmarkør, der peger op til højre.

  • nw-resize: En ændringsmarkør, der peger op til venstre.

  • se-resize: En ændringsmarkør, der peger ned til højre.

  • sw-resize: En ændringsmarkør, der peger ned 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.

Værdityper

  • Egenskaben resize angiver de retninger, hvor et element kan ændres i størrelse. Du kan angive følgende værdier.
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).
none
  • Angivelse af none deaktiverer ændring af størrelsen på elementet. Dette er standardværdien.
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-animationFloat-relaterede CSS-egenskaber