与用户界面相关的 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`