《网页设计与 Web 前端开发》课件 第3章 使用CSS3样式表_第1页
《网页设计与 Web 前端开发》课件 第3章 使用CSS3样式表_第2页
《网页设计与 Web 前端开发》课件 第3章 使用CSS3样式表_第3页
《网页设计与 Web 前端开发》课件 第3章 使用CSS3样式表_第4页
《网页设计与 Web 前端开发》课件 第3章 使用CSS3样式表_第5页
已阅读5页，还剩46页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与Web前端开发案例教程第3章使用CSS3样式表CONTENT目录初识CSS样式表01盒模型02列表标签及样式03元素分类及转换04CSS常用属性05选择器高级06CSS继承与优先07常用CSS3属性0801初识CSS样式表W3C制定层叠样式表W3C与CSS的诞生W3C于1997年公布HTML4.0时，同步推出CSS1.0标准，正式确立层叠样式表规范，开启网页结构与表现分离的新纪元。CSS版本演进历程1998年发布CSS2.0完善基础功能，2001年启动CSS3模块化开发，2011年成为推荐标准，持续新增特性并向下兼容，奠定现代网页设计基石。CSS核心设计理念通过选择器定位HTML元素，属性值对定义视觉表现，支持多样式层叠规则，实现单一修改全局生效的高效样式管理机制。结构样式分离原理12结构与样式分离概念CSS实现网页结构与样式分离，HTML定义结构，CSS负责外观表现，便于统一管理和修改样式。结构样式分离优势结构样式分离使网页维护更高效，更改样式时无需改动HTML结构，提升开发效率与代码可读性。第一个CSS案例231CSS控制网页外观通过CSS设置文字颜色、背景颜色及段落首行缩进，使用

