css:层叠样式表。
层叠次序（就近原则）：一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
css语法结构：
提示：如果值为若干单词，则要给值加引号： 在每行应该只描述一个属性。
选择器：
- 选择器的分组：用逗号将需要分组的选择器分开 （h1, h2, h3 {...}）
- 派生选择器 : 依据元素在其位置的上下文关系来定义样式，两个元素之间的层次间隔可以是无限的
( 定义列表中的strong元素 ：li strong { ... } )
子元素选择器（Child selectors）：只选择某个元素的子元素 （h1 > strong { ... }）
（会改变第一个 h1 下面的strong 元素，但是第二个 h1 中的 strong 不受影响）
- id选择器 : #
- 类选择器 ： . （注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。）
CSS样式：
1. CSS 背景
background-color 不能继承，其默认值是 transparent（透明的）
背景图像: （background-image）
背景重复: （background-repeat）
背景定位: （background-position）
背景关联： （background-attachment）
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; //图像不重复
background-position:center; //背景图像居中显示
background-attachment:fixed //图像相对于可视区是固定的，不会随文档滚动
}2. CSS 文本
缩进文本：text-indent 属性可以继承，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，
p {text-indent: 5em;}若使用百分数，百分数要相对于缩进元素父元素的宽度。
水平对齐：text-align:center //文本水平居中
text-align:justify //两端对齐
text-align:center 与 <CENTER>
<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
字间隔： word-spacing: 10px;
字母间隔: letter-spacing: 2em;
字符转换: text-transform: uppercase; //字母大写
- lowercase //小写
- capitalize //首字母大写
文本装饰：text-decoration: none; //
- none //无装饰，默认外观
- underline //下划线
- overline //上划线
- line-through //贯穿线
- blink // 文本闪烁
处理空白符: （white-space: normal;）去掉多余的空白符
pre : 空白符不会被忽略
nowrap: 禁止换行
3. CSS 字体：
字体系列： font-family: Arial;
字体风格： font-style: normal; - 文本正常显示
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
字体加粗： font-weight: bold;
字体大小： font-size: 12px;
尽量选用em:
em 的相对性体现在继承性，当某元素字号发生改变时，它和它的子元素中与字号相关的属性如果使用了 em 为单位，其值都会随之改变，这时 1em 不一定就等于 16px。（例如：h1,h2 当全部设置为1em时，相对于父元素，所以一样大）多用于响应式布局。
相反地，px 是个永远不变的固定值。试想一个按钮，当字号增大时，它的尺寸一般也应该增大，否则可能会挤爆。
4. CSS链接：
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
5. CSS 列表
列表类型： list-style-type: square; //正方形
- disc // 默认，实心圆
- circle // 空心圆
列表项图像： list-style-image: url(...gif);
放置列表位置： list-style-position:outside; //默认值
6. CSS 表格
border-collapse: collapse; 折叠边框
text-align:center; 属性设置水平居中对齐方式
vertical-align: bottom; 属性设置垂直对齐方式，底部对齐
7. CSS 边框
1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888; //前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）
设置下边框的样式 ： div{border-bottom:1px solid red;}
盒模型的宽度和高度
外边距合并：简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
8. 属性选择器
p:first-child { ... } 来选择父元素的第一个子元素
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
CSS2 - :lang 伪类 (为不同的语言定义特殊的规则）
<style>
q:lang(no){
quote:"~" "~";
}
</style> //lang中值为no的q元素标记引号。9. CSS定位
- 水平居中：width: 70%; margin: auto;
- 右对齐：position: absolute; right: 0px;
- 右对齐：float: right;
10 . CSS水平表单
<style type="text/css">
ul
{
float:left; //向左浮动
width:100%; //宽度为父元素的100%，这样就可以独占一行了
padding:0;
margin:0;
list-style-type:none; // 列表样式没有
}
a
{
float:left; //链接也向左浮动
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline} //列表项设置为内联块
</style>------------CSS3
1. CSS3 边框
圆角边框： border-radius: 20px;
边框阴影： box-shadow: 10px 10px 5px #888; (阴影水平偏移量；阴影垂直偏移量；尖锐度；颜色）
边框图片：border-image:url(...);
div
{
border-image:url(border.png) 30 30 round; /* 图片链接，向内偏移量，图像边界*/
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}2. CSS3 背景
背景图片的尺寸： background-size:10px 20px ;
背景图片定位区域：background-origin: content-box;
3. CSS3 文本
文本阴影：text-shadow: 5px 5px 5px #FF0000;
自动换行：word-wrap: break-word; (允许对长单词进行拆分，并换行到下一行)
4. CSS3 字体
@font-face 规则
<style>
@font-face
{
font-family: myFirstFont; //定义字体名称
src: url('Sansation_Light.ttf'), //指向该字体文件
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont; //HTML 中元素使用
}
</style>5. CSS3 2D 转换
顺时针旋转角度：transform: rotate(30deg);
移动位置：transform: translate(50px,100px);
翻转： transform: skew(30deg,20deg);
缩小放大：transform:scale(2,4); // 宽度原来的两倍，高度变为原来的四倍
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
6. CSS3 过渡
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
transition：width 2s linear 2s; // 延迟两秒， 宽度属性的过渡效果
div:hover
{
width:300px;
}7. CSS 动画
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
<div>
animation:myfirst 5s; //动画myfirst 持续时间为5s
</div>
@keyframes myfirst
{
from {background:red;} // 从红色到绿色
to {background:green;}
}关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
animation-duration: 5s; //动画完成的周期
animation-timing-function:linear; // 速度曲线：直线
animation-delay:2s； //动画延迟2s
animation-direction：alternate; // 逆向交替播放
8. CSS3 多列
column-count:3 // 把元素分隔为3列
column-gap:20px; //列之间的间隙
column-ruler: 3px outset #ff0000; // 规定列之间的宽度 样式 跟颜色规则
9. 用户界面
resize: both; // 允许用户调节大小
box-sizing: border-box; //padding和border包含在设置的width和height之内，对象的实际宽度等于设定的width。
box-sizing: content-box; //padding和border不包括在width和height中，对象的实际宽度等于width、border、padding
outline:2px solid red; outline-offset:10px; //边框轮廓10px
1384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
