CSS学习系列七:颜色和背景样式

CSS学习系列七:颜色和背景样式

颜色,背景颜色,背景图片在网页设计中都是使用得比较多的修饰方法.合理的配置网页的前景色与背景色,加上图片的辅助可以让网页看上去更漂亮.

1.前景色

 前景色,通常指的是网页文本的颜色,另外,元素的边框也被认为是前景色的一种,在css中,设置文本颜色所用的属性为color,设置边框颜色所用到的属性是border-color.css中甚至可以为设置每个部通的边框.如上边框,下边框等压死你

color属性:  color :颜色 | inherit

 

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.     <!-- 
  9.  
  10.      body{font-size: 15px;} 
  11.     .a{color: red;} 
  12.     .b{color: #000000;} 
  13.     .c{color: rgb(50%,60%,70%)} 
  14.     
  15.     --> 
  16.     </style> 
  17.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  18.    </head> 
  19.    <body> 
  20.        <div class="a"> 
  21.            1月14日,胡锦涛总书记主持中央政治局常委会审议《政府工作报告》(送审稿)。 
  22.            他全面分析了国际国内形势,深刻阐述了加快转变经济发展方式,调整经济结构的重要性和紧迫性, 
  23.            对2010年的工作提出了明确要求和指导性意见 
  24.        </div> 
  25.        <hr> 
  26.        <div class="b"> 
  27.            1月14日,胡锦涛总书记主持中央政治局常委会审议《政府工作报告》(送审稿)。 
  28.            他全面分析了国际国内形势,深刻阐述了加快转变经济发展方式,调整经济结构的重要性和紧迫性, 
  29.            对2010年的工作提出了明确要求和指导性意见 
  30.        </div> 
  31.        <hr> 
  32.        <div class="c"> 
  33.            1月14日,胡锦涛总书记主持中央政治局常委会审议《政府工作报告》(送审稿)。 
  34.            他全面分析了国际国内形势,深刻阐述了加快转变经济发展方式,调整经济结构的重要性和紧迫性, 
  35.            对2010年的工作提出了明确要求和指导性意见 
  36.        </div> 
  37.    </body> 
  38.  
  39. </html> 

2.背景色

背景是指前景后面的所有空间,那么背景色就是除了文本与边框之外的所有颜色,在css中可以使用background-color来设置背景色;

background-color属性代码 backgroud-color: transparent | 颜色 || inherit

 

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.     <!-- 
  9.  
  10.      body{font-size: 15px;background-color: red;} 
  11.      h1{background-color: #000000;text-align: center;color: #ffffff;} 
  12.      .c{background-color: rgb(50%,60%,70%);} 
  13.      
  14.     
  15.     --> 
  16.     </style> 
  17.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  18.    </head> 
  19.    <body> 
  20.        <h1>武林外传台词</h1> 
  21.        <div class="c"> 
  22.            1月14日,胡锦涛总书记主持中央政治局常委会审议《政府工作报告》(送审稿)。 
  23.            他全面分析了国际国内形势,深刻阐述了加快转变经济发展方式,调整经济结构的重要性和紧迫性, 
  24.            对2010年的工作提出了明确要求和指导性意见 
  25.        </div> 
  26.        <hr> 
  27.  
  28.    </body> 
  29.  
  30. </html> 

3.背景图片

在html中很多元素不但可以设置背景颜色,还可以设置背景图片.在css中设置背景图片有几种方式,不同的方式可以达到不同的效果,

3.1简单应用

在Html中设置网页背景图片的方式<body backgroud=""图片url">在css中设置背景图片的属性为backgroud-image,该属性不但可以设置网页背景图片,还可以设置表格,单元格,按钮等元素的背景图片;

backgroud-image:none || url();

 

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.     <!-- 
  9.  
  10.      body{font-size: 15px;background-image: url(1.jpg);} 
  11.      h1{text-align: center;} 
  12.      div{background-image: url(2.jpg);} 
  13.      input{background-image: url(2.jpg); width: 40px; height: 20px;} 
  14.     
  15.     --> 
  16.     </style> 
  17.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  18.    </head> 
  19.    <body> 
  20.        <h1>武林外传台词</h1> 
  21.        <div class="c"> 
  22.            1月14日,胡锦涛总书记主持中央政治局常委会审议《政府工作报告》(送审稿)。 
  23.            他全面分析了国际国内形势,深刻阐述了加快转变经济发展方式,调整经济结构的重要性和紧迫性, 
  24.            对2010年的工作提出了明确要求和指导性意见 
  25.        </div> 
  26.        <hr> 
  27.        <input type="button"/> 
  28.    </body> 
  29.  
  30. </html> 

3.固定背景图片

通常唉网页上面设置背景图片以后,背景图片会平铺在网页下方,当网页内容比较多的时候,在拖动滚动条,网页的背景色会跟网页的内容一起滚动.

在css中使用backgroud-attachment属性可以将背景图片固定在浏览器上面

如果拖动滚动条背景图片不会滚动

backgroud-attachmen:scroll || fixed || inherit

 

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.     <!-- 
  9.  
  10.      body{font-size: 15px;background-image: url(1.jpg); background-attachment: fixed;} 
  11.      h1{text-align: center;} 
  12.     
  13.  
  14.     --> 
  15.     </style> 
  16.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  17.    </head> 
  18.    <body> 
  19.        <h1>武林外传台词</h1> 
  20.        <div class="c"> 
  21.            3月14日上午,十一届全国人大三次会议在人民大会堂举行闭幕大会。温家宝总理代表国务院所作《政府工作报告》获高票通过。回首过往的三个多月,从起草、修改、征求意见、不断完善,到提请全国人民代表大会审议通过,《政府工作报告》经过了十多次大的修改。 
  22.  
  23.   起草 
  24.  
  25.   总理要求不讲空话套话<br> 
  26.  
  27.   2009年12月8日,中央经济工作会议刚刚结束。以国务院研究室同志为主、邀请有关部门、地方同志和专家参加的《政府工作报告》起草组旋即成立。温家宝总理亲自主持《政府工作报告》起草工作,对报告的指导思想、框架结构、重点内容和表述方法等,都提出了明确要求。他要求,要坚持实事求是,用事实和数据说话,不讲空话、套话。 
  28.  
  29.   2009年12月末,《政府工作报告》初稿形成后,他多次作通篇修改,并对进一步修改完善报告提出许多重要意见。<br> 
  30.  
  31.   2010年1月3日,温家宝将《政府工作报告》(讨论稿)批印国务院领导同志和有关部门审改。在反复权衡、多次修改后,经温家宝审定,于1月6 日报请国务院常务会议审议。<br> 
  32.  
  33.   1月14日,胡锦涛总书记主持中央政治局常委会审议《政府工作报告》(送审稿)。他全面分析了国际国内形势,深刻阐述了加快转变经济发展方式,调整经济结构的重要性和紧迫性,对2010年的工作提出了明确要求和指导性意见。<br> 
  34.  
  35.   修改<br> 
  36.  
  37.   接受座谈建议首次附加注释<br><br> 
  38.  
  39.   1月19日,国务院召开全体会议,决定将征求意见稿发往全国各省区市、香港、澳门特别行政区联络办和党政军群各部门征求意见。收到各类修改意见和建议1000多条,吸收意见180余条。 
  40. <br> 
  41.   1月22日至2月1日,温家宝在中南海先后主持召开五次座谈会,听取各界对《政府工作报告》的意见。为了听取基层群众对政府工作和《政府工作报告》的意见,从2007年起,专门增加一场基层群众代表座谈会。2月1日上午,十位来自基层的普通群众被请进中南海。无党派人士陈章良提出,报告中有些词比较新,比较专,建议附加注释,便于代表和委员理解。起草组接受了这条建议,在报告中第一次附加了“‘三网’融合”、“物联网”、“森林碳汇”等注释。温家宝和起草组的成员还来到河北的农家小院和北京的居民社区,来到群众中间听取意见。 
  42.  
  43.   2月22日,胡锦涛总书记主持召开中央政治局会议,讨论国务院拟提请十一届全国人大三次会议审议的《政府工作报告》稿。 
  44. <br> 
  45.   为了最广泛了解社情民意,2月27日,温家宝如约第二次来到中国政府网、新华网与网民交流。 
  46. <br> 
  47.   讨论 
  48. <br> 
  49.   审议讨论报告修改15处 
  50. <br> 
  51.   3月5日,在十一届全国人大三次会议开幕式上,温家宝宣读了《政府工作报告》。 
  52. <br> 
  53.   两会期间,党和国家领导人,各部门负责人以及《政府工作报告》起草组工作人员分赴各个代表团、政协各界别,听取意见。 
  54. <br> 
  55.   在《政府工作报告》“改革收入分配制度”一段中,有“规范灰色收入”的表述。分组审议中,一些代表提出,灰色收入的概念比较模糊,容易引起歧义。他们的意见得到了采纳。把“坚决打击取缔非法收入,规范灰色收入”改为“保护合法收入,调节过高收入,取缔非法收入”。 
  56. <br> 
  57.   大v会闭幕前夕,一些建设性的意见建议被吸收进报告的定稿之中。根据人大代表审议和政协委员讨论提出的意见和建议,起草组对《政府工作报告》进行了反复推敲和认真修改。共修改15处,其中比较重要的修改有7处。据新华社电 
  58. <br> 
  59.   起草时间表 
  60. <br> 
  61.   2009年12月8日 
  62. <br> 
  63.  <br> 《政府工作报告》起草组成立 
  64. <br> 
  65.   2009年12月末 
  66. <br> 
  67.  <br> 初稿形成后,温家宝多次作通篇修改 
  68. <br> 
  69.   2010年1月14日 
  70. <br> 
  71.   中央政治局常委会审议《政府工作报告》(送审稿) 
  72. <br> 
  73.   1月19日 
  74. <br> 
  75.   国务院全体会议决定将征求意见稿发往各地征求意见 
  76. <br> 
  77.   1月22日至2月1日 
  78. <br> 
  79.   温家宝在中南海先后主持召开五次座谈会听取各界意见 
  80. <br><br> 
  81.   2月22日 
  82. <br> 
  83.  <br> 中央政治局会议讨论拟提请人大审议的《政府工作报告》稿 
  84.        </div> 
  85.        <hr> 
  86.        <input type="button"/> 
  87.    </body> 
  88.  
  89. </html> 

5.背景图片平铺方式

在HTML里,如果背景图片大小小于浏览器窗口的大小浏览器会自动将背景图片平铺以填充整个浏览器窗口,不过在很多情况下这种方式不是最好的背景图片的展示方式

css可以使用background-repeat属性来设置背景图片的平铺方式

backgroud-repeat:repeat  || no-repeat  || repeat-x  || repeat-y

6.背景图片定位

在使用background-repeat属性让背景图片不平铺的时候,背景图片只能定位在左上角,如果想让背景图片在浏览器中居中,这就不是background-repeat属性可以达到的.

在css中可以使用backgroud-position属性来为背景图片定位,有了该属性之后,可以将背景图片放在浏览器中的任何地方

backgroud-position属性: top || center  || bottom || left ||  right  ||  数值  ||百分比 || inherit

7.IE的背景图片定位

除了使用css中backgroud-position属性来定位背景图片以外,在IE浏览器中海可以使用backgroud-position-x属性

与backgroud-position-y属性来顶给背景图片的位置.与backgroud-position属性类似,backgroud-postion-y属性来定位背景图片的位置.

8.综合使用

你可能感兴趣的:(html,Web,PHP,css,职场,休闲,Javascript  )