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

1、3-网页设计与制作-css基础,课程内容体系,主要内容,1）什么是CSS?2）CSS的基本语法3）简单案例,什么是CSS？,css：Cascading Style Sheet 层叠样式表,background-image:url(self.jpg);background-repeat:no-repeat;background-position:right bottom;background-color:#e9fbff;,代码释义,+,CSS样式在网页中的应用,CSS就是让内容和样式分离开来HTML只控制网页的内容（如文字、图片和超链接等）内容的样式由CSS来控制（如颜色、位置等）举个例子：就像

2、模特和漂亮衣服的关系,CSS 禅意花园,倡导人：CSS 禅意花园主人 Dave Shea http:/创意：提供同一网页的html源文件，人们可以用 CSS 将它设计成各式各样的风格并提交上来。作用：想改变人们对WEB设计的看法，向人们展示CSS设计可实现的视觉效果，但最终却出乎意料的改变了全球技术发展的趋势。,源文件-css-效果,优秀作品：,优秀作品：,优秀作品：,更多作品欣赏：,现场演示http:/禅意花园更多作品CSS禅意花园作品欣赏.rar（16课件下载）,CSS学习顺序三部曲,基本语法结构书写位置命名方式,学习重点,具体属性文字背景盒模型边框浮动和清除,CSS结构类比：,李逵身高：

3、185cm；体重：105kg；性别：男；性格：莽撞；武器：板斧；,分析（三要素）姓名、属性、属性值,拓展：唐僧 八戒,CSS结构真相,段落字体大小：12像素；颜色：红色；,pfont-size:12px;color:red;,测试,标题1大小：25像素；颜色：蓝色；,h1font-size:25px;Color:blue;,CSS书写位置,内嵌样式表内部样式表外部样式表,内嵌样式表,位置：作为属性，直接添加在HTML的开始标记里。代码说明：不推荐使用，因为不能发挥样式表的优势，无法将内容和样式分别控制。,内部样式表,html与CSS结合方式,通过link语句链接两个文件,内部和外部样式表相互转

