CSS常用属性 博客分类： CSS

       css通过添加各种属性对页面的格式进行设置，而最常用的方法就是使用选择器，而选择器有多种，如类选择器(class）,ID选择器等。

       而在css中我们最常用的一些属性有：

（1）字体属性：

                Serif 字体

                Sans-serif 字体

                Monospace 字体

                Cursive 字体

                Fantasy 字体。五种常用字体

       例：

body {font-family: sans-serif;}

    "font-size":设置字体大小

    例：

p {font-size: 60px; }

    "font-weight"设置字体粗细

    例：

p {font-weight: 800;}

    (2)设置外边距的最简单的方法就是使用margin属性

     margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

     与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left

p {margin: 20px 30px 30px 20px;}

     单边设置外边距：

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

     设置内边距最简单的方法就是设置padding属性：

     CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

h1 {padding: 10px 0.25em 2ex 20%;}

    (3)设置背景属性

     可以使用background-color属性r为元素设置背景色。这个属性接受任何合法的颜色值。

p {background-color: gray;}

     要把图像放入背景，需要使用 background-image属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

body {background-image: url(/i/eg_bg_04.gif);}

     url为图片所在位置的唯一连接。

     如果需要在页面上对背景图像进行平铺，可以使用 background-repeat属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

    可以利用background-position属性改变图像在背景中的位置。

 

下面的例子在 body 元素中将一个背景图像居中放置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

       为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异