目录
1.1 什么是CSS？
CSS指层叠样式表，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式
1.2 CSS样式规则
具体格式如下:
属性和属性值之间用英文冒号“:”连接，多个“键值对”之间用英文分号“;”进行分隔。
选择器{属性1:属性值1;属性2:属性值2;...}
例如:h1{color:green;font-size:14px;}
1.2.1 样式定义如何显示 HTML 元素?
- 样式通常是存储在样式表中
- 把样式表添加到HTML元素中
1.3 CSS定义样式
1.3.1 行内样式 (优先级高)
如果当前的样式不需要复用，可以用行内样式
在任何标签里添加 style="样式"
<p style="color: blue;">新地球</p>
<h5 style="color: blue;">美人鱼</h5>
1.3.2. 内页样式（嵌入样式）
在head标签里面放style标签
<head>
<style>
body {
background-color: black;
}
</style>
</head>
<body>
<p style="color: blue;">新地球</p>
<h5 style="color: blue;">美人鱼</h5>
</body>
1.3.3 外部样式（推荐）
在外部创建css文件 在里面写css样式 然后通过link rel="stylesheet" href="css文件路径"连接到html文件 在head标签里面放link标签
<head>
<link rel="stylesheet" href="------">
</head>
<body>
<p style="color: blue;">新地球</p>
<h5 style="color: blue;">美人鱼</h5>
</body>
1.4 CSS选择器
1.4.1 标签选择
语法格式：
<style>
标签名{
属性:属性值;
属性:属性值;
}
</style>
<head>
<style>
body {
background-color: black;
}
</style>
</head>
<body>
<p style="color: blue;">新地球</p>
<h5 style="color: blue;">美人鱼</h5>
</body>
标签选择器针对页面中某个标签中的样式设置，作用于这个页面内所有写在改标签内的内容。标签选择器可以定义多个标签的样式
1.4.2 类选择器
语法格式:
<style>
.类名{
属性:属性值;
属性:属性值;
}
</style>
<head>
<style>
.jj {
background-color: black;
}
</style>
</head>
<body>
<p style="color: blue;" class="jj">新地球</p>
<h5 style="color: blue;">美人鱼</h5>
</body>
类选择器在定义的时候需要 "." 来做前缀，类名是自定义的，然后在括号内定义属性和属性值。它不是直接作用在该页面中，而是需要使用class方法去自定义要作用的标签
1.4.3 id选择器
语法格式:
<style>
#标识名{
属性:属性值
属性:属性值
}
</style>
<head>
<style>
#jj {
background-color: black;
}
</style>
</head>
<body>
<p style="color: blue;">新地球</p>
<h5 style="color: blue;" id="jj">美人鱼</h5>
</body>
id使用"#"作前缀，标识名照样是自定义的。然后括号内输入要修改样式的属性和属性值。调用id选择器的样式需要使用标签内的id方法
1.4.4 后代选择器
语法格式：
<style>
父级标签名 后代标签名{
属性:属性值
属性:属性值
}
</style>
定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制
1.4.5 子选择器
语法格式：
<style>
父级标签名>子代标签名{
属性:属性值
属性:属性值
}
</style>
1.子元素选择器，只能选择作为某元素的子元素。
2.子选择器使用：大于号">",进行分割
1.4.6伪类选择器
<style>
/* 默认样式 */
a:link{
color:red;
}
/* 鼠标悬停样式 */
a:hover{
color:blue;
}
/* 元素被激活 */
a:active{
color:black;
}
/* 点过的样式 */
a:visited{
color:grenn;
}
</style>
1.5 css层叠样式表
1.5.1特点
层叠性：
1.如果样式冲突，遵循就是就近原则，哪个样式离结构近，就执行哪个样式
2.如果样式不冲突，就不层叠
继承性：字标签会继承父标签的某些样式。文本颜色，字号，背景颜色...
优先级：类 > 标签 > id
权重：
1.继承的样式权重为最低0
2.行内样式权重最高100
3.如果权重相同，就近原则
4.!important无限大
1.5.2 css常用的单位
- px像素：绝对单位，一个像素代表一个点。如100px*100px的正方形，宽度100个点，高度100个点。
- em是相对单位。它会参考它的父级元素。字体，父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。
- rem相对单位。由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。应用在老人版。
- 百分比：相对于父级元素的比例。
