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

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引入代码

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

效果如图：

二、正文文字、链接文字、提示文字、较小文字、加粗文字、引用文字、斜体文字、强调文字、加亮文字、含删除线文字、键盘符号 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代码：

<p>正文文字p>
			<p><a href="#">链接文字a>p>
			<p><abbr title="自带的提示功能">提示文字abbr>p>
			<p><small>较小文字small>p>
			<p><b>加粗文字b>p>
			<p><cite>引用文字cite>p>
			<p><i>斜体文字i>p>
			<p><em>强调文字em>p>
			<p><mark>加亮文字mark>p>
			<p><del>含删除线文字del>p>
			<p>键盘符号 <kbd>Ctrl + Skbd>p>

效果：

三、标题样式

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>H1 超大标题h1>
		<h2>H2 大标题h2>
		<h3>H3 小标题h3>
		<h4>H4 标题h4>
		<h5>H5 标题h5>
		<h6>H6 标题h6>

最后效果