CSS样式快速入门培训.ppt

HTML CSS基础知识分享 基本介绍 1 Html是什么 HTML是用来描述网页的一种语言 HTML标签HTML标签是由尖括号包围的关键词 比如HTML标签通常是成对出现的 比如和标签对中的第一个标签是开始标签 第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 一段最基础的HTML MyFirstHeadingMyfirstparagraph 例子解释与之间的文本描述网页与之间的文本是可见的页面内容与之间的文本被显示为标题与之间的文本被显示为段落 Html常用标签 链接最常用的块级元素文字段落把一个行级元素拆分 给与块级结构 无序列表图片表格内联框架 CSS是什么 能做什么 控制网页中元素的颜色 大小 位置 风格及效果 颜色 背景色 边线色 文字色 大小 文字大小 各种容器大小 图片 控制切片 元素 使其与效果图一致 风格 为元素设置诸如阴影 模糊和透明等效果 位置 可调整各个元素间的间距与位置 效果 基础交互动态 也可与脚本语言组合 产生各种高级动态效果 CSS添加方式 1 添加CSS方式 CSS样式有3种添加方法1 外部样式表 最佳方式 便于查找与修改 2 内部样式表 可针对当前独立页面使用 3 内联样式 后期的小修补 外部样式表 内部样式表 body background color ff8008 内联样式 层叠次序 当同一个HTML元素被不止一个样式定义时引用次序如下1 外部样式表2 内部样式表 位于标签内部 3 内联样式 在HTML元素内部 最高优先权 选择器介绍 2 选择器种类 1类别选择器2标签选择器3ID选择器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 0200px 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 demo2 color red 好好学习天天向上天天向上 搭配 继承 all color 666666 allh1 color red demo word color yellow demo2 color green font size 24px demo demo2 margin left 300px 第1句话第2句话第3句话第4句话 常用样式与属性 3 常用样式与属性 1CSS背景background color img 2CSS链接linkactivehovervisited3CSS文本font style size weight color 4CSS字体font family5CSS边框border6CSS边距margin pading7CSS浮动与清理float clear 容器基础模型 浮动 相对定位 box relative position relative left 30px top 20px 绝对定位 box relative position absolute left 30px top 20px CSS常见问题 指定了CSS样式 元素却不听话