网页设计与制作课程培训 -css基础PPT文件格式下载.ppt
《网页设计与制作课程培训 -css基础PPT文件格式下载.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作课程培训 -css基础PPT文件格式下载.ppt(187页珍藏版)》请在冰豆网上搜索。
,更多作品欣赏:
现场演示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:
纠结的问题,?
?
;
我是红色的我是蓝色的,结论:
相同的标记,我们需要区分细节!
自己起名字,使用#符号进行标识,在一个网页中只能使用一次。
例如:
#redcolor:
起的名字尽量有含义!
2)id选择符,id多用来做布局,#main#top#left#right#footer,html结构,3)class选择符,自己起名字,使用.符号的形式定义,允许重复使用。
.bluecolor:
注意事项,1、数字不能打头,也不能写中文。
2、字母、拼音、数字和下划线都可以用来命名。
3、自己起的名字,尽量有含义。
解决方案,完成刚才的纠结问题。
三种选择符的命名方式,CSS选择符命名和调用方式,CSS选择符命名和调用方式,三种命名方式小结:
体验项目5-45-55-65-75-8,上节课知识点回顾,CSS的选择符有哪三种命名方式?
三种命名怎么调用?
复合内容,群组选择符包含选择符CSS伪类,4)群组选择符,可以对一组对象进行相同的样式指派,例如:
h1,h2,h3,p,spancolor:
应用:
可以对某个对象的子对象进行样式指派,例如:
#boxafont-size:
#ba2636;
text-decoration:
none;
详细我没在盒子#box里,5)包含选择符,应用举例,CSS伪类,CSS伪类是一种特殊的CSS定义方法,主要用于对超链接的重新定义。
超链接的样式控制,a:
link对于超链接文字进行设置常用伪类:
a:
visited链接被访问后的样式a:
hover用于鼠标悬停在链接上的样式a:
active点击链接,未释放之前的样式,选择符总结,标签选择符id选择符class选择符复合选择符群组选择符包含选择符伪类,?
选择符(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:
background-image:
几米效果拓展:
方法:
-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:
),指的是谁的尺寸?
我们所能看见盒子的宽和高又是多少?
这个盒子实际占据的宽高尺寸又是多少?
盒子最终占据的宽度,左外边距+左边框+左填充距+width+右填充距+右边框+右外边距,注意:
CSS背景属性指的是content和padding区域。
CSS属性中的width和height指的是content区域的宽和高。
相关属性,marginborderpadding顺时针方向上右下左,margin外边距,margin-top:
10px;
margin-right:
margin-bottom:
margin-left:
多种缩写方式:
0auto;
10px5px3px15px;
adding内边距,adding-top:
padding-right:
padding-bottom:
padding-left:
010px;
border边框,border-width|border-style|border-colorborder-top:
1pxsolid#ccc;
border-right:
border-bottom:
border-left:
border-width:
课后作业项目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