html 文本强调,CSS Emphasis Marks 文本强调标记
我们常常会在网页中对文本某一关键词进行凸显强调,加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法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查看兼容情况。
测试后,总体来说暂时使用场景或兼容还是有一定局限性,具体根据实际场景而定吧,就当多了个选择,将其储备起来。
html 文本强调,CSS Emphasis Marks 文本强调标记相关推荐
- html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?
Rupert Madden-Abbott 194 html css semantic-markup 使文本斜体的正确方法是什么?我见过以下四种方法: Italic Text Italic Text I ...
- html如何将设置文本效果,css如何对文本进行修饰
color属性:设置文本文字颜色.用法如下: color:颜色值; color属性可以设置的合法颜色值包括:16进制颜色值(例:#ffffff),rgb颜色值[例:rgb(0,0,0)],rgba颜色 ...
- css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
- html中单行文本,利用css实现单行文本文字两端对齐
日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果. 但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效. 所以需要采用下面两种方法实现单行 ...
- CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性 虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
- CSS -- CSS字体及文本属性设置总结
文章目录 1 CSS字体属性 1.1 字体系列 1.2 字体大小 1.3 字体粗细 1.4 文字样式 1.5 字体复合属性 1.6 字体属性总结 2 CSS文本属性 2.1 文本颜色 2.2 对齐文本 ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- CSS(二)属性--文本设置
HTML代码一 <body> <div>这是一个很黑很黑的夜晚,黑云密布,没有任何光亮透过.卖火柴的小姑娘.......</div> </body> C ...
- 前端一HTML:八:css中与文本相关的属性
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- 跨学科整合,打造大数据最强集团军:清华大学大数据能力提升项目宣讲会来了!...
- JavaScript获取鼠标左键选中的内容
- Android测试分析3
- Python入门:正则表达式
- 桌面支持--电脑出现临时账户--解决办法
- HDFS(二)HDFS架构
- XElement.Load 需要释放吗_奥施康定掰开后能当即释片用吗?
- android 呼吸灯权限_小米新机搭载炫彩呼吸灯酷到爆;三星顶级旗舰Note 10正式官宣...
- ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
- 一些提高生产力的 Linux 命令和技巧
- ai人工智能数据处理分析_建立数据平台以实现分析和AI驱动的创新
- 系统策略禁止安装此设备。请与系统管理员联系-解决方案
- JQuery详解(讲解+举例)--(后端开发适用)
- 鸿蒙系统会碎片化吗,鸿蒙系统讲解决安卓碎片化问题,4G流畅度媲美12G!
- 北洋网络口打印机设置
- 聊一聊Java中的悲观锁和乐观锁
- qq批量登录软件_QQ群控高效管理,引流过万不是问题!
- PFC颗粒分析第一步:掌握离散元这些成样方法就够了!
- python写矩阵奇异值分解
- (转载)云计算系统测试