CSS系列知识（二）

CSS注释

注释

以/* 开始

以*/结束

被注释掉的文字会自动隐藏

<style>

/*设置所有的p元素中的内容为红色*/

p{

  color:red;

}

</style>

<p>红色的p</p>

CSS尺寸

设置元素的尺寸

<style>

p#percentage{

  width:50%;

  height:50%;

  background-color:pink;

}

p#pix{

  width:180px;

  height:50px;

  background-color:green;

}

</style>

<p id= "percentage"> 按比例设置尺寸50%宽 50%高</p>

<p id= "pix"> 按象素设置尺寸  180px宽 50 px高</p>

CSS背景

属性名background-color

1. 预定义的颜色名字

  比如red,gray,white,black,pink，参考颜色速查手册

2. rgb格式

    分别代表红绿蓝的比例  rgb(250,0,255)  即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色

3. 16进制的表示

    #00ff00 等同于 rgb(0,255,0)

<style>

p.gray {background-color: gray;}

h1 {background-color: transparent}

h2 {background-color: rgb(250,0,255)}

h3 {background-color: #00ff00}

</style>

<pclass="gray">灰色</p>

<h1>透明背景，默认即透明背景</h1>

<h2>紫色</h2>

<h3>绿色背景</h3>

图片做背景

<style>

div#test

  {

    background-image:url(/study/background.jpg);

    width:200px;

    height:100px;

  }

</style>

<div  id="test">

  这是一个有背景图的DIV

</div>

背景重复 

background-repeat属性

值可以选

repeat; 水平垂直方向都重复

repeat-x; 只有水平方向重复

repeat-y; 只有垂直方向重复

no-repeat; 无重复

<style>

div#norepeat

  {

    background-image:url(/study/background_small.jpg);

    width:200px;

    height:100px;

    background-repeat: no-repeat;

  }

div#repeat-x

  {

    background-image:url(/study/background_small.jpg);

    width:200px;

    height:100px;

    background-repeat: repeat-x;

  }

</style>

<div  id="norepeat">

  背景不重复

</div>

<div  id="repeat-x">

  背景水平重复

</div>

背景平铺 

属性：background-size

值：contain

<style>

div#contain

  {

    background-image:url(/study/background_small.jpg);

    width:200px;

    height:100px;

    background-size: contain;

  }

</style>

<div  id="contain">

   背景平铺，通过拉伸实现，会有失真

</div>