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(十型)
原文:http://www.cnblogs.com/teemogao/p/3844655.html