怎么设置css文本不可选中

css文本不可选中的设置方法:1、创建一个HTML示例文件;2、创建div并定义文字内容;3、通过设置“user-select: none;”属性来设置文本不可选中即可。

怎么设置css文本不可选中

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

怎么设置css文本不可选中?

css设置文字不可选示例:

Creating non-selectable text using CSSdiv {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;}
文字可以选择
文字不可选

效果图:

立即学习“前端免费学习笔记(深入)”;

1.gif

css设置文字不可选使用user-select属性。

user-select属性介绍:

user-select 属性规定是否能选取元素的文本。

在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。

CSS 语法

user-select: auto|none|text|all;

属性值

值 

auto默认。如果浏览器允许,则可以选择文本。

none防止文本选取。

text文本可被用户选取。

all单击选取文本,而不是双击。

相关拓展:

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。

同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。

1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

推荐学习:《css视频教程》

以上就是怎么设置css文本不可选中的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1621621.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 07:35:01
下一篇 2025年12月24日 07:35:15

相关推荐

  • css怎么写六边形

    css写六边形的方法:1、把正六边形分成三部分,然后设置before部分,p部分和after部分;2、把正六边形分成三个宽高相同的p,然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形即可。 本文操作环境:windows7系统、HTML5&&amp…

    2025年12月24日 好文分享
    000
  • css如何让字改变透明度

    css让字改变透明度的方法:1、使用opacity属性,给文字元素添加“opacity:透明度值;”样式即可;2、使用rgba()函数,给文字元素添加“color:rgba(red, green, blue, 透明度值);”样式即可。 本教程操作环境:windows7系统、CSS3&&amp…

    2025年12月24日
    000
  • css隐藏元素的方式有哪些

    方式:1、设置“display:none”语句;2、设置“visibility:hidden”语句;3、设置“opacity:0”语句;4、设置盒模型属性为0;5、利用“position:absolute;top:-9999px;”语句。 本教程操作环境:windows7系统、CSS3&&a…

    2025年12月24日
    000
  • css中如何设置元素宽度

    设置方法:1、使用width属性设置宽度,语法“width:宽度值;”;2、使用min-width属性设置最小宽度,语法“min-width:宽度值;”;3、使用max-width属性设置最大宽度,语法“max-width:宽度值;”。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月24日 好文分享
    000
  • 手把手教你使用css制作表格边框设置效果(附代码)

    之前的文章《一招教你使用css3制作按钮添加动态效果(代码分享)》中,给大家介绍了怎么使用css3制作按钮添加动态效果。下面本篇文章给大家介绍怎么使用css制作表格边框设置效果,我们一起看看怎么做。 网页中常常有这样的表格布局边框,给大家分享一下看效果图看完效果,我们来研究一下是怎么实现呢,给大家用…

    2025年12月24日 好文分享
    000
  • 详解CSS中的伪元素::before和::after

    本篇文章带大家了解一下css中的::before和::after伪元素,看看它们的应用,希望对大家有所帮助! 本文从最简单的开始,解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after是什么? ::before和::after可以添加到…

    2025年12月24日 好文分享
    000
  • 新手篇:如何用css制作图片文字排版(代码分享)

    之前的文章《手把手教你使用css制作表格边框设置效果(附代码)》中,给大家介绍了怎么使用css制作表格边框设置效果。下面本篇文章给大家介绍如何用css制作图片文字排版的方法,我们一起看看怎么做。 网页中常常有这样的CSS图片文字排版,给大家分享一下看效果图看完效果,我们来研究一下是怎么实现呢,给大家…

    2025年12月24日
    000
  • 中秋献礼,分享一个CSS日地月公转动画效果!

    中秋节快到了,下面本篇文章给大家分享一个纯css实现的日地月公转动画效果,打开快来学习一下! 为了这次掘金的中秋活动,我也算是苦思冥想了两天,终于想到了一个在掘金没见人做过的东西(应该没做过吧,我也不知道)—— 用 HTML+CSS 模拟日地月的公转。【相关推荐:《css视频教程》】 我们都知道中秋…

    2025年12月24日
    000
  • 手把手教你使用CSS制作逼真的水波纹效果(附代码)

    之前的文章《新手篇:如何用css制作图片文字排版(代码分享)》中,给大家介绍了如何用css制作图片文字排版。下面本篇文章给大家介绍怎么使用CSS实现逼真的水波纹点击效果,我们一起看怎么做。 网页中常常有这样的CSS水波纹的效果,给大家分享一下看效果图看完效果,我们来研究一下是怎么实现呢,给大家用于讲…

    2025年12月24日 好文分享
    000
  • 一文讲解CSS制作动画常用技巧(收藏)

    之前的文章《你值得了解的JS高级技巧(总结)》中,给大家了解了JS高级技巧。下面本篇文章给大家了解CSS制作动画常用技巧,我们一起看看怎么做。 transition CSS 中有一个transition属性,能够监听某个 CSS 属性的变化,通过属性变化的控制,实现简单的动画效果: transiti…

    2025年12月24日
    000
  • 深入浅出解析css字体图标的制作和使用(代码分享)

    之前的文章《一文讲解CSS制作动画常用技巧(收藏)》中,给大家了解了CSS制作动画常用技巧。下面本篇文章给大家了解css字体图标的制作和使用,伙伴们过来看看一下。 css字体图标的制作和使用 在项目开发的过程中,我们会经常用到一些图标。但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多…

    2025年12月24日 好文分享
    000
  • 教你用CSS绘制一个带有渐变边框的圆!

    在上一篇《用html/css制作有趣的动态波浪形文本行》中给大家介绍了如何用用html/css制作动态波浪形文本行,感兴趣的朋友可以去了解一下~ 本文将继续给大家介绍怎么用css实现一个带有渐变边框的圆。 首先我给大家简单说一下实现思路:我将创建两个 div,一个是类名为outer_circle 的…

    2025年12月24日
    000
  • 如何使用CSS动态调整旋转半径?

    在之前的文章《教你用css绘制一个带有渐变边框的圆!》中给大家介绍了如何使用css绘制一个带有渐变边框的圆,感兴趣的朋友可以去了解一下~ 那么本文的重点内容则是教大家如何使用css调整旋转半径。 在CSS中,我们可以使用CSS自定义属性(变量)调整旋转半径的大小。现在Mozilla、谷歌、Opera…

    2025年12月24日
    000
  • 利用css制作有趣的文字摆动动画特效

    在之前的文章《超实用!利用css3将两个图片叠加在一起显示》中,我们分享了两种利用css3将两个图片叠加融合在一起显示的特效。这次我们给大家介绍一下利用css如何制作文字摆动动画特效,感兴趣的可以学习了解一下~ 文本文字是网页中最常见的一种组成部分,给文字添加动画效果可以让网页更加吸引人,今天就来给…

    2025年12月24日 好文分享
    000
  • 使用CSS快速更改PNG图像的颜色(两种方法)

    在上一篇《如何用html和css制作玻璃/模糊效果?》文章中给大家介绍了用html和css制作玻璃/模糊效果的方法,感兴趣的朋友可以阅读了解一下~ 本文将给大家介绍如何使用CSS快速更改PNG图像的颜色,这也是日常开发中比较常见一个效果实现方法。 首先大家可以先下载本文中展示的png图片素材,下载地…

    2025年12月24日
    000
  • 炫酷!CSS创建响应式堆叠卡片悬停效果

    在上一篇《使用css快速更改png图像的颜色(两种方法)》中给大家介绍了怎么使用css快速更改png图像的颜色,感兴趣的朋友可以去看看~ 本文将给大家介绍一种炫酷的效果,就是用CSS创建响应式堆叠卡片悬停效果。到底是什么样的效果呢?我们继续往下看! 在开始之前,我先介绍一下实现的整体大致思路:首先我…

    2025年12月24日
    000
  • 一步一步教你使用CSS制作文字实现逐帧动画(附代码)

    之前的文章《手把手教你使用css3制作炫酷的导航栏效果(代码详解)》中,给大家介绍了怎么使用css3制作炫酷的导航栏效果,下面本篇文章给大家介绍怎么使用CSS制作文字实现逐帧动画,我们一起看看怎么做。 文字实现逐帧动画是网页中最常见的一种组成部分,给文字添加逐帧动画效果,给大家分享一下看效果图 看完…

    2025年12月24日 好文分享
    000
  • 新手篇:如何用ccs制作一个简单的布局(附代码)

    之前的文章《手把手教你使用css3制作炫酷的导航栏效果(代码详解)》中,给大家介绍怎么使用css3制作炫酷的导航栏效果。下面本篇文章给大家介绍如何用html制作一个简单的布局的方法,我们一起看看怎么做。 生活中互联网发达了,网页中常常有这样的布局,给大家分享一下看效果图看完效果,我们来研究一下是怎么…

    2025年12月24日
    000
  • 一招教你使用css3制作按钮添加动态效果(代码分享)

    之前的文章《新手篇:如何用ccs制作一个简单的布局(附代码)》中,给大家介绍了如何用ccs制作一个简单的布局。下面本篇文章给大家介绍怎么使用css3制作按钮添加动态效果,我们一起看看怎么做。 css如何实现button按钮效果? HTML结构: 首先定义一个body,使用button按钮,添加文字v…

    2025年12月24日 好文分享
    000
  • css怎样设置页面居中

    css设置页面居中的方法:1、“text-align:center”设置水平居中。 2、“dispaly:flex”设置水平居中。3、“display:table-cell”设置垂直居中。4、“position:absolute”设置垂直居中。 本教程操作环境:windows7系统、CSS3&amp…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信