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

下载本文档

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

文档简介

网页设计与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选择器中使用，实现自定义字体效果。圆角属性设置010203圆角属性基础CSS3引入border-radius属性，实现元素圆角效果。通过设置像素值，可控制四角弧度，简化传统图片圆角处理方式。多值半径设置border-radius支持1-4个参数设置，分别对应左上角、右上、右下、左下圆角半径。未指定值自动镜像对称，灵活控制各角形态。实践应用技巧结合盒模型调整圆角元素尺寸，注意与边框、内边距的视觉协调。移动端需测试不同屏幕适配效果，避免过度圆角影响辨识度。方框阴影属性设置方框阴影属性概述方框阴影属性用于为元素添加阴影效果，通过box-shadow属性实现。设置外阴影效果使用box-shadow属性的水平偏移、垂直偏移和模糊半径参数，可为元素添加外阴影效果。设置内阴影效果调整box-shadow属性的参数，可为元素添加内阴影效果，增强视觉层次感。溢出属性123溢出属性定义overflow规定内容溢出元素框时的显示方式，有visible、hidden、scroll、auto、inherit五种取值。溢出属性取值visible默认完整显示；hidden隐藏超出部分；scroll始终显滚动条；auto按需显滚动条；inherit继承父级。溢出高级用法overflow-x和overflow-y可分别控制水平与垂直方向的溢出效果，实现精细布局控制。可见性属性123可见性属性定义visibility规定元素可见性，元素仍占空间，与display不同，不影响布局。可见性取值说明visible默认可见，hidden隐藏但占位，collapse用于表格，inherit继承父设置。可见与显示区别visibility:hidden保留空间，display:none完全删除，依需求选控制方式。THANKS感谢观看网页设计与Web前端开发案例教程第4章使用HTML+CSS布局网页CONTENT目录CSS布局概述01元素浮动02元素定位03图片特点及布局04表单及布局05表格及布局06内联框架07CSS进阶应用08PC端网页布局综合案例实战0901CSS布局概述CSS布局相关概念CSS布局核心概念CSS布局利用样式表实现网页内容定位，基于盒模型，通过设置属性合理放置元素，如将网页内容比作剪报进行裁剪粘贴。盒模型与元素类型盒模型是CSS布局核心，元素分块、行内及行内块元素，不同类型显示特性各异，影响布局效果。三种定位机制概述CSS有普通流、浮动和绝对定位三种定位机制，适用于不同场景，可对网页分层，浮动和绝对定位元素脱离普通流。01020302元素浮动浮动属性float010203浮动属性概述浮动属性可改变元素显示方式，使块元素同行显示，行内元素转块元素，有none、left、right三种取值。浮动常规用法常用于多列布局和文绕图效果，如两div左浮动实现两列，图片左浮动实现文字环绕，浮动元素脱离普通流。浮动特殊情况可能引发不能同行显示、元素重叠、父元素高度塌陷等问题，可通过设固定高度或clear属性解决，需合理使用浮动及清除属性。与inline­block的比较132浮动与行内块比较浮动和行内块都能实现同行排列，支持属性控制。但浮动脱离普通流，行内块占原位置空间，布局影响不同。行内块元素空隙问题行内块元素间有空格或换行会产生空隙，需调整代码或样式解决，避免布局不整齐。清除属性的作用与应用清除属性可解决浮动元素对后续元素的影响，包括重叠和父元素高度塌陷问题，有多种实现方法。清除属性010203清除属性取值清除属性clear有none、left、right、both四种取值，分别对应不清除、清除左、右、两侧浮动影响，可精准控制布局。解决重叠问题使用clear属性能解决浮动元素致后续元素重叠问题，如前元左浮，后元设clear:both;可正常显示，避免布局错乱。处理高度塌陷浮动使父元高塌陷，可为父元设置固定高度，加设空div子元素并设置clear:both;或用::after伪元素，确保布局稳定，撑开父元高度。03元素定位定位属性position定位属性概述CSS定位属性position实现元素定位，需结合top、left等边偏移和z-index属性，有static、absolute、relative、fixed四种取值。相对、绝对和固定定位相对定位保留原位置空间，适用于微调；绝对定位脱离普通流，精确控制位置，用于复杂布局场景。固定定位可使元素固定显示于浏览器窗口上的某个位置。定位应用案例设置元素position为absolute，通过top、left、z-index等属性精确控制位置，实现网页元素的精准布局。z-index123z-index取值范围z-index属性控制元素重叠顺序，取值范围包括正数、负数，默认值为0，需配合非static定位属性使用。层叠顺序原则z-index值越大元素越靠上层显示，值越小则越靠下层，通过调整数值可改变元素覆盖关系。定位属性前提使用z-index必须配合position定位属性，仅对非static定位元素（如relative/absolute）有效。元素居中010203未定位元素居中未定位元素通过margin:auto实现水平居中，适用于块级元素，无需定位属性配合。绝对定位居中技巧绝对定位元素利用负外边距实现居中，左偏移50%页面宽，外边距为负的元素宽度一半。相对定位居中方法相对定位元素可结合外边距自动或负外边距法实现居中，需根据场景选择合适方式。04图片特点及布局图片布局特点020301图片布局核心概念图片可通过position或float属性精确定位，也可利用自身的行内块特性布局，需考虑行内框与行框概念，结合text-align和vertical-align控制对齐。水平垂直对齐方式text-align控制块框内行内框及文字水平对齐，取值左、中、右；vertical-align控制行内框在行框内垂直对齐，如基线、居中、顶部、底部等。图片布局实践应用设置图片float为left实现文绕图，position为absolute精确定位，通过调整属性满足不同页面布局需求，实现多样化展示效果。05表单及布局表单基本结构表单基本结构表单由<form>标签定义，包含文本框、按钮等元素。通过<input>标签创建输入框，type属性决定类型，如text、password等。表单元素表单元素包括文本框、密码框、单选框、复选框和按钮等。使用标签的type属性区分不同元素类型，满足多种交互需求。表单伪类应用CSS伪类如:focus、:disabled用于选择表单元素状态，实现样式定制。例如设置输入框获得焦点时的样式或禁用按钮的外观。010203action属性详解123action属性定义action指定处理表单数据的服务器程序，决定数据提交的目标地址。action示例解析示例中action="fcheck.asp"或action="mailto:name@"，展示不同提交方式。method属性说明表单数据提交方式method属性规定表单数据发送方式，get将数据附加在URL后传输，适合少量数据；post封装数据发送，安全性高，适用于敏感信息。get与post对比get方式数据暴露在URL中，安全性较差，但实现简单；post方式数据在请求体中，更安全，常用于登录等重要数据传输场景。属性设置要点设置method属性时，需根据数据特性和安全需求选择get或post，同时配合action属性指定数据处理程序地址，确保表单正常提交。name属性用途name属性用途name属性用于表单元素命名，便于识别与数据提交，确保信息准确对应。<input>标签用法<input>标签定义<input>是表单常用元素，用于输入数据，有多种类型，如文本框、密码框等。<input>常用属性包含type、value、name等属性，可设置输入区类型、值、名称等。<input>的type属性type属性决定输入区类型，有文本、密码、单选等多种常见类型。<textarea>标签特点多行文本输入用于输入多行文本内容，通过rows和cols属性设置行列数，提供用户填写较长信息的空间。基本属性配置包含name命名、rows行数、cols列数等属性，可定义文本域的标识和尺寸，便于表单数据处理。与输入框差异区别于单行<input>，<textarea>支持多行输入，常用于留言、评论等需要大量文字的场景。<select>标签功能<select>标签定义<select>标签用于创建列表框或下拉列表框，提供用户选择的选项。<select>标签用法通过<option>标签定义选项，可设置multiple和size属性控制多选及可见数目。<select>标签属性name属性命名，<option>的selected设默认值，value指定发送给服务器的值。010203<label>标签123<label>标签绑定原理<label>的for属性通过id与表单元素关联，实现点击文本聚焦对应输入框，提升表单操作便捷性。绑定机制示例解析如<labelfor="nan">男</label>绑定<inputid="nan">，点击"男"自动选中单选按钮，直观展示交互效果。提升交互体验作用for属性实现标签与元素联动，减少用户操作步骤，优化表单填写流程，增强用户体验。<fieldset>标签010203表单元素分组功能<fieldset>标签用于对表单元素分组，使页面结构清晰，避免用户输入时眼花缭乱，提升表单可读性。legend标签配合使用<legend>为<fieldset>分组设置标题，增强表单可读性，优化整体布局，便于用户理解和操作。示例代码与效果展示

