日志
Mesiade的CSS完全对应手册（基础属性篇）
热度 4 |
Background
- background-color 背景颜色
有三种写法别是：background-color:yellow;background-color:#00ff00;background-color:rgb(255,0,255);基本上都是用第二种写法，默认值是transparent也就是透明。
- background-image 背景图像
background-image: url(http://i.imgur.com/Uj8Zl.jpg);这个不用多说了吧，和签名图的调用方式一样，当和背景颜色同时被设置时优先显示图像。
- background-repeat 背景图像重复方式
background-repeat: repeat-x;水平方向重复background-repeat: repeat-y;垂直方向重复background-repeat:no-repeat;仅显示一次background-repeat: repeat;垂直方向和水平方向重复
一般都是 no-repeat 默认值是repeat
- background-attachment 背景图像固定方式
background-attachment: fixed;当页面的其余部分滚动时，背景图像不会移动。background-attachment: scroll;默认值。背景图像会随着页面其余部分的滚动而移动。
这个怎么设就看个人喜好了
- background-position 背景图像的起始位置
background-position:top left;有这几种写法：
- top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right
也可以这样写：background-position:x% y%;以及这样写:background-position:5px 5px;
这个属性小屋一般用不到。
最后背景属性可以写在一起：background: #00FF00 url(http://i.imgur.com/Uj8Zl.jpg) no-repeat fixed top;
如果不设置其中的某个值，也不会出问题。
Border
- border-width 边框宽度
有4种写法：border-width:10px 20px 30px 40px;分别是上边框为10px，右边框为20px,下边框为30px，左边框为40px，就是顺时针顺序。border-width:10px 20px 40px;分别是上边框为10px，左和右边框为20px,下边框为40px，就是上，左右，下。border-width:10px 20px;分别是上和下边框为10px，左和右边框为20px，就是先上下，后左右。border-width:10px;所有 4 个边框都是10xp。
当然也可以分开写：border-top-width：10px;
border-right-width：20px;
border-bottom-width：30px;
border-left-width：40px;
也可以使用已定义的属性：
thin（细的边框）medium（ 中等的边框） thick（ 粗的边框）。
一般都是用px的
- border-style 边框类型
写法和宽度差不多只要把原本是width的地方换成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 的值。
- border-color 边框颜色
写法也和上面两位差不多，把写width或是style的地方换成color。可能的值color_name 规定颜色值为颜色名称的边框颜色（比如 red）。hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
最后border这个属性也是可以写在一起的border:5px solid red;border-top:thick double #ff0000;
Text
color:red;color:#00ff00;color:rgb(0,0,255);三种写法 没什么好说的...
line-height:200%基于当前字体尺寸的百分比行间距。line-height: 50px设置固定的行间距。line-height: 3设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
text-align:left把文本排列到左边。默认值：由浏览器决定。text-align:right把文本排列到右边。text-align:center把文本排列到中间text-align:justify实现两端对齐文本效果。
h1 {text-decoration:overline}定义文本上的一条线。h2 {text-decoration:line-through}定义穿过文本下的一条线。h3 {text-decoration:underline}定义文本下的一条线。h4 {text-decoration:blink}blink! 定义闪烁的文本。
Font
- font-style 字体的风格
font-style:normal;默认值font-style:italic;显示一个斜体的字体样式。font-style:oblique;显示一个倾斜的字体样式。
这边要说下italic和oblique的区别，看上去效果一样，其实用途是不同的，因为并不是每个 字体都能设置斜体（italic）的，这个时候就要靠oblique来帮忙实现倾斜的效果。
- font-weight 文本的粗细
font-weight:normal;默认值font-weight:bold;定义粗体字符
可能的值normal 默认值
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100 200 300 400 500 600 700 800 900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
一般一個bold就夠用了
- font-size 字体的尺寸
font-size:200%;字体大小为200%。font-size:12px;字体大小为12像素。
Dimension
- height 元素的高度
height:100px;高度为100像素，也可以用%。
- min-height 元素的最小高度
min-height:100px;写法和height差不多。
- max-height 元素的最大高度
max-height:100px;写法也和height差不多。
- width 元素的宽度
width:100px;宽度为100像素，可以用%。
- min-width 元素的最小宽度
min-width:100px;写法和宽度差不多。
- max-width 元素的最大宽度
max-width:100px;写法也很宽度差不多。
