CSS 设置网页中选中文字的背景色

在样式文件中增加如下代码: ::selection { background: hsla(5, 92%, 76%, 0.8); color: #fff;}…

网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题(2016-10-7): /*设置文本选中颜色,看起来更酷一些*/ ::selection { background:#DDDDDE; } ::-moz-selection { background:#DDDDDE; } ::-webkit-selection { background:#DDDDD…

前端开发css实战：使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画; (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示…

CSS在网页中应用的方式_嵌入式

内联式样式表:直接写在现有的标记中,比如: 复制代码代码如下: <p style="font-size:24px;">www.phpstudy.net</p> 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra…

CSS之user-select——设置标签中的文字是否可被复制

详细介绍请参考 http://www.css88.com/book/css/properties/user-interface/user-select.htm CSS样式 user-select:none | text | all | element,默认情况下是text,表示标签中的文字可以被复制,none是不可被复制. 为了兼容各种浏览器,最好同时设置如下值. -webkit-user-select: text-khtml-user-select: text; -moz-user-selec…

Bootstrap css栅格 + 网页中插入代码+css表格

设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <…

怎么获取textarea中选中文字

textarea设置select="saveSelectionText()" //保存选中内容 saveSelectionText: function () { var focusEle = document.activeElement.tagName; if (focusEle === 'TEXTAREA') { if (window.getSelection) { $scope.mark.selectionText[0] = window.getSelection().toStri…

javaScript 实现倒计时 + 获取网页中的文字

一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var count…

css设置input中placeholder字体

设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@a} input:-ms-input-placeholder {color:@a} 设置input中placeholder字体大小 input::-webkit-input-placeholder {font-size: @a} input:-moz-placeholder {font-size:…

css之div中纯文字单行和多行垂直居中

先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrap1 { width: 2…

用CSS添加选中文字的背景色

…

设置UIButton中的文字和图片，设置UILabel的文在显示不同颜色

UIButton: UIEdgeInsets 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets.imageEdgeInsets @property(nonatomic) UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero @property(nonatomic) UIE…

CSS定位网页中的元素

relative相对定位偏移设置:left.right.top.bottom 值单位:px 元素的规律: 相对定位元素的规律设置相对定位的盒子会相对它原来的位置通过指定偏移,到达新的位置. 设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响设置相对定位的盒子原来的位置会被保留下来特性: 相对于自己的初始位置来定位元素位置发生偏移后,他原来的位置会被保留下来层级提高,可以把标准文档流中的元素及浮动元素盖下边使用场景: 相对定位一般情况下很少自己单独使用,都是配…

如何自动设置网页中meta节点keywords属性-【SEO】

在处理网页的SEO时,经常需要设置meta节点中keywords的属性. 如果是UGC产生内容的话,对于这个字段可以由用户或编辑手工设置相关的标签或关键词来进行. 但对于MGC(机器产生内容)的内容的话,这个字段可以根据网页的标题和内容中的关键词来自动产生. 核心代码(groovy代码)为: def segmenter = new IKSegmenter(new StringReader("各位,当你们在加班加的快要坚持不下去时候,是什么在支撑着你们? - CSDN论坛 - CSDN.NET&q…

解决css设置背景透明，文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w…

css禁止鼠标双击选中文字

div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; } <section onselectstart="return false;">这又是一段文字</section> 如果把上述的方法写到body中,就实现…

css设置网页打印样式

有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="css/noprint.css" media="screen" /> 用于打印的css:<link rel="stylesheet" href="css/print.css" media="print" />…

解决Chrome谷歌浏览器不支持CSS设置小于12px的文字

在最新版的谷歌里.已经不在支持这个属性啦谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-webkit-text-size-adjust:none; 如何让谷歌浏览器支持小于12px的字体经常与网页打交道的攻城师,应该都知道.谷歌不支持小于12px的字体.网页解决方案很多.比如.修改浏览器配置.修改浏览器语言.但作为一个WEB,我们无法修改用户的浏…

JavaScript设置div中的文字滚动起来实现滚动效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="width: 400px; height: 300px; position: absolute; l…

H5/纯JS实现：把网页中的文字复制到剪切板

copy =() => { const dom = document.getElementById(`collect-text-${t.Id}`) const selection = window.getSelection() const range = document.createRange() if (!dom || !selection || !range) return // 选择复制目标 range.selectNodeContents(dom) selection.removeAl…

css在网页中划线

在行边距上的线可以通过 1 div,表格等的border属性实现 2 <hr/>实现 3 通过背景图片实现 4 页面内写入横线图片通过相对定位实现 5 通过css伪类实现 <style> h2{text-align: center;} h2::before, h2::after { color: #c80; content: "——————"; font-size: 24px; margin: 10px; } </style>…

css如何li中选中后加上class属性js控制

<ul> <li class=""pageson"><span>1</span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span>&…

自制 Chrome Custom.css 设置网页字体为微软雅黑扩展

自己做的將網頁自動替換為微軟雅黑的擴展.很好用. 將Customcss.rcx拖到擴展裏就可. 下載:Customcss.zip…

使用window.getSelection()获取div中选中文字内容及位置

div添加一个弹出事件: $(document).ready(function () { $("#marked-area").mouseup(function (e) { $scope.mark.saveSelectionText(); }); }); saveSelectionText: function () { if (window.getSelection) { $scope.mark.selectionText[0] = window.getSelection().toStr…

css网页中设置背景图片的方法详解

在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格.这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋.现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母.例子:给部分文字加背景颜色…

CSS+DIV网页样式与布局：第二章：CSS的基本语法

第二章:CSS的基本语法一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. 1.标记选择器(列如 <p> <ul> p{color:green;}) 2.类别选择器(列如 <p class="p1"> .p1{ color:green;font-size:20px;}) 3.ID选择器(例如 <p id…

js 控制选中文字

//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = document.selection.createRange(); range.expand("sentence"); var sentence = range.text; alert(word);//弹出选中的文字 alert(sentence ); 例如页面上有一个文本输入框: <…

网页字体在Frontpage2000制作网页中的讲解

运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力.考虑到用FrontPage制作网页的人较多,同时它对其他网页编辑器的使用者也有一定的借鉴作用, 因此,我就讲解一下如何在frontpage2000中运用css设置网页字体. 我们可以用css设置出无数种网页字体,但万变不离其宗,任何的变化都要遵循css的基本语法.因此我们先来了解一下css的基本语法…

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">…

css3应用之自定义选中文字的背景颜色

在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色,背景色为蓝色. 我们如何自定义呢? 效果参见本博客,选中文字后可以见到效果.本博客中用到的代码是 body ::selection {color:#FFFFFF;text-shadow:none;}body ::-moz-selection {color:#FFFFFF;background-col…