对CSS初学者必看的CSS引用和定义技巧。

做WEB也有十年，但有些东西也是一知半解，自己肯定不高手，所以高手就不必要再看下去了，只想与大家一起分享。

先来点基础的， CSS的使用方式有三种：内联<p style=""></p>；内部样式，在head加入<style></style> 定义css，body中引用；外部样式，css放在一个外部文件中，head中用<link src="">加载，body中引用和内部样式使用方法相同。

再来点基础的，css定义有三种：直接标签定义如，p{具体风格代码} 效果范围是body中所有的p标签；根据ID号定义，#p1{具体风格代码} 效果范围是body中 id="p1" 的标签；自定义，.p1{具体风格代码} body中标签以 class="p1" 进行引用；

一、

CSS的语法是比较灵活的，比如可以同时定义两个 css 名使用同一种风格，中间以逗号分隔，如：.

.p1，.p2{具体风格代码}

或 .p1，#p2,p{具体风格代码} ，意思为，自定义的p1风格，id号为 p2的风格，<p> 标签的风格。

二、

接上，也可以

.p1，.p2{具体风格代码} ;

.p2{具体风格代码} ;

好处是把自定义p1和p2相同的部分放在 .p1，.p2{具体风格代码} ; 不同部分 .p2再定义。

三、

前面自定义好的风格，在引用时 class="自定义风格" ，也给了我们充分的灵活，可以引用多个自定义风格，以空格间隔，如：

.p1{具体风格代码} ;

.p2{具体风格代码};

引用时 <p class="p1 p2">

效果为同时引用两种风格。

四、

由于css的语法是，定义再引用，所以 css 和 html 中要一一对应，所以要取名->定义风格->用名字引用，带来很多的工作量，特别是一些div又嵌套很多层DIV的时候就要取很多的名字，这时css也给我们提供了好的解决方法，父标签定义的名字，在子标签定义的时候用标签名就可以了，如：

<div class="d1">

<div>

<li><a></a></li>

</div>

</div>

在父div 下的元素，定义css都可借助父div的名字

如，子div定义风格时可写 .d1 div{具体风格代码}

如，定义里面的li标签风格，可写 d1 div li{具体风格代码} 也可 d1 li{具体风格代码}

如，定义里面的a标签风格，可写 d1 div li a{具体风格代码} 也可 d1 li a{具体风格代码} 也可 d1 a{具体风格代码}

掌握以上四种css方法，在开发之初，合理规划css 的定义，可以减少很多工作量。