第二章(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;   

}

 

　　

      

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