CSS基础
一、什么是CSS
层叠样式表，作用是给HTML元素设置样式
二、CSS语法规则
p {
color: red;
}p: 元素选择器
color: css属性
red: color的属性值
css写在style标签内，style标签放在head标签中，同时一般在title标签后
三、CSS初体验
常见属性
color: 文本颜色
font-size: 文本大小
background-color: 背景颜色
width: 宽度
height: 高度
注意：CSS的标点符号都是半角符号（英文符号），一个样式写完之后都要加分号
四、CSS的引入方式
内嵌式：css属性写在head标签下的style标签内
外联式：使用head标签下的link标签引入外部css样式表文件
行内式：直接在元素上加上style属性，为当前元素添加样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌样式 -->
<style>
p {
color: #fff;
font-size: 36px;
background-color: green;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="./styles/18. css基础.css">
</head>
<body>
<p>Hello, World! 你好，世界！</p>
<h1>测试外部样式表</h1>
<!-- 行内样式 -->
<h2 style="color: #f0f; background-color: red;"></h2>
</body>
</html>/*css文件*/
h1 {
color: yellow;
background-color: pink;
font-size: 48px;
}五、CSS的基础选择器
基础选择器的种类
标签选择器
类选择器
id选择器
通配符选择器
选择器的作用：选中页面内对应的标签，然后对符合条件被选中的标签设置样式
标签选择器
结构：标签名 {CSS属性名: CSS属性值; ....}
作用：通过标签名在页面内找到对应的所有标签，再对这些相同的标签设置样式
注意：
标签选择器是选择页面内所有的相同标签，而不是单独的某一个
在html文件中无论标签的嵌套关系有多深，选择器都能起作用
类选择器
结构：.类名{CSS属性名: CSS属性值; ...}
作用：通过类名在页面内找到对应的标签，再对这些标签设置样式
注意：
所有的标签都有class属性，class属性用于声明标签的类
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
类名合法
one
one-1
one_2
_one-1
类名不合法
1one
-one
同一个标签可以有多个类名，类名与类名之间使用空格隔开
类名可以重复，一个类名可以同时作用于多个相同或不同的标签上
当一个标签拥有多个类名时，CSS效果是叠加的
id选择器
结构：#id {CSS属性名: CSS属性值; ...}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
所有的标签都有id属性，id不可以重复
一个标签只能有一个id
一个id只能选择一个标签
id和class的名字可以一样，但是id全局只能有一个
类和id的区别
类相当于人名，可以重复，id相当于身份证号，不可以重复
一个标签只能有一个id，但是可以有多个类
类选择器以.开头，id选择器以#开头
类选择器用的多，id选择器用的少
id一般配合js做交互，除非特殊情况，否则不要使用id设置样式
通配符选择器
结构：*{CSS属性名: CSS属性值; ...}
作用：选择页面内的所有标签，对标签进行样式的设置
注意：
开发中极少使用
如果使用了通配符选择器，极有可能会发生样式错乱
六、字体样式
字体大小
p { font-size: 20px; }属性名：font-size
值：数字+px
注意：
谷歌浏览器默认字体大小为16px
属性值设置的时候必须给定单位，不能省略，否则无效
字体粗细
p { font-weight: 100; }属性名：font-weight
取值：数字或关键字
数字：100~900
关键字：normal(普通大小，400)，bold(文本加粗，700)
注意：
不是所有字体都有9种粗细，因此我们在实际开发的过程种一般使用关键字进行字体粗细的定义
字体样式（是否倾斜）
p { font-style: italic; }属性名：font-style
取值：italic（倾斜）或normal（正常）
字体类型（系列）
p { font-family: 宋体, 楷体, 黑体, 微软雅黑; }属性名：font-family
取值：常用字体名
渲染规则
从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意：
如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
样式层叠问题
p { font-size: 16px; font-size: 22px; }以上代码字体大小为22px，因为同时设置了两个font-size属性，只有最后一个属性才会生效，上面设置的属性被下面相同是属性给覆盖了。
七、文本样式
文本缩进
p { text-indent: 2em; }属性名：text-indent
取值：数字+px或数字+em
px：绝对单位，像素值大小
em：相对单位，当前选择器的fontsize的背书，如果当前字体大小为16像素，那么1em=16px
文本对齐方式
p { text-align: center; }属性名：text-align
取值：left 左对齐, center 居中对齐, right 右对齐
文本修饰
p { text-decoration: underline; }属性名：text-decoration
取值：underline 下划线, overline 上划线, line-through 删除线,none 无
注意：
这个属性可以给定两个值，一个是修饰的类型，另一个是样式的类型
修饰的类型：underline, overline, line-throught, none
样式的类型：dashed 虚线, dotted 点划线, solid 实线, double 双划线
p { text-decoration: underline double; /*双划线样式的删除线*/ }
行高
p { line-height: 20px; }属性名：line-height
取值：数字+px或倍数（当前文本大小的倍数）
文本颜色
p { color: red; }属性名：color
取值：颜色名，十六进制颜色值，rgb颜色函数，rgba颜色函数
颜色名：red, blue, green, yellow等
十六进制颜色值：#f00, #fff, #ff0000, #f0f0f0
rgb函数：rgb(153,153,153)
rgba函数：rgba(153,153,153,0.5)
rgba和rgb函数相比多了一个透明度的设置
八、进阶选择器
复合选择器
后代选择器
根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
语法：选择器1 选择器2 {css}
在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意：后代包括了子、孙、重孙等后代，选择器与选择器之间用空格隔开
子代选择器（直接子元素选择器）
根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素
语法：选择器1 > 选择2 {css}
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意：子代只包括儿子（直接子元素），子代选择器中，选择器与选择器之前通过 > 隔开
并集选择器
同时选择多组标签，设置相同的样式
语法：选择器1, 选择器2 {css}
找到 选择器1 和 选择器2 选中的标签，设置样式
注意：选择器与选择器之间使用半角逗号分割，并集选择器中的每一组选择器可以是基础选择器或者是复合选择器，并集选择器在书写的时候通常一行写一个以逗号结尾，提高代码可读性
交集选择器
选中页面中 同时满足 多个选择器的标签
语法：选择器1选择器2 {css}
在页面中找到同时既能被选择器1选中又能被选择器2选中的标签
注意：交集选择器中间是紧挨着的，没有其他符号分割，如果交集选择器中具有标签选择器，那么标签选择器应放在最前面
hover伪类选择器
选中鼠标悬停在元素上的状态，设置样式
语法：选择器:hover {css}
在页面中选中选择器设置鼠标经过标签的样式
注意：伪元素选择器选中的是元素的某种状态
九、背景相关属性
背景颜色
属性名：background-color
属性值：颜色名、十六进制颜色值、rgb, rgba
注意：背景颜色的默认值是透明（rgba(0,0,0,0), transparent），背景颜色不会影响到容器的大小
背景图片
属性名：background-image
属性值：url('图片路径')
注意：
属性值中的图片路径可以省略引号
背景图默认是在水平和垂直方向进行平铺（重复）
背景图片仅能给容器起到装饰效果，不能改变容器的大小，类似于背景颜色
背景平铺
属性名：background-repeat
属性值：no-repeat, repeat-x, repeat-y, repeat
no-repeat: 不平铺
repeat-x: 水平方向平铺
repeat-y: 垂直方向平铺
repeat: 默认，水平和垂直方向平铺
背景位置
属性名：background-position
属性值
方位名词
第一个参数水平位置：left, center, right
第二个参数垂直位置：top, center, bottom
数字+px
第一个参数水平位置：以容器的左上角为原点，距离原点的水平像素值
第二个参数垂直位置：以容器的左上角为原点，距离原点的垂直像素值
注意：方位名词和数字+px可以混用
十、元素显示模式
块状元素
可以设置宽高
独占一行
宽度默认是父元素的宽度，高度默认自动（由容器内的内容所决定）
行内元素
不可以设置宽高
一行显示多个
宽度和高度默认都是由内容决定
行内-块状元素
具有行内元素和块状元素的特点
可以设置宽高
一行显示多个
元素显示模式的转换
通过设置元素的display属性来改变元素的现实模式
display: block 设置元素的显示模式为块状元素
display: inline 设置元素的显示模式为行内元素
display: inline-block 设置元素的显示模式为行内块状元素
十一、选择器优先级
不同的选择器具有不同的优先级，优先级高的选择器的样式会覆盖优先级低的选择器的样式
优先级：集成 < 通配符 < 标签 < 类 < ID < 行内样式 < !important
!important是什么？
当某个样式不生效的时候，我们可以使用important关键字对样式进行声明，有important修饰的样式会在当前页面内强制生效。
实际开发过程中不会使用该关键字
十二、盒模型
盒子的概念
页面中的每一个元素，都可以看成是一个盒子，通过盒子的视角可以更方便的进行布局
浏览器在渲染页面的时候，会将网页中的每一个元素都看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
盒子的区域是由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）组成。
盒模型内容的宽高
width：内容的宽度
height：内容的高度
这里的宽高在默认情况下声明的是内容区域的宽高
边框
border: 给盒子设置四个边框的粗细、样式和颜色。
border-width: 设置边框的宽度（粗细）
border-style: 设置边框的样式
solid: 实线
dashed: 虚线
dotted: 点虚线
double: 双实线
border-color: 设置边框的颜色
颜色名：red, yellow等
十六进制颜色值：#ff0000
rgb函数
rgba函数
以上三个样式可以简写：
border: [width] [style] [color]；
border: 1px solid red;
给盒子设置单个边框的样式
border-left: 设置左边边框
border-right: 设置右边边框
border-top: 设置上边边框
border-bottom: 设置下边边框
内边距
padding: 给盒子设置内容到边框的距离
padding可以有1~4个参数
padding: 10px; 给盒子四周都设置内边距为10px
padding: 10px 20px; 给盒子上下设置内边距为10px，左右设置内边距为20px
padding: 10px 20px 30px; 给盒子上边设置内边距为10px，左右设置内边距为20px，下边内边距为30px
padding: 10px 20px 30px 40px; 给盒子上边设置内边距10px，右边内边距20px，下边内边距30px，左边内边距40px
padding的四个参数分别为上、右、下、左，如果没有设置对应的边，则该边默认的值为其对边的值。
单独设置某个方向的内边距
padding-left: 设置左内边距（padding: 0 0 0 10px）
padding-right: 设置右内边距（padding: 0 10px 0 0）
padding-top: 设置上内边距（padding: 10px 0 0 0）
padding-bottom: 设置下内边距（padding: 0 0 10px 0）
盒子的width和height属性设置的是盒子内容的宽高，而不是盒子整体的宽高，因此，当我们对盒子设置内边距和边框之后，盒子会被撑大，因为盒子的大小是由边框、内边距和内容组成，所以盒子宽高的计算公式如下：
宽=左边框宽度+左内边距大小+内容宽度+右内边距大小+右边框宽度
高=上边框宽度+上内边距大小+内容高度+下内边距大小+下边框宽度
当我们在使用如上公式计算的时候，非常麻烦，我们希望可以更简单的对宽高进行计算，因此，我们在实际开发当中，一般宽高直接设置盒子的宽高，之后在盒子上加上属性
box-sizing:border-box; 这时候，内容的宽高就由浏览器去计算，而我们设置的宽高不再是内容的宽高，而是盒子的宽高。
外边距
margin: 设置盒子与盒子之间的距离
参数与padding一样，都可以有1~4个参数，分别对应上、右、下、左。
单独设置某个方向的外边距
margin-方位名词（left, right, top, bottom）
标签的初始化
浏览器在默认情况下会给部分标签添加默认的margin和padding，因此我们在正式开发之前，需要对默认的margin和padding进行清楚
* {
margin: 0;
padding: 0;
}
/* 清楚浏览器的默认设置 */外边距正常的情况：水平布局的盒子，左右外边距正常，互不影响
外边距折叠现象：垂直布局的块级元素，上下外边距会合并，最终上下的外边距会以大的为准
外边距的塌陷现象：当父子元素嵌套的时候，给子元素设置上边距，父元素会跟着一起往下移动，解决方法如下：
给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置子元素浮动
十三、结构伪类选择器
作用和优势
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
选择器
E:first-child{}
匹配父元素中第一个子元素，并且是E元素
E:last-child {}
匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) {}
匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) {}
匹配父元素中倒数第n个子元素，并且是E元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list li:nth-child(3) a {
color: red;
}
#list li:nth-child(n+5) a {
color: green;
}
#list li:nth-child(even) {
background-color: #f0f0f0;
}
#list li:nth-child(odd) {
background-color: #ffffff;
}
#list li:first-child a,
#list li:last-child a {
color: black;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<!--
对第3个元素设置字体颜色为红色
对第5~第8个元素设置字体颜色为绿色
对列表设置斑马纹效果（奇数行背景色为#f0f0f0，偶数行背景色为#ffffff）
对第1和最后一个元素设置字体颜色为黑色
对所有的文字都去掉下划线
-->
<ul id="list">
<li><a href="#">第1个a元素</a></li>
<li><a href="#">第2个a元素</a></li>
<li><a href="#">第3个a元素</a></li>
<li><a href="#">第4个a元素</a></li>
<li><a href="#">第5个a元素</a></li>
<li><a href="#">第6个a元素</a></li>
<li><a href="#">第7个a元素</a></li>
<li><a href="#">第8个a元素</a></li>
</ul>
</body>
</html>