CSS样式快速入门培训.ppt

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