css样式的属性。

Question

css样式中的属性，是什么意思？

Answer 1

一、字体属性
　　与字体有关的属性包括：font-family,font-style,font-variant,font-weight,
font-size,font。执行顺序是：font-style,font-variant,font-weight,font-size
1、font-family:如果字体的名称中含有空格，那么要加上双引号。
2、font-style:normal|italic|oblique
3、font-variant:normal|small-caps
4、font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
　　normal相当于400，bold相当于700
5、font-size:absolute-size|relative-size|length|percentage
absolute-size:xx-small|x-small|small|medium|large|x-large|xx-large
relative-size:larger|smaller
6、font:font-style|font-variant|font-weight|font-size|line-height|font-family
　　font属性可以一次定义前边提到的所有的字体属性。
二、颜色和背景属性
1、color:一般指前景色。
2、background-color:背景色。
3、background-image:
　　body{background-image:url(marble.jpg)}
4、background-repeat:repeat|repeat-x|repeat-y|no-repeat
　　body{background-image:url(marble.jpg);background-repeat:repeat-y}
5、background-attachment:scroll|fixed
　设置文字在背景图案上面滚动，背景图案保持固定不动用fixed.
6、background-position:percentage|length{1,2}|top|center|bottom|left|center|right
7、background:background-color|background-image|background-repeat|background-attachment|background-position
　　可以一次设置前面的所有的有关背景的属性。如body{background:white url(bg.jpg)}
三、文本属性
1、word-spacing:normal|length
2、letter-spacing:normal|length
3、text-decoration:none|underline|overline|line-through|blink
4、vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage
　　这个属性用来对齐图片效果特别好。如image{vertical-align:baseline}
5、text-transform:capitalize|uppercase|lowercase|none
capitalize:每个单词的第一个字母大写。
uppercase:所有字都大写。
lowercase:所有字都小写。
6、text-align:left|right|center|justify
7、text-indent:length|percentage
　　适用于块级元素，定义文本首行的缩进方式。如p{text-indent:1cm}
8、line-height:normal|number|length|percentage
四、容器属性
1、margin-top:length|percentage|auto
　　如body{margin-top:0}
2、margin-right:同上
3、margin-bottom:同上
4、margin-left:同上
5、margin:length|percentage|auto {1,4}
　　前四个属性都可以用margin来定义。如果给出的值少于四个，那么缺失的部分就取其对边的值。

Answer 2

css缩写的主要规则如下：

margin/padding
通常写法,会遇到以下三种情况

margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;

margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;

那么我们进行CSS缩写后会让你目惊口呆的效果.如下

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

书写顺序是 margin:上 右 下 左 ,

在CSS中.值为0的时候可以将单位省略不写就像第三种写法一样.

其中padding和margin基本是一样的写法

怎么样.是不是大吃一惊.是的.CSS缩写就是这样做到的.

border
通常写法:

border-width:1px;
border-style:solid;
border-color:#000;

缩写后:

border:1px solid #000;

书写顺序:border:宽度 边框线种类 颜色;

Background
通常写法:

background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0 0;

缩写后:

background:url(bg.png) #00f no-repeat 0 0;

书写顺序:background:背景图片 颜色 重复类型 定位;
background:image color repeat position;

Font
通常写法:

font-family:"宋体";
font-size:2em;
line-height:180%;
font-weight:800;

缩写后：

font:800 2em/180% "宋体";

书写顺序:font:加粗 字体大小/行高 字体;

在使用Font缩写时至少要有 字体大小和字体这两项

font:字体大小 字体;

Color
通常写法:

color:#000000;
color:#001188;

缩写后:

color:#000;
color:#018;

16进制的色彩值时，如果每两位的值相同，可以缩写一个