css知识复习

属性选择器
[attribute]用于选取带有指定属性的元素。[attribute=value]用于选取带有指定属性和值的元素。[attribute~=value]用于选取属性值中包含指定词汇的元素。[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。[attribute^=value]匹配属性值以指定值开头的每个元素。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值中包含指定值的每个元素。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body   {  background-image:url(/i/eg_bg_02.gif);  background-repeat:no-repeat;  background-attachment:fixed  }

背景：

background-position:

background-color:

background-image:

background-repeat:

文本：

text-indent: 首行缩进

text-align:水平对齐

word-spacing:字间隔

letter-spacing:字母间隔

text-transform:字符转换：none\  uppercase\  lowercase\  capitalize

text-decoration:字符装饰：none\ underline\  overline\  line-through\  blink

white-spacing: 空白符

CSS 文本属性

属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。text-indent缩进元素中文本的首行。text-shadow设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。text-transform控制元素中的字母。unicode-bidi设置文本方向。white-space设置元素中空白的处理方式。word-spacing设置字间距。

字体：

font-family:

font-style: 风格：normal \ italic \ oblique

font-weight:字体粗细  bold

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

字体大小

font-size: 如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

实例

body {font-size:100%;}h1 {font-size:3.75em;}h2 {font-size:2.5em;}p {font-size:0.875em;}

链接

a:link {color:#FF0000;}/* 未被访问的链接 */a:visited {color:#00FF00;}/* 已被访问的链接 */a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */a:active {color:#0000FF;}/* 正在被点击的链接 */

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

text-decoration:none;

链接框

a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}


a:hover,a:active
{
background-color:#7A991A;
}

列表：

ul{ list-style-type: square}

list-style-image: url()

list-style-position: inside \ outside

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

表格：

border-collapse: 将边框折叠为单一边框collapse

width

height

text-align:水平对齐

vertical-align:垂直对齐

padding:内边距

属性描述border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。caption-side设置表格标题的位置。empty-cells设置是否显示表格中的空单元格。table-layout设置显示单元、行和列的算法。

table-layout:

值描述automatic默认。列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。inherit规定应该从父元素继承 table-layout 属性的值。

轮廓

属性描述CSSoutline在一个声明中设置所有的轮廓属性。2outline-color设置轮廓的颜色。2outline-style设置轮廓的样式。2outline-width设置轮廓的宽度。2

边框

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

border-style的值

值描述none定义无边框。hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。inherit规定应该从父元素继承边框样式。

border-color:transparent; 用于创建一个不可见的边框

vertical-align: 设置元素垂直对齐方式

光标：

cursor

值描述url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针（一只手）move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右（东）移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。n-resize此光标指示矩形框的边缘可被向上（北）移动。se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。s-resize此光标指示矩形框的边缘可被向下移动（南）。w-resize此光标指示矩形框的边缘可被向左移动（西）。text此光标指示文本。wait此光标指示程序正忙（通常是一只表或沙漏）。help此光标指示可用的帮助（通常是一个问号或一个气球）。

css3:

一、边框：

圆角

border-radius:25px;

边框阴影：

box-shadow:10px 10px 5px 5px #dddddd;

border-iamge:

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 */}

二、背景

属性描述CSSbackground-clip规定背景的绘制区域。3background-origin规定背景图片的定位区域。3background-size规定背景图片的尺寸。3

CSS3 允许您为元素使用多个背景图像。

实例

为 body 元素设置两幅背景图片：

body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

三、文本

text-shadow: 向文本添加阴影

word-wrap:文本换行

四、2D转换

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 */}

函数描述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 轴。

五、3D转换

属性描述CSStransform向元素应用 2D 或 3D 转换。3transform-origin允许你改变被转换元素的位置。3transform-style规定被嵌套元素如何在 3D 空间中显示。3perspective规定 3D 元素的透视效果。3perspective-origin规定 3D 元素的底部位置。3backface-visibility定义元素在不面对屏幕时是否可见。
六、过渡

属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。3transition-duration定义过渡效果花费的时间。默认是 0。3transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3transition-delay规定过渡效果何时开始。默认是 0。
七：动画

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 "ease"。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3animation-fill-mode规定对象动画时间之外的状态。
八、多列

新的多列属性

下面的表格列出了所有的转换属性：

属性描述CSScolumn-count规定元素应该被分隔的列数。3column-fill规定如何填充列。3column-gap规定列之间的间隔。3column-rule设置所有 column-rule-* 属性的简写属性。3column-rule-color规定列之间规则的颜色。3column-rule-style规定列之间规则的样式。3column-rule-width规定列之间规则的宽度。3column-span规定元素应该横跨的列数。3column-width规定列的宽度。3columns规定设置 column-width 和 column-count 的简写属性。

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本不支持多列属性。

使用media来按照尺寸显示

@media screen and (min-width:1200px){

   .post_box{

         width:45%;

         float:left

    }

}

判断当用户使用分辨率大于1200px时， 显示为3列；小于则显示2列