1.选择器
- 元素选择器
标签名 {}
p {}：选中所有的p元素
h1 {}：选中所有的h1元素
- id选择器
#id {}
#p1 {}:选中id为p1的元素
- 类选择器
.class {}
.pclass {}：选中类为pclass的所有元素
结合元素选择器
a.class{}：选中类为class的a元素
多类选择器
.p1.p2{}: 选中类为p1同时为p2的元素
- 属性选择器
[属性名]选取含有指定属性的元素
[属性名="属性值"]选取含有指定属性值的元素
p[title] {}：选中所有包含title属性的p元素
p[title="hello"]{}：选中所有title属性值是hello的元素
- 子元素选择器
元素之间的关系
父元素:直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素
兄弟元素：拥有相同父元素叫做兄弟元素
父元素>子元素{}
div>span{}：选中div元素中的子元素span，只能是一代父子关系
- 派生选择器(后代选择器)
祖先元素 后代元素 {}
div span{}:选中所有div中的span
#d1 p span{}：选中id为d1的p元素中的所有span元素
- 相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同的父元素。
h1+p{}
<style>
div+p{
background-color:blue;
}
</style>
</head>
<body>
<div>
<div>
<p>品</p>
</div>
<p>品</p>
<p>品</p>
<p>品</p>
<p>品</p>
</div>
</body>
- 通用兄弟元素选择器
div~p所有的div之后的的兄弟p元素都被选中
<style>
div~p{
background-color:blue;
}
</style>
</head>
<body>
<div>
<div>
<p>品</p>
</div>
<p>品</p>
<p>品</p>
<p>品</p>
<p>品</p>
</div>
</body>
- 选择器分组(并集)
同时选中多个选择器对应的元素。
选择器1，选择器2，选择器3 {}
#p1,.p2,h1 {}:选中id为p1、类为.p2、元素为h1的所有元素。只需满足一个条件
- 选择器的优先级
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。- 优先级的规则：
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器：优先级1
通配选择器，优先级0
继承的样式，没有优先级
- 优先级的规则：
当选择器中包含多种选择器时，将优先级相加再比较。但是注意，选择器的优先级计算不会超过他的最大数量级。
如果选择器优先级一样，则使用靠后样式。
并集选择器的优先级是单独计算
div,p,#p1,.hello
可以在样式的最后添加一个!important;则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示，但不推荐使用。
2.CSS基本样式
背景
background-attachment：背景图像是否固定或随页面其余部分滚动
background-color:背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复文本
color:文本颜色
direction:文本方向
line-height:行高
letter-spacing:字符间距
word-spacing:字间距
text-align:对齐方式
text-decoration:文本添加修饰
text-indent:首行缩进
text-transform:元素中字母处理
white-space:元素中空白的处理字体
font-family：设置字体
font-size:设置字体尺寸呢
font-style:设置字体风格
font-variant:以小型大写字体或正常字体显示文本
font-weight：字体加粗链接
css链接的四种状态：
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
链接相关设置：
text-decoration:属性大多用于去掉链接中的下划线
background-color:背景颜色列表 li
list-style：简写列表项
list-style-image:列表项图像
list-style-position:列表标志位置
list-style-type:列表类型表格
border:1px solid blue 设置外边框
border-collapse:collapse 折叠边框
width、height：设置表格宽高
background-color:设置表格的背景颜色轮廓
outline:设置轮廓属性
outline-color：设置轮廓颜色
outline-style：设置轮廓样式
outline-width：设置轮廓宽度
3.CSS定位
1）CSS定位属性
position:把元素放在static、relative、absolute、fixed的位置中。
- static:没有开启定位，偏移量不起作用，默认是static。
- relative：相对定位，相对于元素本身的位置来定位
- absolute：绝对定位，相对于position属性除static 之外（相对于第一个开启定位）的第一个父元素进行定位，元素脱离文档流。当所有父元素都没有开启定位时，会相对于浏览器窗口定位。
- fixed:固定，不随滚动而改变
top:元素向上的偏移量
left:元素向左的偏移量
right:元素向右的偏移量
bottom:元素向下的偏移量
overflow:设置元素溢出其区域发生的事情
clip:设置元素显示的形状
vertical-align:设置元素垂直对齐方式
z-index：设置元素的堆叠顺序，谁值大谁呈现在前面。
2）CSS浮动
float属性：
left:元素向左浮动
right:元素向右浮动
none:元素不浮动
inherit:从父级继承浮动属性
浮动之后的元素会脱离文档流，不再占有页面的位置
内联元素浮动后变成块元素。clear属性：用于清除浮动元素对当前元素的影响
去掉浮动属性(包括继承来的属性)
left、right:去掉元素向左、向右浮动
both:左右两侧均去掉浮动
inherit:从父级继承来的clear的值浮动带来的问题：高度塌陷
当子元素在父元素之中，父元素没有设置高度，那么父元素的高度是由子元素撑开的，这时候子元素浮动脱离文档流，父元素没有内容高度塌陷。
<style>
#box1{
border:10px blue solid;
}
#box2{
width:200px;
height:200px;
background-color:yellow;
}
#bottombox{
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
<div id="bottombox"></div>
可以看到box1的高度是由其子元素box2撑起来的。
当我们让子元素box2浮动：
#box2{
width:200px;
height:200px;
background-color:yellow;
float:right;
}
box1已经没有高度了。
解决方法：
1）IE6之外浏览器
通过overflow:hidden给塌陷的父元素开启BFC
当开启元素的BFC后元素会具有如下特点:
2)IE6不支持BFC模式，利用zoom：1开启hasLayout
<style>
#box1{
border:10px blue solid;
overflow:hidden;
zoom:1;
}
#box2{
width:200px;
height:200px;
background-color:yellow;
float:right;
}
#bottombox{
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
<div id="bottombox"></div>
</body>
3）利用clear属性，为父元素的：after尾元素清除浮动(IE6不支持)
<style>
#box1{
border:10px blue solid;
}
#box2{
width:200px;
height:200px;
background-color:yellow;
float:right;
}
#bottombox{
height:200px;
background-color:red;
}
.clearfix:after{
content:"";
display:block;
clear:both;
}
.clearfix{
<!--IE6还是要用zoom -->
zoom:1;
}
</style>
</head>
<body>
<div id="box1" class="clearfix">
<div id="box2"></div>
</div>
<div id="bottombox"></div>
</body>
4.CSS盒子模型
内边距：
padding:上 右 下 左
padding-left、padding-right、padding-top、padding-bottom边框：
边框样式：border-style
double:双线 dotted:虚线
单边样式：border-top-style border-left-style border-right-style border-bottom-style
边框宽度：border-width
单边宽度：border-top-width border-left-width border-right-width border-bottom-width
边框颜色：border-color
单边颜色： border-top-color border-left-color border-right-color border-bottom-color-
外边距
margin：上 右 下 左
margin-left、margin-right、margin-top、margin-bottom
外边距叠加：
当两个div，一个设置margin-bottom:20px
一个设置margin-top:20px
外边距不是40，而是20。
5.CSS常用操作
- 对齐操作
1）使用margin属性进行水平对齐
//使div居中
margin-left:auto;
margin-right:auto;
//上面代码等同于
margin:0px auto;
2）使用position属性进行左右对齐
//向右对齐
position:absolute;
right:0px;
//向左对齐
position:absolute;
left：0px;
3）使用float属性进行左右对齐
//向右对齐
float:right;
//向左对齐
float:left;
尺寸操作
width、height。
max-width、max-height。
min-width、min-height。
line-height显示元素
1）display
inline:将该元素显示为内联元素
block:将该元素显示为块元素
inline-block:将该元素显示为内联块元素
none:此元素不会被显示
2）visibility
设置元素是否可见
hidden
visible
3）visibility:hidden和display:none区别
display:none,元素从页面中移除，不再占据页面中的位置。
visibility:hidden，仅仅隐藏该元素，依然在页面中占据空间。
- 设置指针类型
cursor：设置鼠标在元素上的样子
