CSS3学习笔记
1.CSS样式表
1.1 概述
CSS样式表由选择器（selector）与样式规则（rule）组成，基本格式如下：
h1 { color:red; }
其中h1为选择器，color:red;为样式规则
选择器可以是html标记，class属性或id属性；
样式规则是用大括号{}括起来的部分，每个规则由属性和值组成，属性和值之间用：
组成
1.2 选择器
1. 标记选择器
使用html标记名称作为选择器，可以将html文件中所有的相同的标记都应用同一种样式，如：
div {font-size: 16px; color: #ffffff;}
2. 全局选择器（*）
使用“*”字符来选择所有标记，如：
*{ font-size: 16px; color: #ffffff;}
3. Class选择器
首先要在html标记中加入class属性，class属性值自定义，尽量不要使用html标记名称作为class名称，以免混淆。接着只要在CSS样式中加入class选择器声明就可以了。如：
.class 属性名 {样式规则;}
注：如果希望仅在某一种标记上应用Class选择器的样式，可以在Class选择器之前添加上标记名称，如：
标记名称.class属性名 {样式规则;}
4. ID选择器
要使用id选择器之前，必须要在html笔记中添加id属性，id属性的名称自定义，但是在当前文档中保持唯一，接下来只要在CSS样式中添加id选择器声明就可以了，声明格式如下：
# id属性名{样式规则;}
5. 属性选择器
属性（attribute）选择器属于高级筛选，用来筛选标记中的属性，例如想要制定超链接标记<a>的背景颜色为黄色，但是仅仅应用于有target属性的组件，这时属性选择器就派上用场了具体使用方法如下：
a[target] {background-color:yellow;}
属性（attribute）选择器还可以让我们筛选属性，筛选方式有6种：
| [attribute=”value”] |
属性等于value |
| [attribute~=”value”] |
属性包含完整value |
| [attribute|=”value”] |
属性等于vlaue或以value-开头 |
| [attribute^=”value”] |
属性开头有value |
| [attribute$=”value”] |
属性最后有value |
| [attribute*=”value”] |
属性中出现vlaue |
1.3 应用CSS样式表
1. 行内声明（Inline），就是直接将CSS样式写在HTML标记中；
2. 内嵌声明（Embedding），就是将CSS样式表放在HTML文件的表头区域，也就是<head></head>标记中
3. 链接外部样式文件（Linking），现将CSS样式表存储为独立的文件（*.css）,然后再在html文件中以链接的方式声明；
2.CSS基本语法
2.1 文字样式
文字样式不外乎文字颜色、字体、文字大小、文字特效等，虽然HTML本身含有控制文字外观的标记，不过样式的可选性比较少
| 属性 |
属性名称 |
设置值 |
备注 |
| color |
字体颜色 |
颜色名称 十六进制 RGB码 |
十六进制码通常为6位，如果前两位、中间两位和后两位都一样，可以使用3位码的形式，如#00ff88,可以使用#0f8 |
| font-family |
字体样式 |
字型名称 |
font-family:”宋体”,”楷体”，”幼圆”；font-family:用来指定字体，可以同时列出多种字体，中间用逗号隔开，浏览器会按照顺序查找系统中符合的字体，如果找不到第一个就找第二个，依次查询，完全找不到，就使用系统默认字体，字体名称最后使用双引号括起来 |
| font-size |
字体大小 |
数值+百分比（%） 数值+单位（pt,px,em,ex） |
常见的单位是cm、mm、pt、px、em和%，默认值是12pt |
| font-style |
文字斜体 |
normal(普通) oblique（斜体） |
italic与oblique效果是相同的 |
| font-weight |
文字粗体 |
normal（普通） bold（粗体） bolder（超粗体） lighter（细体） |
font-weigth设置值可以输入100~900之间的数值，数值越大，字体越粗，normal相当于数值400，bold:相当于700； |
| 单位 |
说明 |
范例 |
| cm |
以厘米为单位 |
font-size:1cm |
| mm |
以毫米为单位 |
font-size:10mm |
| px |
以屏幕的像素（pixel）为单位 |
font-size:10px |
| pt |
以点数（point）为单位 |
font-size:12pt |
| em |
以当前字号为单位 如果单签字号为10pt，则1em=10pt |
font-size:10em |
| % |
以当前字号的百分比 |
font-size:80% |
2.2 段落样式
| 属性 |
属性名称 |
设置值 |
备注 |
| text-align |
字体水平对齐 |
left center right justify |
justify左右边界对齐：让文字在左右边界范围内平均对齐 |
| text-indent |
首行缩进 |
数值+百分比（%） 数值+单位 |
用来设置每一段前方要留多少空间 |
| letter-spacing |
字符间距 |
normal 数值+单位（pt、px、em） |
letter-spacing用来设置字符（以单词或单个汉字为单位）间距，输入负值字符间距就会变得紧密。另外属性word-spacing用来设置引文单词（以字母为单位）的间距 |
| line-height |
行高 |
数值+单位 |
单行时，line-height和height如果值相同，则可以保持一个文字垂直居中 |
| word-wrap |
是否换行 |
break-word |
|
2.3 文字效果样式
网页文件时，可能会遇到需要上标、下标或者文字添加下划线之类的特殊效果，CSS也提供了这样的属性
| 属性 |
属性名称 |
设置值 |
备注 |
| vertical-align |
垂直对齐 |
baseline（一般位置） super（上标） sub（下标） top（顶端对齐） middle（垂直居中） bottom（底端对齐） |
vertical-align:设置元素的垂直对齐方式 |
| text-decoration |
文字装饰样式 |
none underline（下划线） line-through（删除线） overline（上划线） |
|
| text-transform |
转换字母大小写 |
none lowercase uppercase capitalize |
text-transform:用来设置英文的大小写，capitalize:为首字母大写，其余都小写；lowercase:全部都小写；uppercase：全部都大写；none：不做任何改变 |
| text-shadow （IE不支持） |
增加阴影效果 |
使用格式如下： text-shadow：h-shadow v-shadow blur color; |
h-shadow:水平方向阴影大小； v-shadow:垂直方向阴影大小； blur:阴影的淡化程度（不写标示不使用模糊效果）； color：阴影颜色； 如：text-shadow：1px 2px 3px red;
|
2.4 背景控制样式
网页背景关系着网页是否整体美观，是重要的设置之一，网页可以用颜色当背景、也可以用图片当背景下面总结一下CSS样式中关于背景控制的属性
2.4.1 背景颜色
| 属性 |
属性名称 |
设置值 |
备注 |
| background-color |
背景颜色 |
颜色名称 十六进制码 RGB码 |
red; #FFFF66 rgb(255,255,0) |
2.4.2 背景图片
| 属性 |
属性名称 |
设置值 |
备注 |
| background-image |
背景图片 |
url（图片文件相对路径） |
background-image:属性可以使用的图片格式有JSG、GIF和PNG3种，CSS3支持多重背景，语法相当简单，只要加上一个url指定图片路径，并用逗号将两个url分隔就可以了，如： background-image:url(a.jpg),url(b.jpg);这样a.jpg和b.jpg图片就会左右组合成一个背景图片了 |
| background-repeat |
是否重复显示背景图片 |
repeat repeat-x repeat-y no-repeat |
repeat：重复并排（包括水平和垂直方向）显示，这是默认值； repeat-x：水平方向重复显示； repeat-y：垂直方向重复显示； no-repeat：不重复显示； |
| background-attachment |
背景图片是否随网页滚动条滚动 |
fixed（固定） scroll（随滚动条滚动） |
fixed：当网页滚动时，背景图片固定不动； scroll：当网页滚动时，背景图片会随滚动条滚动，这是默认值。 |
| background-position |
|
x% y% x y [top,center,bottom] [left,center,right] |
background-position：设置必须要有两个值，分别是x值与y值，x与y可以使坐标数值，或者直接输入位置。如：background-position：20px 50px;表示水平方向距离左上角20px，垂直方向距离左上角50px.当然也可以：background-position：20px 50%；混合使用。如果background-position：20px 50px;省略了y的值，则垂直方向会以50%为默认值。 如果不想计算坐标值，则可以直接输入位置，只要输入水平方向和垂直方向的位置就可以了，水平位置有：left、center、right，垂直位置有top、center、bottom如： background-position：center center； |
| Background
|
综合应用 |
|
background：是一个比较特别的属性，通过它可以一次设置好所有的背景属性，格式为：background：背景属性值，各属性值间没有顺序，只要以空格分开即可。 |
| background-size |
设置背景尺寸 |
length（长度） percentage（百分比） cover（缩放到最小边符合组件） contain（缩放到元素完全符合组件） |
background-size：的值可以使长和宽、百分比、cover和contain； cover会让背景图片符合组件大小并充满组件，contain让背景图片符合组件大小，但不超出组件，而两者都不会改变图形长宽比。 如：background-size：”60px 80px”; background-size:100% 100%; background-size:cover; background-size:contain; |
| background-origin |
设置背景原点 |
padding-box border-box content-box |
|
2.5 设置背景渐变
CSS3可以让背景产生渐变效果，渐变的属性有两种，即：linear-gradient（线性渐变）和radial-gradient（圆形渐变），语法如下：
linear-gradient(渐变方向, 色彩1, 位置1, 色彩2, 位置2……)
对于线性渐变的方向，只要设置起点即可，例如top表示由上至下，left表示由左到右，top left表示由左上到右下，也可以用角度来表示，例如45度表示左下到右上，-45度表示左上到右下。
gradient样式尚未成为CSS标准，为了让各个浏览器都能够正确显示，使用时必须在前端加上浏览器的识别（Prefix）,也因为尚未成为标准，所以各个浏览器linear-gradient属性的参数还会稍有不同，下面列出各浏览器的识别方式。
FireFor: 以 –moz- 识别
Google Chrome /Safari：以-webkit- 识别
Opera：以-o- 识别
IE9+ 以-ms- 识别
这样语法就变得相当复杂了，这时可以借助一些工具来生成gradient语法，只需要在网页上按几个按钮，就可以产生gradient语法了，相当方便，工具名称为：Ultimate CSS Gradient Generator，具体网址地址为：http://www.colorzilla.com/gradient-editor/
2.6 边界与边框
想利用CSS来控制网页组件，最重要的就是控制边界、边界间距以及边框等属性。三者的关系如下图：
|
Margin(边界)
|
|
Border（边框）
|
|
Padding（边界间距）
|
|
HTML组件 |
2.6.1 边界
边界（margin）在边框（border）的外围，用来设置组件的边缘距离，共有上、下、左、右4边属性可以设置，我们可以对这4边逐一设置，也可以一次制定好边界的属性值，说明如下：
margin-top: 上边界
margin-right: 右边界
margin-bottom: 下边界
margin-left: 左边界
这4个边界的语法都一样，设置值可以是长度单位（px、pt）、百分比（%）或auto，auto为默认值，语法如下：
margin-top:设置值；
也可以使用margin属性一次性设置好4个边，其属性值必须按照上、右、下、左顺时针的顺序排列，中间用空格隔开。如果仅出入两个值，则第一个值表示上下边，第二个表示左右边，如果设置为三个值，则第一个值表示上、第二个值表示左右边，第三个值表示下边。如：
margin: 5px; 表示4个表界都是5px；
margin: 5px 10px; 表示上下是5px 左右为10px
margin: 5px 10px 8px; 表示上是5px 左右是10px 下是8px
margin: 5px 6px 7px 8px; 表示上是5px 右是6px 下是7px 左是8px；
注：想要组件水平居中，最简单的办法就是上下设置为0，左右根据浏览器大小自行调整，即：margin: 0 auto;
2.6.2 边框
边框（border）属性包含边框的宽度、样式、颜色及圆角等，其中圆角属性是CSS3新增的功能。
| 属性 |
属性名称 |
设置值 |
备注 |
| border-style |
边框样式 |
none(默认值) solid（实线） double（双实线） groove（3D凹线） ridge（3D凸线） inset（3D嵌入线） outset（3D浮出线） dotted:点线 |
border-style属性只输入一种样式的话，表示组件4边都应用相同的样式，也可以输入4个值，让4边各应用不同的样式，输入的值必须按照上、右、下、左顺序排列。 |
| border-top-style border-right-style border-bottom-style border-left-style |
上下左右四边的样式 |
同border-style |
|
| border-width |
边框宽度 |
宽度数值+单位 thin（薄） thick（厚） medium（中等，默认值） |
border-width属性设置值可以是长度单位（px、pt）、百分比（%）；输入一个值，表示4边都是这个值，输入4个值，必须要按照上、右、下、左的顺序排序 |
| border-top-width border-right-width border-bottom-width border-left-width |
上下左右四边的宽度 |
同border-width |
|
| border-color |
边框颜色 |
颜色名称 十六进制（HEX）码 |
属性的设置值可以是颜色名称、十六进制码或RGB码；输入一个值，表示4边都是这个值，输入4个值，必须要按照上、右、下、左的顺序排序 |
| border-top-color border-right-color border-bottm-color border-left-color |
上下左右四边的颜色 |
同border-color |
|
| border |
综合设置 |
|
如果四个边的属性都一样，则可以一次性声明边框样式、边框宽度以及边框颜色，这3种属性并没有先后顺序，只要以空格分隔开即可。 |
| border-radius |
圆角边框 |
长度（px）或百分比（%） |
border-radius属性的设置值可以是长度单位（px、pt）、百分比（%）； 如果只有一个值，则表示四个边应用相同的宽度； 也可以使用四个值，表示四个边的值不同，四个值的排列顺序分别是：上左、上右、下左、下右； 输入两个值会产生对称圆角边距； |
| border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
上下左右四边圆角 |
长度（px）或百分比（%） |
|
| border-image |
花边框线 |
border-image：source slice width repeat； |
border-image可以做出页面花边的效果； source：制定图片路径（必填），url (border.png); slice：切出图片使用的边框线（必填）； width：图片宽度（可省略）； repeat：图片填充方式（可省略），设置值有stretch、repeat和round； stretch：把图片拉伸到整个边框区域； repeat：重复填充； round：重复填充并自动调整图片大小；如： border-image: url(border.png) 35 25 25 15; |
2.6.3 边界间距
边界间距（padding）是指边界（border）内侧与HTML组件边缘的距离，共有上下左右四边属性可供设置，我们可以对这四个边逐一设置，也可以一次制定好所有边界间距的属性值。
padding-top: 上边界间距
padding-right: 右边界间距
padding-bottom: 下边界间距
pading-left: 左边界间距
这四个边界设置语法都相同如：
padding-top设置值可以是长度单位（px、pt）、百分比（%）或auto，auto为默认值，语法如下：
padding-top:设置值;
如果要一次性设置好边界间距的属性值，则可以使用属性padding设置四个属性值，四个值的排列顺序依次是：上、右、下、左。如：
padding: 上边界间距右边界间距下边界间距左边界间距;
2.7 组件定位
CSS语法中有几个与位置（Position）相关的属性，可以定义组件在网页中排列的位置，如果再加上javascript语句，就能动态改变这些属性值，图片就可以再网页上随意移动了。
2.7.1 一般定位
| 属性 |
属性名称 |
设置值 |
备注 |
| position |
设置组件位置的排列方式 |
absolute relative static |
position通常与<div>标记搭配使用，用来将组件精确定位，定位方式有两种，即absolute（绝对寻址）和relative（相对定位）； l absolute（绝对寻址）：以使用position定位的上一层组件（父组件）的左上角点为原点进行定位。如果找不到有position定位的上一层组件，则已<body>左上角点为原点来定位。 l relative（相对定位）：以组件本身的左上角点为原点定位。 |
| width |
指定组件宽度 |
宽度数值 |
|
| height |
指定组件高度 |
高度数值 |
|
| left |
指定组件与左边界的距离（X坐标） |
距离数值 |
left用来指定组件与左边界的距离，也就是x坐标，top用来指定组件与上边界的距离，也就是y坐标， 坐标值的单位可以是长度（px、pt）、百分比（%），长度从左上角向右下角计算。X方向越往右值越大，Y方向越往下值越大。 |
| top |
指定组件与上边界的距离（Y坐标） |
距离数值 |
|
| overflow |
超出边界的显示方式 |
visible hidden scroll auto |
当组件内容超过组件的长度与宽度时，可以设置内容的显示方式，设置值有下面4种： visible: 不管组件长度，内容完全显示； hidden: 超出长度的内容就不显示； scroll: 无论内容会不会超出长宽，都加入滚动条； auto: 根据情况决定是否显示滚动条； |
| visibility |
设置是否显示 |
visible hidden inherit |
|
2.7.2 图层定位
除了可以用来设置网页样式外，CSS还可以利用图层原理让组件重叠在一起。通常我们使用javascript来控制图层定位的组件，让图组件可以任意移动位置，例如随着鼠标移动的图片，叠字效果等。
图层定位必须要利用z-index属性来设置组件的层次，z-index的作用是当组件相互重叠时，可以指定组件之间的上下层次顺序。z-index数值越大，层次就越高，也就是说z-index数值大的组件会排在数值小的组件上面。z-index的语法如下：
z-index 层次数值
注：z-index是定位语法，必须与positon属性一起使用。如果两个组件的z-index值相同，那么浏览器会以程序编写的顺序一层层叠上去，因此程序后写者会位于上方（back-to-front）
2.7.3 浮动（Float）
| float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念： · 文档流：在html中文档流即为元素从上至下排列的顺序。 · 脱离文档流：元素从正常的排列顺序被抽离。 · 最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。 float造成的影响1. 对其父元素的影响对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下图所示。 #wrapper { padding: 20px; border: 1px solid red; width: 350px; } .floatL { width: 100px; height: 100px; border: 1px solid #000; float: left; } .floatR { width: 100px; height: 100px; border: 1px solid #000; float: right; } .blue {background: #6AA;} .red {background: #A66;} //html <div
id="wrapper">
<div
class="floatL blue">AAAAAAAA</div>
</div>
2. 对其兄弟元素（非浮动）的影响1. 如果兄弟元素为 块级元素 在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。 需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug” //CSS，其他的样式按照上面给出的，此处就不再重复了 .block { width: 200px; height: 150px; border: 1px solid #000; background: #CCC; } <div
id="wrapper">
<div
class="floatL blue">AAAAAAAA</div>
<div
class="block">BBBBBBBBB</div>
</div>
IE 6：
IE 7：
2. 如果如果兄弟元素为 内联元素 则元素会环绕浮动元素排列。 <div
id="wrapper">
<div
class="floatL blue">AAAAAAAA</div> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div>
<div
id="wrapper">
<div
class="floatL blue">AAAAAAAA</div>
<img
src="XXX.png">
</div>
3. 对其兄弟元素（浮动）的影响0.同一个方向的浮动元素： 当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，可以用这样一个形象的比喻来描述： 在一个购票中心里，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。但这条购票队列还是位于当前的购票中心中 ，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。 <div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
<div
3 class="floatL blue">BBBBBBBBBB</div>
</div>
1.反方向的浮动元素： 正如上面的比喻所述，我们可以假设购票中心里左右两边的各有一个购票点（如图,这里我们把一个div看做一个购票者），左浮动的队列可看做左购票点的购票队列，反方向的浮动（即右浮动）则是右边购票点的购票队列，所以在购票中心足够宽的时候两条队列的人群是互不受影响的。因此他们在同一条水平线上 <div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatR blue">BBBBBBBBBB</div>
</div>
<div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatR blue">BBBBBBBBBB</div>
<div
class="floatR blue">BBBBBBBBBB</div>
</div>
<div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatR blue">BBBBBBBBBB</div>
<div
class="floatR blue">BBBBBBBBBB</div>
</div>
4. float对自身元素的影响float对象将被视作块对象(block-level)，即display属性等于block。 5. float对子元素的影响我们知道当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。 //这里我们去掉#wrapper的固定宽度,并在其外部增加一个固定宽度的div,以便更好地展示 <div
class="container">
<div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
</div>
</div>
<div
class="container">
<div
id="wrapper"
style="float:left;">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
</div>
</div>
.block { width: 250px; height: 50px; border: 1px solid #000; background: #CCC; } <div
class="container">
<div
id="wrapper"
style="float:left;">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
<div
class="block"></div>
</div>
</div>
.block
{ width:
150px;
height:
150px;
border:
1px solid #000;
background:
#CCC;
}
6. float对父元素之外的元素的影响0.父元素之外的非浮动元素 从上面可知，当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，也就是父元素的宽高都为0。并且其父元素之外的非浮动元素也会无视该浮动元素，浮动元素仿佛到了另外一个世界里。 //CSS .outer { height:150px; width: 350px; border:1px solid blue; } //HTML <div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
</div>
<div
class="outer"></div>
1.父元素之外的浮动元素 当浮动元素的父元素之外的元素为浮动元素时，他们仿佛去到了同一个世界里。 <div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
</div>
<div
class="outer"
style="float:left;"></div>
两个元素的浮动方向相反时： //CSS,这里我们在他们外面增加一个固定宽高的div以便展示，否则右浮动的元素会浮动到body的右边界 .container { width:650px; height: 250px; border: 1px solid #000; } <div
class="container">
<div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
</div>
<div
class="outer"
style="float:right;"></div>
</div>
<div
class="container">
<div
id="wrapper">
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
<div
class="floatL red">AAAAAAAA</div>
</div>
<div
class="outer"
style="float:right;"></div>
</div>
总结实际上关于float在页面中带来的影响还有许多，只是它们存在于各种特定的场景，无法一一列举，本文也并非想要穷举所有的情况，只是希望同学们能通过本文而来了解float是什么，以及它对文档所造成的破坏。只有深刻理解了它的含义才能以在各种不同的场景随机应变地使用float这个神奇的东西。 |
2.7.4 取消浮动
| 属性 |
说明 |
| clear:both; |
可以使受到float：left浮动所引起的塌陷效果失效，当一个元素使用了浮动效果后，其后面的元素后受到其影响，并塌陷下来，可以使用clear:both;来取消这种影响。 |
2.7.5 超链接
超链接有4种状态，分别是尚未链接（link）、已链接（visited）、鼠标悬停链接时（hover）以及激活时（active）4种状态，如果我们想要改变超链接的样式，可以通过以下几个选择器进行，语法如下：
| 属性 |
说明 |
| a{样式属性：属性值} |
声明超链接样式 |
| a:link{样式属性：属性值} |
尚未链接的超链接样式 |
| a:visited{样式属性：属性值} |
已链接的超链接样式 |
| a:active{样式属性：属性值} |
激活时超链接样式 |
| a:hover{样式属性：属性值} |
当鼠标悬停链接时的超链接样式 |
l a{border: 1px red solid;} 声明超链接的样式是红色实线，宽1px的边框
l a:link{color:black;} 未链接前超链接文字颜色是黑色
l a:visited{color:blue; border:0px;} 已链接过的插连接文字颜色为蓝色，没有边框。
l a:active{color:yellow;} 激活时超链接文字颜色为黄色
l a:hover{border:1px green solid; text-decoration: none;} 当鼠标移动到链接时的超链接样式是绿色的实线，宽1px的边框，文字不添加下划线。
注：<a href=”#”></a> 其中的井号（#）表示的是空链接，点击后维持原状
除了文字超链接外，图片还可以当做超链接的样式，当鼠标移动到超链接上时，还能更换另一张图片
2.7.6 鼠标光标特效
鼠标7897y6
2.9 CSS特效属性
| 属性名 |
作用 |
用法 |
备注 |
| box-shadow |
给容器添加阴影 |
box-shadow: 10px 10px 5px #888888 |
|
|
|
|
|
|
3.CSS3新特性
3.1 边 b框
| 属性名 |
作用 |
用法 |
备注 |
| border-radius |
用于创建圆角边框 |
Border-radius:25px; |
-moz-border-radius:25px; /* Old Firfox */ |
| box-shadow |
给元素块添加周边阴影效果 |
box-shadow:10px 10px 5px #888888
基本语法是 {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 使用方法：对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}
|
投影方式：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影； X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边； Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部； 阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。 |
| border-image |
花边框线 |
border-image：source slice width repeat； |
border-image可以做出页面花边的效果； source：制定图片路径（必填），url (border.png); slice：切出图片使用的边框线（必填）； width：图片宽度（可省略）； repeat：图片填充方式（可省略），设置值有stretch、repeat和round； stretch：把图片拉伸到整个边框区域； repeat：重复填充； round：重复填充并自动调整图片大小；如： border-image: url(border.png) 35 25 25 15; |
浏览器的兼容情况：
3.2 背景
| 属性名 |
作用 |
用法 |
备注 |
| background-size |
规定背景图片的尺寸 |
background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px;
|
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。 您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 |
| background-origin |
规定背景图片的定位区域 |
background-origin:content-box /padding-box /border-box;
|
背景图片可以放置于 content-box、padding-box 或 border-box 区域。 border-box：背景被裁剪到边框盒。 padding-box：背景被裁剪到内边距框。 content-box：背景被裁剪到内容框。 |
| background-image :url(),url(); |
给元素设置两幅背景图片 |
background-image :url(image/1.jpg), url(image/2.jpg); |
两幅图片位置叠加 |
| 规定背景的绘制区域。 |
background-clip:content-box;
|
|
说明：border-box:标识背景图片在边框区，padding-box标识北京图片在内边距区，content-box表示背景图片在内容区。
浏览器的兼容情况：
3.3 文本效果
| 属性名 |
作用 |
用法 |
备注 |
| text-shadow
|
设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色： |
text-shadow: 5px 5px 5px #FF0000;
|
text-shadow:X-offset, Y-offset, 模糊距离，阴影颜色；
|
| word-wrap |
允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分 |
p{word-wrap:break-word;}
|
|
浏览器的兼容情况：
3.4 字体
| 属性名 |
作用 |
用法 |
备注 |
| @font-face |
当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。 您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
|
@font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }
|
|
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：
| 描述符 |
值 |
描述 |
| font-family |
Name |
必需。规定字体的名称。 |
| src |
URL |
必需。定义字体文件的 URL。 |
| font-stretch |
· normal · condensed · ultra-condensed · extra-condensed · semi-condensed · expanded · semi-expanded · extra-expanded · ultra-expanded |
可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style |
· normal · italic · oblique |
可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
· normal · bold · 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900 |
可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range |
unicode-range |
可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
浏览器的兼容情况：
3.5 2D转换
通过CSS3的转换，我们能够对元素进行移动、转动、缩放、拉长或拉伸操组。
转换是使元素改变形状、尺寸和位置的一种效果。
浏览器支持情况：
| 属性名 |
作用 |
用法 |
备注 |
| transform：translate();
|
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标） |
Div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
|
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素 |
| transform：rotate() ;
|
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 |
Div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
|
值 rotate(30deg) 把元素顺时针旋转 30 度。 |
| transform：scale() ;
|
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数 |
Div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4);/* Opera */ -moz-transform: scale(2,4); /* Firefox */ }
|
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍 |
| transform：skew()
|
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 |
Div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg);/* Firefox */ }
|
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 |
| transform：matrix()
|
matrix() 方法把所有 2D 转换方法组合在一起。 |
Div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }
|
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 |
| 函数 |
描述 |
| matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) |
定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) |
定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) |
定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) |
定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) |
定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) |
定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) |
定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) |
定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) |
定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) |
定义 2D 倾斜转换，沿着 Y 轴。 |
3.5 3D转换
CSS3 允许您使用 3D 转换来对元素进行格式化，转换是使元素改变形状、尺寸和位置的一种效果。
浏览器的支持情况：
| 属性名 |
作用 |
用法 |
备注 |
| transform：rotateX() |
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转 |
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg);/* Safari 和 Chrome */ -moz-transform: rotateX(120deg);/* Firefox */ }
|
|
| transform：rotateY() |
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。 |
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg);/* Safari 和 Chrome */ -moz-transform: rotateY(130deg);/* Firefox */ }
|
|
3.6 过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
浏览器的支持情况：
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
· 规定您希望把效果添加到哪个 CSS 属性上
· 规定效果的时长
（1） 应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
（2）规定当鼠标指针悬浮于 <div> 元素上时：
div:hover
{
width:300px;
}
多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
| 属性 |
描述 |
CSS |
| 简写属性，用于在一个属性中设置四个过渡属性。 |
3 |
|
| 规定应用过渡的 CSS 属性的名称。 |
3 |
|
| 定义过渡效果花费的时间。默认是 0。 |
3 |
|
| 规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
|
| 规定过渡效果何时开始。默认是 0。 |
3 |
3.7 动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
浏览器支持情况：
（1）实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
CSS3 动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
· 规定动画的名称
· 规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s;/* Opera */
}
| <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ }
@keyframes myfirst { from {background:red;} to {background:yellow;} }
@-moz-keyframes myfirst /* Firefox */ { from {background:red;} to {background:yellow;} }
@-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} }
@-o-keyframes myfirst /* Opera */ { from {background:red;} to {background:yellow;} } </style> </head> <body>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body> </html> |
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
| 属性 |
描述 |
| 规定动画。 |
|
| 所有动画属性的简写属性，除了 animation-play-state 属性。 |
|
| 规定 @keyframes 动画的名称。 |
|
| 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
|
| 规定动画的速度曲线。默认是 "ease"。 |
|
| 规定动画何时开始。默认是 0。 |
|
| 规定动画被播放的次数。默认是 1。 |
|
| 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
|
| 规定动画是否正在运行或暂停。默认是 "running"。 |
|
| 规定对象动画时间之外的状态。 |
3.8 多列
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
在本章中，您将学习如下多列属性：
· column-count
· column-gap
· column-rule
浏览器支持情况：
CSS3 创建多列
column-count 属性规定元素应该被分隔的列数：
实例
把 div 元素中的文本分隔为三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;}
CSS3 规定列之间的间隔
column-gap 属性规定列之间的间隔：
实例
规定列之间 40 像素的间隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;}
CSS3 列规则
column-rule 属性设置列之间的宽度、样式和颜色规则。
实例
规定列之间的宽度、样式和颜色规则：
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
| 属性 |
描述 |
| 规定元素应该被分隔的列数。 |
|
| 规定如何填充列。 |
|
| 规定列之间的间隔。 |
|
| 设置所有 column-rule-* 属性的简写属性。 |
|
| 规定列之间规则的颜色。 |
|
| 规定列之间规则的样式。 |
|
| 规定列之间规则的宽度。 |
|
| 规定元素应该横跨的列数。 |
|
| 规定列的宽度。 |
|
| 规定设置 column-width 和 column-count 的简写属性。 |
3.9 用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
在本章中，您将学到以下用户界面属性：
· resize
· box-sizing
· outline-offset
浏览器兼容情况：
CSS3 Resizing
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
这个 div 元素可由用户调整尺寸（在 Firefox 4+、Chrome 以及 Safari 中）。
CSS 代码如下：
实例
规定 div 元素可由用户调整大小：
div
{
resize:both;
overflow:auto;
}
CSS3 Box Sizing
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
实例
规定两个并排的带边框方框：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
CSS3 Outline Offset
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
· 轮廓不占用空间
· 轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
CSS 代码如下：
实例
规定边框边缘之外 15 像素处的轮廓：
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
| 属性 |
描述 |
| 允许您将元素设置为标准用户界面元素的外观 |
|
| 允许您以确切的方式定义适应某个区域的具体内容。 |
|
| 为创作者提供使用图标化等价物来设置元素样式的能力。 |
|
| 规定在使用 arrow-down 导航键时向何处导航。 |
|
| 设置元素的 tab 键控制次序。 |
|
| 规定在使用 arrow-left 导航键时向何处导航。 |
|
| 规定在使用 arrow-right 导航键时向何处导航。 |
|
| 规定在使用 arrow-up 导航键时向何处导航。 |
|
| 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 |
|
| 规定是否可由用户对元素的尺寸进行调整。 |
4.常见问题解决
(1) 想让一个图片居中显示，只要在这个图片上加一个父类的标签div，然后让给div一个居中的属性，text-align:center;就可以将div其中的内容（图片）居中了。
(2) 如果想让一个按钮或者组件居中，在使用text-align:center的情况下如果不起作用，则可以使用margin+百分比的方式将组件推到居中，比如，设置这个组件的长度为父元素的60%，那么要想让其在父类元素中居中，则需要让左右两边距父类元素的距离为20%，那么可以设置margin-left：20%；即可让当前元素在父类元素中居中。
(3) 将inline-block显示的元素，之间会有空白，如果需要去除这些空白，只需要将inline-block对应标签之间的空格和回车去掉即可，
(4) 让固定宽度和高度的div随手机屏幕大小的变化，永远居中的做法是：指定元素的position:absolute或者relative，然后设置top:50%; left:50%; 最重要的是要设置，margin-left和margin-top指定为负数，绝对值为自身狂傲的一半即可实现居中效果；
(5) 清除元素浮动：
清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：
Html代码
- .clear-fix { *overflow: hidden; *zoom: 1; }
- .clear-fix:after { display: table; content: ""; width: 0; clear: both; }