网站设计综合开发-CSS样式表.PDFVIP

网站设计综合开发 CSS 样式表 最后修正：2008 年 11 月 29 日 1. CSS 样式表概述 1.1. 什么是 CSS 样式表？ CSS 指层叠样式表 (Cascading Style Sheets)，这是制作网页的一种新技术，通过使用 CSS 技 术，可以实现内容与表现相分离。 什么是内容与表现相分离？ 打个比方，人体就是内容，衣服就是表现。一个人在不同的场合不同的需要下，可以更换衣服（表现）。 这里的衣服（表现），就是由 CSS 控制的。 1.2. 为什么要用 CSS 样式表？ 1. 就是使用 HTML 排版的比较困难; 2. 可以简化网站样式的代码; 3. 如果网页数量很多,工作量很大; 4. 维护时，更改页面风格效果比较麻烦; 可以看出，样式表极大地提高了工作效率。所有的主流浏览器均支持层叠样式表。 2. 添加 CSS 样式表的四种方法 2.1. 内联样式 p style=”color:red;font-size:16px”内联样式实例/p 2.2. 内部样式表（推荐） head style tyle=”text/css” !-- p { color:red; font-size:16px; } -- /head 2.3. 外部链接样式表(推荐) head link href=”my.css” rel=”stylesheet” type=”text/css” /head 2.4. 外部导入样式表 head style tyle=”text/css” - - 1 - - !-- @import url(my.css) -- /head 注：当使用上面四种方式插入同样的 CSS 时，CSS 样式生效的优先级也不同。1 最低，4 最高 1. 浏览器缺省设置 2. 外部样式表 3. 内部样式表（位于 head 标签内部） 4. 内联样式（在 HTML 元素内部） 3. CSS 样式表的格式 CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择符 {属性：值} 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都 有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而 包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。 值的不同写法和单位 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000 ： p { color: #ff0000; } 为了节约字节，我们可以使用 CSS 的缩写形式： p { color: #f00; } 我们还可以通过两种方法是使用 RGB 值： p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这 么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 p