Html复习.ppt

复习总结 T205 王小政 css样式基本 使用CSS的好处 1 实现内容和样式分离 利于团队开发 2 实现样式复用 提高开发效率 3 实现页面的精确控制 4 更利于搜索引擎搜索 css基本语法 选择器 对象的属性1 属性值1 对象的属性2 属性值2 选择器 标签选择器语法 标签名 属性名1 属性值1 属性值2 属性值2 类选择器语法 类名 属性名1 属性值1 属性值2 属性值2 ID选择器语法 ID标识名 属性名1 属性值1 属性值2 属性值2 页面元素修饰的CSS属性 文本属性 line height text detoration text align color letter spacing等字体属性 font font family font weight font size等背景属性 background background images background repeat background position等列表属性 list style float等 2020 1 24 常用列表类型图标 none去掉修饰符list style nonedisc实心圆list style disccircle空心圆list style circlesquare实心正方形list style squaredecimal数字list style decimal 2020 1 24 margin外边距属性 margin top上外边距margin top 1px margin right右外边距margin right 1px margin bottom下外边距margin bottom 2px margin left左外边距margin left 4px 缩写形式margin 在一个声明中统一设四个方向的外边距 margin 1px1px2px4px 2020 1 24 padding内边距属性 padding内边距属性padding top上边框内边距padding top 2px padding right右边框内边距padding right 1px padding bottom下边框内边距padding bottom 1px padding left左边框内边距padding left 3px 缩写形式padding 1px2px4px2px 2020 1 24 border边框属性 border color边框颜色border color fff border width边框宽度border width 2px border style边框样式常用值none solid dashed 虚线 border top上边距border top 2px border right右边距border right 3px border bottom下边距border bottom 4px border left左边距border left 5px 缩写式border 2pxsolidred 2020 1 24 float属性 float 用于定义元素的浮动方向 所有元素都支持 可以改变块级元素默认的换行显示方式 对应的样式只有left right none 默认值 不浮动 块级元素设置浮动后将失去 独占一行 的特征 浮动元素将紧贴上一个浮动元素 同方向 或父级元素的边框 如果宽度不够将和换行显示 浮动元素将占据行内元素的空间 2020 1 24 clear属性 clear clear left在左侧不允许有浮动元素clear right在右侧不允许有浮动元素clear both在左右两侧不允许有浮动元素clear none默认值 允许两侧都有浮动元素 2020 1 24 超链接伪类 a link未单击访问时的样式a link color ccc a visited单击访问后的样式a visited color 222 a hover鼠标悬浮上的样式a hover color ccc a active鼠标单击未释放样式a active color 444 语法 行内样式应用优先级行内样式 内部样式 外部样式Id选择器 类选择器 标签选择器 2020 1 24 多选择器常用符号 空格divul list style 内的元素样式 逗号div ul text align center 和采用相同样式 id标识符 nav width 100 id为 nav 的元素样式 类标识符 pic background url bg gif 类名为pic的元素样式 冒号a hover ff0 a标签的hover的伪类样式li 标签 类li pic width 28px 类名为pic的标签样式div 标签 iddiv nav text align center id为 nav 的标签样式 id 空格 类 nav pic border 1px id为 nav 元素内的pic样式 id 空格 类 逗号 nav pic nav text height 26px 2020 1 24 测试兼容性 测试兼容性的方法 1 使用Dreamweaver验证标签是否符合W3C相关规范以及浏览器兼容性问题 2 使用Firefox验证是否符合W3C相关规范 3 发送网址到W3C官网验证是否符合W3C相关规范 解决浏览器兼容问题的方法 1 根据各浏览器识别的特殊符号 编写对应的CSShack 2 常见的浏览器兼容性问题有 三像素文本慢移问题 双倍边距问题 不同的浏览器默认的内边距不一致问题 2020 1 24 CSSposition属性 通过使用position属性 我们可以选择4种不同类型的定位 这会影响元素框生成的方式 position属性值的含义 static元素框正常生成 块级元素生成一个矩形框 作为文档流的一部分 行内元素则会创建一个或多个行框 置于其父元素中 relative元素框偏移某个距离 元素仍保持其未定位前的形状 它原本所占的空间仍保留 absolute元素框从文档流完全删除 并相对于其包含块定位 包含块可能是文档中的另一个元素或者是初始包含块 元素原先在正常文档流中所占的空间会关闭 就好像元素原来不存在一样 元素定位后生成一个块级框 而不论原来它在正常流中生成何种类型的框 fixed元素框的表现类似于将position设置为absolute 不过其包含块是视窗本身 2020 1 24 CSS绝对定位 设置为绝对定位的元素框从文档流完全删除 并相对于其包含块定位 包含块可能是文档中的另一个元素或者是初始包含块 元素原先在正常文档流中所占的空间会关闭 就好像该元素原来不存在一样 元素定位后生成一个块级框 而不论原来它在正常流中生成何种类型的框 绝对定位使元素的位置与文档流无关 因此不占据空间 这一点与相对定位不同 相对定位实际上被看作普通流定位模型的一部分 因为元素的位置相对于它在普通流中的位置 普通流中其它元素的布局就像绝对定位的元素不存在一样 box relative position absolute left 30px top 20px 2020 1 24 CSS相对定位 设置为相对定位的元素框会偏移某个距离 元素仍然保持其未定位前的形状 它原本所占的空间仍保留 相对定位是一个非常容易掌握的概念 如果对一个元素进行相对定位 它将出现在它所在的位置上 然后 可以通过设置垂直或水平位置 让这个元素 相对于 它的起点进行移动 如果将top设置为20px 那么框将在原位置顶部下面20像素的地方 如果left设置为30像素 那么会在元素左边创建30像素的空间 也就是将元素向右移动 box relative position relative left 30px top 20px 2020 1 24 Alpha滤镜 语法 FILTER ALPHA opacity opacity finishopacity finishopacity style style startx startx starty starty finishx finishx finishy finishy Alpha 属性是把一个目标元素与背景混合 设计者可以指定数值来控制混合的程度 这种 与背景混合 通俗地说就是一个元素的透明度 通过指定坐标 可以指定点 线 面的透明度 他们的参数含义分别如下 2020 1 24 opacity 代表透明度水准 默认的范围是从0到100 他们其实是百分比的形式 也就是说 0代表完全透明 100代表完全不透明 finishopacity 是一个可选参数 如果想要设置渐变的透明效果 就可以使用他们来指定结束时的透明度 范围也是0到100 style 参数指定了透明区域的形状特征 其中0代表统一形状 1代表线形 2代表放射状 3代表