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

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

  • Text: Specificera direkt genom att omsluta strängen med "". Lägger till text.
  • Bild: Använd funktionen url() för att infoga bilder.
  • Räknare: Använd funktionen counter() för att visa räknare.
  • Attribut: Använd funktionen attr() för att visa attributvärden för HTML-element. Till exempel kan du visa title-attributet.
  • none: Anger att inget innehåll kommer att visas. Detta är standardläget.

Användningsanteckningar

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

Exempel 

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

Detta är ett exempel på att lägga till en ikon före en <p>-tagg. På detta sätt kan du visuellt komplettera innehållet genom stilmallar.

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

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`**: ändra storlek uppåt.
    - **`s-resize`**: ändra storlek nedåt.
    - **`e-resize`**: ändra storlek till höger.
    - **`w-resize`**: ändra storlek till vänster.
    - **`ne-resize`**: ändra storlek till övre högra hörnet.
    - **`nw-resize`**: ändra storlek till övre vänstra hörnet.
    - **`se-resize`**: ändra storlek till nedre högra hörnet.
    - **`sw-resize`**: ändra storlek till nedre vänstra hörnet.

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.

I det här exemplet specificeras riktningen i vilken en textruta kan ändras i storlek med resize-egenskapen.

  • Med resize: both; kan ett element ändras i storlek både horisontellt och vertikalt.
  • Med resize: horizontal; kan ett element endast ändras i storlek horisontellt.
  • Med resize: vertical; kan ett element endast ändras i storlek vertikalt.
  • Med resize: none; kan ett element inte ändras i storlek.

Värdetyper

  • resize-egenskapen tilldelas ett värde som specificerar riktningen i vilken ett element kan ändras i storlek. Du kan ange följande värden.
none
  • Om none anges inaktiveras storleksändring av elementet. Det här är standardvärdet.
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).
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-animation