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

 

 

 

 

                

css学习笔记——css样式总结,布布扣,bubuko.com

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

上一篇:使用JS取得焦点(focus)元素


下一篇:jquery学习之1-选择器