Articles
Introduktion till CSS
CSS-egenskaper relaterade till användargränssnitt

CSS-egenskaper relaterade till användargränssnitt

Den här artikeln förklarar CSS-egenskaper relaterade till användargränssnitt.

Du kan lära dig om egenskaperna content, cursor, pointer-events och resize, inklusive deras användningsområden och hur man skriver dem.

YouTube Video

HTML för förhandsgranskning

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>

Relaterat till användargränssnitt

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 används för att lägga till innehåll till pseudo-element, främst ::before eller ::after. Denna egenskap används för att definiera text, bilder, räknare etc., som inte direkt visas inuti elementet. Dess huvudfunktion är att möjliggöra kontroll över dekorativt innehåll eller kompletterande information som inte skrivs direkt i HTML genom stilmallar.

I detta exempel läggs "Notera: " till före elementet och "(Slut)" läggs till efter. Dessa använder pseudo-elementen ::before respektive ::after.

Värden för 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 anta följande värden:.

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}
  • Text
    • Du kan lägga till text genom att omsluta en sträng direkt med dubbla citattecken ("").
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}
  • Bild
    • Du kan infoga en bild med hjälp av funktionen 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}
  • Räknare
    • Använd funktionen counter() för att visa en räknare.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Attribut
    • attr()-funktionen kan användas för att visa attributvärdet för ett HTML-element. Till exempel kan du visa title-attributet.
1/* None */
2.content-none::before {
3    content: none;
4}
  • ingen
    • Anger att inget innehåll ska visas. Detta är standardläget.

Användningsanteckningar

När du använder egenskapen content bör du tänka på följande punkter:.

  • content-egenskapen gäller endast pseudo-element, inte vanliga element.
  • Eftersom det inte läggs till i DOM:en kan det inte manipuleras direkt med JavaScript.
  • Det kan påverka layouten, så det används ofta för att visa dekorativ eller kompletterande information.

cursor-egenskapen

cursor-egenskapen används för att ange vilken typ av markör som ska visas när muspekaren placeras över ett element. Du kan ange olika markörstilar, och det används ofta på interaktiva element för att förbättra användarupplevelsen.

Huvudsakliga markörtyper

Följande värden kan anges 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 är den vanliga pilmarkören (webbläsarens standardmarkör).
pointer
  • pointer är en handformad markör som visas när den placeras över en länk.
text
  • text är en I-balksmarkör som visas i områden där text kan markeras.
move 
- `move` är en korsformad markör som används när ett element kan dras.
crosshair
  • crosshair är en hårkorsmarkör för exakt val.
not-allowed
  • not-allowed är en markör för områden eller åtgärder som inte är tillåtna.
help
  • help är en markör med ett frågetecken som visas när den placeras över element som kan ge hjälpinformation.
wait
  • wait är ett timglas eller en cirkulär markör som representerar ett bearbetningstillstånd.
progress
  • progress är en markör som representerar en pågående operation. Dock indikerar den att användaren kan utföra andra åtgärder.
grab
  • grab är en markör för att greppa dragbara element.
grabbing
  • grabbing är en markör som indikerar att ett element dras.
resize

resize är en markör som används när ett fönster eller element kan ändra storlek. Det finns olika typer beroende på riktningen.

  • n-resize: En ändringsmarkör som pekar uppåt.

  • s-resize: En ändringsmarkör som pekar nedåt.

  • e-resize: En ändringsmarkör som pekar åt höger.

  • w-resize: En ändringsmarkör som pekar åt vänster.

  • ne-resize: En ändringsmarkör som pekar uppåt till höger.

  • nw-resize: En ändringsmarkör som pekar uppåt till vänster.

  • se-resize: En ändringsmarkör som pekar nedåt till höger.

  • sw-resize: En ändringsmarkör som pekar nedåt till vänster.

Anpassad markör 

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

Det är också möjligt att ange en anpassad markör med url().

  • I det här exemplet är custom-cursor.png bildfilen för markören. Om den bilden inte är tillgänglig visas webbläsarens standardmarkör med auto.

Sammanfattning

  • cursor-egenskapen anger vilken markör som ska visas när användaren är över ett element.
  • Det finns olika markörstilar tillgängliga beroende på användning, och anpassade markörer kan även anges.
  • Genom att välja lämpliga markörstilar beroende på interaktiva element och begränsade åtgärder kan en mer användarvänlig UI tillhandahållas.

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 används för att kontrollera hur ett element hanterar händelser från pekdon som mus, touch och pekpenna. Normalt, när ett element klickas på eller hovras över av en användare, tar det emot pekhändelser, men detta beteende kan ändras med hjälp av denna egenskap.

  • I klassen pointer-events-auto är pointer-events-egenskapen inställd på auto, vilket gör att vanliga klick- och händelseövergångar kan bearbetas. Elementet är klickbart, så ett meddelande visas när det klickas på.

  • I klassen pointer-events-auto är pointer-events-egenskapen inställd på none, så elementet tar inte emot pekhändelser. Även om cursor-egenskapen är inställd på pointer, ändras inte musmarkören, och andra element under blir klickbara.

Värdetyper

  • pointer-events-egenskapen anger om och hur ett element tar emot pekhändelser. Du kan ange följande värden.
auto
  • auto är standardvärdet, där elementet tar emot pekhändelser normalt.
none
  • När none anges tar inte elementet emot pekhändelser. Elementet inaktiverar interaktioner som att klicka och hovra, men andra element under kan ta emot pekhä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;
  • Dessa värden används främst för SVG-element. Varje värde styr om specifika delar av ett element (som fyllning, kontur, etc.) svarar på pekhändelser. Det används inte ofta med vanliga HTML-element.

Viktiga punkter för användning

Här är några exempel på hur du kan använda pointer-events-egenskapen.

  1. Välja element du vill inaktivera

    • Värdet none är användbart för att tillfälligt inaktivera element som knappar eller länkar.

  2. Användning med överlappande element

    • När position-egenskapen är inställd på absolute eller element lagerläggs med z-index, gör inställningen pointer-events till none på det översta elementet att pekhändelser kan skickas till elementet under.

resize-egenskapen 

 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-egenskapen är en CSS-egenskap som specificerar i vilken riktning ett element kan ändras i storlek av användaren. Genom att använda denna egenskap kan du tillåta att element storleksändras vertikalt eller horisontellt genom att dra, eller inaktivera storleksändring helt och hållet.

Värdetyper

  • Egenskapen resize anger i vilka riktningar ett element kan ändras i storlek. Du kan ange följande värden.
both
  • Om both anges kan elementet ändras i storlek både vertikalt och horisontellt.
horizontal
  • Om horizontal anges kan elementet ändras i storlek endast i horisontell riktning (bredd).
vertical
  • Om vertical anges kan elementet ändras i storlek endast i vertikal riktning (höjd).
none
  • Om none anges inaktiveras storleksändring av elementet. Det här är standardvärdet.
inherit
  • Att ange inherit gör att elementet ärver värdet av resize-egenskapen från sin förälder.

Anteckningar

  • För att göra ett element justerbart måste du ställa in overflow-egenskapen tillsammans med resize-egenskapen. Justerbara element kan kräva rullningslister, och overflow: auto sätts vanligtvis.
  • Storleksändring används vanligtvis med blockelement som div och textarea.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till 3D-animationFloat-relaterade CSS-egenskaper