1、网页样式,第二单元 静态网页制作,掌握网页的基本结构HTML网页基本结构HTML的常用标签表单、表格标签的应用,回顾和作业点评,本课任务,制作望庐山瀑布制作如梦令制作开心餐厅介绍页面商品列表,本课目标,学完本门课程后，你能够：了解什么是网页样式掌握CSS的基本语法熟练掌握CSS的基本属性会使用DIV+CSS进行网页布局熟练使用CSS来装饰页面,块元素和内联元素,块元素独占一行可以定义宽度和高度常用块元素div，p，ul，li内联元素一行排列显示不能定义宽度和高度常用内联元素span，a ，label,演示示例：块元素和内联元素,和标签,和标签最大优点没有任何的默认样式渲染最大区别标签是块元素标
2、签是内联元素作用结构化HTML元素DIV+CSS网页布局提高网页加载速度,和标签可以相互转换（display属性） 规范角度而言，标签中不内嵌标签,经验,什么是CSS,CSS的概念Cascading Style Sheet 级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定,第一个CSS,使用CSS美化李清照的诗词网页,css,演示示例：清平乐诗词,CSS的作用,CSS的作用 能控制页面的样式和布局网页文件与样式文件相分离，提高开发效率,vs,CSS的发展史,CSS语法2-1,h1 font-size:12px;color:#F0
3、0;.,标签,CSS语法2-2,CSS语法,选择器 声明1; 声明2; ,语法,例：h1 font-size : 12px;color : red;,CSS的最后一条声明后的“;”可写可不写， 建议都要写上；CSS的多条声明可写在同一行，但开发时便于阅读建议分行写并缩进；,经验,课堂练习,需求说明诗标题使用标题标签实现诗正文使用段落标签实现诗正文字体颜色为绿色(green)，字体大小为14px,完成时间：7分钟,共性问题集中讲解,CSS选择器3-1,标签选择器类选择器ID选择器,HTML标签作为标签选择器的名称、,p font-size:16px; ,标签选择器,声明,属性,值,语法,CSS选
4、择器3-2,标签选择器类选择器ID选择器,.class font-size : 16px; ,类选择器,声明,属性,值,语法,类名称,标签内容注意：网页中可给不同标签相同的class,CSS选择器3-3,标签选择器类选择器ID选择器,#id font-size:16px;,id选择器,声明,属性,值,语法,id名称,标签内容注意：网页中标签的 ID 不能重复,唯一存在,CSS复合选择器3-1,并集选择器 交集选择器 后代选择器,p , #id , .class font-size : 14px; color : green;,示例,多个选择器之间可以是多个不同或相同类型；多个选择器之间必须用英
5、文半角输入法逗号“,”隔开；,经验,演示示例：并集选择器,CSS复合选择器3-2,并集选择器 交集选择器 后代选择器,h3.second font-size : 14px; color : green;,示例,格式为：标签 + 类选择器 或 标签 + ID选择器 选择器之间不能有空格；,经验,演示示例：交集选择器,CSS复合选择器3-3,p a font-size : 14px; color : green;,示例,选择器之间可以是多个不同或相同类型并有层级关系的；选择器之间用空格隔开；,经验,演示示例：后代选择器,并集选择器交集选择器后代选择器,课堂练习,需求说明实现诗词如梦令的网页HTML
6、代码结构如下“如梦令”为标签且class为title“译文”为标签且id 为 translation诗词和翻译段落都是标签，但翻译段落标签的class为second要求“如梦令”和译文”字体大小为20px； “译文”字体颜色为蓝色；翻译段落的字体颜色为绿色,完成时间：7分钟,共性问题集中讲解,小结,标签选择器直接应用于HTML标签类选择器可在页面中多次使用ID选择器在同一个页面中只能使用一次灵活运用并集、交集、后代选择器,CSS的引入方式,行内样式内部样式表外部样式表,行内样式使用style属性引入CSS样式,CSS的引入方式 3-1,style属性的应用直接在HTML标签中设置的样式,示例,
7、演示示例：行内样式,内部样式表style标签中书写CSS代码,CSS的引入方式 3-2, h3 color: red; ,示例,外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式链接式 导入式,CSS的引入方式 3-3,语法,链接式与导入式的区别,行内样式 内部样式表 外部样式表ID选择器 类选择器 标签选择器,CSS中的优先级,课堂练习,需求说明制作开心餐厅的网页要求：效果如右图所示CSS样式体现出复合选择器的应用引用外部样式表的形式制作本页面提示：用、标签布局给绿色字体、蓝色字体段落分别加上类名给绿色标题单独加上类名,完成时间：10分钟
8、,共性问题集中讲解,小结,CSS选择器分标签选择器、类选择器和ID选择器CSS的复合选择器：交集选择器、并集选择器和后代选择器在HTML中引入CSS样式的三种方式行内样式、内部样式表和外部样式表注意CSS的优先级,CSS的属性,文字、文本属性背景属性列表属性盒子模型浮动属性定位属性,字体属性,字体属性小结,文本属性,文本属性小结,课堂演示,需求说明使一级标题居中显示，二级分类字体为蓝色，字体为斜体、加粗、16px、楷体，且加上下划线，并让分类之间的行高为30px；,演示示例：文本属性,课堂练习,需求说明制作北大青鸟网站新闻信息展示页面使用外部样式表创建页面样式,完成时间：10分钟,共性问题集中
9、讲解,小标题行高28px，字体大小12px,字体大小18px，行高40px ，居中显示,居中显示，文字大小12px，字体颜色#666666,段落字体12px行高20px,设置页面元素的背景样式,背景属性,课堂演示,需求说明使用外部样式表创建页面样式一级标题为红色背景色且带向下图标主体部分为灰色(#D7D7D7)背景色二级分类均有向右箭头图标,演示示例：商品分类侧边栏,列表属性超链接伪类鼠标形状控制,知识点分类,列表属性超链接伪类鼠标形状控制,列表属性,列表属性超链接伪类鼠标形状控制,超链接伪类,1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是
10、有效的2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的3、记忆方法： love hate !,经验,鼠标形状控制cursor属性，其值：,鼠标形状控制,课堂演示,需求说明完善商品分类侧边栏去掉默认小黑点鼠标移至分类文字超链接时 字体为红色文字有下划线鼠标移至红色标题上时，鼠标形状为可移动形状,演示示例：完善商品分类侧边栏,课堂练习,需求说明电器分类链接无下划线，鼠标悬浮超链接时显示下划线分类内容超链无下划线，鼠标悬浮至超链接时字体颜色为棕红色（#F60），显示下划线,18px、加粗、行距35px、背景色#0f7cbf,字体大小12px、行距20px，字体颜
11、色#666666，鼠标移至颜色为#F60,14px、加粗、行距30px、背景色#e4f1fa、字体颜色#0f7cbf,完成时间：15分钟,共性问题集中讲解,两个标签中的图片如何排成右边的形式呢？,问题,什么是盒子模型,边框（border）,高（height）,宽（width）,外边距（margin）,内边距（padding）,网页元素,两个标签中的图片如何排成右边的形式呢？,解答,外边距,边框,内边距,外边距,marginmargin-topmargin-rightmargin-bottommargin-leftmargin,margin-top: 3 pxmargin-right : 5 p
12、xmargin-bottom : 7 pxmargin-left : 4 pxmargin :3px 5px 7px 4px;margin :3px 5px 7px (5px);margin :3px 5px (3px 5px);margin :8px (8px 8px 8px);,示例,注意： margin: 上 右 下 左; （顺时针方向）,边框,border,内边距,paddingpadding-left padding-rightpadding-toppadding-bottompadding,padding-left:10px; padding-right: 5px; padding
13、-top: 20px; padding-bottom:8px; padding:20px 5px 8px 10px ; padding:30px 8px 10px (8px) ;padding:10px 5px; padding:10px;,示例,注意： padding: 上 右 下 左; （顺时针方向）,课堂演示,需求说明利用盒子模型制作登录页面要求：盒子宽度width为300px设置盒子边框（颜色值#3a6587）设置标题文字左边距20px设置标题文字竖直居中显示设置表单上下距离30像素，左右距离20像素登录框页面居中显示,演示示例：盒子模型,盒子模型总尺度外边距可用于网页居中显示marg
14、in-left: auto;margin-right:auto;块元素才能完全适用于盒子模型使用display属性来相互转化none（元素隐藏，不可见）block（转为块元素，独占一行） inline（转为内联元素，不换行）,案例分析小结,盒子模型总尺度 = border + padding +margin + 内容尺寸（宽/高）,课堂练习,需求说明导航整体居中显示，宽200px边框色#aacbee，背景色#f5f9fc使用标题标签实现课程导航标题，使用无序列表实现课程导航列表，行高为28px,内边距为5px“课程导航”(#1f376d)前的图标和每个课程导航右侧的三角图标使用背景图像的方式实
15、现课程链接为黑色字体且无下划线，鼠标移至上面时字体为橙色(#FF6215),完成时间：15分钟,共性问题集中讲解,float 属性取值：left 左浮动right 右浮动none 不浮动作用块元素同行排列显示，一般用于排版、分栏显示 设置浮动属性后，脱离文档流向指定的左或右边对齐直到父元素的边界或浮动的元素注意使用浮动后要及时清除，以免影响其后的网页元素,浮动属性,演示示例：浮动,清除浮动必要性浮动后，脱离了文档流不占网页空间浮动后的网页元素会影响同级元素clear属性清除浮动取值left rightbothnone表明容器框的哪边不挨着浮动框,清除浮动,演示示例：清除浮动,overflow属
16、性作用定义溢出元素内容区的内容会如何处理取值 visible （默认） auto hidden scroll,overflow属性,演示示例：overflow属性,position属性relative（相对定位）相对它原来的位置，通过指定偏移，到达新的位置。仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响absolute（绝对定位）相对已设定非static定位属性的父元素计算偏移量fixed（相对浏览器固定定位，IE6不支持）static（默认）偏移量设置 X轴(left、right 属性)与Y轴（top、bottom属性）可取值：像素或百分比,定位属性,定位示例图,定位图解,演示示例：定
17、位属性,注意子元素根据设置非static定位属性的父元素来计算偏移量与z-index属性（z轴方向的堆叠顺序）结合使用z-index属性设置了定位属性后才生效设置定位属性的元素默认后者高于前者建议在同级比较整数值，可以为负数,定位属性注意问题,演示示例：定位属性,课堂练习,需求说明制作商品列表页面要求：商品列表(宽600px)在页面居中显示使用定义列表和浮动属性制作商品列表每个商品项外边距为5px,边框为1px的#ccc色实线使用定位属性给第2个商品加上“限时抢”图标,完成时间：10分钟,共性问题集中讲解,总结,CSS的作用是？如何引入CSS样式？CSS选择器的基本类型和复合选择器分别是？字体、背景、列表和链接和鼠标的属性有哪些？如何理解盒子模型？浮动的方式有哪些，如何清除？如何进行网页元素的定位？,问题,
