自己写的web标准教程,帮你走进web标准设计的世界——第六讲(css篇3)

声明:本教程源于本人学习的一些经验的总结,希望大家帮忙完善与指正,也希望会给初学者带来方便,希望大家不要随便转载,写的不是很好,还不完善,不过转载时要注明作者和出处,附加原文的链接地址,谢谢了

已出:

自己写的web标准教程,帮你走进web标准设计的世界——第一讲

自己写的web标准教程,帮你走进web标准设计的世界——第二讲

自己写的web标准教程,帮你走进web标准设计的世界——第三讲(html终结篇)

自己写的web标准教程,帮你走进web标准设计的世界——第四讲(css篇1) 

自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)  

 

上讲回顾: 上一讲主要介绍了web构建的一般结构以及css属性的学习方法

 非常感谢网友对我的大力支持,谢谢你们给我的鼓励!

本节概况:

1.       利用html element 为元素添加css属性

2.       利用classhtml元素添加css属性

3.       通过idhtml元素添加css属性

4.继承

5.css的优先级机制:

6.css优先级法则:

ok,Begin!Right now!

1.       利用html element 为元素添加css属性

实例:

<title>无标题文档</title>

<style type="text/css">

p {

         color:red;         

}

</style>

</head>

 

<body>

<div id="redP">

     <p>red</p>

    <p>red</p>

</div>

<div id="greenP">

     <p>green</p>

    <p>green</p>

</div>

</body>

         这种方式我们通常叫做利用元素选择器来设置css属性,他代表的是某个范围内的所有指定的标签。上例中就是代表为html document内的所有p元素设置前景色为红色。

2.       利用classhtml元素添加css属性

 

疑问:如果我要把页面上所有的p设置为不同的前景色应该怎么办呢?上面所说的某个范围内是什么意思呢?

实例:

<style type="text/css">

.redP p {

color:red;         

}

.greenP p {

color:green;

}

</style>

</head>

 

<body>

<div class="redP">

      <p>red</p>

    <p>red</p>

</div>

<div class="greenP">

      <p>green</p>

    <p>green</p>

</div>

</body>

讲解:我们为div设置了一个class属性,通过点号+className可以定位到拥有该class属性值的元素上,我们通常叫做通过类选择器来为html元素设置css属性,上例中我们通过类选择器定位到具体的div上(这就是上面所谓的范围),然后再利用元素选择器选择该范围内p元素,并为他们设置了一个前景色。

 

3.       通过idhtml元素添加css属性

 

id选择器选择器与类选择器非常的相识,只不过,一个网页上id是不能重复的,而且每个元素只能有一个id,而每个元素可以有多个类

实例:

<style type="text/css">

#redP p {

         color:red;         

}

.greenP p {

         color:green;

}

</style>

</head>

 

<body>

<div id="redP">

     <p>red</p>

 <p>red</p>

</div>

<div class="greenP">

     <p>green</p>

    <p>green</p>

</div>

</body>

我改了什么?

注意:类选择器用“.assName”构建,id选择器用“#idName”来构建

 

4.继承:

 

简单的理解就是父亲的东西儿子(孙子。。)传承了

实例:

<style type="text/css">

#redP p {/*两个color属性在同一组*/

         color:red;         

}

</style>

</head>

 

<body>

<div id="redP">

         <p>red<em>em red</em></p>

    <p>red</p>

</div>

</body>

可见,em也具有了p元素的前景色,这就是继承,不过有的属性是不能够继承的,比如borderpaddingmargin。。。

继承具有很好的用途,也许你会发现许多网页都有一个base.css文件,上面设置了一些基本的css属性:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{

    margin: 0;

    padding: 0;

}/*这里重新设置了marginpadding0,那么所有的标签都会继承这一点*/

 

body,button, input, select, textarea  {

    font: 12px/1.5 arial, “宋体”, sans-serif;

}

。。。

这些东西就是很好了利用继承这一原则,节省了程序员不少的体力,一旦我写了这条

 body,button, input, select, textarea {

    font: 12px/1.5 arial, “宋体”, sans-serif;

}

那么我就不用在为每个标签设置字体了(除了有特殊的要求),他们都会继承这个设置。

 

 

5.css的优先级机制:

 

 

解释:

1.内联样式的权值最高1000;

2."#id"权值100

3.".class"权值10

4.元素权值为1

 

6.css优先级法则:

 

 

1.       (了解)在同一组属性设置中标有“!important”规则的优先级最大

实例:

<style type="text/css">

#redP p {/*两个color属性在同一组*/

color:#000 !important;//胜出

color:red;         

}

</style>

</head>

 

<body>

<div id="redP">

<p>red</p>

    <p>red</p>

</div>

</body>

去掉!important试试?

2.       创作者规则高于浏览者:意思就是说网页编写人员设置的css样式要优先于浏览者设置的默认样式,这个很好理解,当然你也可以不去管他,他的用处不大

3.       选择器都有一个权值,权值越大越优先

4.       权值相等时后出现的要优于先出现的(这就是上面的实例去掉“!important”后为什么会采用后面的红色的原因了)

有点迷糊?请继续!

 

下面我们针对于上面的原则3做一下拓展:

 

 

1.       继承不如指定:这是当然的,继承的样式不如指定的样式

实例:

<style type="text/css">

#redP p {/*两个color属性在同一组*/

color:red;

padding-left:100px;

}

em {

color:#00F;

}

</style>

</head>

 

<body>

<div id="redP">

<p>red<em>em red</em></p>

    <p>red</p>

</div>

</body>

虽然em继承了red但是我有重新指定了#00F(蓝色),所以继承的样式就被覆盖了

利用firefoxfirebug我们选择em标签,右面的css样式显示很好的显示了这一点:

               

2.       利用权值计算进行比较(这个方法比较慢,我介绍个取巧的方法)

a)         最高的高才是真的高

b)         最高的级别相同看其次

c)         顺次比较级别都相同看长度,长者获胜

 

实例:

<style type="text/css">

#redP p {/*权值=100+1=101*/

         color:red;

}

#redP .red em {/*权值=100+10+1=111*/

         color:#00F;/*蓝色*/

}

#redP p span em {/*权值=100+1+1+1=103*/

         color:#FF0;/*黄色*/

}

</style>

</head>

 

<body>

<div id="redP">

         <p class="red">red<span><em>em red</em></span></p>

    <p>red</p>

</div>

</body>

蓝色胜出 

 

注意:通过上面的介绍,我们知道内联的样式是最nb的,无人能挡,所以大家在写css的时候尽量不要写为内联样式的,实在不利于维护啊!

 

 

 

 

 

下期预告:

 

1.       为什么不用*margin0padding0

2.       css伪类之LoVeHAte

3.       盒模型

 

 今天的教程就到这里了明天再见,谢谢!

 

交流QQ群: 71019430(菜鸟居多,请大家见谅!)

 

 

posted on 2010-09-11 16:25  铁拐李  阅读(1613)  评论(2编辑  收藏  举报