网页设计与制作课程培训 -css基础.ppt

网页设计与制作课程培训 -css基础.ppt

《网页设计与制作课程培训 -css基础.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作课程培训 -css基础.ppt（187页珍藏版）》请在冰豆网上搜索。

3-网页设计与制作-css基础,课程内容体系,主要内容,1）什么是CSS?

2）CSS的基本语法3）简单案例,什么是CSS？

css：

CascadingStyleSheet层叠样式表,background-image:

url（self.jpg）;background-repeat:

no-repeat;background-position:

rightbottom;background-color:

#e9fbff;,代码释义,+,CSS样式在网页中的应用,CSS就是让内容和样式分离开来HTML只控制网页的内容（如文字、图片和超链接等）内容的样式由CSS来控制（如颜色、位置等）举个例子：

就像模特和漂亮衣服的关系,CSS禅意花园,倡导人：

CSS禅意花园主人DaveSheahttp:

/创意：

提供同一网页的html源文件，人们可以用CSS将它设计成各式各样的风格并提交上来。

作用：

想改变人们对WEB设计的看法，向人们展示CSS设计可实现的视觉效果，但最终却出乎意料的改变了全球技术发展的趋势。

源文件-css-效果,优秀作品：

优秀作品：

优秀作品：

更多作品欣赏：

现场演示http:

/禅意花园更多作品CSS禅意花园作品欣赏.rar（16课件下载）,CSS学习顺序三部曲,基本语法结构书写位置命名方式,学习重点,具体属性文字背景盒模型边框浮动和清除,CSS结构类比：

李逵身高：

185cm；体重：

105kg；性别：

男；性格：

莽撞；武器：

板斧；,分析（三要素）姓名、属性、属性值,拓展：

唐僧八戒,CSS结构真相,段落字体大小：

12像素；颜色：

红色；,pfont-size:

12px;color:

red;,测试,标题1大小：

25像素；颜色：

蓝色；,h1font-size:

25px;Color:

blue;,CSS书写位置,内嵌样式表内部样式表外部样式表,内嵌样式表,位置：

作为属性，直接添加在HTML的开始标记里。

代码说明：

不推荐使用，因为不能发挥样式表的优势，无法将内容和样式分别控制。

内部样式表,html与CSS结合方式,通过link语句链接两个文件,内部和外部样式表相互转化,内部样式表,h1color：

red；,外部样式表,课程重点总结,html-标记-网页内容CSS-属性-网页样式,美观的网页,+,=,体验CSS,项目5-1项目5-2项目5-3,知识点补充,html的注释标记，在这里是跨越的意思，当浏览器不支持css语法时，会自动越过此标记。

