网页制作如何借助css设计式样.pptVIP

CSS 样式表能为我们做什么 局部引用样式表 外部链接样式表 在行内加入样式 CSS类选择符 CSS类选择符 一个CSS例子 CSS例子 CSS字体属性 颜色和背景属性 文本属性 一个CSS例子 装饰超链接 边距属性 鼠标属性 鼠标效果演示 空间定位 CSS的滤镜 alpha属性 alpha属性演示 blur属性 * CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。 实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的： 选择符{属性：属性值} CSS注释以/* 开头，以*/ 结尾 可以将格式和结构分离。 可以以前所未有的能力控制页面布局。 可以制作体积更小下载更快的网页。 可以将许多网页同时更新，比以前快更容易。 浏览器将具有更友好的界面 用CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。 HTMLSTYLE TYPE=“text/css”!--H1 { color: green; font-family: impact }P { background: yellow; font-family: courier }--/STYLEHEADTITLE局部引用样式表/TITLE/HEADBODYH1局部引用H1标记/H1P局部引用P1标记/P/BODY/HTML 定义H1标签 此H1标签会被样式表中的H1所替换 此P标签会被样式表中的P所替换 定义局部样式表, TYPE=“text/css”指定了使用CSS 样式表定义应写在注释内，以防止不兼容的浏览器不能正常显示 定义P标签 HTMLHEADTITLE外部样式表的使用/TITLELINK REL=stylesheet HREF=mystyles.css TYPE=text/css/HEADBODYH1欢迎来到ASP/H1P这里是动态网页制作/P/BODY/HTML mystyles.css 文件内容如下： H1 { color: green; font-family: 黑体 }P { background: yellow; font-family: 宋体 } Rel指明类型 href指明引用文件的名称 引用外部样式表的语法 HTMLHEADTITLE在行内加入样式/TITLE/HEADBODYH1 STYLE=color: orange; font-family: 宋体欢迎来到ASP/H1P STYLE=background: yellow;font-family: 黑体动态网页/P/BODY/HTML 用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类： p.right {text-align: right} p.center {text-align: center} 然后用不在不同的段落里，只要在HTML标记里加入定义的class参数： p class=right这个段落向右对齐/p p class=center这个段落是居中排列的/p 注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。 类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式： .center {text-align: center}（定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符： h1 class=“center”这个标题是居中排列的/h1 p class=“center”这个段落也是居中排列的/p  注意：这种省略HTML标记的类选择符是我们以后最常用的CSS方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式。 HTML HEAD TITLE这是一个CSS的例子/TITLE /HEAD BODY H1Welcome To ASP/H1 P这是一个CSS的例子/P /BODY /HTML 在HTML和 BODY标签之间插入以下代码： STYLE TYPE=text/css !--H1 { color: green; font-size: 37px; font-