下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字。
<!DOCTYPE HTML>
<html>
<head>
<title>Creating non-selectable text using CSS</title>
<style type="text/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;
}
</style>
</head>
<body>
<div id="d1">[selectable] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, urna placerat condimentum vehicula, magna est suscipit leo, auctor laoreet erat massa eget tellus. Etiam pharetra, orci eu gravida tempus, enim est venenatis diam, id facilisis justo ante ut arcu. Sed nibh eros, porta ac porta ac, fermentum ut ante. Etiam pulvinar consectetur urna sit amet fermentum. Aliquam quis pellentesque tortor. In ut lobortis enim. Pellentesque luctus orci nec massa lacinia consectetur. Etiam cursus, leo et pellentesque tempus, diam elit interdum ipsum, sed pulvinar nibh justo vel urna. Phasellus ligula elit, sodales eget aliquet et, ullamcorper ut lorem. Praesent eget quam id ligula iaculis tincidunt eu et nulla. Ut dui dui, dictum sed lobortis eu, porta nec urna. In adipiscing, massa sed scelerisque elementum, tortor massa cursus velit, ut tincidunt mi lacus id magna. Morbi vestibulum venenatis massa sit amet convallis. Aliquam erat volutpat.</div>
<div id="d2">[non selectable] Nam a lacus ante, a tincidunt dolor. Sed felis dolor, ullamcorper vitae luctus at, iaculis eu dui. Mauris ullamcorper nisl id tortor elementum mattis. Aenean ut ligula ac ipsum pharetra dapibus. Praesent convallis tincidunt ligula sit amet adipiscing. Morbi massa mauris, mollis ornare mollis ut, imperdiet nec nibh. Praesent sollicitudin tellus at nisl sodales lobortis euismod purus laoreet. Vivamus nec urna vel nibh volutpat rhoncus quis eget justo. Donec mi lacus, dapibus nec tristique eu, fringilla id mi. Maecenas vitae odio a tortor cursus fermentum eu eget eros. Vestibulum sit amet metus purus. Integer vestibulum sem nec justo facilisis tempor non sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mattis metus.</div>
<div id="d3">[selectable] Proin lacinia sem fringilla est lacinia facilisis. Praesent turpis massa, bibendum eu ultrices ut, viverra vitae quam. Morbi a lorem mi, eget congue arcu. Sed dapibus molestie neque, eget tempus nibh viverra at. Praesent sit amet vestibulum ipsum. Donec in lectus ac urna accumsan feugiat. Sed at nunc felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec ipsum justo. Nullam laoreet enim vel quam tincidunt imperdiet. Maecenas sollicitudin nulla a metus ornare tempus. Nullam rhoncus fermentum lorem id pellentesque.</div>
</body>
</html>
源码下载：
creating-non-selectable-text-using-css.zip
分享到：
相关推荐
在HTML5中，如何使用CSS来创建不可选的文字是一个简单但实用的技巧，尤其在需要防止用户选择网页文本时非常有用。通过CSS提供的属性，我们可以轻易地控制文本的可选择性，而不需要依赖JavaScript或者复杂的代码结构...
在HTML5中使用CSS建立不可选的文字是指通过CSS控制文本不允许用户进行选择操作，这通常用于防止文本被意外复制或者作为网站设计的一部分。在CSS中，实现不可选文字的属性是`user-select`，该属性可以控制用户是否...
4. **颜色和背景**：CSS3引入了更多选择器，如伪类和伪元素，以及新的颜色模型和透明度控制。这些特性可以为农业集团的模板创造出丰富且有层次的色彩效果和背景图像处理，强化品牌形象。 5. **字体和文本样式**：...
- 不允许使用不完整或错误的标签。 ### CSS基础与书写规范 #### CSS的基础知识 - **什么是CSS**：层叠样式表（Cascading Style Sheets）是一种用来描述HTML或XML文档呈现样式的语言。 - **CSS的语法**：由选择器...
自IE 3.0开始，浏览器逐渐支持CSS，而随着互联网的发展，CSS已成为构建现代网页不可或缺的一部分。 本教程主要分为以下几个部分，旨在逐步引导初学者掌握CSS的基础知识和应用技巧： 1. CSS的基本认识： 这一部分...
《CSS完全参考手册》是针对Web前端开发人员的一本详尽指南...总之，《CSS完全参考手册》是Web前端开发者不可或缺的参考资料，通过深入学习和实践，开发者可以掌握CSS3.0的精髓，创造出更具创新性和用户体验的网页设计。
- **注释使用**：编写CSS文档的注释。 **第十二章：字体控制** - **字体系列**：选择合适的字体。 - **字号调整**：改变文字大小。 - **字体风格**：斜体、加粗等效果。 - **文字修饰**：如删除线、下划线等。 **...
5. **模板下载**：作为一款可下载的模板，它为不具备专业网页设计技能的用户提供了快速建立网站的途径。用户可以根据自己的需求进行内容替换和个性化调整。 在实际应用中，使用这款模板的步骤可能包括： 1. **解压...
CSS虽然已经存在了超过十年，但它的魅力随着时间的推移而日益显现，成为网页设计不可或缺的一部分。 书中的内容分为多个章节，覆盖了CSS的基础到高级应用。首先，作者从(X)HTML与CSS的核心基础入手，让读者建立起对...
然而，CSS3的支持度并不统一，导致开发者在使用时仍需谨慎，且同一效果在不同浏览器中的实现可能需要不同的写法。 8. 教程的持续更新和学习习惯：教程承诺每周五都会推出新的教学内容，并鼓励读者将学习变成一种...
【CSS基础学习实用课件】是一份非常有价值的资源，它主要涵盖了CSS（Cascading Style Sheets）的基础知识，是Web前端开发中不可或缺的部分。CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式...
- **字体选择**: 字体也是网页设计中不可忽视的一环。合理选择字体大小和类型，可以使文字更易读，提升用户体验。 - **响应式设计**: 考虑到用户可能使用不同类型的设备访问网页，采用响应式设计策略，确保网页能在...
此外，多媒体元素的使用是现代Web应用中不可或缺的部分，教学中不仅要讲解视频、音频等多媒体元素的基本属性、方法和事件，还要教授如何优化它们的加载和播放，以提升网页的整体性能。 HTML5绘图基础部分则着重于...
- 学习如何使用CSS控制元素的盒模型属性，以及块状元素和内联元素在布局中的应用，理解选择器的工作原理。 - **第二课：浮动** - 浮动是实现元素水平布局的一种方式，如创建多列布局，需理解清除浮动以防止父元素...
本教程旨在帮助初学者快速掌握CSS的核心概念和实际应用，通过结合操作截图、文字说明以及简洁易懂的示例代码，使学习过程更为直观和高效。 1. CSS基础： - 选择器：CSS中的选择器用于指定要应用样式的HTML元素，如...
CSS2是网页设计中不可或缺的一部分，它允许你控制网页的呈现方式，包括字体、颜色、布局和更多方面。以下是对这个教程中涉及知识点的详细阐述： 1. **CSS基础知识**：了解CSS的基本结构，包括选择器、属性和值。...
总之，这个教程涵盖了HTML5的语义标签、CSS3的选择器、变形函数、布局控制、动画属性等多个核心概念，这些都是构建现代网页设计不可或缺的基础知识。通过学习和实践，开发者能够创建更美观、功能更丰富的网页。