伪类选择器
伪类专门用来表示元素的一种的特殊的状态
比如：访问过的超链接，普通的超链接，获取焦点的文本框
当我们需要为处在特殊状态的元素设置样式时，就可以使用伪类
给链接定义的样式：
- 未访问的链接（浏览器是通过历史记录来判断是否访问过）
a:link
- 访问过的链接（只能设置字体颜色）
a:visited
- 鼠标滑过的链接（可以为其他元素设置，IE6不支持对超链接以外的元素设置）
a:hover
- 正在点击的链接（可以为其他元素设置，IE6不支持对超链接以外的元素设置）
a:active
- 获取焦点（可以为其他元素设置，IE6不支持对超链接以外的元素设置）
:focus
例子：
input:focus{
background-color:yellow;
}
- 选中的元素
::selection
例子：
/*
兼容大部分浏览器
*/
p::selection{
background-color:orange;
}
/*
兼容火狐浏览器
*/
p::-moz-selection{
background-color:orange;
}
伪元素：
使用伪元素来表示元素中的一些特殊的位置
- 首字母
:first-letter
例子：
p:first-letter{
color:red;
font-size:20px;
}
- 首行
:first-line
例子：
p:first-line{
color:yellow;
}
- 最前边的部分
:before（一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容）
例子：
p:before{
content:"我是CSS添加的，内容无法选中";
color:red;
}
- 最后边的部分
:after
例子：
p:after{
content:"我是CSS添加的，内容无法选中";
color:yellow;
}
属性选择器
给任何标签指定title属性
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
<p title="我是title属性">我是一个段落标签<p>
为所有具有title属性的p元素，设置一个背景颜色
可以根据元素中的属性或属性值来选取指定的元素
语法：[属性名] 选取含有指定属性的元素
[属性名=属性值] 选取含有指定属性值的元素
[属性名^=属性值] 选取属性值以指定内容开头的元素
[属性名$=属性值] 选取属性值以指定内容结尾的元素
[属性名*=属性值] 选取属性值包含指定内容的元素
例子：
p[title]{
color:yellow
}
p[title="hello"]{
color:yellow
}
p[title^="ab"]{
color:yellow
}
p[title$="c"]{
color:yellow
}
p[title*="c"]{
color:yellow
}
子元素的伪类：
- 第一个子元素
:first-child
例子：
p:first-child{
color:red;
}
- 最后一个子元素
:last-child
- 任意位置的子元素
:nth-child（该选择器后边可以指定一个参数，指定要选中第几个子元素）
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
例子：
p:nth-child(1){
color:red;
}
p:nth-child(even){
color:yellow;
}
p:nth-child(odd){
color:yellow;
}
兄弟元素选择器：
选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
选中后边所有的兄弟元素
语法：前一个 ~ 后一个
例子：
div~p{
color:red;
}
否定伪类：
从选中的元素中剔除出某些元素
语法：:not(选择器)
例子：
p:not(#p1){
color:red;
}
选择器优先级：
优先级
内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
通配符选择器 0
继承的样式 没有优先级
伪类的优先级：
link - visited - hover - active
长度单位：
像素px：
- 像素是我们在网页中使用的最多的一个单位
一个像素就相当于我们屏幕中的一个小点
我们的屏幕实际上就是由这些像素点构成的
- 不同显示器一个像素的大小也不相同
显示效果越好越清晰，像素越小
百分比%：
- 也可以将单位设置为一个百分比的形式
这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，
子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
em：
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
字体分类：
serif 衬线字体
sans-serif 非衬线字体
字体分类：
字体：
font-family:微软雅黑,宋体;
文本样式：
font-style:italic; 斜体
文本加粗：
font-weight:bold;
行高：
line-height
行间距=行高-字体大小
文本对齐方式：
text-align
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
首行缩进：
text-indent:2em;
*盒子模型：
组成部分：
- 内容区content
- 内边距padding
- 边框border
- 外边距margin
.box1{
/*
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
*/
width:100px;
height:100px;
background-color:#bfa;
/*
为元素设置边框
要为一个元素设置边框必须指定三个元素
border-width：边框的宽度
可以分别指定四个边框的宽度，顺序为上右下左
border-color：边框的颜色
border-style：边框的样式
none 默认值，没有边框
solid 实现
dashed 虚线
*/
border-width：10px;
border-color：red;
border-style：solid;
/*
简写顺序：
颜色 样式 宽度
*/
border: red solid 10px;
/*
padding内边距
*/
padding:10px;
/*
margin外边距
设置auto给水平方向的margin
可以用来设置元素在父元素中居中
*/
margin:0 auto;
/*
垂直外边距的重叠
- 在网页中垂直方向的相邻边距会发送外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
*/
.box2{
width:100px;
height:100px;
background-color:green;
margin-bottom:200px;
}
.box3{
width:100px;
height:100px;
background-color:red;
margin-top:100px;
}
/*
浏览器默认样式，为很多元素默认设置了一些margin和padding
我们不需要，所以在编写样式之前需要将所有margin和padding设置为0
清除浏览器默认样式
*/
*{
margin:0;
padding:0;
}
/*
内联元素的盒子
不能设置width和height
可以设置水平方向内边距和边框，会影响布局
可以设置垂直方向内边距和边框，但是不会影响布局
支持水平方向的外边距，水平方向外边距求和，不会重叠
不支持垂直方向的外边距
*/
span{
padding:50px 100px;
border:1px blue solid;
margin:0 10px;
}
/*
内联元素与块元素相互转换
通过display修改元素的类型
none：隐藏元素，并且不占位置
inline：作为一个内联元素显示
block：作为一个块元素显示
inline-block：作为一个行内块元素显示
- 使一个元素既有行内元素又有块元素的属性
- 既可以设置宽高，又可以独占一行
通过visibility规定元素是否可见
visible：默认，可见
hidden：不可见，但是仍占用位置
*/
span{
width:100px;
height:100px;
display:inline-block;
visibility:hidden
}
/*
子元素默认是存在于父元素的内容区中
理论上讲，子元素的最大内容可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，溢出的内容
通过overflow可以设置父元素如果处理溢出的内容
- visible：默认，不对溢出内容做处理
- hidder：溢出的内容会被修剪，不会显示
- scroll：溢出的内容会被修剪，但会显示双方滚动条，滚动查看内容
- auto：自动添加滚动条，需要时自动添加滚动，不需要时去掉滚动
*/
.box2{
width:100px;
height:100px;
overflow:auto;
}
/*
文档流
处在网页的最底层，表示的是一个页面中的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1. 独占一行，会自上向下排列
2. 默认宽度是父元素的100%
内联元素
1. 只占用自身大小，默认从左向右排列
2. 宽度都被自身内容撑开
*/
/*
浮动：
块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，需要浮动
使用float元素
- none：默认值，元素默认在文档流中排列
- left：脱离文档流，左浮动
- right：脱离文档流，右浮动
当为一个元素设置浮动后(float属性是一个非none的值)
元素会立即脱离文档流，元素脱离文档流后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或这是右上漂浮
直到遇到父元素的边框或其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素，最多一边对齐
特点：
1. 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围（可以设置文字环绕图片效果）
2. 元素被设置浮动后，脱离文档流，块元素设置的高度和宽度都被内容撑开
3. 内联元素设置浮动后，会脱离文档流变为块元素
*/
.box1{
width:100px;
height:100px;
background-color:red;
float:left;
}
.box2{
width:100px;
height:100px;
background-color:green;
float:left;
}
/*
*浮动引起高度塌陷问题
在文档流中，父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高
但是当为子元素设置浮动以后，子元素完全脱离文档流
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
所以在开发中一定要避免出现高度塌陷问题
原理：
根据W3C的标准：在页面中元素有一个隐含的属性叫做Block Formatting Context 简称BFC，块级格式化环境，该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会具有如下的特性：
1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC：
1. 设置元素浮动
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，导致下边元素上移
2. 设置元素绝对定位
3. 设置元素为inline-block
- 会导致宽度丢失，不建议使用
4. 将元素的overflow设置为一个非visible的值(推荐使用)
- IE6及以下浏览器中不支持
兼容IE6方法：
IE6具有另一个隐含的属性叫做hasLayout
直接将元素的zoom设置为1开启hasLayout
解决方案一：
给父元素设置两个属性：overflow:hidden zoom:1
解决方案二：（不好处就是增添了多余的结构）
可以直接在高度塌陷的父元素的最后，添加一个空白的div，并设置clear属性
clear用来清除其他浮动元素对当前元素的影响
none：默认值，不清楚浮动
left：清除左侧浮动元素对当前元素影响
right：清除右侧浮动元素对当前元素影响
both：清除两侧浮动元素对当前元素影响
清除对它影响最大的元素
给浮动的元素下面的元素设置清楚浮动，不会受到浮动元素的影响
解决方案三：（最终解决方案）
通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
这样做和添加一个div原理一样，并且不会添加多余div
.clearfix:after{
/*添加一个内容*/
content:"";
/*转换为一个块元素*/
display:block;
/*清除两侧浮动*/
clear:both;
}
/*兼容IE6*/
.clearfix{
zoom:1;
}
*/
}
定位：
指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position来设置元素的位置
可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位(绝对定位的一种)
1. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相当于其定位位置的左侧偏移量
right：元素相当于其定位位置的右侧偏移量
top：元素相当于其定位位置的上边偏移量
bottom：元素相当于其定位位置的下边偏移量
2. 相对定位是相对于元素在文档流中原来的位置进行定位
3. 相对定位的元素不会脱离文档流
4. 相对定位会使元素提升一个层级
5. 相对定位不会改变元素的性质，块还是块，内联还是内联
div{
position:relative;
left:100px;
top:200px;
}
1. 开启绝对定位会使元素脱离文档流
2. 开启绝对定位以后，不设置偏移量，位置保持不变
3. 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4. 绝对定位会使元素提升一个层级
5. 绝对定位会改变元素的性质，内联变成块，块元素的宽高默认都被内容撑开
span{
position:absolute;
left:200px;
width:200px;
height:200px;
}
1. 固定定位也是一种绝对定位，大部分特定与绝对定位相同
不同的是：固定定位永远都会相对浏览器窗口进行定位
2. 固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动
3. IE6不支持固定定位
div{
position:fixed;
left:0px;
top:0px;
}
元素的层级：
1. 如果元素的层级相同，下面的元素会盖住上面的元素
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
2. 层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
3. 父元素的层级再高，也不会盖住子元素
opactiy：用来设置元素背景的透明
IE8及以下的浏览器中不支持
需要一个0-1之间的值
0表示完全透明
1表示完全不透明
0.5表示半透明
div{
width:200px;
height:200px;
position:relative;
z-index:20;
opactiy：0.5;
/*
IE8及以下属性支持代替
0-100之间的值
*/
filter:alpha(opactiy=50);
}
背景：
background-color：背景颜色
background-image：背景图片
background-image:url(img/2.jpg);
如果背景图片大于元素，，默认显示背景图片左上角
如果背景图片与元素一样大，则背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
background-repeat：用于设置背景图片的重复方式
repeat：背景图片双方式重复平铺
no-repeat：背景图片不会重复，有多大显示多大
repeat-x：背景图片水平方向重复
repeat-y：背景图片垂直方向重复
background-position：可以调整背景图片在元素中的位置
方式一：可以使用top right left bottom center中的两个值
如果只给出一个值，则第二个值默认为center
方式二：第一个值水平位置，第二个值垂直位置
如果指定的是一个正值，图片会向右或向下便宜
如果指定的是一个负值，图片会向左或向上便宜
background-attachment：设置背景图像是否随着页面滚动
scroll：默认值，随着页面滚动
fixed：固定不滚动
背景简写属性：
background属性来同时设置背景相关属性
没有顺序要求，也没有数量要求，不写属性使用默认值
例子：
background:#bfa url(img/3.png) center center no-repeat fixed;
雪碧图：图片整合技术（CSS-Sprite）
为了解决图片在加载和显示过程会有一段时间，背景图片无法显示导致出现闪烁的情况
将多张图片整合为一张图片，通过background-position来切换要显示的图片的位置。
优点：
1. 将多个图片整合为一张图片，浏览器只需要发送一次请求，可以同时加载多个图片
2. 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
表格：
用来表示一些格式化的数据的，比如：课程表、工资条
在HTML中，使用table标签来创建表格，tr表示表格中的行，th表示表头，居中加粗
多少行就多少个tr，td来创建单元格，有几个单元格就有几个td
<table border="1px">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
/*table与td边框之间默认有一个距离*/
border-spacing:0px;
/*设置表格边框合并*/
border-collapse:collapse;
长表格：
分为三个部分，表头、表格的主体、表格的底部
在HTML中提供了三个标签：
thead：表头
tbody：表格主体
tfoot：表格底部
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
重点：即可解决高度塌陷，又可以确保父子元素垂直外边距重叠问题
.clearfix:before,
.clearfix:after{
content:"";
display:table;
clear:both;
}
.clearfix{
zoom:1;
}
表单：
网页中表单的作用是用来将用户信息提交给服务器的
使用form标签来创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
<!--
form创建的仅仅是一个空白的表单
我们还需要向form中添加不同的表单项
-->
<form action="target.html">
<!--
在表单中可以使用fieldset来为表单项进行分组，
可以将表单项中的一组放到一个fieldset种
-->
<fieldset>
<!--在fieldset可以使用legend子标签，来指定组名-->
<legend>用户信息</legend>
<!--
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
查询字符串的格式：
属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框默认值显示
-->
<!--
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
-->
<label for="un">用户名</label>
<input id="un" type="text" name="username" value="我是value"/>
<!--
密码框
使用input创建一个密码，type属性值是password
-->
<label for="pwd">密码</label>
<input id="pwd" type="password" name="password" />
<!--
单选按钮
使用input创建一个单选按钮，type属性值是radio
单选按钮通过name属性进行分组，name属性相同是一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望单选按钮或者多选框中指定默认选中的选项，
则可以在希望选中的项中添加设置checked属性值为checked
-->
性别<input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female"/><label for="female">女</label>
</fieldset>
<fieldset>
<legend>用户爱好</legend>
<!--
复选框按钮
使用input创建一个单选按钮，type属性值是checkbox
-->
爱好<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="lq"/>篮球
<input type="checkbox" name="hobby" value="ymq"/>羽毛球
<!--
下拉列表
使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中
当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
-->
你喜欢的明星
<select name="star" multiple="multiple">
<!--
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
-->
<optgroup label="女明星">
<!--在下拉列表中使用option标签来创建一个一个列表项-->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">赵本山</option>
<option value="ldh">刘德华</option>
<option value="hxm">黄晓明</option>
</optgroup>
</select>
</fieldset>
<!--
使用textare创建一个文本域
-->
自我介绍<textare name="info"></textare>
<!--
提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮，type属性值是submit
在提交按钮中可以通过value属性来指定按钮的文字
-->
<input type="submit" value="注册"/>
<!--
可以创建一个重置按钮，点击重置按钮以后表单中的内容将会恢复默认值
-->
<input type="reset" value="重置"/>
<!--
创建一个普通的button按钮，没有任何功能，只能被点击
-->
<input type="button" value="普通按钮"/>
<!--
除了使用input，还可以使用button标签来创建按钮
这种方法和使用input类似，只不过由于它是成对出现的标签
使用起来更加灵活
-->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
框架集：
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面
框架集可以同时引入多个页面，内联框架只能引入一个页面
在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签
<!--
rows：指定框架集中的所有的框架，一行一行的排列
cols：指定框架集中的所有的框架，一列一列的排列
这两个属性frameset必须选择其一，并且需要在属性中指定每一部分所占的大小
frameset中也可以在嵌套frameset
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，
而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要
发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe
-->
<frameset rows="30%,*,30%">
<!--
在frameset中使用frame子标签来指定要引入的页面
引入几个页面就写几个frame子标签
-->
<frame src="01.表格.html"/>
<frame src="02.表格.html"/>
<!--嵌套frameset-->
<frameset cols="30%,50%,*">
<frame src="03.表格.html"/>
<frame src="04.表格.html"/>
<frame src="05.表格.html"/>
</frameset>
</frameset>
在IE6中对图片格式png24支持度不高，
如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
1.可以使用png8来代替png24，但是图片的清晰度会有所下降
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
然后写一下简单的JS代码，来处理该问题
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，
而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决问题
CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别，
而在其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码
条件Hack只对IE浏览器有效，其他的浏览器都会将它识别为注释
IE10及以上的浏览器已经不支持这种方式
<!--以下内容只会出现在IE6中-->
<!--[if IE 6]>
<p>请远离IE6</p>
<![endif]-->
<!--以下内容出现在IE9以下版本中-->
<!--[if lt IE 9]>
<p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->
2354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
