网页制作如何借助css设计式样
CSS,CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。,实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的： 选择符属性：属性值,CSS注释以“/*“ 开头，以“*/“ 结尾,样式表能为我们做什么,可以将格式和结构分离。 可以以前所未有的能力控制页面布局。 可以制作体积更小下载更快的网页。 可以将许多网页同时更新，比以前快更容易。 浏览器将具有更友好的界面,用CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。,局部引用样式表, 局部引用样式表 局部引用H1标记 局部引用P1标记 ,定义H1标签,此H1标签会被样式表中的H1所替换,此P标签会被样式表中的P所替换,定义P标签,外部链接样式表, 外部样式表的使用 欢迎来到ASP 这里是动态网页制作 ,mystyles.css 文件内容如下： H1 color: green; font-family: “黑体“ P background: yellow; font-family: “宋体“ ,Rel指明类型,href指明引用文件的名称,在行内加入样式, 在行内加入样式 欢迎来到ASP 动态网页 ,CSS类选择符,用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类： p.right text-align: right p.center text-align: center 然后用不在不同的段落里，只要在HTML标记里加入定义的class参数： 这个段落向右对齐 这个段落是居中排列的,注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。,CSS类选择符,类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式： .center text-align: center （定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符： 这个标题是居中排列的 这个段落也是居中排列的 注意：这种省略HTML标记的类选择符是我们以后最常用的CSS方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式。,一个CSS例子, 这是一个CSS的例子 Welcome To ASP 这是一个CSS的例子 ,在和 标签之间插入以下代码： ,CSS例子, css word hongen ,定义DIV范围内的样式，包括宽度(width)、模糊滤镜属性(blur),CSS字体属性,hongen hongen hongen,颜色和背景属性,文本属性, letter-spacing设置了字间距为1em，其中1em为一个长度单位；text-align设置了对齐方式为 两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt,一个CSS例子, welcome to ASP ,鼠标激活的状态，颜色为蓝色(blue),文本装饰属性值为上划(overline)，字体大小为20pt,访问过的状态，颜色为红色,文本装饰属性值为没有,装饰超链接, link css 未访问的链接 访问过的链接 鼠标激活的链接 , link css 未访问的链接 访问过的链接 鼠标激活的链接 ,未访问时的状态,颜色为绿色,文本装饰属性(text-decoration)值为没有,边距属性,边距顺序是上、右、下、左。,bodymargin：1em 2em 3em 4em 定义文本的上、右、下、左的边距分别为1、2、3、4em,鼠标属性,鼠标效果演示, changemouse 鼠标效果 请把鼠标移到相应的位置观看效果。 手的形状 移动 反方向 等待 求助 ,空间定位, zindex 这段文字将覆盖在图片上。 ,CSS的滤镜,格式：filter：filtername（parameters）,filtername是滤镜属性名,详细内容请看下表,alpha属性,alpha是来设置透明度的。它的表达格式：,filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）,Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。 Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。,alpha属性演示, alpha Beautiful ,定义DIV区域内的样式（位置为绝对定位,left、top、width的坐标）,定义图片的样式，绝对定位，滤镜属性是透明度为0,分别是把Alpha中的Style参数值为2和3,再看一下效果,blur属性, filter blur Welcome ,设置文字的模糊程度,设置文字阴影的角度,
