但随着各大浏览器的出现，也逐渐将新的HTML标签和属性到HTML规范中，以至于使得创建一个合理的语义化的页面结构变得困难许多。

　　　　　　通过使用CSS样式，可以定义字体、颜色，那么就可以让这些原本不需要的表现形式的标记消失，使合理的语义化标记处于更好的位置，更好的发挥标记的作用。

　　　　2） 使我们能够更轻松的控制页面结构和布局

　　　　　　网站重构随着这个概念的出现，也带来了DIV结构的流行，因此也就出现了我们现在口头常说的“DIV+CSS做网站”。

单从这个DIV+CSS的叫法来分析，可以了解到CSS已经被大家用在了页面布局上了。

　　　　　　但一个页面不是只有控制DIV就控制了全面，还有很多其它的HTML标记，以前用table布局的页面，一样可以用CSS来控制它。

　　　　3）最根本的也是我们开发人员关心的，提高开发和维护的效率

　　　　　　一个网站，如果有很多相同的结构的文件需要修改，涉及到的工作量是巨大的，但如果通过改CSS来实现页面的灵活变换，只需要修改某个样式就可以上，效率上大大提升。

CSS的基本结构:

selector{property:

value;}

　　CSS的语法结构由两部分组成即：

选择器和规则。

规则也就是花括号中包含的内容。

　　　　选择符（selector）:

主要是告诉浏览器这个样式是用于页面中的哪些对象的，这个对象可以是HTML中的某个标记，也可以是指定的Class或ID。

这个后面会详细的说。

　　　　声明：

声明主要是告诉浏览器怎样去渲染页面中的与选择符相匹配的对象。

由属性与属性值组成，冒号相隔、分号结束的声明形式可以一个或者多个的组合而成。

　　　　属性：

属性主要以一个单词的形式出现，并且都是CSS约定的，不可以自己定义。

　　　　属性值：

属性值将根据属性改变形式，包括数值，单位等。

。

。

。

说理论一般都不容易让人记住，来举个例子吧。

　　现在我要将页面中的也就是body下的所有的文字设为红色，且要18号字体，加粗显示，可以这样写：

body

{

color:

red;/*红色，以后我会专门写一下关于CSS中颜色的表现方面的东西*/

font-size:

18px;/*大小18px*/

font-weight:

bold;/*加粗，还有一种写法font- weight:

700;这两个是相等的*/

}

怎么样很清楚吧，注释也够详尽了，但这样的做法有个弊端就是，注释很详尽，样式一多的时间，文件会很大。

在HTTP请求非常奢侈的今天任何一点额外的负担都是要注意的。

所以我们下面可以再简一下，这样：

/*对body下所有的文字以红色加粗并以18像素显示*/

body{color:

red; font-size:

18px; font-weight:

bold}

可能有的人认为这没什么，而且会带来阅读上的不便。

但你想一下，我们现在做的一般互联网项目有哪个少于十个八个样式表的。

。

。

不管什么东西在小的时候都无所谓，但一大一多，就不得不考虑一些性能上的问题（当然关于CSS的执行效率方面的知识也有很多的学问，以后看情况也会介绍）

这边就压缩CSS给大家两个有用的在线工具，可以作为参考一下，我平时一直在用非常不错：

上面讲了半天，这会总结一下，所有的CSS代码都存在这么几个特点：

　　每个声明的属性和属性值之间都是用冒号隔开、分号结束。

如：

font-size:

18px;font-weight:

bold;

　　声明都是紧跟着选择符的，并被花括号包含着。

如：

body{.......}

　　属性与属性之间的空格可有可无。

CSS选择符之通配符、类选择符、包含选择符、ID选择符

一般没有系统的学习过，只是在网上看一些片断教程的人。

见到最多的可能也就是：

∙元素选择符（例如：

body、a、li）

∙ID选择符（例如：

#head、#body、#foot）

∙类选择符（例如：

.red、.item、.content）

今天我们把所有的选择符统统拿出来说个遍。

1）通配符选择符

　　所谓通配符其实只是一个星号而已，但这么一个简单的星号作用却是很强大的。

通配符一般用来对页面所有元素应用样式。

　　例如：

/*将页面中所有元素的内边距和外边距设置为0*/

*

{

    margin:

0;

    padding:

0;

}

在有些情况下，可以对特定元素的所有后代元素（后代元素其实就类似是子元素

ppppstrong

例如，将页面中h1标签所包含的所有后代元素的字体设置为黄色，例如：

代码

*{font-size:

14px;}

h1{color:

blue;}/*将h1下面所有的内容设为蓝色*/

h1 *{color:

yellow;}/*将h1下面所有的子标记中的内容设为黄色*/

h1 p *{color:

red;}/*将h1下面P标记下面的所有内容设为红色*/

h1

h1里面包含个span

h1里面的P三级strong

效果如图：

最后关于通配符还有一点想说的就是，效率的问题。

通配符把所有标签都要初始化一遍，浏览器的渲染消耗一定的资源。

但是我在想，对于这点资源，除非是那种对性能要求极高，否则我认为没必要太刻意在乎，毕竟还是很方便吗！

2）类选择符

　　通配符与标签作为选择符确实很强大，也很好用，但涉及的范围太广泛。

