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查看兼容情况。
测试后，总体来说暂时使用场景或兼容还是有一定局限性，具体根据实际场景而定吧，就当多了个选择，将其储备起来。
智能推荐
mmdetection3d 源码学习 mvxnet（多模态融合）-程序员宅基地
文章浏览阅读5k次。mmdetection3d 源码学习 mvxnet（多模态融合）配置文件dv_mvx-fpn_second_secfpn_adamw_2x8_80e_kitti-3d-3class.py模型# model settingsvoxel_size = [0.05, 0.05, 0.1]point_cloud_range = [0, -40, -3, 70.4, 40, 1]##模型 图像：主干 ResNet，neck FPN；点云：voxel编码，主干second（稀疏编码），neck secon_mvxnet
C++操作Mysql数据库/Linux下_c++ 操作mysql数据库-程序员宅基地
文章浏览阅读3.3k次，点赞14次，收藏36次。想用C++写项目，数据库是必须的，所以这两天学了一下C++操作Mysql数据库的方法。也没有什么教程，就是在网上搜的知识，下面汇总一下。 连接MySQL数据库有两种方法：第一种是使用ADO连接，不过这种只适合Windows平台；第二种是使用MySQL自己的C API函数连接数据库。我是在Linux平台下开发，所以就采用第二种方法，有很多Api函数，但是常用的就几个，我也是就用到其中的几个。API函_c++ 操作mysql数据库
在Watir中调用JavaScript脚本_watir执行脚本-程序员宅基地
文章浏览阅读3.9k次。如何在Watir中调用JavaScript脚本？下面的脚本实现了此功能，主要原理是通过IE访问Document，再访问parentWindow，最终还是由IE在执行JavaScript脚本： require watir#定义调用JS的类方法class Watir::IE def run_script(js) ie.Document.parentWindow.execS_watir执行脚本
为什么不能使用Thread.stop()方法？_禁止使用thread.stop()来终止线程-程序员宅基地
文章浏览阅读2.1k次。从SUN的官方文档可以得知，调用Thread.stop()方法是不安全的，这是因为当调用Thread.stop()方法时，会发生下面两件事：1. 即刻抛出ThreadDeath异常，在线程的run()方法内，任何一点都有可能抛出ThreadDeath Error，包括在catch或finally语句中。2. 释放该线程所持有的所有的锁 当线程抛出ThreadDeath异常时，会导致_禁止使用thread.stop()来终止线程
神秘魔术动作能量冲击波特效音效Arcane Forces第一套 MAGIC - ARCANE FORCES DESIGNED_magic – arcane forces-程序员宅基地
文章浏览阅读222次。神秘魔术动作能量冲击波特效音效Arcane Forces第一套 MAGIC - ARCANE FORCES DESIGNED原文地址：https://www.aeziyuan.com/t-20646.html文件格式：.WAV文件大小：1.26 GB（解压包大小）文件数量：124音频码率：96kHz, 24-bit音效适用于任何音/视频后期编辑软件，直接导入即可使用包含：酸，奥术，障壁，呼吸，增益，诅咒，减伤，神圣，电，能量，火，玻璃，冰，冲击，光，液体，金属，加工，抛射，隆隆声，序，召唤，._magic – arcane forces
commons-io工具包的基本使用_ioutils.tobytearray-程序员宅基地
文章浏览阅读4w次，点赞57次，收藏304次。目录一、工具类IOUtils的使用：FileUtils的使用：FilenameUtils的使用FileSystemUtils的使用：二、输入、输出三、Filters过滤器四、Comparators比较器五、Monitor文件监控简介：java io操作是开发中比较常用的技术,但是如果每次都使用原生的IO流来操作会显得比较繁琐。Common IO 是一..._ioutils.tobytearray
随便推点
PySide2入门--PySide2介绍与配置-程序员宅基地
文章浏览阅读2w次，点赞16次，收藏96次。前言 因为有对GUI界面开发的需求，我前些阵子接触过Qt，一套著名的跨平台的C++图形界面框架。Qt开发最有效的Qt creator，跨平台且集成多款工具，上手体验十分友好。但是，由于C++导入第三方库相对麻烦，而且现有的代码都基于Python实现。此处将介绍Qt相应的Python模块——PySide。为什么不选择PyQt? PySide2和PyQt5同样对应的Qt5框架，PyQt甚至要比PySide出现更早，社区更完备、中文文档更丰富。但是，值得注意的是：二者的许可证存在着差异。 PyQ_pyside2
Jupyter Notebook如何调试？JupyterLab作为DeBug调试工具及调试教程_jupyterlab怎么debug-程序员宅基地
文章浏览阅读2.9w次，点赞30次，收藏107次。引言xeus-python是2020年新出的Jupyter notebook调试工具，参考机器之心的文章首款 Jupyter 官方可视化 Debug 工具，JupyterLab 未来可默认支持 Debug安装过程安装JupyterLab 前端插件jupyter labextension install @jupyterlab/debugger安装xeus-python作为后端kernelconda install xeus-python -c conda-forge调试教程只要装好前端与_jupyterlab怎么debug
如何将xml转换为json_xml转json-程序员宅基地
文章浏览阅读3.8k次。<dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20160807</version> </dependency>导入 json-20160807.jar jar包 直接调用 XML.toJSONObject(“xml内容”) 就可以把XML._xml转json
TCP 的那些事 | TCP报文格式解析_.tcp文件是图片吗-程序员宅基地
文章浏览阅读1.3k次。TCP（Transmission Control Protocol 传输控制协议）提供一种面向连接的、可靠的字节流服务。面向连接意味着两个使用TCP的应用（通常是一个客户和一个服务器）在彼此交换数据之前必须先建立一个TCP连接。TCP在网络ISO的七层模型中的第四层---Transport层，在TCP/IP协议中的第三层---传输层。TCP通过下列方式来提供可靠性：1. 应用数据被分..._.tcp文件是图片吗
python——stack()和unstack（）用法_unstack函数-程序员宅基地
文章浏览阅读1.2w次，点赞12次，收藏54次。在学习python的过程中遇到了这两个函数，讲讲学习的心得_unstack函数
C语言调用sqlite3命令语句实现将txt文件导入到数据库中_从txt导入到sqlite-程序员宅基地
文章浏览阅读559次。。。_从txt导入到sqlite