《HTML+CSS基础教程》课件.pptVIP

**************************CSS字体样式字体粗细font-weight:bold;-设置文本粗细字体风格font-style:italic;-设置文本风格文本装饰text-decoration:underline;-设置文本装饰CSS颜色和背景1颜色使用颜色名称、十六进制代码或RGB值2背景色background-color:#ff0000;-设置背景颜色3背景图像background-image:url(image.jpg);-设置背景图像CSS盒模型1内容文本、图像等内容2填充内容周围的空白区域3边框元素的可见边界4边距元素外部的空白区域CSS边框和轮廓1边框border:1pxsolid#ff0000;-设置边框2轮廓outline:1pxsolid#ff0000;-设置轮廓3边框属性border-width-边框宽度border-style-边框样式border-color-边框颜色CSS边距和填充边距margin:10px;-设置边距填充padding:10px;-设置填充CSS定位静态定位static-默认定位方式1相对定位relative-相对于其正常位置进行定位2绝对定位absolute-相对于最近的已定位祖先元素进行定位3固定定位fixed-相对于浏览器窗口进行定位4CSS浮动浮动属性float:left;-将元素浮动到左侧float:right;-将元素浮动到右侧浮动用途浮动用于创建复杂的布局，例如文本环绕图像等。清除浮动clear:both;-清除浮动元素的影响CSS响应式布局1媒体查询@mediascreenand(max-width:768px){...}2响应式图像imgsrcset=...3弹性布局display:flex;-创建弹性布局CSS伪类和伪元素伪类a:hover-鼠标悬停在链接上时a:active-链接被激活时p:first-child-第一个段落元素伪元素p::before-在段落元素之前插入内容p::after-在段落元素之后插入内容CSS过渡和动画过渡transition:all0.5sease;-定义过渡效果动画@keyframesmyAnimation{...}animation:myAnimation2sinfinite;-定义动画效果综合实战1:个人简历网页HTML结构使用header、main、section、footer标签定义页面结构CSS样式使用CSS定义简历的排版、字体、颜色、布局等代码示例sectionh2工作经历/h2ul.../ul/section综合实战2:企业官网页面设计设计首页、产品页面、联系我们页面等功能实现实现导航菜单、图片轮播、内容展示等功能代码示例navulliahref=...首页/a/li.../ul/nav综合实战3:电商网站1商品展示使用img、div标签展示商品2购物车功能使用JavaScript实现商品添加和删除功能3支付功能集成第三方支付平台，例如支付宝、微信支付等学习资源推荐书籍《HTML5CSS3权威指南》、《精通CSS》、《JavaScript权威指南》视频教程慕课网、网易云课堂、B站网站W3Schools、MDNWebDocs、StackOverflow课程总结HTML结构化网页内容CSS控制网页样式和布局实践创建个人简历网页、企业官网、电商网站等测试题1问题什么是HTML？选项A.编程语言B.标记语言C.数据库语言测试题2问题CSS的作用是什么？选项A.定义网页结构B.控制网页样式C.实现网页交互测试题3问题以下哪个HTML标签用于插入图像？1选项A.imageB.imgC.picture2测试题41问题以下哪个CSS属性用于设置文本颜色？2选项A.font-colorB.text-colorC.color测试题5问题以下哪个CSS属性用于设置元素的边距？选项A.borderB.paddingC.margin测试题6问题以下哪个