教程网第八章css表

上传人：我*** IP属地：北京上传时间：2023-06-08 格式：PPTX 页数：60 大小：5.93MB 积分：16 举报 版权申诉

已阅读5页，还剩55页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSS层叠样式表第八章2目标什么是层叠样式表层叠样式表的类型与基本写法层叠样式表的属性和值3CSS文档结构与显示的混合一直是HTML语言的一大缺陷，也许导致这一问题存在的原因是不同浏览器之间的不兼容性。从总体来说，层叠样式表CSS能够完成以下工作：祢补HTML对网页格式化功能的不足，如段落间距，行距等字体变化和大小页面格式的动态更新排版定位等4层叠样式表的特点将格式和结构分离以前所未有的能力控制页面布局、制作体积更小、下载更快的网页将许多网页同时更新，比以前更快更容易浏览器将成为更友好的界面5层叠样式表的类型层叠样式表CSS包含以下3中类型：自定义层叠样式表重定义标签的层叠样式表层叠样式表选择符6层叠样式表的基本写法在HEAD内的实现层叠样式表一般位于HTML文件的头部，即<head>与<head>标签内，并且以<style>开始，以<style>结束。<styletype=“text/css”>H1{font-size:x-large;color:red}H2{font-size:large;color:blue}</style>其中，<style>和</style>之间的是样式的内容。Type表示使用的是text中的层叠样式表书写的代码。{}前面的是样式的类型和名称，{}中的是样式的属性。上述代码定义了<H1>和<H2>标记使用的字号和颜色7层叠样式表的基本写法在BODY中实现在BODY中实现主要是在标记中引用，例如要让H3标记的字体的大小为10pt,可以使用下面的语法：<h3style=“font-size:10pt”>这样的写法虽然直观，但是无法体现出层叠样式表的优势，因此并不推荐使用。在文件外的调用层叠样式表的定义既可以是在HTML文档内部，也可以单独成立文件。<linkrel=“stylesheet”href=“style.css”type=“text/css”>8层叠样式表的属性和值字体属性主要包括字体族科\风格\加粗\大小\英文大小写转换等。Font-family:字体1，字体2，字体3……字体属性字体属性描述Font-family用一个指定的字体名或一个种类的字体族科Font-size字体显示大小Font-style以3个方式其中的一个来定义显示的字体：normal(普通)，italic(斜体)或oblique(倾斜)Font-weight以bold为值可以使字体加粗Font-variant设置英文大小写转化9字体属性<TITLE>CSS字体属性</TITLE><StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><pclass=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。</P></BODY>第4行设定H1标签样式，设定了字体为黑体。第5行设定了名为text的自定义样式，规定了字体为宋体或仿宋。第10行的标题字会自动应用H1样式，11行通过class属性引用了text样式。10字体属性Font-size:<absolute-size>\<relative-size><absolute-size>是绝对长度（单位为pt像素和in英寸）<relative-size>是相对长度，使用百分比Font-style:normal\italic(斜体)\oblique(偏斜体)Font-weight:normal\bold(粗体)\bolder(超粗体)\lighter(比默认字体还细)\100-900(级别)Font-variant:normal\small-caps(将小写英文字体转换为大写英文字体)11字体属性<TITLE>CSS粗细属性</TITLE><StyleType="text/css">H2{font-variant:small-caps}</Style></HEAD><BODY><H1>主流的网页设计软件</H1><H2>hello</H2><pclass=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。</P></BODY>第4行设定了H1标签样式，规定了字体为黑体，并设定粗体和斜体，字号为12pt。第5行设定名为text的自定义样式，并在第7行定义了H2的小写转换大写12文本属性文本属性字体属性描述Letter-spacing定义一个附加在字符之间的间隔数量Word-spacing定义一个附加在单词之间的间隔数量Text-decoration文本修饰属性允许通过5个属性中的一个来修饰文本Text-align设置文本的水平对齐方式，包括左对齐，右对齐、居中、两端对齐Text-indent文本的首行缩进Line-height行高属性接受一个控制文本基线之间的间隔的值Text-transform控制英文文字大小写13文本属性设定字符间距：Letter-spacing:normal\<length>(长度单位)设定单词间距：Word-spacing:normal\<length>(长度单位)设定文字修饰：Text-decoration:underline(文字加下划线)\overline(上划线)\line-through(删除线)\blink(闪烁文字，网景浏览器支持)\none设定文字对齐方式：Text-align:left\right\center\justify(两端对齐)14文本属性设定文字首行缩进：Text-indent:value(设定文字首行缩进)设定文字行高：Line-height:value设定英文大小写：Text-transform:catitalize(将每个英文单词的首字大写)\uppercase(将每个英文字母均转换为大写)\lowercase(将每个英文字母均转换为小写)\none15文本属性<StyleType="text/css"></Style></HEAD><BODY><h1>Itisnevertoolatetomend.</h1><P>Slowandsteadywinsthepace.</P></BODY>第3行设定了H1标签样式为文字居中，字号和字母间距。第4行设定了文字居右，以及字号和单词间距。16文本属性<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><P>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而MACROMEDIA公司的网页设计三剑客软件DREAMWEAVER、FLASH、FIREWORKS正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P></BODY>第3行设定了段落标记中的文字缩进为18pt，文字排列为居左，字号为9pt，字母间隔为3px。行高为12pt。17文本属性<StyleType="text/css"></Style></HEAD><BODY><H1>Itisnevertoolatetomend.</H1><pclass=text>Slowandsteadywinsthepace.</P></BODY>第3行设定H1标签样式，规定了将每个英文单词的首字大写。第4行设定了名为text的自定义样式，规定了将每个英文字母均转换为大写。18颜色和背景属性颜色和背景属性属性描述Color定义颜色Background-color定义一个元素的背景颜色Background-image定义一个元素的图像Background-repeat设定一个指定的背景图像Background-repeat设定一个指定的背景图像如何被重复Background-position设置水平和垂直方向上的位置Background-attachment设定背景图像是否随页面滚动而滚动19颜色和背景属性Colorcolor_valueBackground-color:color_valueBackground-image:<img_file_url>Background-repeat:repeat(背景图像平铺)\repeat-x(背景图像以X轴方向平铺)\repeat-y(以Y轴方向平铺)\no-repeat(不平铺)Background-position:[value(以百分比的形式{x%y%}或绝对单位的形式{xy}设定背景图像的位置)]\[top\center\bottom]\[left\center\right]20颜色和背景属性<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><P>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。</P>第3行设定了H1标记的样式为白色文字，兰色的背景色。21颜色和背景属性<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><P>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而MACROMEDIA公司的网页设计三剑客软件DREAMWEAVER、FLASH、FIREWORKS正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P></BODY>22边框属性边框属性属性描述属性描述Border边框Border-right-color右边框颜色Border-top上边框Border-bottom-color下边框颜色Border-left左边框Border-top-style上边框样式Border-right右边框Border-left-style左边框样式Border-bottom下边框Border-right-style右边框样式Border-color边框颜色Border-bottom-style下边框样式Border-style边框样式Border-top-width上边框宽度Border-width边框宽度Border-left-width左边框宽度Border-top-color上边框颜色Border-right-width右边框宽度Border-left-color左边框颜色Border-bottom-width下边框宽度23边框属性设定边框宽度：<border-width:value>设定边框颜色：<border-color:color_value>设定边框样式：<border-stylevalue>边框样式属性属性描述none无边框dotted边框由点组成dash边框由短线组成solid边框是实线double边框是双实线groove边框带有立体感的沟槽ridge边框成脊形Inset边框内嵌一个立体边框outset边框外嵌一个立体边框24边框宽度、颜色和样式<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><P>现在的网页再也不是图片的堆积和枯燥无味的文本了，</P></BODY>第3-14行设定了边框宽度、颜色和样式25定位属性利用CSS的定位技术是CSS的一个应用很广的知识点，通过CSS我们不仅可以控制元素的颜色、边框等属性，还可以控制元素的平面或空间位置以及可见性。CSS提供两种定位方法，相对定位与绝对定位。相对定位是指让操作的元素在相对其他元素的位置上进行偏移。而绝对定位是指让操作的元素参照原始文档进行偏移。定位属性属性描述Position