<style>标签定义样式，如color和background-color属性。CSS基本语法结构CSS样式由选择器、属性和属性值组成，如p{text-indent:2em;}，练习：编写CSS规则设置段落字体大小为16px。CSS创建方法比较内部样式表使用<style>标签，在<head>…</head>中定义，链入外部样式表通过<link>标签实现，导入外部样式表使用@import规则，各有适用场景。多种选择器的使用组合选择器CSS3中“,”是组合选择器，把相同属性和值的选择器组合起来书写，这样可以减少样式重复定义后代选择器CSS3中“”（空格）为后代选择器，可以选择作为某元素后代的元素，它允许根据文档的上下文关系来确定某个标签的样式。类选择器CSS3中“.”是类选择器，定义类选择器时，在自定类的名称前面加一个点号。类选择器的引用很简单，只需在标志后面设置class属性值为类选择器名即可。id选择器CSS3中“#”是id选择器，定义id选择器时，在自定id的名称前面加一个井号。id选择器的引用和类选择器类似，只要把class换成id即可。02盒模型盒模型的概念盒模型基础概念CSS中所有元素均可视为盒模型，由外边距、边框、内边距和内容组成，是布局的基础。盒模型组成部分外边距用于间隔盒子，边框增强视觉效果，内边距控制内容与边框间距，内容为核心区域。盒模型应用示例通过CSS设置div的盒模型属性，如宽度、高度、边框等，实现特定布局效果，可借助开发者工具调试。背景属性作用010203盒模型背景作用背景设置作用于边框以内区域，外边距透明显示父元素背景，合理利用可提升页面美观度与用户体验。背景增强视觉效果通过设置背景颜色等属性，能增强盒子视觉效果，让页面元素更具辨识度，优化整体视觉感受。背景与布局关联背景的呈现与盒模型其他部分相互配合，影响页面布局，需综合考虑以实现合理美观的页面设计。宽度和高度计算方法010203盒模型尺寸构成盒子总宽度和高度由外边距、边框、内边距及内容区域共同决定，需综合计算各部分尺寸以确保布局准确。宽度计算实例如设置margin10px、border1px、padding10px、width100px，盒子总宽度为100+2×10+2×1+2×10=142px。高度计算要点高度计算同宽度，需将内容高度与上下内边距、边框及外边距相加，精准把控实现合理页面布局。浏览器开发者工具使用010203开发者工具功能浏览器开发者工具可查看盒模型参数，直观了解盒子尺寸与布局，助于调试CSS布局问题。查看盒模型示例以Chrome为例，能查看div盒子模型各部分尺寸及布局效果，明确盒模型在实际页面呈现。工具辅助学习开发者工具是学习CSS布局有力助手，可快速定位盒模型相关问题并解决，提升开发效率。样式初始化浏览器默认样式差异不同浏览器对元素的默认样式不同，如自带内外边距，影响布局兼容性。基础初始化方案使用通配符“*”统一重置所有元素内外边距为0，可解决兼容性问题。基础初始化缺点全局匹配所有元素重置样式，会影响渲染性能，降低页面加载速度。推荐初始化方案指定常用标签如body、p、h1、ul等，精准控制样式，平衡效率与兼容性。边框属性边框属性定义边框属性是CSS中用于设置元素边框的复合属性，可同时定义宽度、样式和颜色，简化边框设置。复合写法特点复合写法将边框宽度、样式和颜色合并为一个声明，顺序可互换，简化代码并提高开发效率。单独写法优势单独写法分别设置边框的宽度、样式和颜色，增强代码可读性，便于调试和维护复杂样式。复合写法123复合写法概念边框属性可将宽度、样式和颜色合并为一个声明，顺序可互换，简化代码，提高开发效率。复合写法案例如border:5pxdottedblue;设置边框宽度为5px，样式为点线，颜色为蓝色，简洁高效。复合写法优势复合写法使代码更简洁，减少冗余，但需注意属性值的顺序和语法，避免错误。单独写法单独写法概念边框属性可单独设置宽度、样式和颜色，增强代码可读性，便于调试维护，适合复杂样式场景。单独写法案例如border-width:5px;border-style:dotted;border-color:blue;分别定义边框各属性，清晰明确。单独写法优势使代码结构更清晰，各属性一目了然，在处理不同边框需求时，能精准定位和修改，提高开发效率。内边距属性213内边距的定义内边距控制盒子中边框与内容的距离，影响元素显示效果。设置padding可调整内部空间，优化布局。内边距的取值内边距可取长度值或百分比值，长度值精确控制间距，百分比值灵活适应不同尺寸。内边距的定义方式可分别定义四个方向的内边距，实现复杂布局需求；也可汇总定义，简化代码。外边距属性1·2·3·外边距的定义外边距控制盒子间距，定义边框外区域，可调整元素间空间，优化布局。外边距的取值外边距可取长度值、百分比或auto，灵活控制间距，满足不同布局需求。外边距的定义方式可分别定义四方向外边距，或汇总定义，简化代码，实现复杂布局。外边距特殊行为020301外边距的auto值auto值使外边距自动分配，常用于水平居中。如margin:0auto;可让宽度已知的块元素水平居中，是布局常用技巧。外边距合并特性垂直方向相邻块元素的外边距会合并，取较大值。例如两个相邻块元素外边距分别为10px和20px，最终间距为20px。负外边距应用外边距可取负值，能使元素重叠，实现特殊布局效果。如margin-top:-20px;可让元素向上移动20像素与其他元素重叠。外边距合并垂直相邻的兄弟元素当两个盒子相邻时，在垂直方向上外边距相遇时，它们将形成一个外边距，即发生外边距合并。空块元素空的块级元素若border、padding等不存在，其上下外边距会合并。块级父与子元素块级父元素与其第一个/最后一个子元素间，在特定条件下会发生外边距合并。03列表标签及样式无序列表创建与样式设置1·2·3·无序列表创建基础无序列表由<ul>和<li>标签构建，用于展示无顺序关系的内容项，如商品分类或待办事项。项目符号样式设置通过list-style-type属性定义项目符号样式，支持圆点、方块等预设类型，可增强列表视觉表现。列表交互实践应用在案例中创建商品分类列表，可通过修改CSS属性尝试不同符号类型，强化样式设置技能。有序列表创建与样式设置有序列表创建使用<ol>和<li>标签构建有序列表，通过list-style-type属性设置编号类型，如大写罗马数字。样式设置方法可通过CSS属性list-style-type调整编号样式，支持阿拉伯数字、英文字母等多种类型，满足不同展示需求。互动实践环节尝试修改编号起始值及类型，观察列表样式变化，加深对有序列表样式控制的理解与应用能力。定义列表创建与样式设置定义列表创建使用<dl>、<dt>和<dd>标签创建定义列表，<dt>定义项目，<dd>提供说明。定义列表样式设置通过CSS设置定义列表的样式，如字体、颜色等，提升页面美观度。定义列表应用案例创建一个解释HTML列表类型的定义列表，并为其添加合适的样式。04元素分类及转换块元素特征及应用132块元素特征块元素独占一行，支持宽高属性，通过display:block;设置。块元素应用使用<div>创建块元素，可设置宽度和高度，控制页面布局。转换示例将块元素转换为行内元素，需用display:inline;实现样式调整。行内元素特征及应用行内元素特征行内元素在同一行显示，不支持宽高属性，通过display:inline;设置。行内元素应用使用<span>标签创建行内元素，可设置字体颜色等样式。元素类型转换行内元素与块元素可相互转换，调整布局和样式表现。010302行内块元素特征及应用行内块元素特征行内块元素在同一行显示，支持宽高属性，可通过display:inline-block;设置。行内块元素应用使用<img>标签创建行内块元素，可设置宽度和高度，调整外边距和内边距。行内块元素案例通过实际案例展示行内块元素的创建与样式设置，如图片的宽高调整。05CSS常用属性背景属性设置背景属性设置通过background-color、background-image等属性，可设置元素的背景颜色与图片。利用background-repeat控制图片平铺方式，实现多样化背景效果。背景图片应用使用background-image引入外部图片资源，结合background-position调整图片位置。设置background-size适配不同尺寸屏幕，增强视觉表现力。复合背景管理通过background简写属性统一设置多层背景，调整各层叠加顺序。利用透明度设置实现渐变效果，打造立体化视觉层次。010203字体属性设置1·2·3·字体属性基础字体属性包括font-family、font-size等，用于设置文本的字体和大小，通过CSS实现网页文字样式的定制。字体样式调整利用font-weight设置文本粗细，font-style实现斜体效果，灵活调整字体样式，增强网页文字表现力。字体继承特性子元素可继承父元素的字体属性，如字体和颜色，便于统一网页风格，减少重复样式定义的工作量。文本属性设置010203文本属性设置通过CSS设置文本对齐、缩进和装饰，如使用text-align控制对齐方式，text-indent实现首行缩进，text-decoration添加下划线或删除线。文本属性案例创建段落展示text-align实现居中对齐，text-indent设置首行缩进两字符，text-decoration为链接添加下划线，提升文本可读性。交互实践修改CSS代码改变文本对齐方式，调整缩进值观察效果，尝试不同text-decoration样式，实时预览页面变化，加深属性理解。指针光标010203指针光标定义CSS中cursor属性用于定义鼠标指针形状，增强用户体验，如悬停链接时变手形。常用指针值default为默认箭头，pointer为手形，wait为等待状态，适用于不同场景。高级用法可自定义光标图像，支持多值按优先级显示，还有调整大小方向的光标。06选择器高级子元素选择器子元素选择器定义子元素选择器使用>符号，用于精准选取某元素的直接子元素，实现样式的精确控制。子元素选择器案例通过h3>strong选择器，将<h3>标签内<strong>元素的文本颜色设为红色，展示选择器应用。子元素选择器互动尝试选择不同元素的子元素并设置样式，如改变<div>子元素<p>的背景色，实践选择器使用。相邻元素选择器132相邻元素选择器用于选择紧邻特定元素的兄弟元素，通过+符号实现。如div+p表示选紧邻div后的第一个p元素。案例与互动案例展示选择div后第一个p元素并设背景色，互动环节尝试选其他相邻元素设置样式。选择器作用可精准控制页面布局中相邻元素的样式，避免全局选择影响，提升样式定义准确性。关联元素选择器010203关联元素选择器概念关联元素选择器用于选择某元素后的所有同级兄弟元素，通过~符号实现，可快速为特定组元素设置相同样式。关联元素选择器案例如选择div后的所有p元素，设置背景颜色为黄色，能精准定位并统一修改符合条件元素的样式，提升效率。关联元素选择器互动尝试选择其他关联元素并设置样式，如改变文字颜色等，加深对选择器应用的理解，灵活运用于页面布局。属性选择器010203属性选择器基础基于HTML元素属性及值进行选择，如[title]选有该属性的元素，提供灵活多样的选择方式，精准控制样式。常见属性选择器类型包括基于属性存在、值精确匹配、值包含、值前缀等选择器，适用于不同场景，满足多种样式设置需求。属性选择器综合应用结合多种属性选择器，可应对复杂样式需求，精准控制页面元素样式，实现多样化设计效果。伪类选择器伪类概述伪类基于元素特殊状态选择，以冒号:开头，用于控制链接不同状态样式，增强交互体验。锚伪类a:link、a:visited、a:hover、a:active分别对应链接未访问、已访问、悬停和激活状态，可设不同样式。通用伪类:active、:hover通用伪类适用于所有元素，:focus适用于拥有键盘输入焦点的元素，为元素激活、悬浮或焦点状态提供样式控制。伪元素选择器Part01Part03Part02首字母和首行伪元素通过p::first-letter和p::first-line实现首字母放大、首行变红等效果，仅对块级元素生效。::before和

