CSS属性

CSS样式属性

一、字体

1.font-family:Tahoma,Arial,"Hiragino Sans GB";
字体，第一种字体不能显示时，用第二种字体

2.font-size:xx-small or 10px
字体大小:
绝对大小：xx-small、x-small、medium、large、x-large、xx-large、x-large、xx-l
相对大小：large smaller

使用数字和度量单位
绝对单位：
px：显示器像素个数
mm、cm、in：毫米 厘米 英寸，使用这类单位，字体大小不随显示器的分辨率而改变
pt:windows系统定义的字体大小单位
pc:
相对单位：
em:2em指字体的原始大小的2倍
ex：x,y字体告诉不一样，x为y的一半
%：300%指字体原始大小的3倍

3.font-style:Italic
字体样式：
normal:
Italic:斜体字体用的斜体
Oblique:正常字体用的斜体

4.text-decoration:underline overline;
添加横线：
underline:下划线；
overline:上划线；
line-through:中划线
none:无;

5.font-weight:bold;
指定粗体
normal bold bolder lighter

6.font-variant:small-caps
区域内的所有字母大写显示
small-caps:小型大写字母
normal：普通

7.text-transform:uppercase
capitalize:首字母大写
uppercase:所有字母大写
lowercase:所有字母转换消协
none:不转换

8.color:#ffffff
定义文本颜色
1）#RRGGBB #ff0000:红色 #ffff00:黄色
2）rgb rgb(255,00,00)红色 rgb(255,255,0)黄色
3）red:红色 yellow:黄色

9.font:italic bold 12pt Times,serif;
字体为Times或serif,粗体加斜体，大小12pt

二、背景
1.background-color:red
transparent:透明的

2.background-image:url(/img/photo.gif);
设置背景图片

3.background-repeat:no-repeat;
确定背景图像是否以及如何重复。
no-repeat:不重复，只出现一次
repeat:在水平和垂直方向上重复平铺背景图像
repeat-x:水平方向上重复
repeat-y:垂直方向上重复

4.background-attachment:scroll
确定背景图像是否随内容滚动
fixed:固定背景图像
scroll:随内容的移动而移动

5.background-position:left bottom;
指定背景图像水平位置和垂直位置
水平位置：left,center,right,20px
垂直位置：top,center,bottom,20px

6.table{background:#00cc00 url(logo.jpg) no-repeat bottom right}

三、文本
文字间距、对齐方式、上标、下标、排列方式、首行缩进
1.word-spacing:10px;
设置单词之间间距

2.letter-spacing:10px;
设置字符之间的间距

3.vertical-align:middle;
指定文本的垂直对齐方式，
sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)

4.text-align:left;
设置文本的水平对齐方式
left right center justify(两端对齐)

5.text-indent:2px;
设置文本第一行的缩进值，负值用于将文本第一行向外拉

6.white-space:pre
处理元素内的空白符
normal:将空白符全部压缩，多个空格折叠成一个
pre：想<pre>一样预处理
nowrap:指定文本只有遇到<br>标签时才换行

7.line-height:10px;
设置文本所在行的行高。
140%：行高等于文字大小的1.4倍

四、位置
1.position:absolute;
设置对象的定位方式
absolute:绝对定位，能精确定位元素在页面的独立位置，而不考虑页面上的其他元素的定位设置。
relative:相对定位，所设定的位置是相对于元素通常应在的位置的编译来。
static:无特殊定位，默认值。

2.left top width height

3.z-index:99 使用定位后，才有效
设置发生堆叠的各元素的层叠顺序
99:正值，显示在没有设置z-index属性的元素的上面
-99:负值，显示在下面
若都没有设置，那么后出现的元素堆叠在早出现的元素上面

五、布局
1.visibility:inherit
设定元素的可见状态
inherit:继承父层的显示属性
visible：显示在网页中
hidden:隐藏元素

2.display:block
设定元素的显示状态
block:在元素前和后都会有换行，块级元素
inline:行内元素
list-item：与block相同，但增加了目录列表项标记
none :不显示元素

visibility与display
隐藏元素(visibility:hidden)不会减少浏览器显示一页所需的时间，
当一个元素被隐藏后，它仍然要占据浏览器窗口中的原有空间。
所以，如果将文字包围在一个隐藏元素周围时，其显示效果将是文字包围
一块空白区域
display:none 浏览器会忽略这个元素，浏览器显示包括不显示元素的页面是，
会比显示原始被隐藏的页面要快。

3.overflow:hidden;
如果元素中的内容超出了元素的大小时，处理溢出
visible:增加元素的显示空间大小，从而将元素中的所有内容显示出来
hidden:不现实超出显示空间的内容
scroll：显示滚动条
auto:只有在超出元素的显示大小时才显示滚动条

4.float:left
定义网页中其他文本如何环绕该元素
left:表示文本浮在这个元素的左边
right:
none :表示这个元素两边不允许有文本

5.clear:left
控制是否允许其他对象漂浮在元素的旁边。
left:不允许左边有浮动对象，元帅会移动到在其左边的漂浮对象的下面显示
right:
none:允许两边都可以有浮动对象
both：不允许有浮动对象。

6.边缘
boder-width:10px;
border-color:red;
border-style:none;
none:无边框；dotted:点线；dashed:虚线;solid:实线;double:双线；groove：凹槽；

a:active{border:thick double red}

六、列表
1.list-style-type:none;
指定目录列表项标记的样式类型
disc(实心圆) circle(空心园) square(方块) decimal(阿拉伯数字)
lower-roman(小写罗马数字) upper-roman(大写罗马数字)

2.list-style-image:url(/logo.gif)

3.list-style-position:inside
设置列表项标记是在文本内还是文本外
inside(内部)：相当于文本的一部分，会缩进两格
outside(外部)

七、其他
1.cursor:hand;
设置当鼠标移动到某个元素上时的形状
hande(手型) crosshair(十型)

CSS属性,古老的榕树,5-wow.com