Articles
Introduksjon til CSS
CSS-egenskaper relatert til brukergrensesnitt

CSS-egenskaper relatert til brukergrensesnitt

Denne artikkelen forklarer CSS-egenskaper relatert til brukergrensesnittet.

Du kan lære om egenskapene content, cursor, pointer-events og resize, inkludert deres bruksområder og hvordan du skriver dem.

YouTube Video

HTML for 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>

Brukergrensesnittrelatert

content-egenskapen 

 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-egenskapen brukes til å legge til innhold i pseudo-elementer, hovedsakelig ::before eller ::after. Denne egenskapen brukes til å definere tekst, bilder, tellere osv., som ikke vises direkte i elementet. Dens hovedrolle er å tillate kontroll over dekorativt innhold eller tilleggsinformasjon som ikke er skrevet direkte i HTML, via stilark.

I dette eksempelet legges "Note: " til før elementet, og "(End)" legges til etter. Disse bruker pseudo-elementene ::before og ::after henholdsvis.

Verdier for content-egenskapen 

 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-egenskapen kan ha følgende verdier:.

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 legge til tekst ved å omslutte en streng direkte med doble 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}
  • Bilde
    • Du kan sette inn et bilde ved å bruke funksjonen url().
 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}
  • Teller
    • Bruk funksjonen counter() for å vise en teller.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Attributt
    • Funksjonen attr() kan brukes til å vise attributtverdien til et HTML-element. For eksempel kan du vise attributtet title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • ingen
    • Angir at ikke noe innhold skal vises. Dette er standardtilstanden.

Bruksnotater

Når du bruker egenskapen content, må du huske på følgende punkter:.

  • content-egenskapen gjelder kun for pseudo-elementer, ikke vanlige elementer.
  • Siden det ikke legges til i DOM-en, kan det ikke manipuleres direkte med JavaScript.
  • Det kan påvirke layouten, så det brukes vanligvis for å vise dekorativ eller tilleggsinformasjon.

cursor-egenskapen

cursor-egenskapen brukes til å spesifisere typen markør som vises når musepekeren plasseres over et element. Du kan spesifisere ulike markørstiler, og det brukes ofte på interaktive elementer for å forbedre brukeropplevelsen.

Hovedtyper av markører

Følgende verdier kan spesifiseres 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 vanlige pilmarkøren (nettleserens standardmarkør).
pointer
  • pointer er en håndformet markør som vises når den plasseres over en lenke.
text
  • text er en I-bjelke-markør som vises i områder der tekst kan velges.
move 
- `move` er en korsformet markør som brukes når et element kan draes.
crosshair
  • crosshair er en trådkorsmarkør for presis utvalg.
not-allowed
  • not-allowed er en markør for områder eller handlinger som ikke er tillatt.
help
  • help er en markør med et spørsmålstegn som vises når den plasseres over elementer som kan gi hjelpeinformasjon.
wait
  • wait er et timeglass eller en sirkulær markør som representerer en behandlingsstatus.
progress
  • progress er en markør som representerer en pågående operasjon. Den indikerer imidlertid at brukeren kan utføre andre operasjoner.
grab
  • grab er en markør for å gripe dra-bare elementer.
grabbing
  • grabbing er en markør som indikerer at et element dras.
resize

resize er en markør som brukes når et vindu eller element kan endre størrelse. Det finnes forskjellige typer avhengig av retningen.

  • n-resize: En størrelsesendringsmarkør som peker oppover.

  • s-resize: En størrelsesendringsmarkør som peker nedover.

  • e-resize: En størrelsesendringsmarkør som peker mot høyre.

  • w-resize: En størrelsesendringsmarkør som peker mot venstre.

  • ne-resize: En størrelsesendringsmarkør som peker opp mot høyre.

  • nw-resize: En størrelsesendringsmarkør som peker opp mot venstre.

  • se-resize: En størrelsesendringsmarkør som peker ned mot høyre.

  • sw-resize: En størrelsesendringsmarkør som peker ned mot venstre.

