[css布局入门.pptVIP

Css 2.0 概述：两种布局模式 Table布局 优点：布局容易控制，出活快 缺点：难以维护，样式混入内容中，降低亲和力 Xhtml+Css布局 优点：页面载入得更快 ,降低流量费用，容易维护，页面保持统一性，很好的支持seo(页面搜索),能提高职场竞争力 缺点：每个浏览器支持css标准不一样，造成为了适应不同的浏览器而写不同的css 文档类型定义与名字空间 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 过渡性：transitional (充许使用hmtl 4元素，要符合xhtml要求) 严格性：strict (不能使用描述性的元素和属性) 框架型：frameset html xmlns=/1999/xhtml Xmlsn:xhtml NameSpace命名空间 Xhtml语法 定义文档类型，命名空间 所有元素必须闭合 元素和属性必须小写 属性必须用””引起来 标签合理嵌套 Xhtml常见元素 Div division (分隔) 结构块 Span 表示范围，是一个通用内联元素 H1,h2,h3,h4,h5,h6 header首字母缩写 P paragraph 设置段落 Ul ol li dl dt dd Li: item in a list 项目 ol:order list 有序列表 Ul: unordered list 无序列表 dl: definition list 定义列表 Dt: definition term 定义术语 dd: definition in a definition list 定义列表项(术语解释) Table tr td Tr: a row in a table 表格中一行 Td :a diamonds in a table 表格中一方格 为搜索引擎准备的内容 meta content=all name=robots / meta name=author content=“puag@,Jikey / meta name=Copyright content=,自由版权,任意转载 / meta content=designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie name=keywords / 在网页中应用css 内联样式 div style=“color:red;”内联样式/a 内部样式 外部样式 @import url(“style.css”); link … 一、选择符与结构 1.1选择符 简单的选择符 Body h1 em strong p 分组选择符 P,h1,h2 1.2 类、ID选择符 类选择符:网页元素自身，定义时直接使用元素名称 ID选择符:中文为身份的意思 二者的区别： 类同时应用于许多元素， ID只能在某个文档中使用一次。 ID对给定元素应用何种样式比类具有更高的优先权。 1.3 伪类选择符 伪类和伪对象：伪，诈也。都不是真的类和对象，它看不见，不可预测，是一个预定义的假设 A:link, a:hover, a:visited,a:actice{} 顺序必须保持一致 记忆关键字：iove A:{color:red} 1.4 伪元素 first-letter:定义第一个文字的样式 first-line:定义第一行文字的样式 1.5属性的层叠继承问题 h1{color:#CC0000} em {color: #0000FF;} h1春江em潮水/em连海平/h1 h1春江span style=color:#0000FF潮水/span连海平/h1 下面的属性不具有继承性 边框属性 边界属性 补白属性 背景属性 定位属性 布局属性元素宽度属性 1.6 重要性important !important(ie不支持ff支持) 层叠 Div {color:red;} Div {color:blue;} 1.7 元素的分类 2 单位或值 2.1 颜色 英文命名 RGB 16进值 #efefef; #cdcdcd; 短16进制 h1{color:#f00;} == h1{color:#ff000;} h1{color:#f60;} == h1{color:#ff6600;} h1{color:#808080;} none 2.2 长度单位 1. 绝对单位 in,cm,mm,pt,pc,(72pt = 1 i