/*/为CSS的注释标记。

不同的属性之间用;分隔开，需要注意的是，一定要用半角的分号，不能用全角的分号。

上节课知识点回顾,CSS的作用是什么？

CSS长什么样子？

CSS代码可以写在什么地方？

随堂测试：

标题1：

字体颜色+背景颜色+居中,代码解析：

综合案例-初恋这件小事,本课程内容,项目分析，知识讲解常用文字属性（随堂测试）命名方式,css基本属性1-文字,漂亮页面欣赏-1,漂亮页面欣赏-2,漂亮页面欣赏-3,常用文字属性,1、字体样式字体颜色字体、字号、文字加粗下划线2、段落样式行高文本缩进水平对齐,常用文字属性,常用段落样式,项目中其他常用属性,CSS选择符命名方式,标签选择符id选择符class选择符复合内容,1）标签选择符,如：

bodydivspanh1等等例如：

h1color:

red;,纠结的问题,?

color:

?

;我是红色的我是蓝色的,结论：

相同的标记，我们需要区分细节！

自己起名字，使用#符号进行标识，在一个网页中只能使用一次。

例如：

#redcolor:

red;,起的名字尽量有含义！

2）id选择符,id多用来做布局,#main#top#left#right#footer,html结构,3）class选择符,自己起名字，使用.符号的形式定义，允许重复使用。

例如：

.bluecolor:

blue;,起的名字尽量有含义！

注意事项,1、数字不能打头，也不能写中文。

2、字母、拼音、数字和下划线都可以用来命名。

3、自己起的名字，尽量有含义。

解决方案,完成刚才的纠结问题。

三种选择符的命名方式,CSS选择符命名和调用方式,CSS选择符命名和调用方式,三种命名方式小结：

体验项目5-45-55-65-75-8,上节课知识点回顾,CSS的选择符有哪三种命名方式？

三种命名怎么调用？

复合内容,群组选择符包含选择符CSS伪类,4）群组选择符,可以对一组对象进行相同的样式指派，例如：

h1,h2,h3,p,spancolor:

blue;应用：

可以对某个对象的子对象进行样式指派，例如：

#boxafont-size:

12px;color:

#ba2636;text-decoration:

none;应用：

详细我没在盒子#box里,5）包含选择符,应用举例,CSS伪类,CSS伪类是一种特殊的CSS定义方法，主要用于对超链接的重新定义。

超链接的样式控制,a:

link对于超链接文字进行设置常用伪类：

a:

visited链接被访问后的样式a:

hover用于鼠标悬停在链接上的样式a:

active点击链接，未释放之前的样式,选择符总结,标签选择符id选择符class选择符复合选择符群组选择符包含选择符伪类,?

color:

red;,选择符（Selector）,体验项目5-95-105-11,本课内容,层叠和继承随堂测试：

Google图标超链接,样式表的位置,内嵌样式表粉色内嵌样式-粉色内部样式表红色外部样式表蓝色,层叠与继承P113项目5-12,分别用下述3种方法，控制的颜色，看哪种起效果？

要求：

内嵌式：

#ff00ff粉色；内部式：

red红色；外部式：

blue蓝色；,P113项目5-12,层叠：

三种样式的优先级,对于名称相同的样式，样式的优先级从高到低依次是：

内嵌（inline）,内部（internal）,外部（external）,浏览器缺省（browserdefault）。

其中内部CSS和外部CSS没有优先级的先后，后定义的样式覆盖前面定义的样式，这就是所谓的层叠。

继承,更多资料：

CSS之继承详解此为中文翻译版本，翻译者：

张鑫旭。

本文档生动有趣的讲解了有关CSS继承的一些知识，相信对您的学习会有所帮助的。

本例中，标题1继承了什么属性？

课后练习,P115项目5-13,随堂测试：

制作Google的图标,提示：

字体大小：

80像素字母间距：

-2像素字体：

Arial,Helvetica,sans-serif字母颜色：

蓝（#184dc6）红（#c61800）黄（#efba00）绿（#42c34a）,随堂测试-超链接的样式,超链接文字和访问后：

黑色12px没有下划线；鼠标滑过和点击时：

橙色有下划线,css基本属性2-背景,源文件-css-效果,背景常用属性back-ground,随堂测试-几米的故事,解析代码：

缩写后的代码：

bodybackground:

#e6fbffurl（self.jpg）no-repeatrightbottom;,bodybackground-color:

#e9fbff;background-image:

url（self.jpg）;background-repeat:

no-repeat;background-position:

rightbottom;,几米效果拓展：

方法：

background-position:

-135px-165px;,深入学习背景图片的位置-CSSSprites,实际的网站上，为了背景图片寻找方便，也为了减少图片数量，经常会把常用的背景小图标放置在同一张大图片上。

自我领悟定义标题,SuperCoolPageTitle,h1,+,学习感悟,第5题中10*10的图片，还有第7、8题，用网上给的图片都会有问题，看书或者阅读资料的时候，能够主动的思考，寻找合适的方法解决问题、实现效果，这个能力更重要。

利用DW编写CSS,看书看教学视频,1-选择符命名方式,2-正确命名,3-书写位置,命名方式和书写位置,类型属性（文字）,背景属性,区块属性（段落）,方框属性,边框属性,列表属性,定位属性,综合项目,固定宽度的圆角表格,4-网页设计与制作,网页布局方法,练习时间,下面的网页的布局你能看出来吗？

是几列（几栏）的布局呢？

单栏,三列布局（三栏）,你能画出下面的网页的布局吗？

网页布局方法,所谓布局定位，就是CSS网页的核心框架。

方法步骤：

1、根据内容，建立html文件结构2、搭建排版架构；3、调整架构显示的位置、浮动方式；4、填充框架中细节的排版。

核心：

浮动和定位,学习思路：

理解孤立的一个盒子的内部结构理解多个盒子之间的相互关系,1-一个盒子的旅程盒模型,从零开始理解盒模型,盒模型（Boxmodel）,项目1：

我的第一个盒子,计算盒子的宽度与占位P1376-1,#bannerbackground-color:

#efe;height:

150px;width:

300px;margin:

80px;padding:

40px;border:

1pxsolid#666;提问：

CSS属性中（height:

150px;width:

300px;），指的是谁的尺寸？

我们所能看见盒子的宽和高又是多少？

这个盒子实际占据的宽高尺寸又是多少？

盒子最终占据的宽度,左外边距+左边框+左填充距+width+右填充距+右边框+右外边距,注意：

CSS背景属性指的是content和padding区域。

CSS属性中的width和height指的是content区域的宽和高。

相关属性,marginborderpadding顺时针方向上右下左,margin外边距,margin-top:

10px;margin-right:

10px;margin-bottom:

10px;margin-left:

10px;多种缩写方式：

margin:

10px;margin:

0auto;margin:

10px5px3px15px;,adding内边距,adding-top:

10px;padding-right:

10px;padding-bottom:

10px;padding-left:

10px;多种缩写方式：

padding:

10px;padding:

010px;padding:

10px5px3px15px;,border边框,border-width|border-style|border-colorborder-top:

1pxsolid#ccc;border-right:

1pxsolid#ccc;border-bottom:

1pxsolid#ccc;border-left:

1pxsolid#ccc;多种缩写方式：

border:

1pxsolid#ccc;border-width:

10px5px3px15px;,课后作业项目6-56-66-7,当堂测试：

当当网细节,回顾无序列表,a实战当当书网列表,Html代码：

列表拓展,2-多个盒子的布局块与内嵌,实例3和,标记是一个块状的容器，其默认的状态就是占据整个一行。

标记是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。

块元素（block）,block元素总是在新行上开始；元素的宽、高、padding、margin等都可控制；缺省宽度是容器的100%；常见块元素有：

、和,内嵌元素（inline）,inline元素可和其他元素在同一行上；宽、高、padding、margin等不可改变；常见内嵌元素有：

、和。

display属性,使用范例1,使得链接对象a的显示方式由一段文本改变为一个块状对象,adisplay:

block;,使用范例2,1基于PSD设计图的网页设计流程,使得对象仍然在一行，但可设置block属性的宽度和高度。

spandisplay:

inline-block;,使用范例3,课后练习:

7-17-2,3-多个盒子的布局浮动和清除,主要内容,浮动：

f