<fieldset><legend>健康信息</legend>...</fieldset>的示例代码，呈现健康信息分组效果，直观展示表单元素分组布局。表单相关伪类功能010203表单美化重要性表单是网页交互核心，美观实用可提升用户体验，美化能增视觉效果且减少输入错误。CSS伪类作用CSS伪类是选择特定状态元素的选择器，用于表单可增强交互性，简化代码且性能高。常用伪类应用如:focus、:disabled等伪类，各有定义、格式与实际应用，可优化表单交互与布局。表单相关伪类优势简化代码与性能优势CSS伪类简化表单样式定义，减少JavaScript依赖。浏览器原生支持，提升渲染性能，确保流畅交互体验。增强交互与用户体验伪类为表单元素提供即时视觉反馈，如焦点高亮、禁用状态提示，直观引导用户操作，降低误操作率。跨浏览器兼容性保障主流浏览器均支持标准表单伪类，确保样式在不同平台一致呈现，避免因兼容性问题导致的显示差异。:focus选择器:focus选择器定义:focus用于选取获焦点元素，用户点击或Tab键切换时触发，常用于表单输入框等元素。:focus使用格式selector:focus{property:value;}，如input:focus{border:2pxsolidblue;}为输入框添蓝边。:focus实际应用表单中输入框获焦点时，可改边框或背景色提示用户，提升关注度，减少误操作。:disabled选择器:disabled选择器定义:disabled选择器用于选取被禁用的表单元素，禁用后用户无法操作该元素，常用于控制表单交互流程。:disabled使用格式通过selector:disabled设置样式，例如input:disabled可改变禁用输入框背景色，直观提示用户状态。:disabled实际应用在注册表单中，未填完必填项时禁用提交按钮，配合灰色背景样式，明确告知用户当前不可操作状态。:enabled选择器Part01Part03Part02:enabled选择器定义:enabled选择器用于选取未被禁用的表单元素，与:disabled相对，能选择可正常使用的元素。:enabled使用格式使用格式为selector:enabled{property:value;...}，可设置可使用元素的样式。:enabled实际应用在表单中，可通过改变可使用元素样式，如鼠标指针形状，提示用户元素可操作。:checked选择器010203:checked选择器定义:checked用于选取被选中元素，如单选按钮和复选框，表示用户已选择这些选项。:checked使用格式selector:checked{property:value;}，例如为选中项设置背景色或边框样式。:checked实际应用在表单中，通过改变选中元素的样式，如背景颜色，突出显示用户选择。:required选择器030201:required选择器定义:required选择器用于选取必填元素，在提交表单时用户必须填写这些字段，确保数据完整性。:required使用格式通过selector:required{property:value;}设置样式，如为必填输入框添加红色边框，明确提示用户。:required实际应用在表单中，改变必填字段样式，如边框颜色，告知用户哪些字段必填，减少提交错误，提高填写质量。:optional选择器213:optional选择器定义:optional选择器用于选取未设required属性的元素，表示用户可选择性填写的字段。:optional使用格式selector:optional{property:value;}，如input:optional{border:2pxsolid#ccc;}，为非必填输入框添加灰色边框。:optional实际应用表单中通过改变非必填字段样式，如边框颜色，区分必填和非必填字段，提升表单易用性。:read-only选择器Part01Part03Part02:read-only选择器定义:read-only选择器用于选取设置了read-only属性的元素，表示用户只能查看，不能修改的字段。:read-only使用格式selector:read-only{property:value;...}，例如：input:read-only{background-color:#eee;}，将只读输入框背景设置为浅灰色。:read-only实际应用在表单中，某些字段可能需要显示但不允许用户修改，如用户信息的查看页面，通过改变只读字段的样式，可以明确地告知用户该字段不可编辑。06表格及布局表格标签010302<table>定义表格<table>标签用于创建表格，是表格的容器。表格结构组成表格包含表头、行和单元格。表头由<th>定义，内容加粗居中；行由<tr>定义，单元格由<td>定义，可包含文本、图片等元素。表格标题设置<caption>标签为表格添加标题，位于表格上方，内容居中显示，增强表格的语义化，每个表格只能有一个标题。合并左右列231合并左右列方法使用`colspan`属性可合并表格左右列，取值为合并列数，如`<tdcolspan="2">`合并两列，代码示例展示其用法。`colspan`属性作用`colspan`属性用于控制表格单元格合并左右列，能改变表格结构，使内容呈现更符合需求，提升表格布局灵活性。合并列代码要点合并左右列时，保留最左`<td>`标签，其他列标签可省略，通过示例代码可清晰了解合并左右列的具体实现方式。合并上下行020301合并上下行方法使用`rowspan`属性可合并表格上下行，取值为合并行数，如`<tdrowspan="3">`表示合并三行。合并行代码示例合并行时保留最上边`<td>`标签，其他行对应`<td>`标签无需保留，示例展示操作方法。合并行注意事项合并上下行要确保数据逻辑正确，避免因合并导致表格结构混乱或数据丢失。选择器类型选择010203标签选择器应用标签选择器控制所有表格相关标签样式，如`table{...}`设置全局表格样式，统一管理。类选择器使用类选择器针对特定表格标签，如`.my-table{...}`，灵活调整局部样式，满足多样需求。ID选择器和后代选择器ID选择器用于唯一表格标签，如`#unique-table{...}`，精确控制单个元素样式，避免冲突。如果需要将以上定义的表格样式仅作用于指定的范围内，可以用后代选择器实现。`border-collapse`属性`border-collapse`属性控制表格边框折叠或分离，默认值为separate，设为collapse可折叠双线条边框为单线条。边框折叠效果使用`border-collapse:collapse;`可使表格边框折叠，避免双线条，使表格更简洁。应用场景在需要简洁表格样式时，使用`border-collapse`属性可有效减少边框冗余，提升视觉效果。`border-spacing`属性132`border-spacing`属性定义`border-spacing`用于设置表格单元格间距，适用于边框分离模式，可设一个或两个值控制水平和垂直间距。属性应用场景该属性常用于调整复杂表格布局，通过增大间距提升可读性，避免内容拥挤影响视觉效果。与边框折叠对比相比`border-collapse`的单线边框效果，`border-spacing`保留双线结构，适合需要强调单元格分隔的场景。`caption-side`属性`caption-side`属性定义`caption-side`属性用于设置表格标题的位置，默认显示在表格上方，可调整为下方以优化布局。属性取值说明`caption-side`属性取值包括`top`和`bottom`，分别控制标题在表格的顶部或底部显示。语义化与样式影响通过`caption-side`调整标题位置，增强表格语义化，同时需配合CSS统一标题样式。隔行变色020301隔行变色作用隔行变色提升表格可读性，数据量大时效果显著，通过奇偶行不同背景色区分，便于视觉浏览与数据查看。隔行变色代码用类选择器为奇数行和偶数行定义样式，如`.odd-row`和`.even-row`，在CSS中设置不同背景色，实现隔行变色效果。示例代码展示示例代码中，先为表格行添加对应类名，再在CSS里为类名定义背景颜色，如奇数行设浅灰，偶数行设绿色，展示隔行变色。表格的特征010203表格默认无边框表格默认无边框，需通过CSS设置边框样式，以实现表格的视觉分隔和美化。单元格宽度分配表格设置宽度时，未指定单元格宽度则默认平分，确保布局均匀。行高与列宽特性表格行高取最高单元格高度，列宽取最宽单元格宽度，保持对齐。单元格内容对齐132单元格内容对齐`th`内容默认加粗且居中，`td`内容上下居中、左对齐。通过CSS可调整对齐方式，提升表格美观度与可读性。默认对齐规则表格未设置样式时，表头与数据单元格按标准对齐显示，确保基本信息清晰呈现，为后续样式调整提供基础。对齐方式调整利用CSS的text-align和vertical-align属性，可自定义单元格内容水平与垂直对齐方式，满足不同排版需求。07内联框架内联框架基本用法123内联框架定义内联框架即<iframe>标签，用于在网页中嵌入其他网页内容，通过src属性指定源URL，可设置宽高控制显示范围。基本属性解析核心属性包括：src（嵌入地址）width/height（尺寸设定）支持name命名，用于超链接target定位跳转位置。基础布局实践通过<iframe>可实现内容区域分离，如导航栏与主体内容分区展示，配合target属性实现框架间内容加载联动。08CSS进阶应用网页logo及图标应用网页logo定义与设置网页logo是网站重要标识，通过<link>标签设置网站图标，rel属性为shortcutic

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

温馨提示

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

最新文档

评论

0/150

提交评论