CSS

总结：常见的css样式：
文本样式、背景样式、边框、边框圆角、尺寸、伪类选择器、盒模型、布局样式：浮动、定位 标签显示效果

div：在页面布局中，主要作为承载内容的容器，没有任何的默认样式，所有的外观样式都需要我们自己调整

css：用来表现HTML样式的计算机语言，为html化妆

CSS的引入方式：
1、行间引入：
在标签行间。使用style属性，来为标签设置css样式，样式选取时优先级高
如：《div style=“width:200px;height=200px;”》《/div》
2、内部引入：
在header标签中写入：
《style type=“text/css”》
div{
color:red;
font-size:30px;
}《/style》
body里面写：《div》《/div》
3.外部引入：
首先需要在外界单独创建css文件在文件内使用选择器书写样式
在header标签中写入：
《link rel=“stylesheet” type=“text/css” href=“css/xxx.css”/》
body里面写：《div》《/div》

三、选择器
选择器是css中提供的一种选取标签的机制，不同的选择器选取标签的原理不一致，通过选择器找到匹配的标签后，可以为其设置css样式。
常见的css选择器：
标签选择器、id选择器、类class选择器
（1）标签选择器
语法格式：标签名{css样式}
选取原则：为指定的这一类标签设置样式
如：div{
color:red;
font-size;
}
p{
color:blue;
}

（2）id选择器
语法格式：#id名称{css样式}
选取原则：为添加了此id名称的标签设置css样式
注意事项：
在html文件内部，id名称不能重复！
如：在head标签中：#div1{
font-weight:bold;
}
#div2{
font-style:italic;
}
在body中：《div id =“div1”》《/div》

（3）类calss选择器
选取格式：类名{css样式}
选取原则：为添加此类名的标签设置css样式
注意事项：
一个标签可以添加多个类，类名于类名之间使用空格隔开
一个类可以添加多个标签
head中：.size{
font-size:20px;
}
body中：
《div class=“size”》《/div》

四、css的样式冲突问题
样式加载顺序，如果设置重复的css样式，按照样式加载顺序后面覆盖前面的原则，选用后面的这个样式。
选择器的优先级:
标签<类class<id<行间引入style

五常见的css样式
1.标签尺寸设置：width和height
2.边框的设置：
边框是一个标签的最外侧的内容，是一个标签的界定范围。
边框有四个方向：上下左右，
边框组成：边框宽度、边框颜色、边框样式
3.边框圆角：它的css样式属性为：border-radius
边框脚边有四个左上、右上、右下、左下
4.文本样式：
color：字体颜色
font-size：字体大小
font-weight:字体加粗效果
bold值,加粗
font-style：字体样式
italic值，倾斜
font-family：字体
text-decoration：文本修饰
underline:下划线、overline上划线、line-through删除线、none无修饰
text-align：文本横向的对齐方式
默认值left左对齐、center居中对齐、right右对齐
letter-spacing:字符间距
line-height：行高

记忆：
四个font开头的：size、weight、style、family
两个text开头的：align、decoration
三个没有规律的：color、letter-spacing、line-height

5、背景样式：
背景样式常用属性：
background-color：背景颜色
background-image：url(“路径”) 背景图片
background-size：背景图片的尺寸
background-repeat：背景重复效果
默认值为repeat，既有横向重复，也有 纵向重复
repeat-x，只有横向重复
repeat-y，只有纵向重复
no-repeat，没有重复

background-position：背景图片的位置
background-position-x，设置背景图片的横向位置：left、center、right
background-position-y，设置背景图片的纵向位置：top、center、bottom
background-position：横向位置 纵向位置

6、伪类选择器
主要是针对a标签设置的
a {
font-size: 30px;
}
/* 未被访问时的状态 /
a:link {
color: pink;
text-decoration: none;
}
/ 被访问之后的状态 /
a:visited {
color: blue;
}
/ 鼠标悬停时的状态 /
a:hover {
color: red;
text-decoration: underline;
}
/ 正在访问的状态 */
a:active {
color: purple;
}
div {
width: 200px;
height: 200px;
background-color: orange;
}
div:hover {
background-color: pink;
}
body中：
a href="http://www.baidu.com"百度/a
《 div》《/div》
注意事项：
为了确保四个伪类中设置的样式都可以起作用，我们在书写时，必须按照lvha的顺序来书写！

7、盒模型：
每个标签都具备的内容，从外到内
外边距margin
边框border
内边距padding
内容content
（1）margin一旦设置了外边距代表这个方向上从边框外侧到指定的外边距范围内，不能存在任何内容

margin的冲突问题
margin如果在纵向产生了冲突，取大作为两者之间的距离
margin如果在横向产生了冲突，取和作为两者之间的距离

（2）paddding填充的效果
一旦设置了内边距，就代表这个方向上从边框内侧到指定的内边距范围内，不能存在任何内容
在盒模型的加持下，一个元素，现在显示的范围与在盒模型的加持下，一个元素的作用范围不同。

8、float浮动
浮动的值有两个：left和right
清除浮动带来的影响，在浮动元素的同级以下，设置一个空的div，并为其设置clear这个css样式，取值有三种：left、right、both
left 只清除左浮动
right 只清除右浮动
both 左右浮动都清除
清除浮动后，浮动元素保留布局效果，垂直落入文档流，那么就占据空间

9、定位：
定位属性为position，默认值为static
当元素设置了定位position之后，就可以通过left、right、top、bottom这四个属性，来改变元素的位置！！！

relative，相对定位。偏移的参照为自身原先的位置
left正值向右偏移、right正值向左偏移、top正值向下偏移、bottom正值向上偏移
而且元素偏移之后，原先的位置依旧存在

absolute：绝对定位。
如果元素设置了定位属性为absolute，其父级或者父级的父级设置了定位属性，那么偏移参照就是这个设置定位属性的父级元素
left正值，从父级左侧向右偏移
right正值，从父级右侧向左偏移
top正值，从父级顶部向下偏移
bottom正值，从父级底部向上偏移
如果元素设置了定位属性为absolute，其父级或者父级的父级没有设置任何的定位属性，那么偏移参照物为浏览器的可视化窗口

fixed，固定定位。定位的参照物为浏览器的可视化窗口
left正值，浏览器可视化窗口左侧向右偏移
right正值，浏览器可视化窗口右侧向左偏移
top正值，浏览器可视化窗口顶部向下偏移
bottom正值，浏览器可视化窗口底部向上偏移