CSS样式快速入门培训PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2,*,HTML+CSS,基础知识分享,1,2025/7/15 周二,基本介绍,1,2,2025/7/15 周二,Html,是什么？,HTML,是用来描述网页的一种语言。,HTML,标签,HTML,标签是由尖括号包围的关键词，比如,HTML,标签通常是成对出现的，比如,和,标签对中的第一个标签是开始标签，第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签,3,2025/7/15 周二,一段最基础的,HTML,My First Heading,My first paragraph.,例子解释,与,之间的文本描述网页,与,之间的文本是可见的页面内容,与,之间的文本被显示为标题,与,之间的文本被显示为段落,4,2025/7/15 周二,Html,常用标签,链接,最常用的块级元素,文字段落,把一个行级元素拆分，给与块级结构。,无序列表,图片,表格,内联框架,5,2025/7/15 周二,CSS,是什么？能做什么？,控制网页中元素的,颜色、大小、位置、风格及效果。,颜色：背景色、边线色、文字色,大小：文字大小、各种容器大小,图片：控制切片（元素），使其与效果图一致。,风格：为元素设置诸如阴影、模糊和透明等效果。,位置：可调整各个元素间的间距与位置。,效果：基础交互动态，也可与脚本语言组合，产生各种高级动态效果。,6,2025/7/15 周二,CSS,添加方式,1,7,2025/7/15 周二,添加,CSS,方式,CSS,样式有,3,种添加方法,1.,外部样式表,最佳方式，便于查找与修改。,2.,内部样式表,可针对当前独立页面使用。,3.,内联样式,后期的小修补。,8,2025/7/15 周二,外部样式表,9,2025/7/15 周二,内部样式表,body background-color:#ff8008;,10,2025/7/15 周二,内联样式,11,2025/7/15 周二,层叠次序,当同一个,HTML,元素被不止一个样式定义时引用次序如下,1.,外部样式表,2.,内部样式表（位于标签内部）,3.,内联样式（在,HTML,元素内部，最高优先权）,12,2025/7/15 周二,选择器介绍,2,13,2025/7/15 周二,选择器种类,1,类别选择器,2,标签选择器,3 ID,选择器,4,后代选择器,5,子选择器,6,伪类选择器,7,通用选择器,8,群组选择器,9,相邻同胞选择器,10,属性选择器,14,2025/7/15 周二,标签选择器,一个完整的,HTML,页面是有很多不同的标签组成，如,标签选择器不加任何前缀,例如：,p color:#FF0000;,h1 line-height:45px;,15,2025/7/15 周二,标签选择器,p color:yellow;,标题,为人民服务,16,2025/7/15 周二,类别选择器,类选择器根据类名来选择，前面以,”,.,”,来标志。,例如：,.demoDiv color:#FF0000;,.wangxiangyi height:45px;width:230px;,17,2025/7/15 周二,类别选择器,.important color:yellow;,好好学习,天天向上,学习雷锋好榜样,18,2025/7/15 周二,ID,选择器,根据元素,ID,来选择元素，具有唯一性。,前面以,”,#,”,号来标志。,例如：,#demoDiv color:#FF0000;,#wangxiangyi height45px;width:230px;,19,2025/7/15 周二,ID,选择器,#important color:yellow;,好好学习,天天向上,学习雷锋好榜样,20,2025/7/15 周二,伪类选择器,用于文档以外的其他条件来应用元素的样式,常用于按键、链接等,Link,表示链接在没有被点击时的样式。,Visited,表示链接已经被访问时的样式。,Hover,表示当鼠标悬停在链接上面时的样式。,Active,表示鼠标点住时一刹那样式。,21,2025/7/15 周二,伪类选择器,a margin:0 200px;,a:link background-color:#CCCCCC;,avisited background-color:#CC00CC;,a:hover background-color:#FF0000;,a:active background-color:green;,我是一个按键,22,2025/7/15 周二,分别使用一下,p color:blue;,.demo1 color:yellow;,#demo2color:red;,好好学习,天天向上,天天向上,23,2025/7/15 周二,搭配,&,继承,.all color:#666666;,.all h1 color:red;,.demo.word color:yellow;,#demo2color:green;font-size:24px;,.demo,#demo2 margin-left:300px;,第,1,句话,第,2,句话,第,3,句话,第,4,句话,24,2025/7/15 周二,常用样式与属性,3,25,2025/7/15 周二,常用样式与属性,1 CSS,背景,background-color/img,2 CSS,链接,link active hover visited,3 CSS,文本,font-style/size/weight/color,4 CSS,字体,font-family,5 CSS,边框,border,6 CSS,边距,margin/pading,7 CSS,浮动与清理,float&clear,26,2025/7/15 周二,容器基础模型,27,2025/7/15 周二,浮动,28,2025/7/15 周二,相对定位,#box_relative,position:relative;,left:30px;,top:20px;,29,2025/7/15 周二,绝对定位,#box_relative,position:absolute;,left:30px;,top:20px;,30,2025/7/15 周二,CSS,常见问题,指定了,CSS,样式，元素却不听话！,原因可能有：,1.,拼写有误，标签未封死或者加入了中文字符。,2.,该元素本身无此样式，如行级元素与块级元素。,3.,继承错误，如多次指定样式，将按优先级选用。,4.,浏览器兼容问题。采用,css hack,解决,31,2025/7/15 周二,谢谢观看,32,2025/7/15 周二,