CSS：层叠样式表（Cascading Style Sheet） 技术特性
内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的加载速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录 CSS3提供了更加强大的功能 < styletype = " text/css" >
选择器名称 {
属性名称 : 属性对应的值;
...
}
</ style> 注意：
style标签中的type属性默认就是type="text/css"设置样式时必须按照固定的格式来设置key: value
:不能省略, ;大多数情况下也不能省略(当有多个属性时, 最后一个可以省略) 如果值为若干单词，则要给值加引号 空格和大小写不影响CSS样式用逗号将需要分组的选择器分开，被分组的选择器可以分享相同的声明 < pstyle = " color : sienna; margin-left : 20px" > </ p> CSS代码写在<head>的<style>标签中 优点
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 < head> < styletype = " text/css" >
hr { color : sienna; }
p { margin-left : 20px; }
body { background-image : url ( "images/back40.gif" ) ; }
</ style> </ head> CSS代码单独保存在扩展名为.css的样式表文件中 外部样式表的使用方式
< head> < linkrel = " stylesheet" type = " text/css" href = " mystyle.css" /> </ head> 链接式与导入式的区别
<link/>标签属于XHTML，@import是属于CSS2.1使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
文档的元素就是最基本的选择器 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、甚至可以是 html 本身 < style>
html { color : black; }
h1 { color : blue; }
h2 { color : silver; }
</ style> 类选择器允许以一种独立于文档元素的方式来指定样式 通过class属性关联使用 在 CSS 中，类选择器以一个点号显示 类名的第一个字符不能使用数字 .important { color : red; }
通过id属性关联使用 id 选择器以#来定义 在现代布局中，id 选择器常常用于建立派生选择器 id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用 < pid = " intro" > </ p> #intro { background : silver; }
类选择器与id选择器的区别
在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次 ID 选择器不能结合用，因为 ID 属性不许有以空格分隔的词列表 ID 能包含更多含义：可以独立于元素来选择 ID 区分大小写：类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言
HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配 交集选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器 选择器之间不能有空格，必须连续书写 p.txt { color : blue; line-height : 28px; }
并集选择器
多个选择器通过逗号连接而成 利用并集选择器同时声明风格相同样式 h3,.first,.second,#end {
font-size : 16px;
color : green;
font-weight : normal;
}
* { margin : 0; padding : 0}
对带有指定属性的 HTML 元素设置样式 只有在规定 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器 在 IE6 及更低的版本中，不支持属性选择 属性选择器在 XML 文档中很有用，因为 XML 语言针对元素和属性的用途，指定元素名和属性名 a[href][title] { color : red; }
2. 根据具体属性值选择
注意：
这种格式要求必须与属性值完全匹配 如果属性值包含用空格分隔的值列表，匹配就可能出问题 a[href="http://www.w3school.com.cn/"][title="W3School"] { color : red; }
3. 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~） 如果忽略波浪号，则说明需要完成完全值匹配 p[class~="important"] { color : red; }
*[lang|="en"] { color : red; }
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素
// 1. 选择具有 attr 属性名的元素，且值以 val 开始的元素
p[ attr ^= "val" ] { color : red; }
// 2. 选择具有 attr 属性名的元素，且值以 val 结束的元素
p[ attr $= "val" ] { color : red; }
// 3. 选择具有 attr 属性名的元素，且值包含 val 的元素
p[ attr *= "val" ] { color : red; }
后代选择器
在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明 外层的标签写在前面，内层的标签写在后面，之间用空格分隔 标签嵌套时，内层的标签成为外层标签的后代 h3 strong { color : blue; font-size : 36px; }
h1 > strong { color : red; }
选择作为 h1 元素子元素的所有 strong 元素
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素 h1 + p { margin-top : 50px; }
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
div~p
{
background-color : yellow;
}
选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>
CSS伪类
CSS 伪类用于向某些选择器添加特殊的效果 伪类名称对大小写不敏感 selector : pseudo-class { property : value}
< aclass = " red" href = " css_syntax.asp" > </ a> a.red : visited { color : #FF0000}
属性 描述 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。
1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的
a:link { color : #FF0000}
a:visited { color : #00FF00}
a:hover { color : #FF00FF}
a:active { color : #0000FF}
:first-child 伪类
可以使用 :first-child 伪类来选择元素的第一个子元素 必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效 < div> < p> </ p> < ul> < li> </ li> < li> < strong> </ strong> </ li> < li> </ li> </ ul> < p> < em> </ em> </ p> </ div> p:first-child { font-weight : bold; }
li:first-child { text-transform : uppercase; }
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。
第二个规则将作为某个元素第一个子元素的所有 li 元素变成大写。
:lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则 < body> < p> < qlang = " no" > </ q> </ p> </ body> q:lang(no)
{
quotes : "~" "~"
}
: lang 类为属性值为 no 的 q 元素定义引号的类型
选择器类型 说明 css版本 :root 根元素选择器，匹配文档根元素 css3 :first-child 子元素选择器，匹配父元素的第一个子元素 css2 :last-child 子元素选择器，匹配父元素的最后一个子元素 css3 :only-child 子元素选择器，匹配父元素包含的唯一子元素 css3 :only-of-type 子元素选择器，匹配父元素包含的唯一类型的子元素 css3 :nth-child(n) 匹配父元素中第n个子元素，n从1开始计算 css3 :nth-last-child(n) 子元素选择器，匹配父元素中倒数第n个子元素 css3 :nth-of-type(n) 匹配父元素中定义类型第n个子元素 css3 :nth-last-of-type(n) 匹配父元素中定义类型倒数第n个子元素 css3
选择器类型 说明 :enabled 匹配处于启用状态的元素 :disabled 匹配处于禁用状态的元素 :checked 匹配处于选中状态的元素
动态伪类选择器
动态伪类选择器根据条件的改变进行选择，是相对文档的固定状态来说的 选择器类型 说明 :link 匹配链接的元素 :visited 匹配已访问的链接元素 :hover 匹配处于鼠标悬停状态的元素 :active 匹配用户激活的元素 :focus 匹配当前获得焦点的元素
selector:pseudo-element { property : value; }
< pclass = " article" > </ p> p.article:first-letter { color : #ff0000; }
::first-line 伪元素
first-line伪元素只能用于块级元素 first-line伪元素用于向文本的首行设置特殊样式 p:first-line
{
color : #ff0000;
font-variant : small-caps;
}
浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化
::first-letter 伪元素
first-letter伪元素只能用于块级元素 first-letter伪元素用于向文本的首字母设置特殊样式 p:first-letter
{
color : #ff0000;
font-size : xx-large;
}
:before 伪元素
:before伪元素可以在元素的内容前面插入新内容 h1:before
{
content : url ( logo.gif) ;
}
h1:after
{
content : url ( logo.gif) ;
}
利用before和CSS计数器特性实现
counter-reset样式属性counter-increment样式属性< style>
body {
counter-reset : num;
}
li::before {
counter-increment : num;
content : "春田花花" counter ( num) "班：" ;
}
</ style> < body> < ul> < li> </ li> < li> </ li> < li> </ li> </ ul> </ body>
CSS 字体属性定义文本的字体系列
样式 属性值 描述 font-family Serif, Sans-serif, Monospace, Cursive, Fantasy 设置字体系列 font-size small, medium, large, length, %, inherit 设置字体的尺寸 font-style normal, italic, oblique, inherit 设置字体风格 font-variant normal, small-caps, inherit 设定小型大写字母 font-weight normal, bold, bolder, lighter, 200, inherit 设置字体的粗细
CSS 文本属性可定义文本的外观
样式 属性值 描述 text-align left, right, center, justify, inherit 文本行互相之间的对齐方式 vertical-align middle, top,bottom 文本垂直对齐方式 text-decoration none, underline, overline, line-through, blink 文本装饰 line-height 100px 设置行高 text-indent 5em, -5em, 20%… 实现文本缩进 word-spacing normal, url 改变字（单词）之间的标准间隔 letter-spacing top, bottom, left, right, center, 100px, 50% 字符或字母之间的间隔 text-shadow h-shadow, v-shadow, blur, color 设置文本阴影 text-transform none, uppercase, lowercase, capitalize 处理文本的大小写 direction ltr, rtl 块级元素中文本的书写方向, 表中列布局的方向, 内容水平填充其元素框的方向, 两端对齐元 素中最后一行的位置。 white-space normal, pre, pre-wrap, pre-line, nowrap 用户代理对源文档中的空格、换行和 tab 字符的处理
参数名 说明 hoffset 水平偏移量，正数往右，负数往左 voffset 垂直偏移量，正数往下，负数往上 blur 模糊值，数值越大越模糊。默认为0，边界清晰 color 阴影的颜色
css3 文本裁剪的设置
必须不换行 必须使用overflow控制溢出 text-overflow参数名 说明 clip 不使用省略号作为结尾 ellipsis 使用省略号作为结尾
css3 文本描边的设置
该样式不是所有的浏览器都支持 需要添加前缀修饰符 text-stroke : 描边宽度 描边颜色;目前浏览器统一使用-webkit-前缀 浏览器 厂商前缀 Chrome、Safari -webkit- Firefox -moz- Opera -o- IE -ms-
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志
属性 描述 list-style-image 将图象设置为列表项标志 list-style-position 设置列表中列表项标志的位置 list-style-type 设置列表项标志的类型
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
样式 属性值 描述 background-attachment scroll, fixed 声明图像相对于可视区是固定的 background-color red, blue… 设置背景色 background-image none, url 设置一个背景图像 background-position top, bottom, left, right, center, 100px, 50% 改变图像在背景中的位置 background-repeat repeat-x, repeat-y, no-repeat 对背景图像进行平铺
属性 描述 background-clip 规定背景的绘制区域 background-origin 规定背景图片的定位区域 background-size 规定背景图片的尺寸 object-fit 对图片进行保留原始比例的剪切、缩放或者直接进行拉伸等
背景定位
水平偏移向右为正，向左为负数 垂直偏移向下为正，向上为负数 利用背景偏移属性使用CSS精灵图(减少网络请求) object-fit
值 描述 fill 背景内容完全填充背景区域。如果背景内容的宽高比与背景区域不相匹配，那么该背景内容将被拉伸 cover 背景内容在保持其宽高比的同时填充背景区域。如果背景内容的宽高比与背景区域不相匹配，背景对象将被剪裁以适应背景区域 contain 背景内容将被缩放，以在填充背景区域时保持其宽高比。 如果背景内容的宽高比与背景区域不相匹配，背景对象将被添加“黑边” none 背景内容将保持其原有的尺寸
设置元素的透明度级别
值 描述 value 指定不透明度，从0.0（完全透明）到1.0（完全不透明） inherit Opacity属性的值应该从父元素继承
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
值 说明 default 默认光标 pointer 手指光标 wait 指示程序正在忙 help 指示可用的帮助 text 指示文本 crosshair 鼠标呈现十字状
能够以不同的方法为链接设置样式
状态 描述 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻
CSS 表格属性可以帮助您极大地改善表格的外观 CSS Table 属性
属性 描述 border-collapse 设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。 caption-side 设置表格标题的位置。 empty-cells 设置是否显示表格中的空单元格。 table-layout 设置显示单元、行和列的算法。
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 CSS outline 属性规定元素轮廓的样式、颜色和宽度
属性 描述 outline-color 设置轮廓的颜色 outline-style 设置轮廓的样式 outline-width 设置轮廓的宽度
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式进行
背景应用于由内容和内边距、边框组成的区域内边距、边框和外边距都是可选的，默认值是零 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边 外边距可以是负值，而且在很多情况下都要使用负值的外边距 CSS padding 属性定义元素边框与元素内容之间的空白区域
padding 属性接受长度值或百分比值，但不允许使用负值 上下内边距与左右内边距一致
即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度 属性 描述 padding-bottom 设置元素的下内边距。 padding-left 设置元素的左内边距。 padding-right 设置元素的右内边距。 padding-top 设置元素的上内边距。
CSS border 属性允许你规定元素边框的样式、宽度和颜色 注意
如果要定义单边样式，必须把单边属性放在简写属性之后
因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none 如果希望显示某种边框，就必须设置边框样式 默认的边框颜色是元素本身的前景色
指定边框宽度：
长度值，比如 2px 或 0.1em3 个关键字, thin 、medium（默认值） 和 thick 属性 描述 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式 border-color 设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色 border-width 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度 border-bottom 用于把下边框的所有属性设置到一个声明中 border-left 用于把左边框的所有属性设置到一个声明中 border-right 用于把右边框的所有属性设置到一个声明中 border-top 用于把上边框的所有属性设置到一个声明中
border-style 属性值
属性值 描述 none 默认无边框 dotted 定义一个点线边框 dashed 定义一个虚线边框 solid 定义实线边框 double 用于把左边框的所有属性设置到一个声明中。 groove 定义3D沟槽边框。效果取决于边框的颜色值 ridge 定义3D脊边框。效果取决于边框的颜色值 inset 定义一个3D的嵌入边框。效果取决于边框的颜色值 outset 定义一个3D突出边框。 效果取决于边框的颜色值
css3 新增边框属性
属性 描述 border-image 设置所有边框图像的速记属性 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 box-shadow 附加一个或多个下拉框的阴影
属性 描述 border-top-left-radius 左上圆角样式 border-top-right-radius 右上圆角样式 border-bottom-left-radius 左下圆角 border-bottom-right-radius 右下圆角 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
属性 描述 border-image-source 边框图像来源 border-image-slice 边框图像的向内偏移 border-image-width 边框图像宽度 border-image-repeat 边框图像重复 border-image 边框图像简写方式
参数名 说明 hoffset 水平偏移量，正数往右，负数往左 voffset 垂直偏移量，正数往下，负数往上 blur 模糊值，数值越大越模糊。默认为0，边界清晰 spread 阴影的延伸半径 color 阴影的颜色 inset 阴影内嵌到盒子内部
设置外边距的方法是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em margin 可以设置为 auto。更常见的做法是为外边距设置长度值 值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的 margin 设置一个百分比数值，百分数是相对于父元素的 width 计算的 margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距 margin允许取负数值，产生与正数相反的页面效果 margin可以设置块元素水平居中 属性 描述 margin-bottom 设置元素的下外边距 margin-left 设置元素的左外边距 margin-right 设置元素的右外边距 margin-top 设置元素的上外边距
盒子模型实际尺寸==border+padding+内容宽度/高度 盒子模型占据空间尺寸==盒子模型实际尺寸+margin 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距会发生合并 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并 特点
只能容纳文本或其他行内元素 可以与其他元素在同一行上，遇到父级元素边界会自动换行不可以设置宽高，行高，内外边距 常见的内联元素
元素 描述 a 定义锚 b 字体加粗 big 大号字体加粗 br 换行 code 定义计算机代码文本 em 定义为强调的内容 i 斜体文本效果 img 向网页中嵌入一幅图像 input 输入框 label 定义标签 input 元素定义标注（标记） select 创建单选或多选菜单 small 呈现小号字体效果 span 组合文档中的行内元素 strong 语气更强的强调的内容 sub 定义下标文本 sup 定义上标文本 textarea 多行的文本输入控件 tt 打字机或者等宽的文本效果
特点
可以包含行内元素和其他块级元素，且占据父元素的整个空间 独占一行，可以自动换行能设置宽高，行高，内外边距 宽度缺省是它的容器的100%，除非设定一个宽度 常见的块级元素
元素 描述 address 定义地址 article 定义文章 aside 定义页面内容之外的内容 audio 定义声音内容 canvas 定义图形 caption 定义表格标题 dd 定义定义列表中项目的描述 div 定义文档中的节 dl 定义定义列表 dt 定义定义列表中的项目 footer 定义 section 或 page 的页脚 form 定义供用户输入的 HTML 表单 h1-h6 定义 HTML 标题 header 定义 section 或 page 的页眉 hr 定义水平线 li 定义列表的项目 menu 定义命令的列表或菜单 nav 定义导航链接 ol 定义有序列表 output 定义输出的一些类型 p 定义段落 section 定义 section table 定义表格 tbody 定义表格中的主体内容 td 定义表格中的单元 tfoot 定义表格中的表注内容（脚注） th 定义表格中的表头单元格 thead 定义表格中的表头内容 time 定义日期/时间 tr 定义表格中的行 ul 定义无序列表 video 定义视频
值 说明 none 设置元素不会被显示 block 块级元素的默认值，元素会被显示为块级元素，独占一行 inline 内联元素的默认值，元素会被显示为内联元素，水平排列 list-item 此元素会作为列表显示 table 此元素会作为块级表格来显示，表格前后带有换行符 inline-table 此元素会作为内联表格来显示，表格前后没有换行符
功能overflow 属性规定当内容溢出元素框时发生的事情 如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制 因此，有可能即使元素框中可以放下所有内容也会出现滚动条 浏览器兼容性任何的版本的 IE（包括 IE8）都不支持属性值 “inherit” 值 说明 visible 默认值。内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 list-item 此元素会作为列表显示 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 inherit 规定应该从父元素继承 overflow 属性的值
属性值 描述 left 表明元素必须浮动在其所在的块容器左侧 right 表明元素必须浮动在其所在的块容器右侧 none 表明元素不进行浮动 inline-start 表明元素必须浮动在其所在块容器的开始一侧 inline-end 表明元素必须浮动在其所在块容器的结束一侧
浮动元素脱离标准文档流
浮动元素的位置空出来，由非浮动元素占据 浮动元素不论是块级还是行级元素，都可以水平排列，同时宽度、高度收缩，但可以设置宽高 浮动元素尽量向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止 假如只有极少空间可供浮动元素,浮动元素会跳至下一行,这过程持续到某一行有足够空间为止 浮动元素具有相互水平贴靠特点 浮动元素具有文字围绕特点 浮动父级元素的宽度是所有浮动子元素的宽度之和 任何的版本的 IE （包括 IE8）都不支持属性值 inherit 浮动元素脱离标准文档流，失去了高度，影响了后续元素
背景不显示
由于浮动产生，如果父级设置CSS背景颜色或图片,父级不能被撑开,导致背景不能显示 边框不撑开
如果父级设置CSS边框属性,由于子级使用float属性,产生浮动,父级不被撑开,导致边框不随内容被撑开 margin padding设置值没正确显示
浮动导致父级子级之间设置css padding, margin属性值不正确，特别是上下边的padding和margin不能正确显示 加高法
设置浮动元素父容器的高度，撑出浮动元素的高度空间 存在的问题
外墙法
在浮动元素和受影响元素之间添加一个标签，让该标签使用清除浮动属性 存在的问题
添加无意义标签，语义化差 内墙法
在浮动元素的父级元素的子元素末尾添加一个标签，让该标签使用clear 存在的问题
添加无意义标签，语义化差 清除法
在受浮动影响的元素中添加clear样式属性 clear 属性规定元素的哪一侧不允许其他浮动元素 值 说明 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左，右侧不允许浮动元素 none 默认值，允许浮动元素出现在两侧 inherit 规定应该从父元素继承 clear 属性的值
溢出法
给浮动元素的父级元素添加overflow属性，扩展盒子高度 原理
overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动 优点
属性值 说明 visible 默认值，内容不会被修剪 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
基本思想
允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 可使用 display 属性改变生成的框的类型
将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样 把 display 设置为 none，让生成元素没有框, 该框及内容不再显示，不占用文档空间 把文本添到块级元素（比如 div）开头。即使没把文本定义为段落，它也当作段落对待 CSS position 属性
属性值 描述 static 默认值。无定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） relative 生成相对定位的元素，相对于其原来正常位置进行定位 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位 inherit 规定应该从父元素继承 position 属性的值
相对定位元素的定位是相对其原来正常位置 移动相对定位元素，但它原本所占的空间不会改变 相对定位元素经常被用来微调位置，作为绝对定位元素的参考基准点 < divclass = " box" id = " one" > </ div> < divclass = " box" id = " two" > </ div> < divclass = " box" id = " three" > </ div> < divclass = " box" id = " four" > </ div> .box {
display : inline-block;
width : 100px;
height : 100px;
background : red;
color : white;
}
#two {
position : relative;
top : 20px;
left : 20px;
background : blue;
}
运行效果
注意点
在相对定位中同一个方向上的定位属性只能使用一个
top/bottom 只能用一个left/right 只能用一个 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局 绝对定位的元素位置相对于最近的已定位父元素,如果没有已定位的父元素,那么它位置相对于 html，以浏览器窗口为基准 absolute 定位使元素的位置与文档流无关，因此不占据空间，宽度会收缩，需要指定宽度 absolute 定位的元素能和其他元素重叠 < divclass = " box" id = " one" > </ div> < divclass = " box" id = " two" > </ div> < divclass = " box" id = " three" > </ div> < divclass = " box" id = " four" > </ div> .box {
display : inline-block;
background : red;
width : 100px;
height : 100px;
float : left;
margin : 20px;
color : white;
}
#three {
position : absolute;
top : 20px;
left : 20px;
}
运行效果
注意点
绝对定位的元素是脱离标准流的, 不会占用标准流中的位置 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
一个绝对定位的元素会忽略祖先元素的padding 固定定位与绝对定位相似，参考点是浏览器窗口 该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素 fixed 定位在 IE7 和 IE8 下需要描述 <!DOCTYPE> 才能支持 fixed 定位元素脱离标准文档流，因此不占据空间 fixed定位的元素和其他元素重叠 定位的盒子重叠时如何确定上下层级
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0通过z-index属性设置各元素之间的重叠高低关系 z-index值大的层位于其值小的层上方，相同时定义在最后的元素压在上方 定位的元素始终压在未定位的元素上方父元素的z-index决定了子元素的层级 粘性定位可以被认为是相对定位和固定定位的混合 元素在跨越特定阈值前为相对定位，之后为固定定位 粘性定位常用于定位字母列表的头部元素 规则
子标签可以继承父标签的样式风格 子标签的样式不会影响父标签的样式风格 不是所有的样式都能继承 < style>
div {
color : red;
}
</ style> < div> < ul> < li> < p> </ p> </ li> </ ul> </ div> 注意点
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 继承性中的特殊性
<a>标签的文字颜色和下划线是不能继承的<h>标签的文字大小是不能继承的CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
定义
层叠性就是CSS处理冲突的一种能力 CSS层叠性是指针对同一个标签设置的多个样式而产生的重叠特性 针对不同CSS样式属性设置时不产生冲突，会叠加样式效果 针对相同CSS样式属性设置时产生冲突，需要根据权重决定显示结果 < style>
p {
color : red;
}
.para {
color : blue;
}
</ style> < pid = " identity" class = " para" > </ p> 注意
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性 作用
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定 优先级判断
间接选中(继承)
如果是间接选中, 那么就是谁离目标标签比较近就听谁的 < style>
li {
color : blue;
}
ul {
color : red;
}
</ style> < ul> < li> < pid = " identity" class = " para" > </ p> </ li> </ ul> 直接选中(相同选择器)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的 < style>
p {
color : blue;
}
p {
color : red;
}
</ style> < ul> < li> < pid = " identity" class = " para" > </ p> </ li> </ ul> 直接选中(不同选择器)
如果都是直接选中, 并且不同类型的选择器, 那么就会按照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认< style>
#identity {
color : purple;
}
.para {
color : pink;
}
p {
color : green;
}
* {
color : blue;
}
li {
color : red;
}
</ style> < ul> < li> < pid = " identity" class = " para" > </ p> </ li> </ ul> 作用
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 根据权重计算结果的大小决定具体生效的样式 通过继承生效的样式权重为0 默认样式和继承样式视情况分别对待 通配符的权值低于标签选择器，通配符选择器选中的标签也是直接选中的 如果权重相同时，以靠近标签的样式为准 注意
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的 作用
用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高 < style>
#identity {
color : purple;
font-size : 50px;
}
.para {
color : pink ;
}
p {
color : green !important ;
}
</ style> < ul> < li> < pid = " identity" class = " para" > </ p> </ li> </ ul> 注意点
!important只能用于直接选中, 不能用于间接选中!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升!important必须写在属性值的分号前面!important前面的感叹号不能省略
方向参数可以省略，默认从底部往上渐变 方向类型包括to bottom、to top、to right、to left、to bottom right等，也可以通过角度来设置 颜色参数中可以指定位置 < style>
#grad1 {
height : 200px;
background-color : red;
background-image : linear-gradient ( to right, red , yellow) ;
}
</ style> < body> < divid = " grad1" > </ div> </ body>
类型参数可以省略，默认是椭圆ellips，可以设置为圆circle 类型也可以设置中心点位置 颜色参数中可以指定位置 < style>
p {
width : 300px;
height : 200px;
background : radial-gradient ( #f00, #00f) ;
}
</ style> < body> < p> </ p> </ body>
< style>
h1 {
width : 300px;
height : 200px;
background : repeating-linear-gradient ( #f00 10%, #00f 20%)
}
</ style> < body> < h1> </ h1> </ body>
变形是指将元素进行平移、缩放和旋转，也称为变换 转换属性属性 描述 transform 确定变形的功能类型 transform-origin 允许你改变被转换元素的位置 transform-style 规定被嵌套元素如何在 3D 空间中显示 perspective 规定 3D 元素的透视效果 perspective-origin 规定 3D 元素的底部位置 backface-visibility 定义元素在不面对屏幕时是否可见
属性值 说明 none 不发生变形 translate(n) 实现元素的平移功能，n为移动长度 scale(n) 实现元素的缩放功能，n为缩放比例 rotate(n) 实现元素的旋转功能，n为旋转角度 skew(x,y) 实现元素的倾斜功能，n为倾斜角度 matrix(n,n,n,n,n,n) 实现自定义变形功能
transform-origin 属性用于改变变形的基准点，默认在元素的中心，X，Y基准之间用空格间隔 属性值 说明 数字，百分比 transform-origin: 100px 50% left/center/right 指定x轴的位置 top/center/bottom 指定y轴的位置
transtlateX(x): 将元素在水平方向上进行平移 transtlateY(y): 将元素在垂直方向上进行平移 transtlate(x,y): 将元素在水平和垂直方向上进行平移 平移单位可以用数字或者百分比 scaleX(x): 将元素在水平方向上进行缩放 scaleY(y): 将元素在垂直方向上进行缩放 scale(x,y): 将元素在水平和垂直方向上进行缩放 缩放单位采用数字，大于1放大，小于1缩小 < stylemedia = " screen" >
h1 {
width : 500px;
height : 100px;
background-color : #ff0;
text-align : center;
line-height : 100px;
font-size : 80px;
transform : scale ( 1, 0.6) ;
}
</ style> < body> < h1> </ h1> </ body>
skewX(x): 将元素在水平方向上进行倾斜 skewY(y): 将元素在垂直方向上进行倾斜 skew(x,y): 将元素在水平和垂直方向上同时进行倾斜 参数是角度deg 函数 描述 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,y) 定义 2D 倾斜转换，沿着 X 和 Y 轴 skewX(angle) 定义 2D 倾斜转换，沿着 X 轴 skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。包含数学函数，旋转、缩放、移动及倾斜元素
< style>
* {
margin : 0;
padding : 0;
}
img {
display : block;
border : 1px solid #ccc;
border-radius : 50%;
}
img:nth-child(2) {
transform : rotateX ( 180deg) ;
}
</ style> < imgsrc = " ../img/musicb.jpg" alt = " " > < imgsrc = " ../img/musicb.jpg" alt = " " >
CSS3 允许使用 3D 转换来对元素进行格式化
浏览器兼容问题
Internet Explorer 10 和 Firefox 支持 3D 转换 Chrome 和 Safari 需要前缀 -webkit- Opera 仍然不支持 3D 转换（它只支持 2D 转换） 3D Transform 方法
函数 描述 translate3d(x,y,z) 定义 3D 转化 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值 scale3d(x,y,z) 定义 3D 缩放转换 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值 rotate3d(x,y,z,angle) 定义 3D 旋转 rotateX(angle) 定义沿 X 轴的 3D 旋转 rotateY(angle) 定义沿 Y 轴的 3D 旋转 rotateZ(angle) 定义沿 Z 轴的 3D 旋转 perspective(n) 定义 3D 转换元素的透视视图 matrix3d 定义 3D 转换，使用 16 个值的 4x4 矩阵
perspective 属性定义 3D 元素距视图的距离，以像素计，用于设置透视/景深效果，只影响3D变形的元素 视距越小，3D变形效果越小perspective-origin 用来决定 perspective 属性的源点角度，通过X,Y坐标值来实现 以上两个属性样式都是设置在父元素上 < stylemedia = " screen" >
* { margin : 0; padding : 0; }
div {
width : 600px;
height : 600px;
border : 1px solid #ccc;
margin : 10px auto;
perspective : 300px;
perspective-origin : 100px center;
}
img {
transform : rotateX ( 45deg) ;
}
</ style> < body> < div> < imgsrc = " ../img/clock.jpg" alt = " " > </ div> </ body>
属性 描述 transition 用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的 CSS 属性的名称 transition-duration 定义过渡效果花费的时间。默认是 0 transition-timing-function 规定过渡效果的时间曲线。默认是 “ease” transition-delay 规定过渡效果何时开始。默认是 0
transition : 控制的属性1 动画持续时间 动画效果 延迟时间
transition : background-color 1s ease 0s;
transition : color 1s linear 1.0s
transition : margin-top 1s steps ( 5, start) 0s
transition : all 1s ease 0s;
属性值 说明 linear 规定以相同速度开始至结束的过渡效果 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 ease-in 规定以慢速开始的过渡效果 ease-out 规定以慢速结束的过渡效果 cublc-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值
利用类似于Flash的关键帧进行控制的动画方式，比过渡动画功能更加强大 动画原理
利用@keyFrames创建关键帧动画 利用animation调用关键帧动画 当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果 必须定义动画的名称和时长
如果忽略时长，则动画不会允许，因为默认值是 0 用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器 浏览器兼容问题Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性 Chrome 和 Safari 需要前缀 -webkit- Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性 @keyframes myfirst{
0% { background : red; }
25% { background : yellow; }
50% { background : blue; }
100% { background : green; }
}
@keyframes myfirst{
from { background : red; }
to { background : yellow; }
}
animation : 动画名 动画持续时间 动画类型 执行次数 方向性 延迟时间
animation : myAnimation 1s ease 2 alternate 1s;
属性 描述 animation 所有动画属性的简写属性，除了 animation-play-state 属性 animation-name 规定 @keyframes 动画的名称 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0 animation-timing-function 规定动画的速度曲线。默认是 “ease” animation-delay 规定动画何时开始。默认是 0 animation-iteration-count 规定动画被播放的次数。默认是 1 animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal” animation-play-state 规定动画是否正在运行或暂停。默认是 “running” animation-fill-mode 规定对象动画时间之外的状态
例子: 盒子放大缩小
< stylemedia = " screen" >
@keyframes myAnimation{
0% {
width : 100px;
height : 100px;
}
50% {
width : 200px;
height : 200px;
}
100% {
width : 100px;
height : 100px;
}
}
div {
width : 100px;
height : 100px;
background-color : #ff0;
}
div:hover {
animation : myAnimation 3s infinite;
}
</ style> < body> < div> </ div> </ body> < stylemedia = " screen" >
@keyframes myClock{
0% { transform : rotate ( 0) ; }
100% { transform : rotate ( 360deg) ; }
}
.clock {
width : 600px;
height : 600px;
background : url ( ../img/clock.jpg) ;
position : relative;
margin : 10px auto;
}
.hour {
position : absolute;
width : 600px;
height : 600px;
background : url ( ../img/minute.png) ;
animation : myClock 3600s infinite linear;
}
.second {
position : absolute;
width : 600px;
height : 600px;
background : url ( ../img/second.png) ;
animation : myClock 60s infinite linear;
}
</ style> < body> < divclass = " clock" > < divclass = " hour" > </ div> < divclass = " minute" > </ div> < divclass = " second" > </ div> </ div> </ body>
通过 CSS3，能够创建多个列来对文本进行布局
浏览器兼容问题
Internet Explorer 10 和 Opera 支持多列属性 Firefox 需要前缀 -moz- Chrome 和 Safari 需要前缀 -webkit- Internet Explorer 9 以及更早的版本不支持多列属性 多列属性
属性 描述 column-count 规定元素应该被分隔的列数 column-fill 所有动画属性的简写属性，除了 animation-play-state 属性 column-gap 规定列之间的间隔 column-rule 设置所有 column-rule-* 属性的简写属性 column-rule-color 规定列之间规则的颜色 column-rule-style 规定列之间规则的样式 column-rule-width 规定列之间规则的宽度 column-span 规定元素应该横跨的列数 column-width 规定列的宽度 columns 规定设置 column-width 和 column-count 的简写属性
属性 描述 appearance 允许您将元素设置为标准用户界面元素的外观 box-sizing 允许您以确切的方式定义适应某个区域的具体内容 icon 为创作者提供使用图标化等价物来设置元素样式的能力 nav-down 规定在使用 arrow-down 导航键时向何处导航 nav-index 设置元素的 tab 键控制次序 nav-left 规定在使用 arrow-left 导航键时向何处导航 nav-right 规定在使用 arrow-right 导航键时向何处导航 nav-up 规定在使用 arrow-up 导航键时向何处导航 outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 resize 规定是否可由用户对元素的尺寸进行调整
css与css3基础笔记的修改总结，以后复习的时候看看
9955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
