HTML开发网页样式

1、网页样式 第二单元 静态网页制作2 2 / 61/ 61u掌握网页的基本结构掌握网页的基本结构uHTMLHTML网页基本结构网页基本结构uHTMLHTML的常用标签的常用标签u表单、表格标签的应用表单、表格标签的应用回顾和作业点评回顾和作业点评3 3 / 61/ 61本课任务本课任务u制作制作望庐山瀑布望庐山瀑布u制作制作如梦令如梦令u制作开心餐厅介绍页面制作开心餐厅介绍页面u商品列表商品列表4 4 / 61/ 61本课目标本课目标u学完本门课程后，你能够：学完本门课程后，你能够：n了解什么是网页样式n掌握CSS的基本语法n熟练掌握CSS的基本属性n会使用DIV+CSS进行网页布局n熟练使用C

2、SS来装饰页面5 5 / 61/ 61块元素和内联元素块元素和内联元素u块元素块元素n独占一行n可以定义宽度和高度n常用块元素ldiv，p，ul，liu内联元素内联元素n一行排列显示n不能定义宽度和高度n常用内联元素lspan，a ，label 演示示例：演示示例：块元素和内联元素块元素和内联元素6 6 / 61/ 61和和标签标签u和和标签标签n最大优点l没有任何的默认样式渲染n最大区别l标签是块元素l标签是内联元素n作用l结构化HTML元素lDIV+CSS网页布局l提高网页加载速度 和和标签可以相互转换（标签可以相互转换（display属性）属性） 规范角度而言，规范角度而言，标签中不内嵌

3、标签中不内嵌标签标签经验经验7 7 / 61/ 61什么是什么是CSSCSSuCSSCSS的概念的概念nCascading Style Sheet 级联样式表n表现HTML或XHTML文件样式的计算机语言l包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定8 8 / 61/ 61第一个第一个CSSCSSu使用使用CSSCSS美化李清照的诗词网页美化李清照的诗词网页css 演示示例：清平乐诗词演示示例：清平乐诗词9 9 / 61/ 61CSSCSS的作用的作用uCSSCSS的作用的作用 n能控制页面的样式和布局n网页文件与样式文件相分离，提高开发效率vs1010 / / 6161CSS

4、CSS的发展史的发展史1111 / / 6161CSSCSS语法语法2-2-1 1h1 font-size:12px;color:#F00;.1、应写在、应写在标签之间；标签之间；2、加上、加上 type=text/css 属性属性注意注意u标签标签1212 / / 6161CSSCSS语法语法2-2-2 2uCSSCSS语法语法选择器选择器 声明声明1; 声明声明2; 语法语法例：例：h1 font-size : 12px;color : red;CSS的最后一条声明后的的最后一条声明后的“;”可写可不写，可写可不写， 建议都要写上；建议都要写上；CSS的多条声明可写在同一行，但开发时便于阅

5、读建议分行写并缩进；的多条声明可写在同一行，但开发时便于阅读建议分行写并缩进；经验经验1313 / / 6161 课堂练习课堂练习u需求说明需求说明n诗标题使用标题标签实现n诗正文使用段落标签实现n诗正文字体颜色为绿色(green)，字体大小为14px完成时间：完成时间：7分钟分钟共性问题集中讲解共性问题集中讲解1414 / / 6161CSSCSS选择器选择器3-13-1u标签选择器标签选择器u类选择器类选择器uIDID选择器选择器 HTML标签作为标签选择器的名称标签作为标签选择器的名称、p font-size:16px; 标签选择器标签选择器声明声明属性属性值值语法语法1515 / /

6、6161CSSCSS选择器选择器3-23-2u标签选择器标签选择器u类选择器类选择器uIDID选择器选择器.class font-size : 16px; 类选择器类选择器声明声明属性属性值值语法语法类名称类名称标签内容标签内容注意：网页中可给不同标签相同的注意：网页中可给不同标签相同的class1616 / / 6161CSSCSS选择器选择器3-33-3u标签选择器标签选择器u类选择器类选择器uIDID选择器选择器#id font-size:16px;id选择器选择器声明声明属性属性值值语法语法id名称名称标签内容标签内容注意：网页中标签的注意：网页中标签的 ID 不能重复不能重复,唯一存

7、在唯一存在1717 / / 6161CSSCSS复合选择器复合选择器3-13-1u 并集选择器并集选择器u 交集选择器交集选择器u 后代选择器后代选择器p , #id , .class font-size : 14px; color : green;示例示例多个选择器之间可以是多个不同或相同类型；多个选择器之间可以是多个不同或相同类型；多个选择器之间必须用英文半角输入法逗号多个选择器之间必须用英文半角输入法逗号“,”隔开；隔开；经验经验 演示示例：并集选择器演示示例：并集选择器1818 / / 6161CSSCSS复合选择器复合选择器3-23-2u 并集选择器并集选择器u 交集选择器交集选择器

