本篇内容主要讲解“css中text-emphasis属性的作用是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css中text-emphasis属性的作用是什么”吧!就一般而言，我们所做的页面并非对于文学类用户，因此也不太可能会接触到“着重号”这个符号。如果对于 word 不陌生的朋友应该会知道在 word 中有一个文本设置，就是设置“着重号”的。那么本文要说的 CSS 属性也就是这个“着重号”的属性，我们可以通过text-emphasis属性设置文本“着重号”样式。这是text-emphasis-color和text-emphasis-style这两个属性的简写方式，也就是说，我们可以通过text-emphasis同时设定“着重号”字符样式以及颜色，比如：至于在 word 中看到的是不是这样的效果，这个我也不知道了，反正呢，在 web 页面中，我们所看到的着重号不仅可以修改字符样式以及颜色，还可以修改大小和位置。text-emphasis-style有好几个属性值，并且也可以输入任意字符；text-emphasis-color则可以使用常规的 web 中使用的颜色值，rgba()、rgb()什么的都可以；而如果想要调整位置的话，那么就是要额外一个属性text-emphasis-position，虽然看着这个属性跟style和color很相近，但并不是text-emphasis简写中的一个。那么对于text-emphasis-position在常规的情况下，我们能控制的位置是上以及下这两个方向，也就是：text-emphasis-position: over;text-emphasis-position: under;如想要了解更多的话，可以翻阅一下 MDN 中的具体介绍，这里不赘述。那么按照上面说的，我们把 CSS 部分修改一下，就像这样：看着是不是很像文本的下划线text-decoration: underline;的效果呢？那我们再增加一条这个属性看看效果。这两个是不同的属性，差异必定也是有的。具体就不细化，主要的差异通过文档也是可以看到。这里需要提一下的是，text-decoration属性值如果父级设定了underline样式，那么子级设定overline，两个线条样式是会存在，就算是更换 香港云主机了text-decoration-style值也是如此。而text-emphasis当我们改变了其中的属性值之后，结果也就不同。同时，如果我们未设定颜色值的话，“着重号”的颜色将会继承元素自身的文本颜色。因为可以设定颜色值，所以我们同样可以使用transparent直接设置元素为透明。提到继承，这里需要注意一个点，“着重号”的文本大小差不多是正常文本的一半左右。回顾一下前面提到的几个点：可以输入任意字符；如未设定颜色将继承元素自身的color值，也可以设置为透明；“着重号”的大小是正常文本的一半左右；结合这几个点，我们可以这样玩一下。这里有一些地方是没有“着重号”，有一些是空白的或者特殊字符，部分是随便输入，部分是故意而为之。主要是想看看在一些特殊字符情况下，“着重号”的显示情况。只会显示一个字符，无论该字符是全角还是半角字符，甚至是 emoji 特殊字符；只在可见文本字符上展示“着重号”；那么这个效果的代码就是：文本内容，一个span元素是 emC元素哦，啊啊啊……那么这篇内容就到这？不，还有一个东西我想说一下。从上面的效果图中可以看到，“着重号”是在文本下面或者上面的，那么对于一个正常的文本来说，行高（line-height）相信大家不会陌生。那么在有“着重号”的部分，加上line-height后会是怎么样的效果呢？line-height: 20px;加到p中之后，并未看到任何变化；而如果把20px换成60px，有变化了，高度撑开了一丢丢；那再加大点，撑开了，“着重号”紧随着文本隔开了上下行内容。突发奇想，当line-height的值比较小的时候，并未看到效果，正常情况下，没有text-emphasis时，比较小的line-height会让多行内容重叠，就像这样：可现在有了text-emphasis后，并不会重叠了，看来是直接影响了line-height最小值的情况，必须保证多行之间的高度值在某个特定值，看着似乎是1em左右的大小，以便于放得下比文字正常font-size小一半的，且要与文本内容保持一定间距的“着重号”。回到「冷门的text-emphasis有什么用呢？」这个话题上。是啊，有什么用呢，除了正常表示某部分的文字内容是着重标记的以外，似乎也感受不到有什么用了。除非就是我们重复利用这个“着重号”的特性来玩，尤其是会撑开line-height，以保证最少有1em左右的空间存在于多行之间。那么如果我们使用一个透明颜色的“着重号”，是不是代表着这部分文字的永远都不会叠加呢？然后再结合emoji或者上下错乱的组合，会不会玩出不一样的天空呢？回头想想啊，一个好好的“着重号”，还是让它做自己的事情，用来标注文本着重说明吧，还是不玩了。到此，相信大家对“css中text-emphasis属性的作用是什么”有了更深的了解，不妨来实际操作一番吧！这里是开发云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
这篇文章主要介绍“电脑系统如何恢复出厂设置”，在日常操作中，相信很多人在电脑系统如何恢复出厂设置问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”电脑系统如何恢复出厂设置”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！方法/步骤：…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
