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

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

  • Tekst: Spesifiser direkte ved å omslutte strengen med "". Legger til tekst.
  • Bilde: Bruk funksjonen url() for å sette inn bilder.
  • Teller: Bruk funksjonen counter() for å vise tellere.
  • Attributt: Bruk funksjonen attr() for å vise attributtverdier til HTML-elementer. For eksempel kan du vise attributtet title.
  • none: Angir at ingen innhold skal vises. Dette er standardtilstanden.

Bruksnotater

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

Eksempel 

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

Dette er et eksempel på å legge til et ikon foran en <p>-tagg. På denne måten kan du visuelt supplere innhold gjennom stilark.

cursor-egenskapen 

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

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`**: endre størrelse i oppover-retning.
    - **`s-resize`**: endre størrelse nedover.
    - **`e-resize`**: endre størrelse til høyre.
    - **`w-resize`**: endre størrelse til venstre.
    - **`ne-resize`**: endre størrelse til øverst-høyre.
    - **`nw-resize`**: endre størrelse til øverst-venstre.
    - **`se-resize`**: endre størrelse til nederst-høyre.
    - **`sw-resize`**: endre størrelse til nederst-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.

I dette eksempelet er retningen som en tekstboks kan endres størrelse spesifisert ved bruk av resize-egenskapen.

  • Med resize: both; kan et element endres størrelse både horisontalt og vertikalt.
  • Med resize: horizontal; kan et element kun endres størrelse horisontalt.
  • Med resize: vertical; kan et element kun endres størrelse vertikalt.
  • Med resize: none; kan et element ikke endres størrelse.

Verdityper

  • resize-egenskapen tildeles en verdi som spesifiserer retningen et element kan endres størrelse. Du kan spesifisere følgende verdier.
none
  • Å spesifisere none deaktiverer størrelsesendring av elementet. Dette er standardverdien.
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).
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-animasjon