8、u 后代选择器后代选择器 h3.second font-size : 14px; color : green;示例示例 格式为：标签格式为：标签 + 类选择器类选择器 或或 标签标签 + ID选择器选择器 选择器之间不能有空格；选择器之间不能有空格；经验经验 演示示例：交集选择器演示示例：交集选择器1919 / / 6161CSSCSS复合选择器复合选择器3-33-3 p a font-size : 14px; color : green;示例示例选择器之间可以是多个不同或相同类型并有层级关系的；选择器之间可以是多个不同或相同类型并有层级关系的；选择器之间用空格隔开；选择器之间用空格隔开；经验

9、经验 演示示例：后代选择器演示示例：后代选择器u并集选择器并集选择器u交集选择器交集选择器u后代选择器后代选择器2020 / / 6161课堂练习课堂练习u需求说明需求说明n实现诗词如梦令的网页nHTML代码结构如下l“如梦令”为标签且class为titlel“译文”为标签且id 为 translationl诗词和翻译段落都是标签，但翻译段落标签的class为secondn要求l“如梦令”和译文”字体大小为20px； “译文”字体颜色为蓝色；翻译段落的字体颜色为绿色完成时间：完成时间：7分钟分钟共性问题集中讲解共性问题集中讲解2121 / / 6161小结小结u标签选择器直接应用于标签选择器直

10、接应用于HTMLHTML标签标签u类选择器可在页面中多次使用类选择器可在页面中多次使用uIDID选择器在同一个页面中只能使用一次选择器在同一个页面中只能使用一次u灵活运用并集、交集、后代选择器灵活运用并集、交集、后代选择器2222 / / 6161CSSCSS的引入方式的引入方式u行内样式行内样式u内部样式表内部样式表u外部样式表外部样式表2323 / / 6161u行内样式行内样式u 使用使用style属性引入属性引入CSS样式样式CSSCSS的引入方式的引入方式 3-13-1style属性的应用属性的应用直接在直接在HTML标签中设置的样式标签中设置的样式示例示例 演示示例：行内样式演示示

11、例：行内样式2424 / / 6161u内部样式表内部样式表u style标签中书写标签中书写CSS代码代码CSSCSS的引入方式的引入方式 3-23-2 h3 color: red; 示例示例2525 / / 6161u外部样式表外部样式表nCSS代码保存在扩展名为.css的样式表中nHTML文件引用扩展名为.css的样式表，有两种方式l链接式 l导入式CSSCSS的引入方式的引入方式 3-33-3语法语法链接式链接式 导入式导入式 import url(css文件路径文件路径 ); 2626 / / 6161链接式与导入式的区别链接式与导入式的区别2727 / / 6161u行内样式行内样

12、式 内部样式表内部样式表 外部样式表外部样式表uIDID选择器选择器 类选择器类选择器 标签选择器标签选择器CSSCSS中的优先级中的优先级2828 / / 6161课堂练习课堂练习u需求说明需求说明n制作开心餐厅的网页n要求：l效果如右图所示lCSS样式体现出复合选择器的应用l引用外部样式表的形式制作本页面n提示：l用、标签布局l给绿色字体、蓝色字体段落分别加上类名l给绿色标题单独加上类名完成时间：完成时间：10分钟分钟共性问题集中讲解共性问题集中讲解2929 / / 6161小结小结uCSSCSS选择器分标签选择器、类选择器和选择器分标签选择器、类选择器和IDID选择器选择器uCSSCSS

13、的复合选择器：的复合选择器：n交集选择器、并集选择器和后代选择器u在在HTMLHTML中引入中引入CSSCSS样式的三种方式样式的三种方式n行内样式、内部样式表和外部样式表u注意注意CSSCSS的优先级的优先级3030 / / 6161CSSCSS的属性的属性u文字、文本属性文字、文本属性u背景属性背景属性u列表属性列表属性u盒子模型盒子模型u浮动属性浮动属性u定位属性定位属性3131 / / 6161u字体属性字体属性字体属性小结字体属性小结属性属性描述描述font-style设置字体风格 font-weight 设置字体粗细 font-size设置字体的尺寸 font-family 设置字

