CSS基础

在标签中使用<link rel="stylesheet" href="style.css">插入外联样式

/* 标签选择器 */
h1 {
    color: red;
}

/* 类选择器 */
.myclass{
    color: blue;
}

/* id选择器 !important指定最高优先级*/
#myid{
    color: red !important;
}

/* 组合选择器，同时包含h1标签和myclass类*/
h1.myclass{
    color: yellow;
}

/* 批量指定选择器 同时指定三个标签样式*/
h1,h2,h3{
    color: black;
}

/* 父子选择器 div标签下的h1标签*/
div h1{
    color: red;
}

优先级顺序：

• 列表项相同的规则越后加载的优先级更高
• 子样式比继承的样式优先级更高
• 内联样式优先级最高，!important例外
• ID选择器>类选择器>标签选择器

盒子模型

效果代码：
display: flex; 居中
margin: 10px; 外边距
padding: 10px; 内边距