一、基础知识
丰富的有意义的元素，比如：
h1、h2
ul、ol、dl
strong、em
blockquote、cite
abbr、acronym、code
fieldset、legeng、label
caption、thead、tbody、tfoot
应该只在没有现有元素能够实现区域分割的情况下使用div元素，如：
<div id="mainNav">
<ul>
<li>Home</li>
<li>About US</li>
<li>Contact</li>
</ul>
</div>
完全可以删除div，直接在ul上应用id：
<ul id="mainNav">
<li>Home</li>
<li>About US</li>
<li>Contact</li>
</ul>
常用的选择器
类型选择器和后代选择器，如
p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}
li a {text-decoration: none;}
ID选择器和类选择器，如：
#mainContent h1 {font-size: 1.8em;}
.datePosted {color: green;}
伪类（就是a:link这类）：
a:link {color:blue;}
a:visited {color:green;}
通用选择器
* {
padding: 0;
margin: 0;
}
在样式表中使用特殊性
form {width: 30em;}
form#search {width:15em;}
对文档应用CSS
<link href="css/basic.css" rel="stylesheet" type="text/css" />
链接CSS
<style type="text/css">
<!--
@import url("css/advanced.css");
-->
</style>
导入CSS（太旧的浏览器不支持导入，所以才放在<!-- -->里的
CSS中也可以导入CSS，
@imort url(css/layout.css);
CSS的注释
用/* 开头, 以 */结束，可以单行，也可以多行。
二、可视化模式模型
浮动float、定位position、框模型box model
三、背景图像和图像替换
<h2>
<span></span>Hello World
</h2>
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background:url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
四、对链接应用模式
五、对列表应用样式和创建导航条
六、对表单和数据表格应用样式
表格特有的元素：
1.summary(用于表格标签，用来描述表格的内容)和caption(用做表格的标题)
<table summary="这是跟alt，差不多的">
<caption>这个是实实在在显示的表格的标题</caption>
</table>
2.thead(所在列标题放在thead)、tbody、tfoot
一个表格只能一个thead，tfoot，但可以使用多个（当有thead，tfoot时至少一个）tbody
所有html表格元素和属性：
<table summary="表格描述">
<cation>Top 10</caption>
<colgroup>
<col id="" />
<col id="" />
<col id="" />
<col id="" />
</colgroup>
<thead>
<tr>
<th>Num1</th>
<th>Num2</th>
<th>Num3</th>
<th>Num4</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhi</td>
<td>zhi</td>
<td>zhi</td>
<td>zhi</td>
</tr>
<tr>
<td>zhi</td>
<td>zhi</td>
<td>zhi</td>
<td>zhi</td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
}
th,td {
padding: 0.1em 1em;
}
表单的三个元素：fieldset元素(legend元素)，表单标签label元素
<fieldset>
<legend>Your Contact Detai
ls</legend>
<p>
<label for="author">Name:</label>
<input name="author" id="author" type="text" />
</p>
</field>
七、布局
设计居中
<body>
<div id="wrapper">
</div>
</body>
#wrapper {
width: 720px;
margin: 0 auto;
}
但听说ie6（及以下）不是这样认为的，所以要
body {
text-align: center;
}
#wrapper {
width: 720px;
html表格元素margin: 0 auto;
text-align:left;
}
可能会变形，在body{}里加 min-width: 760px;
使用定位和负值空白边让设计居中
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
左侧边栏（太短时，左下方背景没了，看上去不爽）的解决方法：
用伪列，“faux列”
在它的上面一个容器里，应用一个背景重复,(当然只是左边有图片，靠左重复)
八、招数和过滤器
IE的有条件注释
<!-- [if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->
九、bug和bug修复
/css-validator/ 检查书写错误
觉的CSS问题
1.特殊性和分类次序的问题
2.空白边叠加的问题
bug的发现，先检查书写错误，然后是安装Firefox开发人员工具条tinyurl/cmh38
应该用Firefox或Safari作为主要的开发浏览器
修复问题，而不是修复症状
1.双空白边浮动bug
设置display:inline
2. 3像素文本偏移bug
(在ＩＥ上，浮动文本的左边会空3个空格出来）
.myFloat {
float:left;
width: 200px;
}
p {
margin-left: 200px;
}
修复需双管齐下：a.给文本设置高度；b.在其它浏览器隐藏这个规则
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p {
height: 1%;
}
/* End hide from IE5/Mac */
不幸的是，还有问题，需要将IE 5-6/Win 上的空白边重新设置为零：
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p {
height: 1%;
margin-left: 0;
}
/* End hide from IE5/Mac */
听说这样后，还有一个问题（文本偏移已被修复）
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p {
height: 1%;
margin-left: 0;
}
* html .myFloat {
margin-right: -3px;
}
/
* End hide from IE5/Mac */
如果是图像的话，还要修改：
/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p {
height: 1%;
margin-left: 0;
}
* Float {
margin: 0 -3px;
ma\rgin: 0;
}
/
* End hide from IE5/Mac */
3.IE6重复字符bug
4.IE6躲躲猫bug（好像就是一刷新出来，再一刷，没了，再刷一下，出来****）
出现这个bug的条件是：
一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜或图像的父元素中。
如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的颜或图像后面，只有在刷新时才重新出现。
5.相对器中的绝对定位
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论