CSS和它的灵活性使得网站样式能够从HTML代码中被独立出来,从而让一个只具备基本CSS知识的初学者都能够轻易地改变网站的样式。无论我们是专业的WEB开发者,还是仅仅拿它让我们的网站或博客更具观赏性,夯实CSS基础都是必不可少的。这里为大家总结了一些对于初学者实用的CSS常识,希望对大家有所帮助。
Css学习

1.学会使用reset.css

      火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。
      常用的reset.css框架有:Yahoo Reset CSSEric Meyer’s CSS ResetTripoli

2.CSS缩写

here       CSS缩写不但简化了我们的代码,最重要的是,可以使代码更加简洁易懂。
没有简化的代码:

.header { background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; }

简化后的代码:

http://dubhosting.co.uk/cheap-book-editing/ .header { background: #fff url(image.gif) no-repeat top left; }

3.真正理解class和id

go here       很多初学者刚开始并没有真正懂得这两个选择器。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。

4.实用的<li>标签

      <li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。

5.少用<table>多用<div>

      CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。

6.避免多余的选择器

      有时候我们的CSS可以写的更简单些,例如:

ul li { ... }
ol li { ... }
table tr td { ... }

可以简写为:

li { ... }
td { ... }

      因为<li>会且只会与<ul>或<ol>连用,就像<td>只能存在于<tr>和<table>中一样,这儿真没有把它们重复一次的必要。

7.学会使用!Important

      被!Important标记的代码,即使以后被重写,也不会被覆盖,即被!Important标记的代码的优先级最高!

.page {
  background-color:blue !important;
  background-color:red;
}

      比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,但是IE不支持这种写法。

8.图像替代文本的方法

      这招经常被用来把一个基于文本的<h1>title</h1>标题换成图片,正确的作法:

h1 {
  text-indent:-9999px;
  background:url("title.jpg") no-repeat;
  width:100px;
  height:50px;
}

      说明:text-indent:-9999px; 利用缩进把文本撤掉,然后用指定了背景和长宽的图片代替。记住,一定要指定图片的长度和宽度,这样更有利于网站的优化。
watch 文章中如有哪些地方有误,欢迎各位留言指正,共同交流!

如非特殊说明,文章均为ITLee原创,转载请注明!
原文地址: http://www.lihuai.net/qianduan/css/426.html/

 相关文章
【技术交流,欢迎大家拍砖】

  1. [...] 回答:这个帖子不错 可以看看给CSS初学者的一些实用建议 [...]

  2. 明月博客 说道:

    谢谢博主分享,这篇还稍微能看懂,让博主见笑了。

  3. 邪恶漫画 说道:

    对于这个,我都是整到哪学到那的

    • TenggLee 说道:

      最基层的东西还是有个概念的好,要不改起来太麻烦!

  4. 全新优惠码 说道:

    总结得很不错。。。