Egendefinert markør 

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

Det er også mulig å angi en egendefinert markør ved hjelp av url().

  • I dette eksempelet er custom-cursor.png bildefilen for markøren. Hvis bildet ikke er tilgjengelig, vises nettleserens standardmarkør med auto.

Sammendrag

  • cursor-egenskapen angir hvilken markør som skal vises når brukeren er over et element.
  • Det finnes ulike markørstiler avhengig av bruk, og egendefinerte markører kan også settes.
  • Ved å velge passende markørstiler i henhold til interaktive elementer og begrensede operasjoner, kan en mer brukervennlig grensesnitt gis.

pointer-events-egenskapen 

 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-egenskapen brukes til å kontrollere hvordan et element håndterer hendelser fra peker-enheter som mus, berøring og stylus. Normalt, når et element klikkes på eller holdes over av en bruker, mottar det pekerhendelser, men denne oppførselen kan endres ved hjelp av denne egenskapen.

  • I klassen pointer-events-auto er pointer-events-egenskapen satt til auto, som gjør det mulig å behandle normale klikk- og hover-hendelser. Elementet er klikkbart, så en melding vises når det klikkes på.

  • I klassen pointer-events-auto er pointer-events-egenskapen satt til none, så elementet mottar ikke pekerhendelser. Selv om cursor-egenskapen er satt til pointer, endrer ikke musemarkøren seg, og andre elementer under blir klikkbare.

Verdityper

  • pointer-events-egenskapen angir om og hvordan et element mottar pekerhendelser. Du kan spesifisere følgende verdier.
auto
  • auto er standardverdien, hvor elementet mottar pekerhendelser som vanlig.
none
  • Når none er spesifisert, mottar elementet ikke pekerhendelser. Elementet deaktiverer interaksjoner som å klikke og holde pekeren over, men andre elementer under kan motta pekerhendelser.
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 verdiene brukes hovedsakelig for SVG-elementer. Hver verdi styrer om spesifikke deler av et element (som fyll, omriss osv.) reagerer på pekerhendelser. Det brukes ikke ofte med vanlige HTML-elementer.

Nøkkelelementer for bruk

Her er noen eksempler på hvordan du kan bruke pointer-events-egenskapen.

  1. Velge elementer du vil deaktivere

    • none-verdien er nyttig for midlertidig å deaktivere elementer som knapper eller lenker.

  2. Bruk med overlappende elementer

    • Når position-egenskapen er satt til absolute, eller elementer er stablet med z-index-egenskapen, tillater innstilling av pointer-events til none på det øverste elementet at pekerhendelser sendes til elementet under.

resize-egenskap 

 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 er en CSS-egenskap som angir i hvilken retning et element kan endres størrelse av brukeren. Ved å bruke denne egenskapen kan du tillate at elementer endrer størrelse vertikalt eller horisontalt ved å dra, eller deaktivere størrelsesendring helt.

Verdityper

  • Egenskapen resize angir retningene et element kan endres størrelse i. Du kan spesifisere følgende verdier.
both
  • Å spesifisere both tillater at elementet endres størrelse både vertikalt og horisontalt.
horizontal
  • Å spesifisere horizontal tillater at elementet kun endres størrelse i horisontal retning (bredde).
vertical
  • Å spesifisere vertical tillater at elementet kun endres størrelse i vertikal retning (høyde).
none
  • Å spesifisere none deaktiverer størrelsesendring av elementet. Dette er standardverdien.
inherit
  • Ved å spesifisere inherit arver elementet verdien av resize-egenskapen fra sin forelder.

Notater

  • For å gjøre et element justerbart, må du angi egenskapen overflow sammen med egenskapen resize. Justerbare elementer kan trenge rullefelt, og overflow: auto blir vanligvis satt.
  • Justering brukes vanligvis med blokkelementer som div og textarea.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til 3D-animasjonFloat-relaterte CSS-egenskaper