與用戶界面相關的CSS屬性

Articles

CSS 簡介

與用戶界面相關的CSS屬性

本文介紹與用戶界面相關的CSS屬性。

您可以學習有關 content、cursor、pointer-events 和 resize 屬性，了解它們的用途以及如何編寫。

YouTube Video

預覽的HTML

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>

用戶界面相關

`content` 屬性

 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 屬性用於為偽元素添加內容，主要是 ::before 和 ::after。此屬性用於定義文本、圖片、計數器等不直接顯示在元素內的內容。它的主要作用是通過樣式表控制裝飾性內容或不是直接寫在 HTML 中的補充信息。

在此範例中，在元素前面添加了 "Note: "，在後面添加了 "(End)"。這些分別使用了偽元素 ::before 和 ::after。

`content` 屬性的值

 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 屬性可以取以下值：。

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}

文字
- 您可以通過將字串直接用雙引號（""）括起來來新增文字。

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}

圖片
- 你可以使用 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}

計數器
- 使用 counter() 函數顯示計數器。

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

屬性
- attr() 函數可以用來顯示 HTML 元素的屬性值。例如，您可以顯示 title 屬性。

1/* None */
2.content-none::before {
3    content: none;
4}

無
- 指定不顯示任何內容。這是默認狀態。

使用注意事項

使用 content 屬性時，請注意以下幾點：。

content 屬性僅適用於偽元素，而非普通元素。
由於它未添加到 DOM 中，因此無法直接用 JavaScript 操作。
它可能會影響佈局，因此通常用於顯示裝飾性或補充信息。

`cursor` 屬性

cursor 屬性用於指定當鼠標指針懸停在元素上時顯示的光標類型。您可以指定各種光標樣式，通常應用於交互元素以提高用戶體驗。

主要光標類型

以下值可以作為光標類型指定：。

 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 是普通的箭頭光標（瀏覽器的默認光標）。

`pointer`

pointer 是一個手型光標，顯示於懸停在鏈接上時。

`text`

text 是一個I形光標，顯示於可以選擇文本的區域。

`move`

- `move` 是一個十字形光標，用於元素可被拖動時。

`crosshair`

crosshair 是一個十字準星光標，用於精確選擇。

`not-allowed`

not-allowed 是用於禁止的區域或操作的光標。

`help`

help 是帶有問號的光標，顯示於懸停在可以提供幫助信息的元素上時。

`wait`

wait 是一個沙漏或圓形光標，表示正在處理的狀態。

`progress`

progress 是一個表示操作正在進行中的光標。然而，這表明用戶可以執行其他操作。

`grab`

grab 是用於抓取可拖動元素的光標。

`grabbing`

grabbing 是表示元素正在被拖動的光標。

`resize`

resize 是在窗口或元素可以調整大小時使用的光標。根據方向的不同有多種類型。

n-resize：指向上方的調整大小游標。
s-resize：指向下方的調整大小游標。
e-resize：指向右方的調整大小游標。
w-resize：指向左方的調整大小游標。
ne-resize：指向右上方的調整大小游標。
nw-resize：指向左上方的調整大小游標。
se-resize：指向右下方的調整大小游標。
sw-resize：指向左下方的調整大小游標。

自定義游標

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

也可以使用 url() 指定自定義游標。

在此示例中，custom-cursor.png 是用作游標的圖像文件。如果該圖像無法使用，瀏覽器將使用 auto 顯示默認游標。

總結

cursor 屬性指定當用戶懸停在元素上時應顯示哪種游標。
根據用途可以使用多種游標樣式，也可以設置自定義游標。
通過根據互動元素和限制操作選擇合適的游標樣式，可以提供更友好的用戶界面。

`pointer-events` 屬性

 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 屬性用於控制元素如何處理來自指針設備（如滑鼠、觸控和觸控筆）的事件。通常，當用戶點擊或懸停在某元素上時，該元素會接收指針事件，但可以通過此屬性更改此行為。

在 pointer-events-auto 類中，pointer-events 屬性設置為 auto，允許處理正常的點擊和懸停事件。該元素是可點擊的，因此當點擊它時顯示一條消息。
在 pointer-events-auto 類中，pointer-events 屬性設置為 none，因此該元素不接收指針事件。即使將 cursor 屬性設置為 pointer，滑鼠游標也不會改變，並且底下的其他元素變得可點擊。

值的類型

pointer-events 屬性指定元素是否以及如何接收指針事件。您可以指定以下值。

`auto`

默認值為 auto，元素會正常接收指針事件。

`none`

當指定為 none 時，元素不會接收指針事件。該元素禁用點擊和懸停等交互，但其下的其他元素仍可接收到指針事件。

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

這些值主要用於 SVG 元素。每個值控制元素的特定部分（如填充、描邊等）是否響應指針事件。它通常不適用於常規 HTML 元素。

使用重點

以下是一些有關如何使用 pointer-events 屬性的示例。

選擇要禁用的元素
- none 值對於臨時禁用按鈕或鏈接等元素非常有用。
與重疊元素配合使用
- 當 position 屬性設置為 absolute 或使用 z-index 屬性對元素分層時，在頂層元素上設置 pointer-events 為 none，可將指針事件傳遞給下層的元素。

`resize` 屬性

 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 是一個 CSS 屬性，用於指定用戶可以調整元素大小的方向。通過使用此屬性，可以允許用戶通過拖動垂直或水平調整元素大小，或者完全禁用大小調整。

值的類型

「resize」屬性指定元素可以被調整大小的方向。您可以指定以下值。

`both`

指定 both 時，元素可以在垂直和水平方向調整大小。

`horizontal`

指定 horizontal 時，元素只能在水平方向（寬度）調整大小。

`vertical`

指定 vertical 時，元素只能在垂直方向（高度）調整大小。

`none`

指定 none 時，元素無法調整大小。這是默認值。

`inherit`

指定 inherit 使得元素從其父元素繼承 resize 屬性值。

注意事項

為了讓元素可調整大小，您需要同時設置 overflow 屬性和 resize 屬性。可調整大小的元素可能需要滾動條，通常會設置 overflow: auto。
調整大小通常用於諸如 div 和 textarea 之類的塊級元素。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。請也查看我們的 YouTube 頻道。

YouTube Video

與 3D 動畫相關的 CSS 屬性與浮動相關的CSS屬性

與用戶界面相關的CSS屬性

YouTube Video

預覽的HTML

用戶界面相關

content 屬性

content 屬性的值

使用注意事項

cursor 屬性

主要光標類型

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

自定義游標

總結

pointer-events 屬性

值的類型

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

使用重點

resize 屬性

值的類型

both

horizontal

vertical

none

inherit

注意事項

YouTube Video

`content` 屬性

`content` 屬性的值

`cursor` 屬性

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

`pointer-events` 屬性

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

`resize` 屬性

`both`

`horizontal`

`vertical`

`none`

`inherit`