CSS基础学习2-CSS设置颜色与背景

来源:互联网 发布:mac玩fifaonline3发烫 编辑:程序博客网 时间:2024/05/21 22:54

所有CSS基础学习文档下载地址:http://download.csdn.net/detail/rongrong_love_lc/9663463

二、CSS设置颜色与背景*****************************************1.color2.background-color3.background-image4.background-repeat5.background-attachment6.background-position7.background*****************************************1.color:可以定义字体颜色,默认字体颜色    color.html文件      <html>      <head>              <title>Color例子</title>                  <link rel="stylesheet" type="text/css" href="color.css"/>          </head>          <body>          <h1> 设置文字颜色</h1>            <p>默认字体颜色</p>          </body>      </html>    color.css文件      body {background-color:red;            color:green}      h1 {color:#00ff00}2.background-color:设置背景颜色    html文件同上;    color.css文件如下:      body {background-color:red;                color:green}      h1 {background-color:rgb(0,100,100);        color:#00ff00}3.background-image:设置背景图片    html文件同上;    color.css文件如下:      body {background-image:url("image1.jpg");                color:green}      h1 {background-color:rgb(0,100,100);          color:#00ff00}4.background-repeat:控制图像是否平铺和平铺方式      value:repeat-x(横向平铺);repeat-y(纵向平铺); repeat(横向和纵向都平铺,默认是这个值);no-repeat(不平铺)        html文件同上;        color.css文件如下:          body {background-image:url("image1.jpg");                background-repeat:no-repeat;                color:green}          h1 {background-color:rgb(0,100,100);              color:#00ff00}5.background-attachment:设置固定背景图像    value:scroll(随着屏幕滚动);fixed(固定)    html文件同上;    color.css文件如下:      body {background-image:url("image1.jpg");            background-repeat:no-repeat;            background-attachment:scroll;            color:green}      h1 {background-color:rgb(0,100,100);          color:#00ff00}6.background-position:设置图像放置的位置    value:top,bottom,left,right,center(可以组合,以空格为界限);2cm 2cm(距离左边,顶部距离,可以是cm,也可以是mm[dm,m测试不可以]);50% 20%(水平和竖值比例)    html文件同上;    color.css文件如下:      body {background-image:url("image1.jpg");            background-repeat:no-repeat;            background-attachment:scroll;            background-position:center top;            color:green}      h1 {background-color:rgb(0,100,100);          color:#00ff00}  ********************************************      body {background-image:url("image1.jpg");            background-repeat:no-repeat;            background-attachment:scroll;            background-position:20% 60%;            color:green}      h1 {background-color:rgb(0,100,100);          color:#00ff00}  ********************************************      body {background-image:url("image1.jpg");            background-repeat:no-repeat;            background-attachment:scroll;            background-position:20mm 1cm;            color:green}      h1 {background-color:rgb(0,100,100);          color:#00ff00}7.background:以上属性的缩写    默认顺序如下:(缺省时使用默认值)        [background-color] | [background-image] | [background-repeat] |     [background-attachment] | [background-position]    html文件同上:    color.css文件如下:      body {background:red url("image1.jpg") no-repeat fixed center}      h1 {background-color:rgb(0,100,100);          color:#00ff00}
0 0
原创粉丝点击