网站设计与Web应用开发技术(第四版)（微课版）ch04 层叠样式表(CSS)_第1页
网站设计与Web应用开发技术(第四版)（微课版）ch04 层叠样式表(CSS)_第2页
网站设计与Web应用开发技术(第四版)（微课版）ch04 层叠样式表(CSS)_第3页
网站设计与Web应用开发技术(第四版)（微课版）ch04 层叠样式表(CSS)_第4页
网站设计与Web应用开发技术(第四版)（微课版）ch04 层叠样式表(CSS)_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

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

文档简介

第4章层叠样式表(CSS)教学目标教学重点教学过程第2页教学目标理解CSS与网页制作之间的关系掌握在网页中加入CSS的基本方法理解CSS选择器及盒子模型掌握CSS滤镜的用法

CSS典型案例第3页教学重点在网页中使用CSS的基本方法

CSS选择器及盒子模型第4页教学过程

CSS概述将CSS引入网站

用CSS定义样式

CSS选择器及盒子模型

CSS的滤镜应用

CSS典型用法实例第5页4.1CSS概述是CascadingStyleSheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理几乎所有的浏览器都支持可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能更易于管理样式，方便编排，减少管理成本便于统一风格第6页4.2

将CSS引入网站要想使用CSS来进行样式的设定和管理，首先需要定义CSS，再让浏览器识别并调用。通常添加样式的方式有如下四种：内嵌样式内部样式表链入外部样式表导入外部样式表请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先级高低来决定哪个生效第7页4.2

将CSS引入网站内嵌样式<pstyle="color:blue;font-size:10pt;">CSS样式表</p>内部样式表在<head><sytle>下设置：p{color:blue;font-size:10pt;}链入外部样式表在单独的CSS文件中定义，之后在网页<head>中添加：<linkrel="stylesheet"href="aDefinedCSS.css"type="text/css">导入外部样式表在单独的CSS文件中定义，之后在网页<head><sytle>下添加：@import"aDefinedCSS.css"第8页4.2

将CSS引入网站CSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下： selector{property:value} 如：body{color:black} p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}此处定义的是：段落排列居中，段落中文字为黑色，字体是arial。

第9页4.3CSS选择器<!doctypehtml><html><head><style>p{text-align:center;color:black;font-family:arial;}</style>

</head><body><h3align="right"color="blue">

利用HTML标签很复杂</h1><p>利用CSS更简单</p></body></html>标签选择器第10页4.3CSS选择器类别选择符类别选择器是根据类名来选择应用样式的，因此用它可以将相同的元素分类定义为不同的样式。实现时是通过在自定义类名前加点号，如： P.right{text-align:right} P.center{text-align:center}第11页4.3CSS选择器ID选择器由HTML代码中的ID参数指定单独的样式，和类选择符类似。如：#intro{font-size:150%;}第12页4.3CSS选择器通用选择器用*来表示匹配任何标签。如：

