网页制作精讲,第二部分css-1.pptVIP

第一章、css简介 1.1 什么是CSS？ CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在设计者的丰富想象力下千变万化。 （w3c xhtml简介） CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. CSS是大小写不敏感的,CSS与css是一样的 1.2 为什么使用CSS 内容与表现分离,有了CSS,网页的内容与表现就可以分开了. 表现的统一,可以使网页的表现非常统一,并且容易修改. 使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量. 例：1.2-1/2，比较两段代码 1.3 一个CSS例子 html　　　head　　　　titlecss word/title 　 　　　　style/*CSS样式定义开始*/　　　　　 !-- 　　　　　 div　　　　 　{width：200; filter　　　　　　　　　　　　　　　　　　　　　　　　　　　　　blur(add=true,direction=135,strengh=20); 　　　　　　} //*定义DIV范围内的样式，包括宽度(width)、模糊滤镜属性(blur)*// 　　　　　　-- 　　　　　 /style//*样式定义结束*// 　　 /head　　 　　 body 　　 div//*以下的区域内采用head中style里面定义的格式*// 　　 p style=font-size：48;font-style：bold;　　 color:red;hongen /p　　 //*定义字体样式(font-style)，包括字体大小(size)、粗细(bold)、颜色　　　　　　　(color)*//　　 /div 　　 /body 　 /html 1.4 CSS的引用 1.4.1内联引用：直接把CSS样式直接作用在HTML标签中. 格式：标签 style=“属性：属性值；…” 内容 /标签 例1.4.1：p style=font-size: 10px; color: #FFFFFF; 使用CSS内联引用表现段落. /p 1.4.2 内部引用：可以使用style标签直接把CSS文件中的内容加载到HTML文档内部. 例：1.4.2.html 1.4.3 外部引用：即使用外接的CSS文件。 head link rel=stylesheet type=text/css href=“url /head 一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件. 外部引用相对于内部引用和内联引用来说是高效的是节省宽带的. 外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).内联引用(直接在HTML标签中使用)虽然是一种快捷的方式(除了层叠的情况,高级教程中我会介绍层叠),但是不利于以后的统一修改和表现的一致性,所以不提倡使用. 1.5 CSS选择符（名字）： CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS。怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用的CSS样式。 选择符语法： 选择符名字 { 声明1; 声明2；…} 如：p { font-size:12px; } .dreamdublue { color:blue;font- size:12px; } CSS选择符可以使用英文字母的大写与小写,数字,连字符,下划线进行组合命名。 英文字母大写与小写 A-Z ，a-z 数字 0-9 连字号 - 下划线 _ 注意：CSS选择符只能以字母开头。 常用的三种选择符： 1.5.1 标签选择符：即直接用HTML标签来作为选择符的名称。所有此类标签将共享一个样式。 格式为：标签{属性:属性值;} 例：h1{color:red;} p{font-size:10px;} 1.5.2 类别选择符：即class选择符，在需要的标签中设置class属性。设置为相同class的标签都将共享同意样式。 格式为：.cd{属性：属性值;} 例：h1 class=“cd”我的测试/h1 .cd{color:red;} 1.5.3 id选择符 在需要的标签中设置id属性。设置为id的标