【CSS 用户界面属性 (Basic user interface)】
2024-05-16 21:04:18
CSS 用户界面属性 Basic user interface
- CSS 用户界面属性 Basic user interface
- 1. appearance 属性: 设置 元素的外观样式
- 2. box-sizing 属性: 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)
- 3. caret-color 属性: 设置 插入光标的颜色
- 4. cursor 属性: 设置 元素内 鼠标光标的 形状
- 5. resize 属性: 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)
- 6. user-select 属性: 设置 文本的选中性
- ♣ 结束语 和 友情链接
CSS 用户界面属性 Basic user interface
| 用于 | 属性名 | CSS 版本 |
|---|---|---|
| ① 设置 元素的外观样式。 |
appearance
|
4 |
② 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)。
|
box-sizing
|
4 |
| ③ 设置 插入光标的颜色。 |
caret-color
|
4 |
| ④ 设置 元素内 鼠标光标的 形状。 |
cursor
|
2 |
⑤ 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)。
|
resize
|
4 |
| ⑥ 设置 文本的选中性。 |
user-select
|
4 |
- CSS Basic User Interface
- 是一个 CSS 模块
- 用户界面相关的属性: 定义 与用户界面相关的 特性的呈现和功能。
- 相关属性
- ❶
appearance(实验中的属性) - ❷
box-sizing - ❸
cursor - ❹
caret-color - ❺
resize - ❻
user-select(实验中的属性) ime-mode(已废弃)- 属性控制 文本字段的 输入法编辑器(IME)的状态。此属性 已过时。
nav-down(实验中的属性，暂无详细介绍)nav-left(实验中的属性，暂无详细介绍)nav-right(实验中的属性，暂无详细介绍)nav-up(实验中的属性，暂无详细介绍)outline(详情见: 【 CSS 边框和轮廓属性 Border&Outline】 )outline-widthoutline-styleoutline-coloroutline-offset
text-overflow(详情见: 【CSS 文本属性（Text）】 )
- ❶
1. appearance 属性: 设置 元素的外观样式
- ⑴ 设置 元素的外观样式:
appearance- ① 属性的前缀
Gecko(Firefox)中使用-moz-appearance属性，根据操作系统的主题，使用平台 原生样式 显示元素。- 基于
webkit(如 Safari)和基于blink(如 Chrome、Opera)的浏览器使用-webkit-appearance属性来 实现相同的功能。注意，由于 兼容性的原因，Firefox 和 Edge 也支持-webkit-appearance。
- ② 自定义部件
- XUL 样式表中 经常使用此属性 ，来设计具有 平台合适样式的 自定义小部件。
- 它还用于 Mozilla 平台附带的 小部件的 XBL (从 Gecko 57 开始 就被弃用了)实现。
- ③ 浏览器差异
- 尽管在 大多数现代浏览器中都支持它，但是它的实现有很大的差异。
- ① 属性的前缀
- ⑵ 外观样式的 语法和属性值
appearance:none | auto | button | textfield | searchfield | textarea | push-button | button-bevel | slider-horizontal | checkbox | radio | square-button | menulist | menulist-button | listbox | meter | progress-bar;- 实际属性值 更多，但浏览器支持度 并不好。
- 初始值:
auto浏览器自动决定。 - 不应用样式:
none
- 初始值:
- 实际属性值 更多，但浏览器支持度 并不好。
/* 用户界面模块版本 4 的值 CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;/* Gecko中 可用值的 部分列表 */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;/* WebKit/Blink中可用值的部分列表(以及Gecko和Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;
- ⑶ 外观样式的 浏览器支持
- 需要浏览器前缀:
-moz-,-webkit- 
- 需要浏览器前缀:
- 示例1: 给一个
div元素 设置外观样式。 - ① 外观样式 设置成 按钮样式
-moz-appearance: button;-webkit-appearance: button;
- ② 复选框的样式
- Firefox 只显示复选框的样式， 元素的本来的文本内容 不见了。
- 谷歌在元素中间 显示复选框
- Firefox 只显示复选框的样式， 元素的本来的文本内容 不见了。
- ③ 设置成单选按钮
- 谷歌中
- ④ 去除单行文本框和 复选框的外观样式
- 原本的样式 :
- 去除外观样式后:
- 原本的样式 :
.inputappearance{margin: 10px;-moz-appearance: none;-webkit-appearance: none;
}
- html
<input type="text" class="inputappearance"><label ><input type="checkbox" class="inputappearance">动漫</label>
2. box-sizing 属性: 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)
- ⑴ 设置元素 宽高属性 的指定区域:
box-sizing- 属性设置 如何计算 元素的总宽度和高度。
- ① 宽高 默认指定区域: 内容区
- 默认情况下，在 CSS 框模型中，分配给元素的 宽度
width和高度height只应用于元素的 内容框 = 内容区 =content box。
- 默认情况下，在 CSS 框模型中，分配给元素的 宽度
- ② 盒子的整体宽高: (存疑: 应该还包括 外边距)
- 如果这个元素有任何的 边框
border或 内边距padding，绘制到屏幕上时的 盒子宽度和高度 会加上设置的边框和内边距值。 - 当调整一个 元素的宽度和高度时 需要时刻注意到 元素的边框和内边距。
- 如果这个元素有任何的 边框
- ③ 适用元素: 能设置 宽度或高度的 所有元素 。
- ⑵ 宽高的 指定区域 和 布局/定位
- ① 布局: 将
box-sizing设置为 边框盒border-box通常对 布局元素很有用。 处理元素的大小 更加容易，并且通常 消除了在布局内容时 可能遇到的许多陷阱。 - ② 定位: 另一方面，当使用
position: relative或position: absolute时，box-sizing: content-box的使用允许 定位值 相对于内容 (存疑: 测试 设置偏移量 仍是整体偏移，相对于内容 是什么意思呢 )，并且独立于 对边框和内边距大小的更改。
- ① 布局: 将
- ⑶ 元素宽高 指定区域的 语法
box-sizing:content-box | border-box;
⑷ 元素宽高 指定区域的属性值
内容盒(默认) / 边框盒
① 内容盒 (默认值):
content-box- 默认值，标准盒子模型。
- 只包括: 内容区的 宽和高。
width= 内容区的宽度。height= 内容区的高度。
width与height的计算值 不包括:- 边框（
border），内边距（padding），外边距（margin）。
- 边框（
- 元素的整体宽度 =
width+内边距+边框 (不考虑外边距的话 )box-sizing: content-box;+width: 200px; height: 100px;
② 边框盒:
border-boxwidth和height属性包括: 内容，内边距和边框，但不包括 外边距。width=border+padding+ 内容的宽度height=border+padding+ 内容的高度- 这是当文档处于
Quirks模式 时 IE 使用的盒模型。 box-sizing: border-box;+width: 200px; height: 100px;
- 这是当文档处于
- ③ 内边距盒 (已废弃):
padding-box
上图 涉及代码
html
<!--元素的总宽度和高度-->
<div class="divcontainer"><p class="poem">明日复明日，明日何其多。我生待明日，万事成蹉跎。</p>
</div>
- css
/*设置元素 总宽度/高度 的范围*/
.divcontainer{width: 30%;height: 10%;margin: 10px;padding: 10px;border: solid 10px darkgreen;}
.poem{width: 200px;height: 100px;margin: 10px;border: dashed 10px lightskyblue;padding: 10px;box-sizing: border-box;/*box-sizing: content-box;*//*position: relative;*//*top: 10px;*/}
- ⑸ 宽高 指定区域的 浏览器支持
- 谷歌，IE，Firefox 23之前当从
window.getComputedStyle()计算高度时，不考虑box-sizing属性。
- 谷歌，IE，Firefox 23之前当从
3. caret-color 属性: 设置 插入光标的颜色
- ⑴ 设置 插入光标的颜色:
caret-color， 美 /ˈkærət/- ① 插入光标: 在网页的 可编辑器区域内，指示用户的输入 具体会插入到哪里的，一般会 闪烁 ，形似竖杠
|。 - ② 插入光标 适用的元素:
- ❶
<input>或那些 ❷ 具有 可编辑contenteditable属性的元素。
- ❶
- ③ 插入光标的 默认颜色:
- 默认情况下，它是黑色的，但是它的颜色 可以通过
caret-color属性改变。
- 默认情况下，它是黑色的，但是它的颜色 可以通过
- ① 插入光标: 在网页的 可编辑器区域内，指示用户的输入 具体会插入到哪里的，一般会 闪烁 ，形似竖杠
- ⑵ 插入光标 和 光标
- ① 插入光标（
insertion caret）: 只是光标（caret）的其中一种。 - ② 导航 光标:
- 浏览器 有一种光标 叫做“导航光标“（
navigation caret），它可以在 不可编辑区域内 来回移动。
- 浏览器 有一种光标 叫做“导航光标“（
- ③ 鼠标 指针光标:
- 当鼠标指针移动到一段
cursor属性是auto的文本上方时，或移动到cursor属性是text、vertical-text的內容上方时候，看起来有点像 插入光标，但不是插入光标（caret），而是 鼠标指针光标（cursor）。
- 当鼠标指针移动到一段
- ① 插入光标（
- ⑶ 插入光标颜色的 语法和属性值
caret-color:auto | <color><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>- 浏览器决定:
auto- 用户代理为 插入符号 选择适当的颜色。
- 通常是
currentcolor，但是用户代理可以根据currentcolor的值、背景、阴影等因素，选择不同的颜色，以确保与周围的内容 具有良好的 可视性和对比度。
- 合法颜色值:
<color>- 【CSS 颜色的 合法颜色值 (详细介绍)】
- ⑷ 插入光标的颜色的 浏览器支持
示例1: 改变单行文本的 插入光标的颜色。
-html
<!--插入光标的颜色-->
姓名: <input type="text" class="caretColor">
- css
/*插入光标的颜色*/
.caretColor{/*margin: 10px;*/width: 100px;height: 20px;caret-color: red;
}
4. cursor 属性: 设置 元素内 鼠标光标的 形状
- ⑴ 设置 元素内 鼠标光标的 形状:
cursor属性，美 ['kɝsɚ]- 设置 鼠标指针 悬浮在元素上方时， 显示的 鼠标光标的 形状。
- ⑵ 鼠标光标形状的 语法
cursor:[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];- 鼠标光标形状 默认值：
auto
/* 关键字值 Keyword value */
cursor: pointer;
cursor: auto;/* URL，带有关键字的回退 */
cursor: url(hand.cur), pointer;/* URL和坐标，以及关键字的回退 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;/* 全局值 Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
⑶ 光标形状的 属性值
- ① 浏览器决定 (默认值):
auto- 浏览器 设置的光标。
- 用户代理 将根据 当前的内容 确定要显示的光标。
- ② 图像光标
url地址- ★ 图像地址和回退:
- ❶ 零个 或 ❷ 多个
<url>值。最后 末尾的位置 必须填一个 ❸ 关键字值，它们之间用 ❹ 逗号分隔。<url>指向一个 图像文件。- 浏览器将 尝试加载 指定的第一个图像，如果无法加载 则返回下一个图像，如果 无法加载图像或未指定图像，则使用 关键字值。
- ❶ 零个 或 ❷ 多个
- ★ 光标 相对于 图像左上角的点 偏移:
<x><y>- 每个
<url>后面都可选跟 一对 ❶ 空格分隔的数字<x><y>表示 ❷ 光标的热点/偏移。- ❶ 可选的
x和y坐标。两个 ❷ 小于32的 ❸ 无单位 ❹ 非负数。 - 这些将设置 光标的热点(
hotspot)，相对于 图像的左上角。 cursor: url(one.svg), url(two.svg) 5 5, progress;
- ❶ 可选的
- 每个
- ★ 图像地址和回退:
- ① 浏览器决定 (默认值):
示例1: 设置 光标图像,不设置
x,y热点cursor: url("../images/star.png"),crosshair;- 鼠标光标 在 超出 上边框和左边框的时候, 就会消失 不显示了。
示例2: 设置光标图像的同时,设置 热点坐标。
cursor: url("../images/star.png") 20 20,crosshair;- 光标 可以根据 热点设置的
x,y超出 上边框和左边框 一定距离。
- 更多属性值,如下 ↓
- 属性值 总共分为 7 类
- html
<div class="divcontainer"><p class="poem">明日复明日，明日何其多。我生待明日，万事成蹉跎。</p>
</div>
- css
/*设置元素的父元素*/.divcontainer {width: 30%;height: 10%;margin: 10px;padding: 10px;border: solid 10px darkgreen;}
.poem {width: 200px;height: 100px;margin: 10px;border: dashed 10px lightskyblue;padding: 10px;box-sizing: border-box;/*⑴ 通用光标类型值*//*cursor: auto;*//*cursor: none;*//*cursor: default;*//*⑵ 链接和状态*/cursor: context-menu;cursor: help;cursor: pointer;cursor: progress;cursor: wait;/*⑶ 选择*/cursor: cell;cursor: crosshair;cursor: text;cursor: vertical-text;/* ⑷ 拖放 */cursor: alias;cursor: copy;cursor: move;cursor: no-drop;cursor: not-allowed;cursor: grab;cursor: grabbing;/* ⑸ 重设大小 和 滚动 */cursor: all-scroll;cursor: col-resize;cursor: row-resize;cursor: n-resize;cursor: e-resize;cursor: s-resize;cursor: w-resize;cursor: ne-resize;cursor: nw-resize;cursor: se-resize;cursor: sw-resize;cursor: ew-resize;cursor: ns-resize;cursor: nesw-resize;cursor: nwse-resize;/*⑹ 放大缩小*/cursor: zoom-in;cursor: zoom-out;/* ⑺ 设置 光标的图像 和 图像的热点*//*cursor: url("../images/star.png"),crosshair;*//*cursor: url("../images/star.png") 20 20,crosshair;*//*cursor: url("../images/star.png") 32 20,crosshair;*/
}
| 属性值分类 | 用于 | 属性值 | 形状 | 示例 |
|---|---|---|---|---|
| ⑴ 通用 | ① 浏览器 根据当前内容 决定指针样式。 | auto | 不固定。 |
文本和非文本的地方 显示不一样的光标: 工字型和箭头的。
|
| ② 默认指针，通常是 箭头形状。 | default |
|
文本和非文本的地方: 显示的 都是箭头形状。
|
|
| ③ 不显示光标。 | none | 不显示 任何光标形状。 |
一进入元素内部，光标就消失了。 不显示任何光标了。
|
|
| ⑵ 链接和状态 | ① 指针下有 可用 内容目录。只有 windows 中的 IE 10,11有效。 | context-menu |
|
|
|
② 指示帮助。 帮助信息 是可用的。 |
help |
|
箭头带个问号?
|
|
| ③ 光标是 指示链接的指针。通常是 带指向的小手 的图像。 | pointer |
|
|
|
|
④ 程序 ❶ 后台繁忙，用户 ❷ 仍可交互 (与 wait 不同)。 形状时 一个箭头+ 一个转圈的圆 或 沙漏。 |
progress |
|
|
|
|
⑤ 程序很忙，用户要等待⇒ 无法与界面交互 (与 progress 相反)。 形状: 不带箭头的 沙漏 或 圆圈的图像。 |
wait |
|
|
|
| ⑶ 选择 |
① 指示 单元格可被选中。 形状: 粗体 加号。 |
cell |
|
|
|
② 交叉光标，常指示 位图 中的选择。 形状: 细 十字线。 |
crosshair |
|
|
|
|
③ 指示 文本 可被选中 。 形状: 工 字型。 |
text |
|
|
|
|
④ 指示 垂直文本 可被选中。 形状: 侧倒的 工 字型。 |
vertical-text |
|
|
|
| ⑷ 拖放 |
① 复制 或 快捷方式 将要被创建。 形状: 箭头 + 一个回旋的箭头。 |
alias |
|
|
|
② 指示 可复制。 形状: 箭头 + 一个小加号。 |
copy |
|
|
|
|
③ 可被移动的。 形状: 交叉的 双向箭头。 |
move |
|
|
|
|
④ 项目 在当前位置 不能被放下。 bug: 在Windows 和Mac OS X上，no-drop 等同于not-allowed。 |
no-drop |
实际显示的形状: 不带小手。
|
|
|
| ⑤ 请求的操作将 不被执行。 | not-allowed |
|
|
|
|
⑥ 可以被抓取 (拖动来移动)。 形状: 一个张开的 小手。 |
grab |
|
|
|
|
⑦ 被抓住/抓取中 (拖着移动)。 形状: 一个小拳头,手指短了很多。 |
grabbing |
|
|
| 属性值分类 | 用于 | 属性值 | 形状 | 示例 |
|---|---|---|---|---|
| ⑸ 重设大小 和 滚动 | ① 可以在 任意方向 滚动。 | all-scroll |
在Windows上， all-scroll 和 可移动 move 是一样的形状，如下。 谷歌和火狐中 和 move 一样的形状。 IE11中测试 是正常的样式。
|
|
|
② 项目/列 可以 水平调整大小。 形状: 竖线 分隔左右箭头 来表示。 |
col-resize |
|
|
|
|
③ 项目/行 可以 垂直调整大小。 形状: 用 横杠 分隔 向上和向下的箭头 来表示。 |
row-resize |
|
|
|
|
④ *-resize 格式，某条边 可被移动。 单向和双向: 部分单向的光标， 在 IE,Firefox,Chrome 中， 会显示一个 等效的 双向 调整大小光标。 |
❶ n-resize |
北 实际显示: 南北双向
|
|
|
| ❷ e-resize |
东实际显示: 东西双向
|
|
||
| ❸ s-resize |
南 实际显示: 南北双向
|
|
||
| ❹ w-resize |
西实际显示: 东西双向
|
|
||
| ❺ ne-resize |
东北 实际显示: 东北+西南 双向
|
|
||
| ❻ nw-resize |
西北 实际方向: 西北+东南 双向
|
|
||
| ❼ se-resize |
东南 实际方向: 西北+东南 双向
|
|
||
| ❽ sw-resize |
西南 实际显示: 东北+西南 双向
|
|
||
| ⑤ *-resize 格式，设置双向。 | ❶ ew-resize |
东西
|
|
|
| ❷ ns-resize |
南北
|
|
||
| ❸ nesw-resize |
双向: 东北+西南
|
|
||
| ❹ nwse-resize |
双向: 西北+东南
|
|
- 形状 等同的属性值 (因为一些浏览器中 单向 显示成双向)
12个值⇒ 实际上 只有 4 个双向的箭头 方向。- n: north 北
- s: south 南
- e: east 东
- w: west 西
- ① 东= 西= 东西:
e-resize=w-resize=ew-resize(东西, 东在前) = - ② 南= 北 = 南北:
s-resize=n-resize=ns-resize(南北, 北在前) = - ③ 东北 = 西南 = 东北西南 =
ne-resize=sw-resize=nesw-resize(南北,在东西前面) = - ④ 西北 = 东南 = 西北东南 =
nw-resize=se-resize=nwse-resize=
| 属性值分类 | 用于 | 属性值 | 形状 | 示例 |
|---|---|---|---|---|
| ⑹ 放大缩小 | 放大 | zoom-in |
|
|
| 缩小 | zoom-out |
|
|
- ⑷ 鼠标光标形状的 浏览器支持
- IE 有部分属性值不支持:
grab,grabbing,,url的偏移值,vertical-text,zoom-in,zoom-out - 安卓的火狐版本不支持 鼠标光标形状。
- IE 有部分属性值不支持:
5. resize 属性: 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)
- ⑴ 设置元素的 可调整性 和 调整方向:
resize属性- 属性设置元素 是否 可调整大小，如果可以，则设置 调整大小的方向。
- ① 适用元素: 块级元素、替换元素、表格单元格 或 内联块元素。
- 设置
overflow≠visible的 ❶ 元素。- 即使 没有文本溢出，只要设置
overflow属性值，且overflow≠visible的值了⇒resize就会有效。
- 即使 没有文本溢出，只要设置
- 存疑: 表示 图像 (
images)或视频(videos)，以及 内联框架iframe的 ❷ 可选替换元素。- 原话: and optionally replaced elements representing images or videos, and iframes.
- 测试:
<img>图片元素中resize属性无效 。 (存疑: 此处指的元素 是什么? )
- 设置
- ② 默认可调整的元素
<textarea>元素 在默认情况下 是可调整大小的。可以使用resize属性 覆盖此行为。
- ③ 不适用元素
- ❶ 行内元素(
Inline elements) - ❷ 将
overflow=visible(默认值) 的块元素。
- ❶ 行内元素(
- ⑵ 可调整性和方向的 语法
resize: none | both | horizontal | vertical | block | inline;
/* 关键字值 Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;/* 全局值 Global values */
resize: inherit;
resize: initial;
resize: unset;
- ⑶ 可调整性和方向 属性值
- ① 不可调整大小 (默认值):
none- 元素 不能被 用户缩放。
- 元素没有提供 用户可控制的方法 来调整它的大小。
- 默认显示 =
resize: none;- 不可调整，也没有 可调整的按钮。
- ② 水平垂直-双向可调整:
both- 允许用户 在水平和垂直方向上 调整元素的大小。
- 元素显示了一种 允许用户 调整大小的 机制，可以 水平或垂直地 调整大小。
- ③ 水平可调整:
horizontal，美 /ˌhɔːrɪˈzɑːntl/- 允许用户 在水平方向上 调整元素的大小。
- 元素显示了一种 允许用户 在水平方向 调整大小的机制。
- ④ 垂直可调整:
vertical- 允许用户 在垂直方向上 调整元素的大小。
- 元素显示了一种 允许用户 在垂直方向 调整大小的机制。
- ⑤ 按块的方向:
block= 块级元素的排列方向。(浏览器 支持度差)- 元素显示了一种 允许用户 按块方向 调整大小的机制。
- 水平或垂直，取决于 书写模式(
writing-mode)和方向(direction) 的值。
- ⑥ 按内联方向:
inline= 内联级元素的 排列方向。(浏览器 支持度差)- 元素显示了一种允许用户在内联方向。
- ① 不可调整大小 (默认值):
- 上图 涉及的代码
- html
<div class="divcontainer"><p class="poem">明日复明日，明日何其多。我生待明日，万事成蹉跎。</p>
</div>
- css
.divcontainer {width: 30%;height: 10%;margin: 10px;padding: 10px;border: solid 10px darkgreen;}.poem {/*宽高不设置成固定值⇒ 不文本溢出⇒ 只要设置 overflow≠ visible的值了 resize 属性也有效 *//*width: 100px;*//*height: 50px;*/margin: 10px;border: dashed 10px lightskyblue;padding: 10px;/*不许换行⇒ 文本溢出⇒ 使用 resize 属性有效前提1,如果没设置这个 只要设置 overflow≠ visible的值了 resize 属性也有效 *//*white-space: nowrap;*//*溢出不能可见 overflow≠ visible⇒ 使用 resize 属性有效 必须前提*/overflow: auto;/*overflow: hidden;*//*overflow:scroll;*//* 可调整属性和调整方向 */resize: none;resize: both;/*resize: horizontal;*//*resize: vertical;*/
}
- ⑷ 可调整型和方向的 浏览器支持
- 对
<iframe>没有效果。
- 对
6. user-select 属性: 设置 文本的选中性
- ⑴ 设置 文本选中性:
user-select属性- 设置 用户 能否选中文本。
- ⑵ 文本选中性的 语法
user-select:auto | text | none | contain | all;
/* 关键字值 Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;/* 全局值 Global values */
user-select: inherit;
user-select: initial;
user-select: unset;/* 前缀 Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;/* 前缀 WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* 在 Safari 中无效; 仅使用"none" or "text", 否则 it willallow typing in the <html> container *//* 前缀 Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
- ⑶ 文本选中性的 属性值
- ① 文本不可选中:
none- 元素及其子元素的 文本不可选中。
Selection对象可以包含这些元素。
- 从Firefox 21开始，
none表现的像-moz-none，因此可以使用-moz-user-select: text在子元素上 重新启用选择。- 默认: 父子的内容都是 可以选中的，设置 不可选中后⇒ 都无法再选中，过程如下
- 默认: 父子的内容都是 可以选中的，设置 不可选中后⇒ 都无法再选中，过程如下
- 元素及其子元素的 文本不可选中。
- ② 浏览器决定(默认值):
auto- 根据不同情况决定，
auto的计算值 确定如下：- 在
::before和::after伪元素上- 计算值是
none。
- 计算值是
- 元素 = 可编辑元素
- 计算值是
contain。
- 计算值是
- 否则，父元素的
user-select的计算值为all- 计算值则为
all
- 计算值则为
- 否则，父元素的
user-select的计算值为none- 计算值则为
none
- 计算值则为
- 否则，计算值则为:
text- 普通元素，默认值是 auto，一般都是可选中的。
- 在
- 根据不同情况决定，
- ③ 可以选中文本:
text- 用户可以选择文本。
- ④ 整体选中(父子一起):
all- 父⇒ 子: 如果一个选择 包含元素的一部分，那么该选择 必须包含 整个元素，包括它的 所有后代。
- 子⇒ 父: 如果在子元素中 发生了双击 或 单击内容，则将选择 具有此值的 最高祖先。
- 在父元素或者子元素中的任意位置 单击一下，就会 同时选中 父子中的所有内容。
- ⑤ 元素内:
contain(=element，IE-specific alias)- 允许选择 在元素内开始; 但是，选择将包含在 该元素的边界内。
element=contain仅在 IE 中受支持。
- 文本选中性 和 继承
- 在不同浏览器之间 实现的一个区别是 继承。
- 在 Firefox 中，
-moz-user-select不会被 绝对定位的元素继承，但在 Safari 和Chrome中，-webkit-user-select由这些元素继承。
- ① 文本不可选中:
- 上图的 代码
- html
<div class="divcontainer">明日歌<p class="poem">明日复明日，明日何其多。我生待明日，万事成蹉跎。</p>
</div>
- css
/*设置 元素的包含块 */
.divcontainer {width: 20%;height: 10%;margin: 10px;padding: 10px;border: solid 10px darkgreen;text-align: center;font-weight: bold;/* 设置文本的可选择性 */user-select: none;/*user-select: auto;*//*user-select: text;*//*user-select: all;*//*user-select: contain;*//*user-select: element;!*IE中*!*/}.poem {/*宽高不设置成固定值⇒ 不文本溢出⇒ 只要设置 overflow≠ visible的值了 resize 属性也有效 *//*width: 100px;*//*height: 50px;*/margin: 10px;border: dashed 10px lightskyblue;padding: 10px;font-weight: normal;letter-spacing: 1px;/*子元素中 重启文本选中*//*user-select: text;*/
}
- ⑷ 文本选中性的 浏览器支持
- 需要浏览器前缀:
-webkit-，-ms-，-moz- - 属性值
contain的浏览器支持 很差。
- 需要浏览器前缀:
♣ 结束语 和 友情链接
- 参考文档
- MDN CSS 教程
- CSS Basic User Interface - CSS: Cascading Style Sheets | MDN
- 友情链接
- 【CSS 颜色的 合法颜色值 (详细介绍)】
- 【CSS 单位 (详细介绍)】
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
- 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注 支持的理由 或 想对作者说的话哦~
- 可以备注 支持的理由 或 想对作者说的话哦~
- 赞助二维码:
- 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103494965
- 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！
【CSS 用户界面属性 (Basic user interface)】相关推荐
- html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图 使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
- CSS pointer-events属性的使用
楔子 在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉.其中动画是最常用的方法. 这里的需求是,弹层的设计,这个弹层希望可以像 native 上的弹层 ...
- 前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...
- CSS基础(part16)--CSS用户界面样式
学习笔记,仅供参考,有错必纠 参考自:pink老师课堂笔记 文章目录 CSS用户界面样式 鼠标样式cursor 轮廓线outline 防止拖拽文本域resize CSS用户界面样式 鼠标样式curso ...
- css clear属性_CSS中的clear属性
css clear属性 CSS | 清除财产 (CSS | clear Property) We know so much about float property and how it is use ...
- css 计算属性的应用_如何使用一点CSS Grid魔术设计计算器应用
css 计算属性的应用 by Deepika Gunda 由Deepika Gunda 如何使用一点CSS Grid魔术设计计算器应用 (How to use a little CSS Grid ma ...
- 八、pink老师的学习笔记—— CSS用户界面样式（鼠标样式、轮廓线、防止拖拽文本域）
2. CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
- CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
- CSS样式属性参考手册
CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
- 【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
最新文章
- TNS-01201: Listener cannot find executable /u01/oracle/bin/extproc for SID orcl Listener failed to
- string 字符串中字符无效_7.3 C++字符串类 | 使用string输出
- [OS复习]文件管理
- ElasticSearch bulk批量增删改语法(来自学习资料 + 自己整理，第27节)
- 《RESTful Web Services》第一章 使用统一接口
- 过Serverless技术降低微服务应用资源成本
- 在MySQL查询山东省男生信息_MySQL-查询
- s 修饰符：dotAll 模式
- dstat系统监控工具配置与使用
- python标准库os_Python标准库 os
- springBoot过滤器去除请求参数前后空格
- 异动处理中的发票类型应用(Complaint Processing)
- 使用devcon禁用启用网卡
- Android ADB命令大全
- 微信小程序开发常用方法
- MySQL 报错：Parameter ‘@XXX‘ must be defined.
- 非线性数学模型线性化
- 解决SecureCRT连接网络设备console口失败的问题
- 80个自我提升的网站
- 无法打开编译的html,解决VS在编译的时候无法打开...obj文件的问题