4、化,内部样式表,h1 color：red；,外部样式表,课程重点总结,html-标记-网页内容CSS-属性-网页样式,美观的网页,+,=,体验CSS,项目5-1 项目5-2 项目5-3,知识点补充,html的注释标记，在这里是跨越的意思，当浏览器不支持css语法时，会自动越过此标记。/*/为CSS的注释标记。不同的属性之间用;分隔开，需要注意的是，一定要用半角的分号，不能用全角的分号。,上节课知识点回顾,CSS的作用是什么？CSS长什么样子？CSS代码可以写在什么地方？,随堂测试：,标题1：字体颜色+背景颜色+居中,代码解析：,综合案例-初恋这件小事,本课程内容,项目分析，知识讲解常用文字属性

5、（随堂测试）命名方式,css基本属性1-文字,漂亮页面欣赏-1,漂亮页面欣赏-2,漂亮页面欣赏-3,常用文字属性,1、字体样式 字体颜色字体、字号、文字加粗下划线2、段落样式行高文本缩进水平对齐,常用文字属性,常用段落样式,项目中其他常用属性,CSS选择符命名方式,标签选择符id选择符class选择符复合内容,1）标签选择符,如：body div span h1 等等例如：h1 color:red;,纠结的问题,?color:?;我是红色的我是蓝色的,结论：相同的标记，我们需要区分细节！,自己起名字，使用#符号进行标识，在一个网页中只能使用一次。例如：#red color:red;,起的名字尽

6、量有含义！,2）id选择符,id多用来做布局,#main#top#left#right#footer,html结构,3）class选择符,自己起名字，使用.符号的形式定义，允许重复使用。例如：.bluecolor:blue;,起的名字尽量有含义！,注意事项,1、数字不能打头，也不能写中文。2、字母、拼音、数字和下划线都可以用来命名。3、自己起的名字，尽量有含义。,解决方案,完成刚才的纠结问题。,三种选择符的命名方式,CSS选择符命名和调用方式,CSS选择符命名和调用方式,三种命名方式小结：,体验项目 5-4 5-5 5-6 5-7 5-8,上节课知识点回顾,CSS的选择符有哪三种命名方式？三种

7、命名怎么调用？,复合内容,群组选择符包含选择符CSS伪类,4）群组选择符,可以对一组对象进行相同的样式指派，例如：h1,h2,h3,p,spancolor:blue;应用：,可以对某个对象的子对象进行样式指派，例如：#box a font-size:12px;color:#ba2636;text-decoration:none;应用：详细 我没在盒子#box里,5）包含选择符,应用举例,CSS伪类,CSS伪类是一种特殊的CSS定义方法，主要用于对超链接的重新定义。,超链接的样式控制,a:link 对于超链接文字进行设置常用伪类：a:visited 链接被访问后的样式a:hover 用于鼠标悬停

8、在链接上的样式a:active 点击链接，未释放之前的样式,选择符总结,标签选择符id选择符class选择符复合选择符群组选择符包含选择符伪类,?color:red;,选择符（Selector）,体验项目 5-9 5-10 5-11,本课内容,层叠和继承随堂测试：Google图标超链接,样式表的位置,内嵌样式表 粉色内嵌样式-粉色内部样式表 红色外部样式表 蓝色,层叠与继承 P113 项目5-12,分别用下述3种方法，控制的颜色，看哪种起效果？要求：内嵌式：#ff00ff 粉色；内部式：red 红色；外部式：blue 蓝色；,P113 项目5-12,层叠：三种样式的优先级,对于名称相同的样式，

9、样式的优先级从高到低依次是：内嵌(inline),内部(internal),外部(external),浏览器缺省(browser default)。其中内部CSS和外部CSS没有优先级的先后，后定义的样式覆盖前面定义的样式，这就是所谓的层叠。,继承,更多资料：CSS之继承详解 此为中文翻译版本，翻译者：张鑫旭。本文档生动有趣的讲解了有关CSS继承的一些知识，相信对您的学习会有所帮助的。,本例中，标题1继承了什么属性？,课后练习,P115 项目5-13,随堂测试：制作Google的图标,提示：字体大小：80像素 字母间距：-2像素 字体：Arial,Helvetica,sans-serif 字母

10、颜色：蓝（#184dc6）红（#c61800）黄（#efba00）绿（#42c34a）,随堂测试-超链接的样式,超链接文字和访问后：黑色 12px 没有下划线；鼠标滑过和点击时：橙色 有下划线,css基本属性2-背景,源文件-css-效果,背景常用属性 back-ground,随堂测试-几米的故事,解析代码：,缩写后的代码：bodybackground:#e6fbff url(self.jpg)no-repeat right bottom;,body background-color:#e9fbff;background-image:url(self.jpg);background-repea

11、t:no-repeat;background-position:right bottom;,几米效果拓展：,方法：background-position:-135px-165px;,深入学习背景图片的位置-CSS Sprites,实际的网站上，为了背景图片寻找方便，也为了减少图片数量，经常会把常用的背景小图标放置在同一张大图片上。,自我领悟定义标题,Super Cool Page Title,h1,+,学习感悟,第5题中10*10的图片，还有第7、8题，用网上给的图片都会有问题，看书或者阅读资料的时候，能够主动的思考，寻找合适的方法解决问题、实现效果，这个能力更重要。,利用DW编写CSS,看书

12、看教学视频,1-选择符命名方式,2-正确命名,3-书写位置,命名方式和书写位置,类型属性（文字）,背景属性,区块属性（段落）,方框属性,边框属性,列表属性,定位属性,综合项目,固定宽度的圆角表格,4-网页设计与制作,网页布局方法,练习 时间,下面的网页的布局你能看出来吗？是几列（几栏）的布局呢？,单栏,三列布局（三栏）,你能画出下面的网页的布局吗？,网页布局方法,所谓布局定位，就是CSS网页的核心框架。方法步骤：1、根据内容，建立html文件结构2、搭建排版架构；3、调整架构显示的位置、浮动方式；4、填充框架中细节的排版。核心：浮动和定位,学习思路：,理解孤立的一个盒子的内部结构理解多个盒子之

13、间的相互关系,1-一个盒子的旅程 盒模型,从零开始理解盒模型,盒模型（Box model）,项目1：我的第一个盒子,计算盒子的宽度与占位 P137 6-1,#banner background-color:#efe;height:150px;width:300px;margin:80px;padding:40px;border:1px solid#666;提问：CSS属性中（height:150px;width:300px;），指的是谁的尺寸？我们所能看见盒子的宽和高又是多少？这个盒子实际占据的宽高尺寸又是多少？,盒子最终占据的宽度,左外边距+左边框+左填充距+width+右填充距+右边框+右

14、外边距,注意：,CSS 背景属性指的是content 和 padding 区域。CSS 属性中的 width 和 height 指的是 content 区域的宽和高。,相关属性,marginborder padding 顺时针方向上 右 下 左,margin 外边距,margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;多种缩写方式：margin:10px;margin:0 auto;margin:10px 5px 3px 15px;,adding 内边距,adding-top:10px;padding-ri

15、ght:10px;padding-bottom:10px;padding-left:10px;多种缩写方式：padding:10px;padding:0 10px;padding:10px 5px 3px 15px;,border 边框,border-width|border-style|border-color border-top:1px solid#ccc;border-right:1px solid#ccc;border-bottom:1px solid#ccc;border-left:1px solid#ccc;多种缩写方式：border:1px solid#ccc;border-w

16、idth:10px 5px 3px 15px;,课后作业 项目6-5 6-6 6-7,当堂测试：当当网细节,回顾无序列表,a实战当当书网列表,Html代码：,列表拓展,2-多个盒子的布局 块与内嵌,实例3 和,标记是一个块状的容器，其默认的状态就是占据整个一行。标记是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。,块元素（block）,block元素总是在新行上开始；元素的宽、高、padding、margin等都可控制；缺省宽度是容器的100%；常见块元素有：、和,内嵌元素（inline）,inline元素可和其他元素在同一行上；宽、高、padding、margin等不可改变；常见内嵌元素有：、和。,display属性,使用范例1,使得链接对象a的显示方式由一段文本改变为一个块状对象,adisplay:block;,使用范例2,1基于PSD设计图的网页设计流程,使得对象仍然在一行，但可设置block属性的宽度和高度。,span display:inline-block;,使用范例3,课后练习:7-1 7-2,3-多个盒子的布局 浮动和清除,主要内容,浮动：f