CSS样式快速入门培训.ppt

HTML+CSS基础知识分享,基本介绍,1,Html是什么？,HTML是用来描述网页的一种语言。HTML标签HTML标签是由尖括号包围的关键词，比如HTML标签通常是成对出现的，比如和标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签,一段最基础的HTML,MyFirstHeadingMyfirstparagraph.,例子解释与之间的文本描述网页与之间的文本是可见的页面内容与之间的文本被显示为标题与之间的文本被显示为段落,Html常用标签,链接最常用的块级元素文字段落把一个行级元素拆分，给与块级结构。无序列表图片表格内联框架,CSS是什么？能做什么？,控制网页中元素的颜色、大小、位置、风格及效果。颜色：背景色、边线色、文字色大小：文字大小、各种容器大小图片：控制切片（元素），使其与效果图一致。风格：为元素设置诸如阴影、模糊和透明等效果。位置：可调整各个元素间的间距与位置。效果：基础交互动态，也可与脚本语言组合，产生各种高级动态效果。,CSS添加方式,1,添加CSS方式,CSS样式有3种添加方法1.外部样式表最佳方式，便于查找与修改。2.内部样式表可针对当前独立页面使用。3.内联样式后期的小修补。,外部样式表,内部样式表,bodybackground-color:#ff8008;,内联样式,层叠次序,当同一个HTML元素被不止一个样式定义时引用次序如下1.外部样式表2.内部样式表（位于标签内部）3.内联样式（在HTML元素内部，最高优先权）,选择器介绍,2,选择器种类,1类别选择器2标签选择器3ID选择器4后代选择器5子选择器,6伪类选择器7通用选择器8群组选择器9相邻同胞选择器10属性选择器,标签选择器,一个完整的HTML页面是有很多不同的标签组成，如标签选择器不加任何前缀例如：pcolor:#FF0000;h1line-height:45px;,标签选择器,pcolor:yellow;标题为人民服务,类别选择器,类选择器根据类名来选择，前面以”.”来标志。例如：.demoDivcolor:#FF0000;.wangxiangyiheight:45px;width:230px;,类别选择器,.importantcolor:yellow;好好学习天天向上学习雷锋好榜样,ID选择器,根据元素ID来选择元素，具有唯一性。前面以”#”号来标志。例如：#demoDivcolor:#FF0000;#wangxiangyiheight:45px;width:230px;,ID选择器,#importantcolor:yellow;好好学习天天向上学习雷锋好榜样,伪类选择器,用于文档以外的其他条件来应用元素的样式常用于按键、链接等Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。Active表示鼠标点住时一刹那样式。,伪类选择器,amargin:0200px;a:linkbackground-color:#CCCCCC;a:visitedbackground-color:#CC00CC;a:hoverbackground-color:#FF0000;a:activebackground-color:green;我是一个按键,分别使用一下,pcolor:blue;.demo1color:yellow;#demo2color:red;好好学习天天向上天天向上,搭配.allh1color:red;.demo.wordcolor:yellow;#demo2color:green;font-size:24px;.demo,#demo2margin-left:300px;第1句话第2句话第3句话第4句话,常用样式与属性,3,常用样式与属性,1CSS背景background-color/img2CSS链接linkactivehovervisited3CSS文本font-style/size/weight/color4CSS字体font-family5CSS边框border6CSS边距margin/pading7CSS浮动与清理floatleft:30px;top:20px;,绝对定位,#box_relativeposition:absolute;left:30px;top:20px;,CSS常见问题,指定了CSS样式，元素却不听话！原因可能