第二章(2) CSS

1.padding 填充属性:是指元素的内容和边框之间的填充空间的大小叫做Padding 

   eg:图片和边框间的距离就是padding

2.背景图片 :

h1 { //对1号标题指定背景图片
background-image: url("head.jpg");} 

  在CSS中你可以对任何元素指定背景图片

  body{ background-image :url("图片路径"); } //对body指定背景图片

3.背景重复  background-repeat属性默认的是repeat,允许重复

  background-repeat:repeat-x  尽在x轴方向上重复

你可以对背景显示的方式进行微调,通过background-repeat属性,你可以指定背景重复方式

下面的规则是说背景图片不允许重复 

 body {
        background-image: url("head.jpg");
        background-repeat: no-repeat; } //说明元素body的背景图片head.jsp不允许重复。background-repeat属性默认的是repeat

4.background-attachment:背景附着  

       background-attachment:scroll 随着页面的滚动轴背景图片将移动

  • fixed: 随着页面的滚动轴背景图片不会移动
  • inherit: 继承

5.background-position:背景定位,指定背景图片在元素中的位置

         body {
		     background-image: url("head.jpg");
			 background-repeat: no-repeat;
			 background-position: 100px 100px;}//指定背景图片距上面100像素,距左边100像素

用关键字来指定

 body {
		     background-image: url("head.jpg");
			 background-repeat: no-repeat;
			 background-position: bottom right;}//bottom下面,right右边   表示图片的位置是右下角

6.字体属性 font-family:用来控制元素中的字体

  p {
background-color:green; font-family: Verdana;}//注意英文字母的变化

7.字体风格:用来控制字体是否为斜体

 p { font-style:italic;}

 italic和oblique都是用来控制字体为斜体的

  normal:控制字体正常

8.字体粗细 font-weight 

 bolder比bold的程度要深一些,lighter比normal的程度要浅一些 

9.字体大小 font-size 字体的大小设置既可以用关键字,也可用具体的数值

10.行间距属性 line-height:它来指定了行与行的垂直距离的大小 ,可以用在段落与段落之间的行间距,还有行有行间的距离

 eg: p { line-height:10;}

11.字体变量属性 font-variant 可以用来改小写变大写

 font-variant:normal 就等于没给字母加风格

 font-variant:small-caps 将小写字母该成大写字母。以前是大写的,字母大小 会变的更大

12.文本缩进属性(text-indent)  通过text-indent属性,你可以在CSS中每个段落首行进行缩进

     1)  如果你想是整个文本向后移动 ,那么可以用padding-left

        p {padding-left :40x} 整个段落距左边的填充距离为40x

     2) 缩进还可以是负的数值

           p {padding-left :-40x}

13.文本对齐(text-align) 默认的是文本左对齐

 p{text-align:left;}

14.文本装饰属性(text-decoration)  在CSS中文本装饰效果涉及到上划线,下划线,删除线等文本的一些装饰效果

   text-decoration:underline;//下划线

   text-decoration:none;//默认值,无装饰

15.文本变形属性(text-transform)

   

16.连接与化类别

用CSS的  link化类别来指定没有访问过的链接属性

 1) 没有访问过的链接式绿色的,访问过的链接是蓝色的

   a:visited{

    color : red;

    background-color:black;   

}

 

 

 

 

 

 

 

 

 

 

  

 

 

 

 

 

 

      

 

 

---恢复内容结束---

posted @ 2013-04-17 15:30  springstudent  阅读(209)  评论(0编辑  收藏  举报