1.1 注释 链接到标题
/* xxxx */
1.2 新建类选择器 链接到标题
(1) 如新建类选择器.third-class,可以在标签内选择class=“third-class”
.third-class {
}
(2) 定义标签hr,定义页面内所有带有hr标签的内容 tips:定义标签时,无"."
hr{
}
1.3 设置类选择器 链接到标题
(1) 以写过的类选择器为例
.third-class {
/* 设置字体大小 */
font-size: 18px;
/* 设置字体颜色 */
color: darkblue;
/* 设置字体斜体 */
font-style: italic;
/* 设置行缩进 */
margin-left: 50px;
/* 字体设置下划线 */
text-decoration: underline;
/* 设置字体格式 */
font-family: '宋体', 'Microsoft YaHei',sans-serif;
}
.summary icon {
/* 调整图标与文本之间的间距 */
margin-right: 8px;
/* 设置图标的颜色 */
color: #ffdd00;
}
.underline {
text-decoration: underline;
}
(2) 以写过的为例
hr {
border: none;
/* 分割线粗细 */
height: 1px;
/* 分割线颜色 */
background-color: #ccc;
/* 分割线上下边距为20px */
margin: 20px 0;
}
1.4 css样式配置 链接到标题
新增styles.css文件,路径一般为static/assets/css/路径下,可通过:
<head>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
引入后,在html中即可使用。
1.5 css示例 链接到标题
可参考styles.css文件:完整示例