css self-study framework reference, text link text prompt text smaller text bold text quoted text italic text emphasized text highlighted text with strikethrough text keyboard symbols

css self-study framework, quotation, text text link text prompt text smaller text bold text quoted text italic text emphasized text highlighted text with strikethrough text keyboard symbol style definition.

1. Reference style.

css code:

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 introduction code

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

The effect is as shown in the figure:

2. Main text, link text, prompt text, smaller text, bold text, quoted text, italicized text, emphasized text, highlighted text, strikethrough text, keyboard symbol Ctrl + S

css code:

p{
    
    line-height: 1.8;margin-bottom: .3em;}
			a{
    
    color: var(--primary);text-decoration: none;}			
			a:hover{
    
    color: var(--secondly);}
			
			/*<em>呈现为被强调的文本。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 code:

<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 + S</kbd></p>

Effect:

3. Title style

css code:

/* 标题 */
			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 code:

<h1>H1 超大标题</h1>
		<h2>H2 大标题</h2>
		<h3>H3 小标题</h3>
		<h4>H4 标题</h4>
		<h5>H5 标题</h5>
		<h6>H6 标题</h6>

final effect