::after伪元素使用::before/::after配合content属性添加前后缀，结合display:block转换块级元素，可创意应用于图标装饰。伪元素综合应用挑战按钮悬浮提示框实现，对比伪元素与额外HTML标签优劣，讨论技术选型策略。07CSS继承与优先CSS样式继承020301CSS样式继承概念子元素可继承父元素的部分样式，如字体、文本颜色等，实现样式的快速统一与复用。继承案例演示设置的字体样式，其子元素自动继承，直观展现CSS样式继承的效果。可继承属性除字体外，文本颜色等也是可继承属性，合理运用能提升网页样式的一致性。选择器优先级1·2·3·选择器优先级顺序选择器优先级遵循id>class>tag>*规则，可通过!important提升特定样式优先级。多元素组合选择器的优先级首要的原则是控制对象的精准度。当控制的精准度相同时，id个数越多的优先级越高。class个数越多的优先级越高。tagName（标签名）个数越多的优先级越高。后定义的样式覆盖前面定义的样式。优先级实战应用在控制对象的精度相同的情况下，#wrap

ul

li

.list{}

和.wrap

ul

li

#list{}优先级一样。样式优先级123HTML与CSS的优先级当HTML与CSS样式有冲突时，浏览器按CSS样式中定义的属性来显示。就近原则在不考虑选择器优先级的情况下，浏览器一般按照与该元素关系远近来显示，这可以简单地称之为就近原则。样式定义优先级内联样式表>内部样式表>外部样式表，可借!important调整。08常用CSS3属性@font-face

规则@font-face规则概述CSS3的@font-face规则允许开发者自定义字体，突破用户设备预装字体限制，使网页设计更灵活，增强个性化。@font-face规则语法@font-face规则需指定字体名称和文件路径，如{font-family:'MyFont';src:url('myfont.eot’);}支持多种格式。@font-face使用步骤使用@font-face需获取字体文件、编写规则、应用字体，通过font-family在CSS选择器中使用，实现自定义字体

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

温馨提示

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

最新文档

评论

0/150

提交评论