如果希望同一个标签在不同位置显示不同的样式，那就需要改变选择符的使用方式，否则存在的弊端太多，这个时候就应该考虑换个方式去定义CSs样式。

　　类这个概念可能我们大家在C#编程中都接触过，这里提的类选择器其实跟C#中的类是差不多的概念，目的就是体现复用性。

减少相同的样式定义多次。

　　来看例子：

div

{

    font-size:

14px;

    color:

#ff0000;

    text-decoration:

underline;

}

这边我让所有div标签下的文字14px大小带下划线红色文字。

现在想一下如何让第三个DIV变为18px的字体。

看例子：

.div3

{

    font-size:

18px;

}

div3

类选择器在CSS中必须以“.”作为前缀，后面紧跟一个定义的类名。

这样只要类是“div3”的DIV都以18PX字体显示从而达到了复用的效果了。

3）ID选择符

　　ID选择符的形式与类选择符极其相近，只不过类选择符是以点（.）为前缀的，而ID选择符是以井号（#）为前缀。

而两个选择符的用法也很相似。

但一个页面中使用ID选择符建议不要出现同名的ID，因为javascript操作的时候，容易引起操作判断错误。

　　示例：

#testdiv{color:

red;font-size:

15px;}

带ID的DIV

是不是与上面的类选择符很相似呢。

这个就介绍到这边！

4）包含选择符

　　包含选择符很多人称它为派生选择符或者后代选择符，因为该选择符类型是作用于某个元素中的子元素的。

例如，我们需要为DIV标签里面的SPAN定义样式：

可以这样做：

div span{font-size:

30px;}

span2

效果如图：

div里面的span样式已经改变了。

而下面的span则没有任何变化，因为定义的样式不起作用。

还要说一下，包含选择符不只限用于两层，可以多层嵌套。

如下面效果 

div span p{font-size:

30px;}

对了其实"divspanp"跟divp效果在这边是一样的。

但两者是有区别的，前者是对div下面的span下面的P设置样式而后者只是对div下面的p设置标记。

对了，接下来要讲的属性选择符，相邻选择符，子对象选择符可能大家稍微有点陌生了，这当然也是有原因的，因为IE6及以下的浏览器并不支持这几个选择符，而大多数从事这方面工作的技术人员，多数时候还是主要考虑占据着浏览器市场大半壁江山的IE6，于是对这些IE6的非亲派不熟悉也成了一个没办法的必然。

　　在IE7，IE8,甚至是即将出来的IE9，Firefox，Opera，Safari等慢慢蚕食IE6市场的今天，那些以往不大常用的选择符也逐渐开始被应用起来。

　　不过最近有个好消息“IE6已被微软宣判死刑但谁能为它送葬?

 ”！

嗯，也该死了。

哈哈。

1）子选择符

　　子选择符也可以称为子对象选择符，主要作用是定义子元素对象的样式，无法定义子元素以外的对象。

选择符与选择符之间必须存在“>”符号才是子选择符。

　　例如，需要给body下面的子元素strong标签定义样式，即body>strong{.....}

代码

body>strong

{

    color:

red;

    font-size:

18px;

    text-decoration:

underline;

}

嗯，P标记p标记下面的strong标记p下面的strong下面的span

嗯，strong标记

　　结果大家应该猜得到。

　　截图：

　　为什么在页面中第一个strong没有应用到样式呢？

这就是子选择符的魅力，第一个strong与body的关系是body>p>strong，而不是body>strong。

　　嗯，对了。

子选择符在IE7以下的浏览器里面是不被支持的。

你用IE6测的话，死也测不出效果来。

 2）相邻选择符

　　相邻选择符与子选择符很相似，只是将中间的“>”换成了“+”但是在功能上却差了不止一点。

它的主要作用是：

匹配同一个父级下某个元素之后的元素，例如，定义与P标签相邻的strong标签，就可以这么写：

代码

    p+strong

    {

        color:

Blue;

        text-decoration:

underline;

    }

p标记p下面的strongp>strong>span

    strong是body的子元素也是p的相邻元素

显示的效果如图：

是不是有见过的感觉呢。

是的。

子选择符中body>strong也可以实现同样的效果。

大家可以动手写写，分别使用子选择符和相邻选择符，或许会有不一样的发现哦！

CSS很强大，可以控制页面任何元素的样式

与世界同步，做一个成功的页面仔

让我们看看CSS的世界是多么奇妙吧！

　　一、下面我首先用子选择符来定义strong的样式，大家看看效果：

body > strong {

    color:

#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/

    font-size:

18px; /*定义文字大小为18px*/

    text-decoration:

underline; /*定义文字具有下划线*/

}

 截图：

可以看见两个strong都改变了。

因为这两个strong都是body的子元素。

　　二、这会再利用相信选择符定义strong的样式，大家这会可以先猜猜是什么效果

p + strong {

    color:

#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/

    font-size:

18px; /*定义文字大小为18px*/

    text-decoration:

underline; /*定义文字具有下划线*/

}

效果我就不发图了：

只有P后面的第一个strong改变了。

这样一对比，大家都明白其区别了吧。

这会就相邻选择符再多说点：

假如现在有如下代码:

　　p+strong+strong

浏览器会如何解析呢？

这会不给出答案了。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便