第一章 Web标准
一、CSS的作用
网页 = 结构 + 表现 + ？
N个网页就是 N*网页 = N*结构 + N*表现 + N*?
二、CSS布局 vs 表格布局
css布局与表格布局哪种更优：
css布局可以很简单实现网站换肤，css布局可以让网页一边载入一边显示，css布局可以让网页变得更小
三、常见标签
<a href="http://www.ss.com" title="前端开发">前端开发</a>
a 为标签 title为属性 前端开发为值
四、标题标签
1、<title>：页面标题
2、<h>系列：h1至h6，<h1>为最顶级标题，<h2>为副标题，<h3>为sidebar（侧边栏）的栏目使用
3、<caption>：表格的简要描述
4、<legend>：表单的<fieldset>标题，
五、内容标签
1、<p>：表示用来区分段落 <p>aabbcc</p>
2、<br>：换行.
3、<strong>、<em>：强调某一内容，strong重点强调
4、<ins>、<del>：del删除内容简介
5、<q>、<cite>：引用一句话的话可以使用<q>
六、列表标签
1、<ul>：无序列表
2、<ol>：有序列表
3、<dl>：自定义列表
<dl>
<dt>标题</dt
<dd>内容</dd
<dd>内容</dd
</dl>
七、表单
1、<form>：申明表单，定义采集数据的范围，<form>和</form>面包含
2、<fieldset>、<legend>：fieldset对表单进行分组，legend它的标题
<fieldset>
<legend>个人爱好</legend>
<input type="checkbox" name="link" /><label>
</fieldset>
八、块元素与内联元素
1、block块元素的特点：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。
例如：<div>, <p>, <h1>, <form>, <ul> 和 <li>......
2、inline内联元素的特点：和其他元素都在一行上；高，行高及顶和底边距不可改变; 宽度就是它的文字或图片的宽度，不可改变。
例如：<span>, <a>, <label>, <input>, <img>, <strong> 和<em>......
块元素与内联元素的嵌套规则：块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只是包含其他的内联元素。
九、div与span的差别
div为块元素，span为内联元素
第二章 CSS-网页美容师
一、基本结构
选择符合｛ 属性：属性值 ｝
h1 { color : #00ff00 }
二、样式表中的注释
/* 注释内容 */
三、选择符的使用
1、通配选择符：*：匹配任意元素， *{ color: red }
2、类型选择符：E { }：匹配任意元素 a { dispaly:block }
3、包含选择符：E F ｛｝：包含选择符，也叫派生选择符和后代选择器 p strong { color:blue; }
4、子对象选择符：E > F {}：匹配E父元素下面的F元素 body > p { color:red }
5、相邻选择符：
E + F {}：匹配同辈元素相邻的元素 h1 + p { color :red }
<h1>哈哈哈</h1>
<p>拉拉拉</p>
四、属性选择符的使用
1、匹配属性：E[attr]：匹配指定的元素下的属性; h2[title]｛color:red ｝ 匹配h2下有title属性的
2、匹配属性值：
E[attr=value]：匹配E元素下具有attr属性且值等于value; input[type=passwrod]{ background:#ccc; }
E[attr!=value]：匹配E元素下具有attr属性且值不等于value; input[type=passwrod]{ background:#ccc; }
E[attr~=value]：匹配具有attr属性且属性值是用空格分隔列表; span[title~=csser]{ font-weight:blod } <span title="haha csser"></span>
E[attr|=value]：匹配具有attr属性且属性值是用连字符（-）分隔; span[title|=csser]{ font-weight:blod } <span title="csser-haha"></span>
3、类选择符：E.className：匹配E元素下带有className; p.first{ color:red }
4、ID选择符：#ID： #first{ color:red; }
5、选择符分组：selector,selector { }：把多个相同定义选择符合并起来 body,ul { padding:0; }
五、伪元素与伪类
伪类：
1、:first-child：匹配在同一父亲元素下指定元素的第一个
.tab li:first-child { background:#CCC; } <ul class="tab"> <li>aaaa</li> <li>bbb</li> <li>ccc</li> </ul>
2、链接伪类：:link：表示没有访问过的链接 :hover：鼠标移上去的状态 :active：表示鼠标点击按下的状态 :focus：表示得到焦点的状态
3、语言伪类：:lang
伪对象
1、:first-letter：对象的第一个字符的样式表属性
p:first-letter{float:left; font-size:2.5em; color:red; }
2、:first-line：对象的第一行样式
p:first-line{ color:red }
3、:befor和:after：在元素之前和元素之后配合content属性添加内容
strong:before { content:"我来自CSS"}
strong:after { content:"我也是来自CSS"}
<strong>哈哈</strong>
返回：我来自CSS哈哈我也是来自CSS
六、常用单位
1、长度单位
相对长度单位：px，em，ex，px，%等;
绝对长度单位：pt，mm，in，cm，pc等;
1em指一个字体高，默认情况下大多数浏览器字体高都是16px，1em=16px，12px = 0.75em， 10px = 0.625em
换行 12/16 = 0.75em 10/16 = 0.625em;
2、百分比单位
百分比总是相对于另一个值来说的，百分比是用父亲作参照物，例如一个元素为50%，父元素为1000，那么他就为500;
3、颜色单位
rgb： p｛ color:rgb(red，grren，blue) ｝
十六进制：p{ color:#000fff }
七、应用在css在网页上
1、链入外部样式表：<link rel="stylesheet" href="afox.css" type="text/css" media="all" title="Afox" />
rel：用于定义连接的文件和HTML文档之间的关系
href：属性用于指定外部样式表的地址
type：用于指定媒体类型 text/css允许浏览器忽略它们不支持的样式表类型
media：属性用于指定样式表被接受的介质或媒介，也就是设备：
title：用于定义样式的名称
2、定义内部样式
写在<head></head>之间
<style type="text/css" media="all">
body{ color:#000; }
</style>
3、定义内联定义
<h1 style="font-size:3em;">内联定义样式</h1>
4、导入指定的外部样式表
@import url("base.css")all
5、各种方式的差异
外链样式有一个好处就是：它会给当成一个资源，像图片一样，会存在于你本地缓存，这样的话就不会每次访问一具网页时，重新加下载一次的需要样式，
<link rel="stylesheet" href="afox.css?date=070101" type="text/css" media="all" title="Afox" />
href="afox.css?date=070101" 用参数欺骗服务器
6、优先权的计算
具体计算在各种情况下的数字加成，形式以0,0,0,0
1、直接写在标签上优先级为1,0,0,0 例：<div style="font-size:2em"></div>
2、每个ID选择符为0,1,0,0 例：#nav{}
3、每个class选择符为0,0,1,0 例：.nav{}
4、每个元素或伪元素等为0,0,0,1 例： :frist-child{}
5、其它选择符包括全局选择符*加0,0,0,0
有!important声明的规则的高于一切
第三章 用XHTML和CSS来“摆”网页
一、<meta>
<meta name="description" content="是一个提供4A互动作品,互动数字媒介,创意稀奇有趣,有趣新鲜,互动广告公司招聘,互动创意作品的中国新锐视觉媒体" />
<meta name="keywords" content="数字营销,互动营销,网络广告,互动广告,互动公司,互动行业,网络营销,国际4A,4A广告公司,数字媒体,数字媒介,互动代理,广告公司招聘,互动公司招聘,互动广告公司招聘,4A招聘,整合传播,创意稀奇有趣，互动创意作品，新锐互动媒体" /><meta name="robots" content="index, follow" />
name="keywords"和name="description"分别表示关键字和关键字的描述，这两个属性是服务于搜索引擎，
二、文字的表现
1、font-family：字体的名称
2、font-style：字体样式，属性：normal 普通字、italic 斜体字、oblique 倾斜的字体
3、font-variant：设置对象中的文本是否为小型的大写字母，normal 正常的字体、 small-caps 小型的大写字母字体 就是小写字母都用大写来表示
4、line-height：表示行与行基线之间的高手度
5、text-align：控制文本的对齐方式，left 左对齐、right 右对齐、center 居中、justify 两端对齐
6、letter-spacing：控制对象中的文字之间的间隔
7、word-spacing：控制对象中的单词之间插入的间隔
8、text-indext：设置对象中的文字缩进，text-indent:2em
9、text-decoration：对象文本的装饰，常见链接下划线，text-decoration:underline;
三、Margin与padding、border
margin外边距，padding内边距，border边框线
让整个div居中可以使用margin:0 auto; 500px;
四、outline
去除链接虚线框的推荐方法
<a href=”#” hidefocus=”true” >链接</a>
a:focus {
outline:none;
}
五、文字旁边的图片
vertical-align属性：
值：
baseline：让该元素的基本线和父亲元素的基本线对齐，如果没有基线，就该元素底部与父元素的基线对齐
top：顶端对齐 middle：中部对齐
六、图片浮动
给指定的img元素加float属性 left、right
七、Min和Max
1、min-width：最小宽度 2、max-width：最大宽度
3、min-height：最小高度 4、max-height：最大高度
第四章 各种浏览器
一、兼容之道
Hack：所谓的Hack就是钻浏览器的空子，利用正规或不正规的写法，或利用某些浏览器对CSS的支持不完整来完成对某个浏览器单独的定义
二、条件注释
<!-- [if IE 6]> 条件注释的内容 <![end if]-->
三、兼容问题
1、IE 3px bug：当浮动元素后面跟着文本或者只是一个普通容器时，浮动元素会与产生的3px的间距，问题存在IE6
<style type="text/css">
/* 解决问题是 _margin-right:-3px */ #floatbox { float:left; 70px; height:120px; border:6px #68f solid; _margin-right:-3px; } #textwrapper{ border:3px #000 solid; } #jog-box { margin-left:90px; border:3px #f66 solid; } </style> <div id="floatbox">Float元素</div> 跟在浮动元素后面的文字 <p id="textwrapper">这多了个容器<br />还给这个容器加个边框</p> <div id="jog-box">这个容器多了个margin-left<br />传说中的测试文字<br />传说中的测试文字</div>
2、Layout初体验：它是IE私有的概念，
layout能做什么：1、IE许多常见的浮动Bug 2、元素本身对一些基本属性异常处理问题 3、容器和其子孙之间的边距重叠问题 4、使用列表时遇到的诸多问题 5、背景图像定位偏差问题 6、使用脚本时遇到浏览器之间处理不一致的问题.
3、浮动元素双边距
双边距解决方法：将双边距元素设置为display:inline
<style type="text/css"> body { margin:0; border:0; padding:0; } #floatholder { float:left; margin:0 50px; 70px; height:120px; border:6px #68f solid; display:inline } </style> <div id="floatholder"> <div id="floatbox">IE边框若显若无，须注意，定是高度设置已忘记；</div> 浮动产生有缘故 </div>