CSS样式快速入门培训.ppt

谢谢观看 HTML+CSS基础知识分享 基本介绍 1 Html是什么？ HTML 是用来描述网页的一种语言。 HTML 标签 HTML 标签是由尖括号包围的关键词，比如 html HTML 标签通常是成对出现的，比如 b 和 /b 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 一段最基础的HTML html body h1My First Heading/h1 pMy first paragraph./p /body /html 例子解释 html 与 /html 之间的文本描述网页 body 与 /body 之间的文本是可见的页面内容 h1 与 /h1 之间的文本被显示为标题 p 与 /p 之间的文本被显示为段落 Html常用标签 a 链接 div 最常用的块级元素 p 文字段落 span 把一个行级元素拆分，给与块级结构。 ulli 无序列表 img 图片 tabletrtd 表格 iframe 内联框架 CSS是什么？能做什么？ 控制网页中元素的颜色、大小、位置、风格及效果。 颜色：背景色、边线色、文字色… 大小：文字大小、各种容器大小… 图片：控制切片（元素），使其与效果图一致。 风格：为元素设置诸如阴影、模糊和透明等效果。 位置：可调整各个元素间的间距与位置。 效果：基础交互动态，也可与脚本语言组合，产生各种高级动态效果。 CSS添加方式 1 添加CSS方式 CSS样式有3种添加方法 1.外部样式表 – 最佳方式，便于查找与修改。 2.内部样式表 – 可针对当前独立页面使用。 3.内联样式 – 后期的小修补。 外部样式表 html head link type=text/css rel=stylesheet href= basic.css /head body … /body /html 内部样式表 html head style type=text/css body { background-color:#ff8008;} /style /head body /body /html 内联样式 html head /head body style=“background-color: green”; /body /html 层叠次序 当同一个HTML元素被不止一个样式定义时引用次序如下 1.外部样式表 2.内部样式表（位于 head 标签内部） 3.内联样式（在 HTML 元素内部，最高优先权） 选择器介绍 2 选择器种类 1 类别选择器 2 标签选择器 3 ID选择器 4 后代选择器 5 子选择器 6 伪类选择器 7 通用选择器 8 群组选择器 9 相邻同胞选择器 10 属性选择器 标签选择器 一个完整的HTML页面是有很多不同的标签组成，如 div ph1… 标签选择器不加任何前缀 例如： p{ color:#FF0000; } h1{ line-height:45px; } 标签选择器 html head style type=text/css p {color:yellow;} /style /head body h1标题/h1 p 为人民服务/p /body /html 类别选择器 类选择器根据类名来选择，前面以”. ”来标志。 例如： .demoDiv { color:#FF0000; } .wangxiangyi { height:45px; width: 230px; } 类别选择器 html head style type=text/css .important {color:yellow;} /style /head body h1 class=“important”好好学习/h1 p class=“important”天天向上/p p学习雷锋好榜样/p /body /html ID选择器 根据元素ID来选择元素，具有唯一性。 前面以”#”号来标志。 例如： #demoDiv { color:#FF0000; } #wangxiangyi { height:45px; width: 230px; } ID选择器 html head style type=text/css #important {color:yellow;} /style /head body h1 id=“important”好好学习/h1 p id=“important”天天向上/p p学习雷锋好榜样/p /body /html 伪类选择器 用于文档以外的其他条件来应用元素的样式 常用于按键、链接