*{font-size:12px;}表示所有的元素的字体大小都是12px第13页4.3CSS选择器后代选择器一种单独针对某种元素包含关系而定义的样式表，如：tablea{font-size:32px}第14页4.3CSS选择器交集选择器只有选择的元素要求同时具备多个条件时，交集选择器才能匹配并应用相关的样式。注意，交集选择器没有空格，如：h3.special{color:red;}第15页4.3CSS选择器并集选择器组为了减少样式的重复定义，可将相同属性和值的选择器组合起来书写，使用逗号将选择器分开，从而构成并集选择器。例如： h1,h2,h3,h4,h5,h6{color:green}第16页4.3CSS选择器伪类选择器伪类可以看作一种特殊的类别选择器，一种支持CSS的浏览器能自动识别的特殊选择器。其最大的用处在于可以对链接在不同状态下定义不同的样式效果。例如：a:link{color:#FF0000;text-decoration:none;} /*未访问的链接*/a:visited{color:#00FF00;text-decoration:none;} /*已访问的链接*/a:hover{color:#FF00FF;text-decoration:underline;} /*鼠标停留在链接上*/a:active{color:#0000FF;text-decoration:underline;} /*激活链接*/4.3CSS选择器第17页4.3CSS选择器伪元素选择器伪元素名说

明::after用来和content属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容::before用来和content属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容::first-letter仅作用于块对象。内联要素要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。设置对象内的第一行样式::first-line仅作用于块对象。内联要素要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。如果未强制指定对象的width属性，首行的内容长度可能不是固定的::placeholder设置对象文字占位符的样式::selection设置对象被选择时的样式如：p::first-letter{font-size:300%;}第18页4.3CSS选择器样式表的继承性与层叠性层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置

div{color:red;font-size:9pt}……<div><p>这个段落的文字为红色9号字</p></div>P中内容会继承DIV所定义的样式。但当样式表继承遇到冲突时，总是以最后定义的样式为准

第19页4.3CSS选择器注释可以在CSS中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时理解代码的含义

在浏览器中，注释是不显示的

注意与HTML中的注释方式的区别，此处只能以“/*”开头，以“*/”结尾

第20页4.4

CSS的布局及盒子模型定位属性值说

明static是默认选项，由元素框正常生成；块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中relative元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据；偏移时，可能会覆盖其他元素absolute元素框不再占有文档流位置，并且相对于包含块进行偏移(包含块就是最近一级外层元素，其position不为static的元素)fixed元素框不再占有文档流位置，并且相对于文档显示区域进行定位sticky粘性定位，相当于relative和fixed的融合；最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位relative其偏移是相对于原先在文档流中的位置第21页4.4

CSS的布局及盒子模型尺寸定义方式说

明px像素单位，显示的最小单位；代表显示屏上显示的每一个小点，属于绝对尺寸单位em相对于父元素的font-size，属于相对尺寸单位；一般浏览器字体大小默认为16px，则2em==32px，这种方式计算较为复杂rem与em类似，也属于相对尺寸单位；主要不同在于它是相对于html根元素的font-size百分比纯粹的相对尺寸单位，所描述的是其相对于父元素的百分比值第22页4.4

CSS的布局及盒子模型CSS的盒子模型第23页4.4

CSS的布局及盒子模型CSS的盒子模型<!doctypehtml><html><head><styletype="text/css">div{width:100px;height:20px;border:1pxsolidred;padding:20px;margin:30px;}</style></head><body><div>无中生有</div><div>缘木求鱼</div></body></html>盒子真实占有屏幕宽度=左border+左padding+width+右padding+右border第24页4.4

CSS的布局及盒子模型<!doctypehtml><html><body><ul><li>第一点</li><li>第二点</li><ul></body></html>CSS的盒子模型默认的盒子参数第25页4.4

CSS的布局及盒子模型常用布局要求设置方法行内元素对父元素设置text-align:center;定宽块状元素设置左右margin值为auto;不定宽块状元素设置子元素为display:inline,然后在父元素上设置text-align:center;通用方案flex布局，对其父元素设置为display:flex;justify-content:center;CSS布局水平布局第26页4.4

CSS的布局及盒子模型常用布局要求设置方法父元素一定，子元素为单行内联文本设置父元素的height等于行高line-height父元素一定，子元素为多行内联文本设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;块状元素设置子元素position:fixed（absolute），然后设置margin:auto;通用方案flex布局，对其父元素设置为{display:flex;align-items:center;}CSS布局垂直布局第27页4.5CSS滤镜使用CSS的滤镜，可以利用客户端的计算资源对图片生成各种类似于Photoshop特效滤镜的效果CSS滤镜属性的标识符是filter

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();第28页4.5CSS滤镜滤镜对比

如实例4-28第29页4.5CSS滤镜复合滤镜<!DOCTYPEhtml><html><html><head><metachars

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

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

最新文档

评论

0/150

提交评论