html 文本强调,CSS Emphasis Marks 文本强调标记-程序员宅基地
技术标签： html 文本强调
我们常常会在网页中对文本某一关键词进行凸显强调，加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意，今天我们看看另一种实现方法text-emphasis。
页面文本段落中，有时我们会根据上下文语境对某一关键词进行凸显(如，加粗、高亮、斜体、文本渐变、下划线等等)标记对文本中某一关键词进行装饰，以便引起用户的关注，进而让用户理解段落文本中心意思。
现在我们可以了解一个新的文本强调装饰属性，即：text-emphasis。
看上去没多大用途，实际项目中可能很少用到，但是，多一份关注，多一份选择嘛，了解一下也无妨。
CSS Emphasis Marks
首先，我们了解下关于这个Emphasis标记的属性。
字面上我们可以看出是强调的意思，其读音 [ˈemfəsɪs]。
text-emphasis是text-emphasis-style与text-emphasis-color的缩写。还有一个属性是text-emphasis-position，不在text-emphasis的缩写范围内。即：
p{text-emphasis: '•'orange}
p{text-emphasis-style: '•'; text-emphasis-color: orange;}
两者渲染结果是一样的。
其次，了解下具体属性。
1、text-emphasis-style属性 - 强调标记的样式。
text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
none 初始值，无标记。
[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] 关键字装饰
dot • | circle ● | double-circle ◉ | triangle ▲ | sesame ﹅
string 自定义字符装饰。 如一些特殊字符或文本等等。
2、text-emphasis-color属性 - 强调标记颜色
text-emphasis-color: color;
若不设置此属性值，则会根据其元素颜色而定。如：
p{text-emphasis-style: '•'; text-emphasis-position: under right;color:blue;}
// 这里我们移除 text-emphasis-color: orange;属性，则会与文本颜色一致。
3、text-emphasis-position属性 - 强调标记的位置。
text-emphasis-position: [ over | under ] && [ right | left ]
如，强调装饰于文本下方，即：
p{text-emphasis-style: '•'; text-emphasis-color: orange; text-emphasis-position: under right;}
CSS Emphasis Marks 文本强调装饰 示例图
最后，兼容性。
本问示例运行于Firefox浏览器，若chrome需要加-webkit-前缀暂时，更多参考CANIUSE查看兼容情况。
测试后，总体来说暂时使用场景或兼容还是有一定局限性，具体根据实际场景而定吧，就当多了个选择，将其储备起来。
智能推荐
HTML5 Web SQL 数据库_方式准则的定义-程序员宅基地
文章浏览阅读1k次。1、HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。2、核心方法 以下是规范中定义的三个_方式准则的定义
spring Boot 中使用线程池异步执行多个定时任务_springboot启动后自动开启多个线程程序-程序员宅基地
文章浏览阅读4.1k次，点赞2次，收藏6次。spring Boot 中使用线程池异步执行多个定时任务在启动类中添加注解@EnableScheduling配置自定义线程池在启动类中添加注解@EnableScheduling第一步添加注解，这样才会使定时任务启动配置自定义线程池@Configurationpublic class ScheduleConfiguration implements SchedulingConfigurer..._springboot启动后自动开启多个线程程序
Maven编译打包项目 mvn clean install报错ERROR_mvn clean install有errors-程序员宅基地
文章浏览阅读1.1k次。在项目的target文件夹下把之前"mvn clean package"生成的压缩包(我的是jar包)删掉重新执行"mvn clean package"再执行"mvn clean install"即可_mvn clean install有errors
navacate连接不上mysql_navicat连接mysql失败怎么办-程序员宅基地
文章浏览阅读974次。Navicat连接mysql数据库时，不断报1405错误，下面是针对这个的解决办法：MySQL服务器正在运行，停止它。如果是作为Windows服务运行的服务器，进入计算机管理--->服务和应用程序------>服务。如果服务器不是作为服务而运行的，可能需要使用任务管理器来强制停止它。创建1个文本文件(此处命名为mysql-init.txt)，并将下述命令置于单一行中：SET PASSW..._nvarchar链接不上数据库
Python的requests参数及方法_python requests 参数-程序员宅基地
文章浏览阅读2.2k次。Python的requests模块是一个常用的HTTP库，用于发送HTTP请求和处理响应。_python requests 参数
近5年典型的的APT攻击事件_2010谷歌网络被极光黑客攻击-程序员宅基地
文章浏览阅读2.7w次，点赞7次，收藏50次。APT攻击APT攻击是近几年来出现的一种高级攻击，具有难检测、持续时间长和攻击目标明确等特征。本文中，整理了近年来比较典型的几个APT攻击，并其攻击过程做了分析（为了加深自己对APT攻击的理解和学习）Google极光攻击2010年的Google Aurora(极光)攻击是一个十分著名的APT攻击。Google的一名雇员点击即时消息中的一条恶意链接，引发了一系列事件导致这个搜_2010谷歌网络被极光黑客攻击
随便推点
微信小程序api视频课程-定时器-setTimeout的使用_微信小程序 settimeout 向上层传值-程序员宅基地
文章浏览阅读1.1k次。JS代码 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { setTimeout( function(){ wx.showToast({ title: '黄菊华老师', }) },2000 ) },说明该代码只执行一次..._微信小程序 settimeout 向上层传值
uploadify2.1.4如何能使按钮显示中文-程序员宅基地
文章浏览阅读48次。uploadify2.1.4如何能使按钮显示中文博客分类：uploadify网上关于这段话的搜索恐怕是太多了。方法多也试过了不知怎么，反正不行。最终自己想办法给解决了。当然首先还是要有fla源码。直接去管网就可以下载。[url]http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4...
戴尔服务器安装VMware ESXI6.7.0教程（U盘安装）_vmware-vcsa-all-6.7.0-8169922.iso-程序员宅基地
文章浏览阅读9.6k次，点赞5次，收藏36次。戴尔服务器安装VMware ESXI6.7.0教程（U盘安装）一、前期准备1、下载镜像下载esxi6.7镜像：VMware-VMvisor-Installer-6.7.0-8169922.x86_64.iso这里推荐到戴尔官网下载，Baidu搜索“戴尔驱动下载”，选择进入官网，根据提示输入服务器型号搜索适用于该型号服务器的所有驱动下一步选择具体类型的驱动选择一项下载即可待下载完成后打开软碟通（UItraISO），在“文件”选项中打开刚才下载好的镜像文件然后选择启动_vmware-vcsa-all-6.7.0-8169922.iso
百度语音技术永久免费的语音自动转字幕介绍 -程序员宅基地
文章浏览阅读2k次。百度语音技术永久免费的语音自动转字幕介绍基于百度语音技术，识别率97%无时长限制，无文件大小限制永久免费，简单，易用，速度快支持中文，英文，粤语永久免费的语音转字幕网站: http://thinktothings.com视频介绍 https://www.bilibili.com/video/av42750807 ...
Dyninst学习笔记-程序员宅基地
文章浏览阅读7.6k次，点赞2次，收藏9次。Instrumentation是一种直接修改程序二进制文件的方法。其可以用于程序的调试，优化，安全等等。对这个词一般的翻译是“插桩”，但这更多使用于软件测试领域。【找一些相关的例子】Dyninst可以动态或静态的修改程序的二进制代码。动态修改是在目标进程运行时插入代码(dynamic binary instrumentation)。静态修改则是直接向二进制文件插入代码(static b_dyninst
在服务器上部署asp网站,部署asp网站到云服务器-程序员宅基地
文章浏览阅读2.9k次。部署asp网站到云服务器 内容精选换一换通常情况下，需要结合客户的实际业务环境和具体需求进行业务改造评估，建议您进行服务咨询。这里仅描述一些通用的策略供您参考，主要分如下几方面进行考虑：业务迁移不管您的业务是否已经上线华为云，业务迁移的策略是一致的。建议您将时延敏感型，有快速批量就近部署需求的业务迁移至IEC；保留数据量大，且需要长期稳定运行的业务在中心云上。迁移方法请参见如何计算隔离独享计算资源..._nas asp网站