标签：背景图像 微软 no-repeat 宽度 visible lte 点线 ted 适应
1:行间样式<p style="color:red"></p>
2:内部样式<style type="text/css></style>
3:外部样式<link href="new.css" rel="stylesheet" type="text/css">
优先级
行间样式最优先》内部样式，外部样式同时存在时，谁在后边谁优先，因为，后边样式会覆盖前边样式的
!importan》行间》后代（权重）》id》交集选择器》class和并集选择器谁在后边谁做主》元素>
权值
id:100;
class:10;
tag元素:1;利用td加border，tr有时会出错。
表格加border时
基本选择器:
1:id选择器
2:class类选择器
3:元素标签选择器h1-h6,p,span,a,img,div,dl,ol,ul,input
复合选择器:
4:交集选择器 p.a1
5:并集选择器 #a,#b
6:后代选择器 p .a1
关系选择器
7:子代选择器 p>.a1
7:a1后边第一个兄弟 .a1+.a2
8:a1后边所有兄弟 .a1~.a2
属性选择器
[attribute] 用于选取带有指定属性的元素。 a[href] {color:red;} a[href][title] {color:red;}
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
伪类
a:link 选择所有未访问链接
a:visited 选择所有访问过的链接
a:active 选择活动链接
a:hover 选择鼠标在链接上面时
:focus 获取焦点时添加元素样式。
:first-child 向元素的第一个子元素添加样式。
p:nth-child(2) 选择每个p元素是其父级的第二个子元素[即是P元素下边的第一个孩子]
p:first-child 选择属于其父元素的首个子元素的每个 <p> 元素
p:last-child 选择每个p元素是其父级的最后一个子级。
不用nth-child() 尽量用nth-of-type();
* 通用选择器
:not(selector) :not(p) 选择每个并非p元素的元素
p:first-of-type 选择每个p元素是其父级的第一个p元素
p:last-of-type 选择每个p元素是其父级的最后一个p元素
p:nth-of-type(2)选择每个p元素是其父级的第二个p元素
伪元素
::first-letter 向文本的第一个字母添加特殊样式 【注释："first-line" 伪元素只能用于块级元素。】
::first-line 向文本的首行添加特殊样式。 【注释："first-line" 伪元素只能用于块级元素。】
::before 在元素之前添加内容。
::after 在元素之后添加内容。
字体
font-width:1px;
font-style:italic;
font-family:"微软雅黑";
简化：font:1px italic "微软雅黑";
文本
min/max-width:100px/10%;
min/max-height:100px/10%;
line-height:50px/50%;
text-align:left/center/right;
text-indent:10px/-10px;
text-decoration:overline/line-through/underline/none;
vertical-altin:top/middle/bottom;
text-shdow:x y 2px(模糊度) color;
颜色
color:red/#ff0000/#f00/rgb(255,0,0);
列表
list-style-type:circle/square/upper-roman/lower-roman/none;
list-style-image:url("");
list-style-position:inside/outside;
链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
鼠标形状
cursor:pointer/wait/help/text
盒子模型
margin/padding:上 右 下 左
margin/padding:上 左右 下
margin/padding:上下 左右
margin/padding:上下左右
边框/轮廓(位于边框的外围)
border/outline-width:1px;
border/outline-style:solid/dotted(点线）/dashed（虚线）;
border/outline-color:red/#f00/rgb(255,0,0);
简化 border/outline:1px dotted red;
背景
background-color:red(color)/#省略f00/rgb(255,0,0);
background-image:url(‘‘);可以
background-repeat:no-repeat/repeat-x/repeat-y;
background-position:left top/center center(可以写一个center但不能用middle)/10% 10%/10px 10px;
简化background:red url(‘‘) no-repeat 10px 10px;
background-attchment(固定，附加):fixed/scroll;
background-size:200px auto;
块级，行级元素
display:none(隐藏时不占用空间)/inline(排成一行)/block（可设宽高）/inline-block（排成一行，可设宽高）\
visibility:hidden(隐藏时占用空间）/visible;
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
浮动
float:left/right
clear:left/right/both;
定位属性
position:relative/absolute/fixed;
left/right/top/botttom:10px;
z-index:-10/10;
overflow/overlfow-x/overflow-y:hidden（隐藏溢出文字）/visible(默认状态)/scroll定有滚动条）/auto（）
如果文字溢出会出现滚动条
@media screen and|not|only (media feature) {
CSS-Code;
}
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
响应式设计
img{如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：
width:100%;
height:auto
};
img{如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：
max-width:100%;
height:auto;
}
背景图片可以响应调整大小或缩放。
以下是三个不同的方法：
1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：
2. 如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：
3. 如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。
标签：背景图像 微软 no-repeat 宽度 visible lte 点线 ted 适应
原文地址：http://www.cnblogs.com/xingkongly/p/7530595.html
