html 文字不可选择,css文字不可选怎么做?

css设置文字不可选使用user-select属性,user-select属性设置或检索是否允许用户选中文本,下面我们来看一下使用user-select属性设置文字不可选的方法。

61d78bd5383fa704e5add346be3477de.png

css设置文字不可选示例:

Creating non-selectable text using CSS

div {

margin-bottom: 20px;

padding: 10px;

background: rgba(10%, 10%, 10%, 0.3);

-moz-border-radius: 15px;

border-radius: 15px;

}

div#d2 {

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

font-style: italic;

}

文字可以选择
文字不可选

效果图:

b8e0a459e6d5751db8a4db5bdf0be67d.gif

css设置文字不可选使用user-select属性,下面我们来看一下user-select属性的介绍:

语法:user-select:none |text| all | element

默认值:text

适用于:除替换元素外的所有元素

继承性:无

动画性:否

计算值:指定值

取值:none:文本不能被选择

text:可以选择文本

all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element:可以选择文本,但选择范围受元素边界的约束

说明:

设置或检索是否允许用户选中文本。

IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;

直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果;unselectable 的另一个值是 off;

除Chrome和Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本;

对应的脚本特性为userSelect。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的可交互的家乡介绍的HTMLCSS代码: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>家乡介绍</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>欢迎来到我的家乡!</h1> <nav> <ul> <li><a href="#introduction">介绍</a></li> <li><a href="#history">历史</a></li> <li><a href="#attractions">景点</a></li> <li><a href="#contact">联系</a></li> </ul> </nav> </header> <main> <section id="introduction"> <h2>家乡介绍</h2> <p>这里是我的家乡,一个美丽的小城市,位于国的东南部。</p> </section> <section id="history"> <h2>家乡历史</h2> <p>我们的城市有着悠久的历史,可以追溯到数百年前。在过去的几个世纪,我们的城市曾是一个繁荣的贸易心,吸引了来自世界各地的商人和旅行者。</p> </section> <section id="attractions"> <h2>家乡景点</h2> <ul> <li><a href="#">城市公园</a></li> <li><a href="#">博物馆</a></li> <li><a href="#">名胜古迹</a></li> <li><a href="#">美食街</a></li> </ul> </section> <section id="contact"> <h2>联系我们</h2> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name" required><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br> <label for="message">留言:</label> <textarea id="message" name="message"></textarea><br> <input type="submit" value="提交"> </form> </section> </main> <footer> <p>© 2021 My Hometown</p> </footer> </body> </html> ``` CSS代码: ```css body { font-family: Arial, sans-serif; background-color: #f2f2f2; } header { background-color: #333; color: #fff; padding: 10px; } h1 { margin: 0; font-size: 32px; text-align: center; } nav { text-align: center; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin: 0 10px; } nav a { color: #fff; text-decoration: none; font-size: 20px; } main { max-width: 800px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } section { margin-bottom: 40px; } h2 { font-size: 28px; margin-bottom: 20px; } ul { list-style: none; margin: 0; padding: 0; } li { margin-bottom: 10px; } li a { color: #333; text-decoration: none; font-size: 20px; } li a:hover { text-decoration: underline; } form { margin-top: 20px; padding: 20px; background-color: #f2f2f2; border-radius: 10px; } input, textarea { padding: 5px; width: 100%; border: none; border-bottom: 1px solid #ccc; margin-bottom: 10px; } input[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; width: 100%; } input[type="submit"]:hover { background-color: #3e8e41; } footer { text-align: center; background-color: #333; color: #fff; padding: 10px; } ``` 这个家乡介绍包含了一个可交互的导航菜单,可以通过点击菜单项来快速浏览页面的不同部分。此外,它还包含了一些基本的样式和布局,包括页面标题,背景颜色,边框效果和阴影效果。表单还包括了一个简单的输入验证,确保必填字段不为空。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值