《网页制作css篇》由会员分享，可在线阅读，更多相关《网页制作css篇（106页珍藏版）》请在金锄头文库上搜索。
1、1、什么是、什么是cssCSS是Cascading Style Sheets（层叠样式表）的简称。 1996年12月17日W3C(The World Wide Web Consortium)推出了css1规范, 自CSS1的版本之后，又在1998年5月12日发布了CSS2.0版本。目前最新版本为css3，目前还没有完全支持css3的浏览器。对于css2支持最好的浏览器之一是Mozzla Firefox和Opera，而应用比较广泛的Windows IE，却并没有完全支持css2.CSS层叠样式表1)、浏览器支持完善，目前css2.0是众多浏览器普遍支持的最完善的版本，最新的浏览器均以该版本为支持
2、原型进行设计。2)、样式设计控制功能强大，对网页对象的位置排版，能够进行象素级的精确控制。支持所有字体、字号样式，优秀的盒模型控制能力，以及简单的交互设计能力3)、表现与内容分离4)、使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 5)、使用样式表能使页面更新更快，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者将许多网页同时更新。2、css的特点的特点选择符选择符属性：属性值属性：属性值 例如：body color: blackh1 font-family: arial ; font-size: 12p
3、t1)、如果属性的值是多个单词组成，必须在值上加引号。如， p font-family: sans serif2)、如果需要对一个选择符指定多个属性，使用分分号号将所有的属性和值分开。最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。3、Css的基本语法的基本语法3)为了使样式更加易于阅读，一般将每条声明写在一个新行内p text-align: center; color: black; font-family: arial; 1）内联式样式表-在body内实现2）内嵌式样式表-在head内实现3）外部链接式样式表-在文件外调用4）导入外部样式表4、层叠式样式表的使用方法、层叠式
4、样式表的使用方法1）内联式样式表内联式样式表在对象的标记内使用对象的style属性定义适用其的样式表属性 2）内嵌式样式表内嵌式样式表在和之间3）外部链接式样式表外部链接式样式表把编辑好的CSS文档保存成“.CSS”文件，然后在中定义。定义的格式是: 使用外部链接式样式表的优点：独立于HTML文件，便于修改多个文件可以引用同一个样式表文件，从而保持页面外观的统一。样式表文件只需要下载一次，就可以在其他链接了该文件的页面内使用。浏览器会先显示HTML内容，然后再根据样式表文件进行渲染，从而使访问者可以更快的看到内容。4）导入外部样式表导入外部样式表指在内嵌式样式表的里导入一个外部样式表，导入时用
5、import 5、css数据单位px(象素，font-size:12px)em(相对于当前对象内文本的字体尺寸,font-size:1.2em）ex(相对于字符的高度的相对尺寸,font-size:1.2ex）pt(点/磅,font-size:9pt）Pc(派卡,font-size:0.5pc）In(英寸,font-size:12in）mm(毫米,font-size:4mm）cm(厘米,font-size:0.2cm）1）类型选择符）类型选择符：指以网页中已有的标签名作为名称的选择符。2）群组选择符）群组选择符：除了可以对单个对象进行样式指定外，同样可以对一组对象进行相同的样式指派，如h1,h
6、2,h3,p font-size:12px; font-family:arial;6、选择符的种类、选择符的种类3）包含选择符）包含选择符：对某个对象的子对象进行样式指定，包含选择符指选择符组合中前一个对象包含了后一个对象，对象之间使用空格作为分隔符，如h1 span font-weight:bold;上面的样式将被应用于下面的哪段文本？上面的样式将被应用于下面的哪段文本？这是我的一段文本这是我的一段文本这是这是span内的文本内的文本单独的单独的h1单独的单独的span被被h2标签套用的文本标签套用的文本这是这是h2下的下的span4)Id选择符#content font-size:20px
7、; line-height:130%;Id属性将匹配所有id=“content”的元素.5)Class选择符.p1 font-size:20px; color:red;类选择符和ID选择符的差别：类选择符可以重复使用，且可以用在任意元素上，使用任意次。Id属性应该是唯一的，只有拥有该id的元素才会应用该样式。6)标签指定式选择符标签指定式选择符h1#ft font-size:20px; color:green;针对针对id为为ft的的h1标签指定样式标签指定样式h1.p2 color:pink;针对所有针对所有class=“p2”的的h1标签指定样式标签指定样式7)组合选择符组合选择符div
8、.p3 color:yellow;针对div标签下的所有class为p3的标签指定样式#p4 h2 color:#340967;针对id为p4的标签下的所有h2标签指定样式8)伪类一种特殊的类选择符,对链接在不同状态下定义不同的样式效果.a:linkcolor:red;a:hovercolor:pink;a:activecolor:blue;a:visitedcolor:green;a.a1:linkcolor:black;a.a1:hoverfont-style:italic;对class=“a1”的超链接应用样式9)伪对象div:first-letter font-size:4em;fon
9、t-style:italic;p:first-line font-size:2em; font-style:italic;10）通配选择符*，利用通配选择符可以为所有的元素定义统一的属性。如，*margin:0;7、css属性字体属性font-family : name 设置字体font-style : normal | italic | oblique 设置字体是否倾斜font-variant:normal|small-caps 设置字体是否用小体大写font-size :字体大小设置font-weight : normal | bold | bolder | lighter | numbe
10、r字体粗细设置normal:正常，等同于400bold:粗体，等同于700number:100/200/300/400/500/600/700/800/900bolder 或者 lighter，则是相对其父对象来说的。如果父对象的值为 normal，子对象值设为 bolder，则最终以 bold，即粗体显示。 css属性属性颜色和背景属性颜色和背景属性1)、color定义前景色如，pcolor:red; pcolor:rgb(00,00,255);pcolor:#00ff00;Pcolor:rgb(50%,0,50%) ;2)、background-color定义背景色如，bodybackgr
11、ound-color:yellow;div background-color: rgb(223,71,177) ;css属性属性颜色和背景属性颜色和背景属性3)、Background-image定义背景图片如，bodybackground-image:url(*.jpg);css属性属性颜色和背景属性颜色和背景属性4)、background-repeat背景图案重复方式如，bodybackground-repeat:repeat/no-repeat/repeat-x/repeat-ycss属性属性颜色和背景属性颜色和背景属性5)、background-attachment设置背景是否滚动bod
12、ybackground-attachment:scroll/fixedcss属性属性颜色和背景属性颜色和背景属性6)、background-position设置背景图案的位置如，bodybackground-position:值1 值2默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。 css属性属性颜色和背景属性颜色和背景属性css属性属性-文本属性文本属性1）、word-spacing定义了单词之间的间距2）、letter-spacing定义了各个字母之间、字与字之间的间距css属性属性-文本属性文本属性3）、text-decora
13、tion定义文字的修饰样式text-decoration : none | underline | blink | overline | line-through css属性属性-文本属性文本属性4）vertical-align vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length 参数： baseline : 将支持valign特性的对象的内容与基线对齐 top : 将支持valign特性的对象的内容与对象顶端对齐 text-top : 将支持valign特性的对象
14、的文本与对象顶端对齐 middle : 将支持valign特性的对象的内容与对象中部对齐 bottom : 将支持valign特性的对象的内容与对象底端对齐 text-bottom : 将支持valign特性的对象的文本与对象顶端对齐sub : 下标字 super : 上标字css属性属性-文本属性文本属性5）text-transformtext-transform : none | capitalize | uppercase | lowercase 参数：参数： none : 无转换发生无转换发生capitalize : 将每个单词的第一个字母转换成大将每个单词的第一个字母转换成大写，其余
15、无转换发生写，其余无转换发生uppercase : 转换成大写转换成大写lowercase : 转换成小写转换成小写 css属性属性-文本属性文本属性6）、text-alignText-align:left/center/right/justifyenglish中文对多行中的非最后一行进行两端对齐css属性属性-文本属性文本属性7）、text-indent定义文本的首行缩进方式，建议以em为单位8）、line-height定义文本的行高，行高指的是文本行的基线之间的距离。css属性属性-文本属性文本属性9) white-space : normal | nowrapnormal :默认值。默认
16、处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。p white-space: nowrap; 10)用css实现竖排文字效果layout-flow:vertical-ideographic;css属性属性-文本属性文本属性Css属性属性-容器属性容器属性1、外延边距属性-marginmargin-top: 30px;margin-right: 30px;margin-bottom: 30px;margin-left: 30px;设置对象四边的外延边距margin：1em 2em 3em 4emmargi
17、n：1em 3emmargin：1em 3em 2emmargin:60px;如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。如果提供全部的四个,将用于上、右、下、左2、填充距属性-paddingpadding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;文本边框与文本之间的距离Css属性属性-容器属性容器属性divpadding：1em 2em 3em 4emdivpadding：1em 3emdivpadd
18、ing：1em 3em 2emdivpadding:60px;如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。如果提供全部的四个,将用于上、右、下、左3、边框属性、边框属性1）、边框宽度属性border-top-width: 10px;border-right-width: 5px;border-bottom-width: 6px;border-left-width: 7px;Css属性属性-容器属性容器属性2）、边框颜色属性）、边框颜色属性border-top-color: #00FF00;border
19、-right-color: #FFFF00;border-bottom-color: #00FFFF;border-left-color: #000000;3）、边框样式属性）、边框样式属性border-top-style: dotted;border-right-style: solid;border-bottom-style: double;border-left-style: outset;hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS
20、和UNIX平台上IE5.5+为虚线。否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边 4)复合属性Border-width:1px;Border-color:red;Border-style:solid;如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右
21、。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。如果提供全部的四个,将用于上、右、下、左border-top:1px solid red; border-bottom:1px dotted blue; border-left:1px dotted green; border-right:1px dotted yellow;border:1px solid red;4、尺寸、尺寸Height,widthCss属性属性-容器属性容器属性css属性鼠标属性cursor:auto|crosshair|default|hand|move|e-resize|ne-resize|nw-resiz
22、e|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|url(*.cur/*.ani)Css属性属性列表属性列表属性1）、list-style-type: decimal;disc : CSS1实心圆circle : CSS1空心圆square : CSS1实心方块decimal : CSS1阿拉伯数字lower-roman : CSS1小写罗马数字upper-roman : CSS1大写罗马数字lower-alpha : CSS1小写英文字母upper-alpha : CSS1大写英文字母none : CSS1不使用项
23、目符号 2）、list-style-position: inside/outside;outside : 列表项目标记放置在文本以外，且环绕文本不根据标记对齐inside : 列表项目标记放置在文本以内，且环绕文本根据标记对齐 Css属性属性列表属性列表属性3）、list-style-image: url(./image/book.gif);Css属性属性列表属性列表属性例：vnav.htm,vnav2.htm,vnav3.htm,daohang.html表格属性table, th, td border: 1px solid blue; /*为table,th,td设置蓝色边框*/table
24、border-collapse:collapse; /*将表格边框折叠为单一边框*/table width:600px; th height:50px; td text-align:right; td height:50px; vertical-align:bottom; td padding:15px; table border-collapse:separate; border-spacing:10px 50px; /*指定分隔边框模型中单元格边界之间的距离 */caption caption-side:bottom; /*规定表格标题的放置方式 */1)float : none | le
25、ft |right 参数：none : 对象不浮动left : 对象浮在左边right : 对象浮在右边Css属性布局属性2)clear : none | left |right |bothnone : none : 允许两边都可以有浮动对象both: 不允许有浮动对象left : left : 不允许左边有浮动对象right : right : 不允许右边有浮动对象Css属性布局属性3) overflow : visible | auto | hidden | scrollCss属性布局属性值描述visible默认。内容不会被修剪，会呈现在元素之外。hidden内容会被修剪，但是浏览器不会显
26、示供查看内容的滚动条。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto4)position:absolute|relative absolute:相对浏览器而言，使用top,right,bottom,left 4个方向的距离值确定对象的具体位置。relative:相对定位，参照父级的原始点为原始点,依据left，right，top，bottom等属性在正常文档流中偏移位置Css属性布局属性如果一个对象被设置了绝对定位,它将从本质上与其他对象分离出来.它的定位模式不会影响其他对象,也不会被其他对象的浮动定位所影响.这是带有绝对定位的标题h2.rel_leftposit
27、ion:relative;left:-20pxh2.rel_rightposition:relative;left:20px这是位于正常位置的标题这个标题相对于其正常位置向左移动这个标题相对于其正常位置向右移动AP DIV是使用了CSS样式中的绝对定位属性的Div标签。它可以与表格相互配合进行网页的布局，还可以与行为相结合实现一些特殊的效果。5) z-index : number 检索或设置对象的层叠顺序。大值对象的层级位于小值对象之上.-div标记-块标记，不仅可以放入文本，还可以放入其他html标签，还可以多个div进行嵌套使用，目的是合理的标识出内容区域。它不像链接或者表格具有实际的意义
28、，它只是一个“容器”，用来放置其他元素。然后利用CSS样式从而布置这个容器的摆放位置。-div标记的使用方法-布局Div+CSS布局盒模型(IE6.0,IE7.0,firefox)实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界实际高度=上边界+上边框+上填充+内容高度+下填充+下边框+下边界孤立的盒子与IE8.0的兼容在和之间加入行内元素之间的水平marginspan1span2Margin-rightMargin-left块级元素之间的竖直margin块元素1Margin-bottom:50pxMargin-top:30px块元素二块元素1Margin-bottom:50
29、px块元素二网站整体制作流程n前期策划n页面细化及实施n页面美工设计n静态页面制作n程序开发n后期维护Div+css布局综合应用使用层布局方式制作网页的步骤一般为：构建层结构 插入内容 样式表美化 细节处理 优化样式表刚刚开始使用DIV+CSS布局的用户往往认为“DIV+CSS布局就是将原来用表格的地方用层替代，原来是表格嵌套，现在是层嵌套”，这是一个最大的错误。WEB标准的目的是分离内容和表现，制作者首先要做的事情，就是抛弃一个单元格接一个单元格放置图片和内容的思维方式。符合web标准的布局方式：页面里有的仅仅是内容（文字和图片，图片是指内容中的图片，而非修饰图片），没有任何修饰，它看上去就
30、像一张单调的页面。这些文字和图片仅仅是依次罗列下来，没有任何样式。然后加入表现，将所有修饰的图片做为背景，用CSS来定义每一块内容的位置、字体、颜色等。当抽掉css文件，剩下的就是最本质的内容。这样才能在文本浏览器、手机、PDA等设备中阅读，才能随时修改css实现改版。左边：网站标识右上：重点内容区域及栏目列表右下：语言版本选择Index2.htm为了实现内容的整体居中，需要一个最外层（id=main）来放置左右的内容。主要内容为左右并列的两个层，左边为放置标识的层(id=logo)，右边为放置重点内容和语言选择的边框层(id=box)。重点内容层(id=text)和语言选择层(id=ver)
31、被嵌套在id=box的层内。步骤一：页面层结构nn n n n n n n n n步骤二：插入内容步骤三：样式表美化主背景色及边框色：#006600页面背景色：#cccccc#99cc00#ffffff#ff9900#339933Main层宽度：770px 边框：1Main层高度： 500px 边框1px106px193pxLogo层宽度：464pxText层宽度：270pxVer层高度：16px97pxText层高度： 250px20px4px8px20px20px20px15px50px3pxIndex3.htm步骤一：构建层结构为了实现头部的居中和底纹，需要一个头部底层（id=heade
32、r）来放置头部的内容。头部底层包括标识层(id=logo)和版本选择层(id=ver)下部为了实现居中以及边框和底纹，需要一个定位层（id=main）放置栏目的层(id=menu)为左对齐，内容层(id=text)和版权层(id=footer)则为右对齐 步骤二：插入内容步骤三：样式表美化5px宽度：620px高度： 100px10px13px170px450px16px84px148px472px20px4px17px96px12px7px26px24px宽度：768px 边框：1px30px77px113px205px17px198px97px40pxIndex1.htm Css属性滤镜要
33、使用该属性，对象必须具有height，width，position三个属性中的一个。filter: Wave(Add=true, Freq=4, LightStrength=2, Phase=0, Strength=4);Wave:波浪变形效果Add表示是否把对象按照垂直的波形样式打乱 freq表示波动的频率, 指产生多少个完整的波纹LightStrength增强波纹光影效果,范围0-100 Phase是波动的相位, 正弦波的偏移量,0-100Strength是扭曲的强度,振幅大小Wave.htmGlow:边缘光晕效果filter:glow(color=red,strength=10)l“CO
34、LOR”是指定发光的颜色，l“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。Glow.htmAlpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Alpha滤镜-透明的层次效果将目标元素与背景混合Alpha.htmAlpha滤镜-透明的层次效果opacity代表透明度水准，单位为百分比，0代表完全透明，100代表完全不透明finishopacity可选参数，如果想要设置渐变的透明效果，就可以使用它来指定结束时的透明度style指定透明区域的形状特征
35、。0代表统一形状，1代表线形，2代表放射状，3代表长方形startx代表渐变透明效果开始时的x坐标starty代表渐变透明效果开始时的y坐标finishx代表渐变透明效果结束时的x坐标finishy代表渐变透明效果结束时的y坐标bluradd布尔判断：true或false，指定图片是否被改变成印象派的模糊效果direction设置模糊的方向，0度代表垂直向上，然后每45度为一个单位，默认值是向左的270度strength整数，代表有多少象素的宽度将受到模糊影响,默认为5Blur(Add=?, Direction=?, Strength=?)Blur.htmChroma-特定颜色的透明效果Chr
36、oma.htmDropshadow-阴影效果滤镜filter:dropshadow(color=color,offx=ofx,offy=offy,positive=true) “Color”代表投射阴影的颜色 “offx”和“offy”分别是X方向和Y方向阴影的偏移量 Positive参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果Dropshadow.htmFliph:水平翻转效果Flipv:垂直翻转效果Flip.htmInvert:将颜色的饱和度、亮度值完全反转Xray:X射线效果Gray:把一张图片变成灰度图Gray.htmmaskfilter:mask(color=color)使用MASK属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。Mask.htm
