css自学框架之引用、正文文字链接文字提示文字较小文字加粗文字引用文字斜体文字强调文字加亮文字含删除线文字键盘符号

2023-06-17 10:08| 来源: 网络整理| 查看: 265

css自学框架，引用、正文文字链接文字提示文字较小文字加粗文字引用文字斜体文字强调文字加亮文字含删除线文字键盘符号样式定义。

一、引用样式。

css代码：

blockquote{margin: 0 0 1em;line-height: 1.8;font-style: oblique;background: #f5fafd;padding: 1em 1em 1em 2em;border-left: 5px #3498db solid;}

html引入代码

这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。~

效果如图：在这里插入图片描述

二、正文文字、链接文字、提示文字、较小文字、加粗文字、引用文字、斜体文字、强调文字、加亮文字、含删除线文字、键盘符号 Ctrl + S

css代码：

p{line-height: 1.8;margin-bottom: .3em;} a{color: var(--primary);text-decoration: none;} a:hover{color: var(--secondly);} /*呈现为被强调的文本。mark标签定义带有记号的文本。*/ em, mark, kbd{font-size: .875em;padding: .25em .5em;border-radius: var(--radius);} abbr[title]{cursor: help;text-decoration: none;border-bottom: 1px dotted;}/*提示功能*/ kbd{color: #fff;background: #333;font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";}/*在文档中格式化文本:*/ em{color: var(--white);font-style: normal; background-color: var(--primary);} em.red{color: var(--white);background: var(--red);} em.yellow{color: var(--white); background: var(--yellow);} em.blue{color: var(--white);background: var(--blue);} em.green{ color: var(--white); background: var(--green);}

html代码：

正文文字链接文字提示文字较小文字加粗文字引用文字斜体文字强调文字加亮文字含删除线文字键盘符号 Ctrl + S

效果：在这里插入图片描述

三、标题样式

css代码：

/* 标题 */ h1{ font-size: 2em } h1, h2, h3, h4, h5, h6{ margin-bottom: 1rem } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{ margin-bottom: 0 }

html代码：

H1 超大标题 H2 大标题 H3 小标题 H4 标题 H5 标题 H6 标题

最后效果在这里插入图片描述

【本文地址】

公司简介

联系我们

css自学框架之引用、正文文字 链接文字 提示文字 较小文字 加粗文字 引用文字 斜体文字 强调文字 加亮文字 含删除线文字 键盘符号

css自学框架之引用、正文文字链接文字提示文字较小文字加粗文字引用文字斜体文字强调文字加亮文字含删除线文字键盘符号