14、体系列 font简写属性，作用是把所有针对字体的属性设置在一个声明中(注意顺序)例如：font: italic bold 16px 楷体; 3232 / / 6161u文本属性文本属性文本属性小结文本属性小结属性属性描述描述color设置文本的颜色，如 red，#FF0000line-height设置文本的行高text-align设置文本的对齐方式, 如 left 、center、righttext-decoration设置文本装修，如underline、none、line-through3333 / / 6161课堂演示课堂演示u需求说明需求说明n使一级标题居中显示，二级分类字体为蓝色，字体

15、为斜体、加粗、16px、楷体，且加上下划线，并让分类之间的行高为30px； 演示示例：文本属性演示示例：文本属性3434 / / 6161课堂练习课堂练习u需求说明需求说明n制作北大青鸟网站新闻信息展示页面n使用外部样式表创建页面样式完成时间：完成时间：10分钟分钟共性问题集中讲解共性问题集中讲解小标题小标题行高行高28px，字体大小字体大小12px字体大小字体大小18px，行，行高高40px ，居中，居中显示显示居中显示，文字大小居中显示，文字大小12px，字体颜色，字体颜色#666666段落字体段落字体12px行高行高20px3535 / / 6161u设置页面元素的背景样式设置页面元素的

16、背景样式 背景属性背景属性属性属性描述描述background-color背景色，取值如，red，#FF0000 background-image背景图片,如: background-image : url ( “./images/bg.png” );background-position 背景开始位置,包括水平方向(X轴)和竖直方向(Y轴)的设置 X轴取值：left，center，right 或 像素值 或 百分比 Y轴取值：top，center，bottom 或 像素值 或 百分比background-repeat背景填充方式,取值： repeat-x | repeat-y | no-re

17、peatbackground合写方式，如 background：#fff url(bg.png) left top no-repeat;3636 / / 6161课堂演示课堂演示u需求说明需求说明n使用外部样式表创建页面样式n一级标题为红色背景色且带向下图标n主体部分为灰色(#D7D7D7)背景色n二级分类均有向右箭头图标 演示示例：商品分类侧边栏演示示例：商品分类侧边栏3737 / / 6161u列表属性列表属性u超链接伪类超链接伪类u鼠标形状控制鼠标形状控制知识点分类知识点分类3838 / / 6161u列表属性列表属性u超链接伪类超链接伪类u鼠标形状控制鼠标形状控制列表属性列表属性属性属

18、性描述描述举例举例list-style-image将列表设置为列表标志list-style-image:url(./arrow.gif); list-style-type设置列表项标志的类型:disc(实心圆) | circle (空心圆) | square(正方形)list-style-type : circle ;list-style以上属性的合并简写,或 none 去掉默认属性设置list-style:square url(/i/arrow.gif); 3939 / / 6161u列表属性列表属性u超链接伪类超链接伪类u鼠标形状控制鼠标形状控制超链接伪类超链接伪类a:link color

19、: red /* 未访问的链接 */a:visited color: blue /* 已访问的链接 */a:hover color: green /* 当有鼠标悬停在链接上 */a:active color: yellow /* 被选择的链接 */示例示例1、在、在 CSS 定义中，定义中，a:hover 必须被置于必须被置于 a:link 和和 a:visited 之后，才是有效的之后，才是有效的2、在、在 CSS 定义中，定义中，a:active 必须被置于必须被置于 a:hover 之后，才是有效的之后，才是有效的3、记忆方法：、记忆方法： love hate !经验经验4040 / /

20、 6161u鼠标形状控制鼠标形状控制ncursor属性，其值：鼠标形状控制鼠标形状控制4141 / / 6161课堂演示课堂演示u需求说明需求说明n完善商品分类侧边栏n去掉默认小黑点n鼠标移至分类文字超链接时l 字体为红色l文字有下划线n鼠标移至红色标题上时，鼠标形状为可移动形状 演示示例：完善商品分类侧边栏演示示例：完善商品分类侧边栏4242 / / 6161课堂练习课堂练习u需求说明需求说明n电器分类链接无下划线，鼠标悬浮超链接时显示下划线n分类内容超链无下划线，鼠标悬浮至超链接时字体颜色为棕红色（#F60），显示下划线18px、加粗、行距、加粗、行距35px、背景色背景色#0f7cbf

21、字体大小字体大小12px、行距行距20px，字体，字体颜色颜色#666666，鼠标移至颜色为鼠标移至颜色为#F6014px、加粗、行距、加粗、行距30px、背景色、背景色#e4f1fa、字体颜色、字体颜色#0f7cbf完成时间：完成时间：15分钟分钟共性问题集中讲解共性问题集中讲解4343 / / 6161u两个两个标签中的图片如何排成右边的形式呢？标签中的图片如何排成右边的形式呢？问题问题4444 / / 6161什么是盒子模型什么是盒子模型 边框边框（border）高高（height）宽宽（width）外边距外边距（margin）内边距内边距（padding）网页元素网页元素4545 /

