css教程学习课件.ppt

八、颜色与背景属性 　　 在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。 　　 1、颜色属性：color 　　 属性值：16种颜色名（上文已经介绍过）、数值（#RRGGBB或是r%,g%,b%）。 　　 在< font>、< p>、< body>、< table>及其单元元素、标题等对象都可以用到color属性。下例指定超链接的初始颜色和被激活时的颜色： 　　 < style type="text/css"> 　　 a { color: green} 　　 a:hover { color: red} 　　 < /style> 2、背景属性 ·background-color 定义页面或指定对象的背景颜色，属性值和颜色属性相同。　　 ·background-image 属性值：none, url（address），包括相对路径和绝对路径，指定对象的背景图像。　 ·background-repeat 属性值：no-repeat（无重复）, repeat（重复）, repeat-x（x方向重复）, repeat-y（y方向重复），缺省值为repeat，指定背景图像的显示方式。该属性需与background-image和background-position组合使用。　　 ·background-attachment 属性值：scroll（随对象一起滚动）, fixed（固定），缺省值为scroll。该属性指定对象的背景图像是否与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。　　 ·background-position 属性值：垂直位置vertical，指定top, center, bottom和具体数值、百分比；水平位置horizontal，指定left, center, right和具体数值、百分比。定义背景图像的绝对或相对位置显示。　　 这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。 这里是一个较完整的例子： 　　 body { background-image: url(yueju/images/002.gif); 　　 background-repeat: no-repeat; 　　 background-position: 20px 50px; 　　 background-attachment: fixed} 　　 用background属性简写为： 　　 body { background: url(yueju/images/002.gif) no-repeat 20px 50px fixed} * CSS 教 程 一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。 优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。  层叠样式表为你完成这一任务。 通过大量的 HTML 语言实现，即每次遇上标题，用 HTML 标签进行设置： 　　 < h1>< font face=" 宋体 " color="blue"> 这里是标题 < /font> < /h1> 　　显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。 　　――最后，对于公司建设的大型站点来说，往往分成几个组各自开发，这时候就更需要一个统一的样式表来规划网站的整体面貌，各个组都在遵循这统一的样式表的基础上进行各自的开发建设。 HTML 语言由标志和属性构成， CSS 也是如此。 样式表基本语法： 　　 HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… } 　　样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表和外联样式表，即有页面内放置、外部引用、外部导入三种方式。 　 1 、内联样式表 例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下： 　　 < HTML> 　　 < HEAD> 　　 < TITLE>This is a CSS samples< /TITLE> 　　 < STYLE TYPE="text/css"> 　　 < !-- 　　 H1 { color: blue } 　　 --> 　　 < /STYLE> 　　 < /HEAD> 　　 < BODY> 　　 ... 页面内容… 　　 < /BODY>