css样式总结
1、css背景
属性 功能 属性值
background-color 填充背景颜色 第一种:red 第二种:#ff00ff 第三种:rgb(0, 0, 255)
background-image 以指定的图片来作为背景 url(D:/image/test.jpg)或者url(http://www.blueidea.com/img/common/bi_logo.png)
background-repeat 设置背景图像的平铺方向 no-repeat(不平铺)、repeat-x(横向平铺)、repeat-y(纵向平铺)
background-position 确定背景图像的位置 第一种方式:left、right、top、bottom、center,
left bottom,left top,right top,right bottom
第二种方式:以坐标定位,(0,0)为起点:(10px,10px)、(50%,50%)
background-attachment 背景图像随滚动轴的移动方式 scroll: 随着页面的滚动轴背景图像将移动;
fixed: 随着页面的滚动轴背景图像不会移动
所有属性一起使用: background:no-repeat fixed center url(图片路径);
2、css文本
属性 功能 属性值
text-indent 把web页面上的段落的第一行缩进 长度单位:10px、5em (1em=16px),这个长度值也可以为负值,不过在设为负值 的时候要注意,首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。
3、水平对齐
text-align 设置文本的对齐方式 left、right、center、justify(左右两遍都对齐)、inherit(继承父元素的对齐方式)
4、字间隔
word-spacing 字与字之间的间隔 长度值,长度值也可为负值
5、字母间隔
letter-spacing 字母与字母之间的间隔 长度值,长度值也可为负值
6、字符转换
text-transform 将文本中的字母进行大小写转换 uppercase(全部转换为大写)、lowercase(全部转换为小写)、capitalize(只将首字母大写)
7、文本装饰
text-decoration 给文本加上一些装饰,ep:下划线、上划线、贯穿线等
underling、overline、line-through
8、处理空白字符
white-space 处理文本中的空白字符的方式 pre(浏览器不会忽略文本中的空白字符)
nowrap(浏览器会忽略点换行符,除非是适用的<br>换行)
pre-wrap(保留空白字符序列,但是文本行会正常地换行)
pre-line(会像正常文本中一样合并空白符序列,但保留换行符)
9、css字体系列
font-family 指定文本的字体 Times, TimesNR, ‘New Century Schoolbook‘,Georgia, ‘New York‘, serif
注意:p {font-family: Times, TimesNR, ‘New Century Schoolbook‘,Georgia, ‘New York‘, serif;}
这样列一个列表的目的是,如果用户没有安装第一个字体,则会选择第二个,如果第二个也没有安装,就会选择第三个,以此类推。
font-style 设置字体的风格 italic(斜体)、oblique(文本倾斜显示)
font-variant 字体的变形 small-caps(在一段英文中,小写的字母被该变为大写,大写字母改变大型的大写字母)
font-weight 字体的加粗 bold(粗体字符)、bolder(更粗的字符)、lighter(更细的字符)
100、200、300、400、500、600、700、800、900定义由细到粗的字符
font-size 字体的大小 ep:font-size:16px; 注:16px = 1em
10、css链接
a:link 普通的、未访问的链接
a:visited 用户已经访问过的链接
a:hover 鼠标位于链接的上方时
a:active 链接被点击的时候
注意:text-decoration:none; 一般用于消除超链接的下划线
11、css列表
属性 功能 属性值
list-style-type 列表标志的类型 disc(黑色实心圆点)、circle(空心圆点)、square(黑色实心小正方行)
decimal(数字1、2、3)、lower-roman(i、ii、iii)、upper-roman(I、II、III)
lower-alpha(小写英文字母)、upper-alpha(大写的英文字母)
list-style-image 替换掉列表默认的小图标 url(图标路径)
list-style-position 确定标志出现在列表项内容之外还是内容内部 inside、outside
list-style 列表的几个属性一起使用 ul {list-style:square inside url(图标路径);}
12、css表格
border 设置表格的边框 ep: border:2px solid blue; 粗体,2个像素宽,蓝色的边框
border-collapse 设置是否将表格边框折叠为单一边框 separate(没有折叠为单一的边框,默认值)、collapse(将边框折叠为单一的边框)、inherit继承父元素的属 性值
text-align 设置表格文本的对齐方式 left、right、center
padding 设置表格单元格的内边距 长度值
background-color 设置表格的背景颜色
color 设置表格文本的颜色
caption-side 设置表格标题的位置
只有两个:top、bottom
empty-cells 设置是否显示表格中的空单元格 hide(隐藏)、show(显示)、inherit(继承父元素的属性值)
刚开始写blog,排版有些问题,还望大家见谅。