22、/ 6161u两个两个标签中的图片如何排成右边的形式呢？标签中的图片如何排成右边的形式呢？解答解答外边距外边距边框边框内边距内边距4646 / / 6161外边距外边距umarginmarginnmargin-topnmargin-rightnmargin-bottomnmargin-leftnmarginmargin-top: 3 pxmargin-right : 5 pxmargin-bottom : 7 pxmargin-left : 4 pxmargin :3px 5px 7px 4px;margin :3px 5px 7px (5px);margin :3px 5px (3px 5p

23、x);margin :8px (8px 8px 8px);示例示例 注意：注意： margin: 上上 右右 下下 左左; （顺时针方向）（顺时针方向）4747 / / 6161边框边框uborderborder类别类别属性属性含义含义 修饰属性修饰属性border-color设置边框的颜色，如设置边框的颜色，如 border-color: #FF0;border-width设置边框的宽度，如设置边框的宽度，如 border-width：2pxborder-style设置边框的类型，如设置边框的类型，如 solid（实线）、（实线）、dashed（虚（虚线）、线）、none（无边框）等（无边框

24、）等四个方向四个方向border-top上边框上边框border-right右边框右边框border-bottom下边框下边框border-left左边框左边框简写方式简写方式border统一设置统一设置4个方向边框的属性，如个方向边框的属性，如border：1px solid red;4848 / / 6161内边距内边距 upaddingpaddingnpadding-left npadding-rightnpadding-topnpadding-bottomnpaddingpadding-left:10px; padding-right: 5px; padding-top: 20px;

25、padding-bottom:8px; padding:20px 5px 8px 10px ; padding:30px 8px 10px (8px) ;padding:10px 5px; padding:10px;示例示例 注意：注意： padding: 上上 右右 下下 左左; （顺时针方向）（顺时针方向）4949 / / 6161课堂演示课堂演示u需求说明需求说明n利用盒子模型制作登录页面n要求：l盒子宽度width为300pxl设置盒子边框（颜色值#3a6587）l设置标题文字左边距20pxl设置标题文字竖直居中显示l设置表单上下距离30像素，左右距离20像素l登录框页面居中显示 演示

26、示例：盒子模型演示示例：盒子模型5050 / / 6161u盒子模型总尺度盒子模型总尺度u外边距可用于网页居中显示外边距可用于网页居中显示nmargin-left: auto;nmargin-right:auto;u块元素才能完全适用于盒子模型块元素才能完全适用于盒子模型n使用display属性来相互转化lnone（元素隐藏，不可见）lblock（转为块元素，独占一行） l inline（转为内联元素，不换行） 案例分析小结案例分析小结盒子模型总尺度盒子模型总尺度 = border + padding +margin + 内容尺寸内容尺寸（宽（宽/高）高）5151 / / 6161课堂练习课堂

27、练习u需求说明需求说明n导航整体居中显示，宽200px边框色#aacbee，背景色#f5f9fcn使用标题标签实现课程导航标题，使用无序列表实现课程导航列表，行高为28px,内边距为5pxn“课程导航”(#1f376d)前的图标和每个课程导航右侧的三角图标使用背景图像的方式实现n课程链接为黑色字体且无下划线，鼠标移至上面时字体为橙色(#FF6215)完成时间：完成时间：15分钟分钟共性问题集中讲解共性问题集中讲解5252 / / 6161ufloat float 属性属性n取值：lleft 左浮动lright 右浮动lnone 不浮动u作用作用n块元素同行排列显示，一般用于排版、分栏显示 n设

28、置浮动属性后，脱离文档流向指定的左或右边对齐直到父元素的边界或浮动的元素u注意注意n使用浮动后要及时清除，以免影响其后的网页元素浮动属性浮动属性 演示示例：浮动演示示例：浮动5353 / / 6161u清除浮动必要性清除浮动必要性n浮动后，脱离了文档流不占网页空间n浮动后的网页元素会影响同级元素uclearclear属性清除浮动属性清除浮动n取值lleft lrightlbothlnonen表明容器框的哪边不挨着浮动框清除浮动清除浮动 演示示例：清除浮动演示示例：清除浮动5454 / / 6161uoverflowoverflow属性属性n作用l定义溢出元素内容区的内容会如何处理n取值l visible （默认）l auto l hiddenl scrolloverflowoverflow属性属性 演示示例：演示示例：overflow属性属性5555 / / 6161upositionposition属性属性nrelative（相对定位）l相对它原来的位置，通过指定偏移，到达新的位置。l仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响nabsolute