absolute(绝对定位)、relative(相对定位)Top层距离顶点纵坐标的距离Left层距离顶点横坐标的距离Width层的宽度Height层的高度Z-index决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素Clip限定只显示裁切出来的区域。裁切出来的区域为矩形。只要设定两个点即可，一个是矩形左上角的顶点，由TOP和RIGHT两项的设置完成，另一个是右下角的顶点，有bottom和right设置Overflow当层的内容超出层所能容纳的范围时，visible:无论层的大小，内容都显示。Hidden:会隐藏超出层的大小的内容。Scrol:不管内容是否超出层的范围，选中此项都会为层添加滚动条。Auto:只在内容超出层的范围时才显示滚动条。visibility这一项是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层(子层)和被嵌套的层(父层)。Inherit:子层继承父层的可见性，父层可见，子层也可见。Visible:无论父层可见是否，子层都可见。Hidden:无论父层可见是否，子层都隐藏。27定位属性<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><divclass=self>目前，网页技术进入了一个新的阶段，</div>第3-14行设定了self自定义样式的位置信息，第20行调用self样式。28区块属性在格式化页面对象时，CSS将所有对象都放置在一个容器中，这个容器称为区块。区块属性属性描述Width设定对象的宽度Height设定对象的高度Float让文字环绕在一个元素的四周Clear指定在某一个元素的某一边是否允许有环绕的文字或对象Padding决定了究竟在边框与内容之间应该插入多少空间距离。Top\right\bottom\left分别用于设定上下左右的填充距。Margin设置一个元素在4个方向上与浏览器窗口边界或上一级元素的边界的距离。与padding类似，它也有4个属性，分别控制4个方向29区块属性<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><divclass=self>目前，网页技术进入了一个新的阶段，</div>第3-6行设定了self自定义样式的区块信息，在区块的上下左右四周都留有边距，第12行调用self样式。30鼠标光标属性在网页中默认的鼠标指针只有两种，一种是最普通的箭头，另一种是当移动到链接上时出现的“小手”。但是现在越来越多的网页都使用了CSS鼠标指针技术，当将鼠标移动到链接上时，可以看到多种不同的效果。Cursor:valueCSS可以通过cursor属性实现通过样式改变鼠标形状，鼠标放在被此项设置修饰的区域上时，形状会发生改变。31鼠标光标属性鼠标光标属性属性描述属性描述Hand手Ne-resize向东北的箭头Crosshair交叉十字N-resize向北的箭头Text文本选择符号Nw-resize向西北的箭头WaitWindows的沙漏形状W-resize向西的箭头Default默认的鼠标形状Sw-resize向西南的箭头Help带问号的鼠标S-resize向南的箭头E-resize向东的箭头Se-resize向东南的箭头32鼠标光标属性<StyleType="text/css"></Style></HEAD><BODY><H1>主流的网页设计软件</H1><imgsrc=14-21.jpgalign=left><P>目前，网页技术进入了一个新的阶段，</P>第3行设定了整体页面的鼠标为交叉十字，第4行设定了<IMG>标记的鼠标为带问号的光标。33列表属性CSS中有关列表的设定丰富了列表的外观。List-style-type:value列表属性属性描述List-style-type设定引导列表项目的符号类型List-style-image选择图像作为项目的引导符号List-style-position决定列表项目所缩进的程度34列表符号类型属性列表符号类型属性属性描述Disc在文本行前面加”●”实心圆Circle在文本行前面加”○”空心圆Square在文本行前面加”■”实心芳块Decimal在文本行前面加普通的阿拉伯数字Lower-roman在文本行前面加小写罗马数字Upper-roman在文本行前面加大写罗马数字Lower-alpha在文本行前面加小写英文字母Upper-alpha在文本行前面加大写英文字母none不显示任何项目符号或编号35设置列表样式：List-style-type:value<StyleType="text/css"></Style></HEAD><BODY><H2>图像设计软件</H2><OL><LI>Photoshop<LI>Illustrator<LI>Freehand<LI>CorelDraw</OL></BODY>第4行设定了<OL>标签样式的列表类型为大写罗马数字。36设置列表图像：List-style-image:<url><StyleType="text/css"></Style></HEAD><BODY><H2>图像设计软件</H2><OL><LI>Photoshop<LI>Illustrator<LI>Freehand<LI>CorelDraw</OL></BODY>第4行设定了<OL>标签样式的列表图像为12-45.gif。37设定列表位置:list-style-position:outside\inside列表位置属性值属性描述Outside列表贴近左侧边框inside列表缩进<StyleType="text/css"></Style><H2>图像设计软件</H2><OL><LI>Photoshop<LI>Illustrator<LI>Freehand<LI>CorelDraw</OL>第5行设定了<OL>列表图像和位置缩进。38滤镜属性使用滤镜属性可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本，以及其他一些对象。对于滤镜和渐变效果，前者是基础，后者是滤镜效果的不断变化和演示更替。39滤镜属性滤镜属性属性描述属性描述Alpha透明的层次效果Gray灰度效果Blur快速移动的模糊效果Invert将颜色的饱和度以亮度值完全反转Chroma特定颜色的透明效果Mask遮罩效果Dropshadow阴影效果Shadow渐变阴影效果Fliph水平翻转效果Wave波浪变形效果Flipv垂直翻转效果XrayX射线效果Glow边缘光晕效果40Alpha滤镜-设置透明层次{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=startyfinishx=finishx,finishy=finishy)}Alpha属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗的说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。411.Alpha滤镜属性值Alpha滤镜属性值属性描述Opacity代表透明度水准。默认的范围是0-100，其实是百分比的形式，也就是说，0代表完全透明，100代表完全不透明Finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用它们来指定结束时的透明度。范围是0-100Style参数指定了透明区域的形状特性。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形Startx代表渐变透明效果的开始X坐标Starty代表渐变透明效果的开始Y坐标Finishx代表渐变透明效果结束X的坐标Finishy代表渐变透明效果结束Y的坐标42Alpha<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了alpha滤镜为半透明，样式为放射状432.Blur滤镜-模糊效果用手指在一幅尚未干透的油画上迅速划过时，画面就会变的模糊。Blur滤镜就是用于产生同样的模糊效果。{filter:blur(add=add,direction=direction,strength=strength)}Blur滤镜属性值属性描述Add是一个布尔判断true(默认)或者false。它指定图片是否被改变成印象派的模糊效果Direction用来设置模糊的方向。其中0°代表垂直向上，然后就每45°为一个单位。它的默认值是向左的270°Strength只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认是5个。44Blur<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了blur滤镜的模糊强度为20453.FlipH滤镜-水平翻转代表水平翻转{filter:filpH}<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了水平翻转滤镜464.FlipV滤镜-垂直翻转表示垂直翻转{filter:filpV}<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定垂直翻转滤镜475.Gray滤镜-灰度使一张图片变成灰度图{filter:gray}<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了灰度滤镜486.Invert滤镜-反转把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。{filter:invert}<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了反转滤镜497.Xray滤镜-X射线让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的X光片。{filter:xray}<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了xray滤镜508.Wave滤镜-波纹{filter:wave(add=add,freq=freq,lightstrength=lightstrength,phase=phase,strength=strength)}Wave滤镜属性值属性描述Wave属性把对象按垂直的波形样式打乱。默认是true()Add表示是否要把对按照波形样式打乱Freq是波形的频率，也就是指定在对象上一共需要产生多少个完整的波形Lightstrength可以对于波形增强光影的效果，范围是0-100Phase用来设置正玄波的偏移量strength代表振幅大小51Wave<StyleType="text/css"></Style></HEAD><BODY><H2>强大的CSS滤镜</H2><IMGSrc=14-27.jpg></BODY>第4行设定了wave滤镜529.Chroma滤镜-特定颜色的透明对于指定的颜色，可以设置为透明效果{filter:chroma(color=color_value)}<StyleType="text/css"></Style></HEAD><BODYbgcolor=#336699><H2>强大的CSS滤镜</H2><IMGSrc=14-35.gif></BODY>第4行设定了chroma滤镜5310.Dropshadow滤镜-阴影对于指定的颜色，可以

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

教程网第八章css表

文档简介

温馨提示

最新文档

评论

教程网第八章css表

文档简介

温馨提示

最新文档

评论

相关文档