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查看兼容情况。
测试后，总体来说暂时使用场景或兼容还是有一定局限性，具体根据实际场景而定吧，就当多了个选择，将其储备起来。
智能推荐
http隧道 java_使用java语言实现http隧道技术-程序员宅基地
文章浏览阅读119次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼/***Getaparametervalue**@paramkeyString*@paramdefString*@returnString*/publicStringgetParameter(Stringkey,Stringdef){returnisStandalone?System.getProperty(ke..._java http隧道
Keepalived高可用+邮件告警_keepalived sendmail-程序员宅基地
文章浏览阅读913次。IP主机名备注192.168.117.14keepalived-master主节点192.168.117.15keepalived-slaver备节点192.168.117.100VIP1.主备节点均安装keepalived# yum install -y keepalived httpd2.主备节点均修改keepalived日志存放路径..._keepalived sendmail
SPFILE 错误导致数据库无法启动(ORA-01565)_ora01565 ora27046-程序员宅基地
文章浏览阅读469次。--==========================================--SPFILE错误导致数据库无法启动(ORA-01565)--========================================== SPFILE错误导致数据库无法启动 SQL> startup ORA-01078: failurein proce_ora01565 ora27046
功能测试基础知识（1）-程序员宅基地
文章浏览阅读6.1k次，点赞2次，收藏54次。功能测试基础知识总结_功能测试
postgresql 中文排序_pg中文排序-程序员宅基地
文章浏览阅读3.2k次，点赞3次，收藏2次。pg 中文首字母排序_pg中文排序
[Mysql] CONVERT函数_mysql convert-程序员宅基地
文章浏览阅读3.1w次，点赞23次，收藏109次。本文主要讲解CONVERT函数_mysql convert
随便推点
HTML5与微信开发（2）-视频播放事件及API属性_微信开发者工具视频快进-程序员宅基地
文章浏览阅读8.6k次，点赞2次，收藏2次。HTML5 的视频播放事件想必大家已经期待很久了吧，在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法： 第一种：安装FLASH插件或者微软发布的插件 第二种：在本地安装播放器，在线播放组件之类的 因为并不是所有的浏览器都安装了FLASH插件，就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的，安卓虽然一开始的时候支持FLASH，但是在安卓4.0以后也开始不_微信开发者工具视频快进
JedisConnectionException Connection Reset_jedisconnectionexception: java.net.socketexception-程序员宅基地
文章浏览阅读5.4k次，点赞3次，收藏4次。在使用redis的过程常见错误总结1.JedisConnectionException Connection Reset参考这边文章：Connection reset原因分析和解决方案https://blog.csdn.net/cwclw/article/details/527971311.1问题描述Exception in thread "main" redis.clients...._jedisconnectionexception: java.net.socketexception: connection reset
Lua5.3版GC机制理解_lua5.3 gc-程序员宅基地
文章浏览阅读8.3k次，点赞8次，收藏42次。目录1.Lua垃圾回收算法原理简述2.Lua垃圾回收中的三种颜色3.Lua垃圾回收详细过程4.步骤源码详解4.1新建对象阶段4.2触发条件4.3 GC函数状态机4.4标记阶段4.5清除阶段5.总结参考资料lua垃圾回收(Garbage Collect)是lua中一个比较重要的部分。由于lua源码版本变迁，目前大多数有关这个方面的文章都还是基于lua5.1版本，有一定的滞后性。因此本文通过参考当前..._lua5.3 gc
手机能打开的表白代码_能远程打开，各种手机电脑进行监控操作，最新黑科技...-程序员宅基地
文章浏览阅读511次。最近家中的潮人，老妈闲着没事干，开始学玩电脑，引起他的各种好奇心。如看看新闻，上上微信或做做其他的事情。但意料之中的是电脑上会莫名出现各种问题？不翼而飞的图标？照片又不见了？文件被删了，卡机或者黑屏，无声音了，等等问题。常常让她束手无策，求助于我，可惜在电话中说不清，往往只能苦等我回家后才能解决，那种开心乐趣一下子消失了。想想，这样也不是办法啊， 于是，我潜心寻找了两款优秀的远程控制软件。两款软件...
成功Ubuntu18.04 ROS melodic安装Cartograhper+Ceres1.13.0，以及错误总结_ros18.04 安装ca-程序员宅基地
文章浏览阅读1.8k次。二.初始化工作空间三.设置下载地址四.下载功能包此处可能会报错，请看：rosdep update遇到ERROR: error loading sources list: The read operation timed out问题_DD᭄ꦿng的博客-程序员宅基地接下来一次安装所有功能包，注意对应ROS版本 五.编译功能包isolated：单独编译各个功能包，每个功能包之间不产生依赖。编译过程时间比较长，可能需要几分钟时间。此处可能会报错：缺少absl依赖包_ros18.04 安装ca
Harbor2.2.1配置（trivy扫描器、镜像签名）_init error: db error: failed to download vulnerabi-程序员宅基地
文章浏览阅读4.1k次，点赞3次，收藏7次。Haobor2.2.1配置（trivy扫描器、镜像签名）docker-compose下载https://github.com/docker/compose/releases安装cp docker-compose /usr/local/binchmod +x /usr/local/bin/docker-composeharbor下载https://github.com/goharbor/harbor/releases解压tar xf xxx.tgx配置harbor根下建立:mkd_init error: db error: failed to download vulnerability db: database download