css学习笔记——css样式总结

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，排版有些问题，还望大家见谅。