html网页制作PPTchapter4css

1、第四章,CSS样式表,回顾,表单中提交数据的方法有哪两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？,本章目标,掌握CSS的基本语法 使用文本和字体样式美化网页 使用背景样式美化网页 使用盒子模型相关属性实现页面布局 掌握普通文档流、浮动与清除属性的含义 使用伪类样式控制超链接样式 使用div-ul-li实现局部布局 使用div-dl-dt-dd实现图文混编,什么是CSS,CSS(Cascading Style Sheets)是什么 1996年诞生了一种叫样式表的技术,全称应该是级联样式表 CSS可以网页做 对布局、字体 、颜色 、 背景、图象进行更

2、加精确的控制 修改一个文件就可以改变大量网页的外观和格式 可以减少代码，提高下载速度,CSS的用途,HTML标签的外观样式比较单一 页面色彩不生动 样式修改不方便 css的作用相当于给页面化妆,内容相同,外观不同,CSS的用途,1、外观美化 2、布局、定位,样式表能实现内容与样式的分离，方便团队开发,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,为什么使用CSS样式表3-1,样式复用、方便网站的后期维护,为什么使用CSS样式表3-2,同一网站共用同一样式，确保网站统一的风格,页面的精确控制，实现精美、复杂页面,为什么使用CSS样式表3-3, 选择器（即修饰对象） 对象的属性1: 属性

3、值1; 对象的属性2: 属性值2; ,标签声明标签内为CSS,多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值,li color: red; font-size: 30px; font-family: 隶书; ,选择器,样式规则,CSS基本语法,标签选择器, li color:red; font-size:28px; font-family:隶书; 家用电器 ,标签选择器：用于修饰同类HTML标签的共性风格,选择器的分类3-1, .bluecolor:blue; 家用电器 各类书籍 手机数码 日用百货 ,如果希望部分li标签采用其他样式，怎么办？,类选择器(class),定义样

4、式，注意类名有点号,选择器的分类3-2,应用类样式，其他元素也可以使用, #menu width:200px; background:#ccc; font:bold 14px 宋体; 家用电器 ,ID选择器,选择器的分类3-3,如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？, #menu width:200px; background:#ccc; font:bold 14px 宋体; 家用电器 ,ID选择器,选择器的分类3-3,如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？,样式表的三类应用方式,内嵌样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件,

5、 样式规则 ,如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。,内嵌样式表, P font-family:隶书; font-size:18px; color:#FF0000; 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,查看源代码,所有的段落都采用 P 样式，保证样式统一,行内（嵌入）样式表,如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？,使用行内（嵌入）样式表可以解决,行内（嵌入）样式表, 设置属性 这个段落应用了样式 这个段落按默认样式显示 ,为标签p指定样式,查看源代码,本段标签采用了行内样式,外部样式表文件,如果希望一个网站中多个页面的样式

6、保持一致， 如何解决？,使用外部样式表文件可以解决,外部样式表文件,根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表,链接（LINK ）外部样式表,使用LINK（链接）标签 : ,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页绑定,第三步：浏览查看各网页,演示示例3：使用外部样式表1 使用外部样式表2,引入的样式文件,导入（import）外部样式表,使用import导入 ，语法： import “newstyle.css”; ,引入样式表文件,演示示例4：使用外部样式表1 使用外部样式表2,CSS优先级,优先原则一：

7、文本从上到下，后出现的样式优先于前面出现的同一样式, .def1background:black; .def2background:yellow; 测试1,CSS优先级,优先原则二： id声明（即 # 开头的样式） class声明（即 . 开头的样式） 标签声明(即 类似 div 开头), #bbbackground:pink .defbackground:black; divbackground:yellow; 测试2,CSS优先级,优先原则三： 近水楼台。 直接写在元素体内的style优先级别最高！（仅次于!important）用重量来形容，可以定为百万吨量级。, .def1 backgr

8、ound:red; dd, 层标签,关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落 ,使用 Z index指定是哪一层，但要进行position定位，才有效,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left, 标签, 所有韩款童装10元/件起拍喽 ,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,行距、对齐等： line-height （行高） text-align （对齐） letter-spacing （字符间距） text-decoration （文本修饰 ） white-sp

9、ace （空白处理 ）,文本属性2-1,字符间距：5px 文本修饰：带下划线 空白处理：不断行,字体、字号： font（缩写形式） font-weight（粗细） font-size（大小） font-family（字体）,字体：宋体 颜色：红色 字号：12px 对齐：左对齐,文本属性2-2, li font: 12px 宋体; text-align:left; line-height:28px; .title letter-spacing:5px; white-space:nowrap; text-decoration:underline; .bigFont font-size:16px;

10、color:red; ,所有的默认样式： 字体、字号：宋体，12px 对齐方式：左对齐 行高：28px,首行标题样式： 字符间距：5px 空白处理：不换行 文本修饰：带下滑线,大字体样式： 字号：16px 颜色：红色,font字体样式的缩写形式,练习CSS选择器,需求说明： 使用各类CSS选择器，实现如下的页面美化效果,div块：总宽度200px，背景灰色#ccc,商品类别：字体为橘色（#ff7300），粗体，大小为14px,其余商品： 字体大小为12px,div-ul-li组织结构,背景属性2-1,背景属性： background （缩写形式） background-color（背景色 ）

11、background-image（背景图 ） background-repeat（背景图重复方式 ） background-position（位置坐标、偏移量）,四类平铺效果,背景属性2-2,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出现的水平和垂直位置坐标，实现各种拍偏移效果,设置背景图片、不重复平铺,各种偏移效果,列表属性2-1,列表（li）常用属性 list-style （列表风格）,list-style属性规定的列表风格,列表属性2-2,列表属性的典型应用：导航菜单,

