css自学框架之引用、正文文字 链接文字 提示文字 较小文字 加粗文字 引用文字 斜体文字 强调文字 加亮文字 含删除线文字 键盘符号 |
您所在的位置:网站首页 › pr加标题文字效果 › 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引入代码 这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。这是一个引用段落的测试。~效果如图: 二、正文文字、链接文字、提示文字、较小文字、加粗文字、引用文字、斜体文字、强调文字、加亮文字、含删除线文字、键盘符号 Ctrl + Scss代码: 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 标题最后效果 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |