null - 程序员宅基地

html 文本强调,CSS Emphasis Marks 文本强调标记-程序员宅基地

技术标签： html 文本强调

我们常常会在网页中对文本某一关键词进行凸显强调，加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意，今天我们看看另一种实现方法text-emphasis。

页面文本段落中，有时我们会根据上下文语境对某一关键词进行凸显(如，加粗、高亮、斜体、文本渐变、下划线等等)标记对文本中某一关键词进行装饰，以便引起用户的关注，进而让用户理解段落文本中心意思。

现在我们可以了解一个新的文本强调装饰属性，即：text-emphasis。

看上去没多大用途，实际项目中可能很少用到，但是，多一份关注，多一份选择嘛，了解一下也无妨。

1460000023060072

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;}

1460000023060071

CSS Emphasis Marks 文本强调装饰示例图

最后，兼容性。

本问示例运行于Firefox浏览器，若chrome需要加-webkit-前缀暂时，更多参考CANIUSE查看兼容情况。

测试后，总体来说暂时使用场景或兼容还是有一定局限性，具体根据实际场景而定吧，就当多了个选择，将其储备起来。

bVbIU8F

本文链接：https://blog.csdn.net/weixin_34870633/article/details/118115174

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C++ stringstream的用法-程序员宅基地

文章浏览阅读5.3k次，点赞2次，收藏6次。使用stringstream对象简化类型转换C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更高级的一些功能，即单纯性、类型安全和可扩展性。在本文中，我将展示怎样使用这些库来实现安全和自动的类型转换。为什么要学习如果你已习惯了<stdio.h>风格的转换，也许你首先会问：为什么要花额外的精力来学习基于<sstream&g..._stringstream

Python爬虫-pyspider框架的使用_response.doc-程序员宅基地

文章浏览阅读1.5k次。pyspider 是一个用python实现的功能强大的网络爬虫系统，能在浏览器界面上进行脚本的编写，功能的调度和爬取结果的实时查看，后端使用常用的数据库进行爬取结果的存储，还能定时设置任务与任务优先级等。本篇文章只是对这个框架使用的大体介绍，更多详细信息可见官方文档。安装首先是环境的搭建，网上推荐的各种安装命令，如： pip install pyspider但是因为各种权限的..._response.doc

vue + blockly 自定义块、工具箱、主题_blockly vue-程序员宅基地

文章浏览阅读3.2k次。vue + blockly 自定义块、工具箱、主题自定义块建议使用 Blockly Developer Tools 方便而且选择多样，随时生成块代码。自定义块块由三个组件组成：块定义对象：定义块的外观和行为，包括文本、颜色、字段和连接。工具箱引用：对工具箱 XML 中块类型的引用，因此用户可以将其添加到工作区。生成器函数：生成此块的代码字符串。它总是用 JavaScript 编写，即使目标语言不是 JavaScript。通过 Blockly Developer Tools _blockly vue

笔记本显卡排名-程序员宅基地

文章浏览阅读158次。最新笔记本显卡性能排名总表最新笔记本显卡性能排名总表以下排名整理自国外网站，以性能排名，越往前性能越好第一梯队：高端显卡GeForce GTX 280M SLIMobility Radeon HD 4870 X2GeForce GTX 260M SLIGeForce 9800M GTX SLIGeForce GTX 280MGeForce 9800M G..._mobility radeon x700 win98

python中文显示不出来_解决Python词云库wordcloud不显示中文的问题-程序员宅基地

文章浏览阅读2.6k次。解决Python词云库wordcloud不显示中文的问题2018-11-25背景：wordcloud是基于Python开发的词云生成库，功能强大使用简单。github地址：https://github.com/amueller/word_cloudwordcloud默认是不支持显示中文的，中文会被显示成方框。安装：安装命令：pip install wordcloud解决：经过测试发现不支持显示中文..._词云python代码无法输出文字

JVM在线分析-解决问题的工具一(jinfo,jmap,jstack)_jmap 在线分析-程序员宅基地

文章浏览阅读807次。扩展。_jmap 在线分析

随便推点

完成SSH项目 -- 实现dao层_ssh框架service层调用dao有的能创建成功-程序员宅基地

文章浏览阅读1.6k次。现在web02项目有了controller 和 service 但还没有dao层，接下来我们就整合dao层1：配置数据源 --- 使用c3p0数据源_ssh框架service层调用dao有的能创建成功

在.net下将word文档转换为加有水印pdf文档_.net webapi word pdf添加水印开源-程序员宅基地

文章浏览阅读725次。前两天在.net平台下要做一个管理系统，其中要用到一个功能就是将word文档转换为加有水印的pdf文档。在网上找了不少代码，贴出来给大家分享一下。所需软件：word2007 +　微软的SaveAsPDFandXPS.exe（下载地址为http://download.micros_.net webapi word pdf添加水印开源

解决openweather无法注册的问题_openweather api 创建账户被禁止了-程序员宅基地

文章浏览阅读5.5k次。1.问题说明openweather注册不成功，无法进行机器人验证2.解决方法无法收到谷歌提供的机器人验证信息，科学上网可解决。科学上网用来注册，后续登录和获取数据不需要，直接访问即可。_openweather api 创建账户被禁止了

winscp通过跳板机访问远程服务器（使用秘钥的方式传输文件）_winscp 隧道跳板机上的密码-程序员宅基地

文章浏览阅读4.7k次，点赞2次，收藏4次。一般需要ssh两个账户或两个设备才能有权限传输数据时经常遇到下面情况：我们一般连接跳板机使用的用户权限很小，能访问的文件不多，要是我想传输数据到我的设备上，却必须用跳板机连接设备怎么办？（别告诉我先在设备上搭个FTP服务器）下载winscp：下载地址https://winscp.net/eng/downloads.php然后傻瓜式安装一键到底安装好就是配置访问服务器1、直接..._winscp 隧道跳板机上的密码

从C++到Java(一)_enum c++ java-程序员宅基地

文章浏览阅读1.3k次。JAVA语言概括和基本类型，数组，枚举_enum c++ java

网络学习第六天（路由器、VLAN）_路由和vlan-程序员宅基地

文章浏览阅读316次。路由的概念路由器它称之为网关设备。路由器就是用于连接不同网络的设备路由器是位于OSI模型的第三层。路由器通过路由决定数据的转发。网关的背景：当时每家计算机厂商，用于交换数据的通信程序（协议）和数据描述格式各不相同。因此，就把用于相互转换这些协议和格式的计算机称为网关。路由器与三层交换器的对比路由协议对比路由器的作用：1.路由寻址2.实现不同网络之间相连的功能3.通过路由决定数据的转发，转发策略称为路由选择。VLAN相关技术什么是VLAN？中文名称叫：虚拟局域网。虚_路由和vlan