CSS学习笔记之《精通CSS》
2008年12月30日14:46:40 开始阅读,做好笔记。
1、在分配类名与ID时,一定要尽可能保持名称有意义并与表现形式无关,例如给导航元素分配ID:RightNav。想让它位于右边。如果以后想把它换到左边或中间,CSS不会同步,名字还是要改。所以,将这个名称定义为:SubNav更合适。
对于类名也是,即使你希望所有的错误信息都以红色显示,也不要取类名Red,而应该取Error更合适。
在CSS命名中采用驼峰式命名法(Camel case):单词首字母小写,从第二个单词开始每个单词的首字母大写。
2、一个不好的样式应用:
<h3 class="newsHead">dfsdfsdf</h3>
<p class="newsText">大大大大大大大大大大大在</p>
<p class="newsText">土土土土土土土土土土土土</p> 类引用过度。
改进后的样式:
<style>
.news h3,p //标记为News的区域里面的H3和P都使用前景色:RED; **代码简洁,结构清晰。
{
color:red;
}
</style>
<div class="news">
<h3>dfsdfsdf</h3>
<p>大大大大大大大大大大大在</p>
<p>土土土土土土土土土土土土</p>
</div>
3、CSS设计小原则:尽量少用Class类,只有在不适合用ID的情况下才用Class,如果你的CSS中有过多的Class,就说明你的设计或布局就有问题了。
常见样式格式:
P {color:red;} // 页面上所有的P的前景色都是Red;
Lip {color:red;}// 只有Li里的P的前景色是Red;
#content {color:red;} // 只有ID为content的元素的前景色是Red;
.error {color:red;} //只有添加过Class="error"的元素的前景色是Red;
#content h1,p{color:red;} //只有ID为content的元素里面的H1和P的前景色是Red;
a:Link {color:red;} //链接的正常色为Red;
p:hover {color:red;} //当鼠标放到P上时,把P内文字的前景色改为Red;
input:focus {color:red;}//文本框获得焦点后,前景色变为Red; 没用过。
*{margin:0px;padding:0px;} //让所有元素的填充和空白边都置为0。或div *{color:red;}
2009年1月6日14:00:35 相对定位与绝对定位
对于定位,主要就是记住每种定位的意义,相对定位是“相对于”元素在文档流中的初始位置。而绝对定位是“相对于”最近的已定位(相对或绝对)祖先元素,如果不存在已定位的祖先元素,那么就是最初的包含块。