12、 li width:150px; color:red; font:28px 隶书; list-style:none; float:left; 购物车 ,设置列表为none去掉圆点,所有html标签都有的float浮动属性，此处用于横向排列,练习修饰贵美商品分类,需求说明： 根据提供的素材，修饰上一练习：贵美分类,欢迎词：字符间距5px并带下划线,商品分类：带背景、无列表符号、左浮动,顶边距可以使用一个空ul，设置高度为15px,完成时间：20分钟,如何控制CSS样式2-1,盒模型,网页中的所有元素可以看作一个一个的“盒子”,元素内容 填充（也称内边距） 边框 边界（也称外边距）,如何控制CSS

13、样式2-2,样式控制思路,盒内样式修饰 盒子位置布局,盒内样式： 设置网页元素的颜色、字体等外观,盒子位置布局：确定盒子所在的位置、和其他网页元素的关系,盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性,为什么需要盒子属性,盒子模型平面图,盒子模型三维立体图：注意背景色在背景图的下一层,盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向,什么是盒子属性,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padd

14、ing,可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left,margin外边距,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px;,分别代表什么含义？,border属性 border-color border-width border-style,border边框

15、,border-top border-right border-bottom border-left,border border-left ,修饰属性,四个方向,缩写形式,border,每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置,border-style: none; border: 1px solid red; border-right: 5px dotted blue;,分别代表什么含义？, .textBorder border-width:1px; border-style:solid; 名字： 密码： ,细边框的样式,使用border属性修饰表单

16、,padding属性 padding padding-top padding-right padding-bottom padding-left,padding内边距,padding-left : 5px; padding: 5px 10px 20px 40px padding: 5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,常用的样式属性,方框属性,元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度,元素的宽高及实际占位,height:

17、40px,border-width-top: 20px,margin-top: 10px,左图图片的实际的高度是多少？,padding-top: 5px,使用盒子属性布局元素2-1,上外边距30px,下填充40px,左右外边距：水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo图片的布局？,图片背景色：#ff7300,页面背景色：#ccc, body margin:0px;padding:0px; background:#ccc; #logo width:380px; border:5px solid #666; padding:10px 20px 40px 80px; bac

18、kground:#ff7300; margin:30px auto; /水平居中 ,使用盒子属性布局元素2-2,设置页面内容（body）的背景和居中效果,“贵美商城”logo图片的布局,首先组织HTML结构，再写CSS进行布局或美化,如何实现注册页面的布局？,使用盒子属性实现DIV+CSS布局2-1,main：主体部分,footer：底部部分,header：顶部,实现步骤 1、分析页面的分块结构，形成HTML组织结构,使用盒子属性实现DIV+CSS布局2-1,为了控制整个页面的居中，添加一个大容器：container,main：主体部分,footer：底部部分,header：顶部,实现步骤 2

19、、编写每个DIV块的CSS控制定位,使用盒子属性实现DIV+CSS布局2-2,#containe: 980px 、居中,#header： 136px;背景色#ccc,#main： 400px;、背景色#fff,#footer： 100px;、背景色#ccc,练习DIV+CSS布局,需求说明： 重新实现DIV+CSS布局,完成时间：25分钟,#container: 980px 居中,#header： 136px; 背景色#ccc,#main： 400px; 背景色#fff,#footer： 100px; 背景色#ccc,练习修饰表单,需求说明： 根据提供的素材，实现表单的细边框样式,完成时间：1

20、0分钟,常见的细边框样式,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是float浮动属性4-1,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性4-2,浮动的三大显著特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性4-3,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是float浮动属性4-4,浮动的三大显著特征,3.占据行内元素的空间，导致行

21、内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第3块换行显示？,什么是clear清除属性,clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none,练习实现中间布局,需求说明： 在前面上机练习基础上，实现页面中间布局,完成时间：10分钟,中间两块宽度各占一半,练习头部局部布局,需求说明： 在前面上机练习完成的页面中，实现header块的局部布局,完成时间：25分钟,超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式,

22、超链接样式的特点,加链接后，图片/文本样式的变化,超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活选定状态（a:active ）,可以分别设置链接的四种状态的样式,超链接伪类样式,超链接伪类样式,采用选择器：状态的方式分别定义样式，一般称为伪类,如何设置超链接的样式, .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font-size:20px; 家用电器 手机数码 ,1、先定义共有样式：表示.nai类下标签中的链接样式,设置超链接样式的步骤： 1、

23、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态,2、再单独定义某个状态特有的样式,导航版块的链接样式一般和页面样式不同，需单独定义,典型的局部布局结构,div-ul(ol)-li：常用于分类导航或菜单等场合； div-dl-dt-dd：常用于图文混编场合； table-tr-td：常用于图文布局或显示数据的场合； form-table-tr-td：常用于布局表单的场合；,HTML标签中，学过哪些典型的块状布局结构？,div-ul-li局部布局的样式修饰2-1,实现思路 布局结构分析 CSS样式分析,布局结构： 1、图文参差并列结构，宜采用div-ul-li实现 2、图标和文字各占一个,各类样式： 1、小图标：采用背景图偏移 2、右对齐：float浮动 3、超链接：无下划线样式 4、调整文本对齐和间距,div-ul-li局部布局的样式修饰2-2,实现步骤 先建立HTML标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节,如何复用CSS代码,.pic1width:28px;height:26px;background:url(./images/ic