day_02
1 css简介【了解】
对html中的文档内容进行样式的修饰,注意css的使用是原来于html
2 css 特点【理解】
- 丰富的样式修饰
- 样式于内容分离，方便开发
- 实现样式复用，节约开发成本
- 实现内容样式的精准控制
3 css的基本使用语法【精通】
<!--1.在body中定义需要设置样式的html标签-->
<div>
</div>
<!--2.为标签设置id属性，值自定义-->
<div id="值">
</div>
<!--3.在head标签中title标签下定义style标签，并设置type属性，值为text/css-->
<style type="text/css"></style>
<!--4.在style标签中使用id选择器选择到需要设置的html标签-->
<style type="text/css">
#id值{
/*5.在大括号中设置样式*/
属性：值;
}
</style>
说明:
1.style标签的编写位置在head之内title之下
2.属性与属性值之间使用冒号分割,使用分号结束这个属性的设置
3.CSS不区分大小写,但是推荐全部使用小写
4.使用注释说明自己编写的代码,易于代码阅读
4 选择器【精通】
4.1 通配符选择器（通用选择器）
说明：通配符选择器是用于选择页面中所有的标签，为所有的标签设置样式
语法：
<style type="text/css">
*{
属性：属性值;
}
</style>
4.2 标签选择器（元素选择器）
说明：使用标签的名称作为选择器，只能选择到该页面中这个标签
语法：
<style type="text/css">
标签名{
属性:属性值;
}
</style>
4.3 类选择器
说明：使用标签的class属性也可以作为选择器，注意使用class选择器时必须使用点(.)
强调： 一个标签的class属性可以有多个属性值，注意值与值之间使用空格分割
选择器的语法：
<style type="text/css">
.class值{
属性:属性值;
}
</style>
一个标签可以有多个class值:
<标签 class="值1 值2 值3 ......"></标签>
注意：当多个类都有css样式时，那么一个标签如果都有这些class值时，那么所有的样式都会生效
4.4 id选择器
说明：根据标签的id属性的值进行选择，注意一个标签只能有一个id值
<style type="text/css">
#id值{
属性:属性值;
}
</style>
<标签 id="值"></标签>
4.5 基本选择器的优先级
通配符选择器 < 标签选择器 < 类选择器 < id选择器
注意:记忆方法可以从精确度来分析
5 css的书写位置【精通】
5.1 内嵌样式
在head之内title之下使用style标签，并且设置type属性的值为text/css，然后在style标签中使用选择器命中需要设置的标签，再在大括号中定义css样式
<style type="text/css">
选择器{
属性:属性值;
}
</style>
注意：
1、属性与属性值之间使用英文冒号
2.使用分号表示一个属性的结束
5.2 行内样式
在任意标签的开始标签中添加style属性，然后在属性值得位置上添加css样式，样式得写法与内嵌样式的写法一致
<标签 style="属性1:值1; 属性2:值2;"></标签>
弊端：样式与内容没有分离，不能实现样式的复用
使用：需要有针对性的单一为标签设置样式时才会用到
5.3 外部引入
-
什么是外部引入
- 由一个单独的css文件来记录css样式
-
外部引入的特点
- 实现样式与内容的跨文件分离，减少了单文件中的代码量
- 方便维护
- 易于阅读代码
5.3.1 使用link标签
- 在当前这个html文件的同级目录下新建一个名为css的文件夹（注意，这个文件夹的命名为css是一种标准）
- 在css文件夹中新建一个以css为后缀的文件，文件名自定义（由一定的描述意义即可）
- 将css文件使用link引入到html文件中（注意：link标签的放置位置与style的放置位置一致）
语法：
<link rel="stylesheet" href="css文件的路径"/>
路径可以是相对路径也可以是绝对路径
5.3.2 使用import 导入外部样式【了解】
语法：
<style type="text/css">
@import "css文件的路径"
</style>
5.4 得出优先级的结论【掌握】
行内 > 内嵌 > 外部引入
6 字体属性【精通】
- font-size： 设置字体大小
- font-family：设置字体形状
- font-weight：设置字体粗细
7 文本属性【精通】
注意：文本属性只针对元素中的文本内容进行设置
-
color： 颜色，值可以是十六进制的颜色值或者英文颜色单词
-
text-align： 该属性用于设置文本的对齐方式，在块级标签上有效果，二行内没有作用，取值有三个分别为left （左） center（居中） right（右）
-
line-height： 可以设置垂直的对齐方式，值为数字，当值越大则越接近底部，当值越小则越接近顶部，当值与所在容器的高度一致时则垂直居中
-
text-indent： 设置文本内容的首行缩进，值为数字，单位为px，该属性用的比较少，只需要了解
-
text-decoration:设置文本线条，值如下，注意只有none常用
p{ /* 文本下划线 */ /* text-decoration: underline; */ /* 文本上划线 */ /* text-decoration: overline; */ /* 文本中划线 */ text-decoration: line-through; } a{ /* 去除下划线 */ text-decoration: none; }8 鼠标的形状属性【掌握】
作用： 用于设置当鼠标移到标签上后所显示的鼠标的形状
属性： cursor
值： pointer （鼠标手）
9 背景【精通】
9.1 背景色
background-color：设置背景颜色，值可以是英文颜色单词，还可以是十六进制的颜色值
9.2 背景图片
- background-image： 设置背景图片的路径（可以是相对路径也可以是绝对路径）
- background-repeat：取值为no-repeat时表示去除背景图片平铺
- 注意：一般情况下以上两个属性是搭配使用的，所以可以缩写为 background: url(“路径”) no-repeat;，但是目前阶段不推荐缩写。
- background-position：设置背景图片的位移，第一个值为x轴的位移值，第二个值为y轴的位移值，x轴向右为正方向，y轴向下为正方向，当值为正值时则正方向位移，当值为负数时则向反方向位移，单位均为px
10 伪类选择器【掌握】
-
a:hover :当鼠标悬停在a标签上时会使用到的样式
例如：
a:hover{ color: red; text-decoration: underline; }
拓展属性：
width： 设置块级标签的宽度
height：设置块级标签的高度
border： 设置边框
