第1章 HTML和CSS概述

一.在HTML中引入CSS的方法
     HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。
     在HTML中，引入CSS的方法主要有行内式、内嵌式、导入式和链接式4种。
1.行内式
     行内式即在标记的style属性中设定CSS样式，这种方式本质没有体现出CSS的优势，因此不推荐使用。
2.嵌入式
     嵌入式则将对页面中各种元素的设置集中写正在<head>和</head>之间，对于单一的网页，这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件，使用以下两种方式的一种，引入HTML文档中。
3.导入式与链接式
     导入式和链接式的目的都是讲一个独立的CSS文件引入HTML文件，二者的区别不大。
     (一)不同之处
     ①事实上，两者最大的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的用法也不同。
          (1)如果使用链接式，则需要使用如下语句引入外部CSS文件。
          <link href="mystyle.css" rel="stylesheet" type="text/css">
          (2)如果使用导入式，则使用如下语句。
          <style type="text/css">@import "mystyle.css"</style>

     ②(1)使用链接方式时，会在装载页面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的，而使用导入式时，会在整个页面装载完成后在装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。(2)对于一些比较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要是调整CSS文件的分类，就需要同时调整HTML文件。这对于维护着工作来说，是一个缺陷。如果使用导入式，则可以只引入一个总的CSS文件，在这个文件中再导入其他独立的CSS文件；而链接则不具备这个特性，因此如果要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。但是如果希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。
二.CSS选择器 (一)基本选择器
     基本选择器有标记选择器、类别选择器和ID选择器3种。
1.标记选择器
     一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明那些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。
     如：h1 { color:Red; }
2.类别选择器
如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS页面</title>
    <style type="text/css">
        .main
        {
            border: 2px solid black;
            color:red;
        }
    </style>
</head>
<body>
    <div class="main">
        计算机信息资源管理
    </div>
</body>
</html>
3.ID选择器
     ID选择器的使用方法与class选择器基本相同；不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更前。
如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #mainDiv
        {
            border: 2px solid black;
            color:red;
            background-color:Green;
        }
    </style>
</head>
<body>
    <div id="mainDiv">
        计算机信息资源管理
    </div>
</body>
</html>
(二)复合选择器
   以上面的三种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，复合选择器就是基本选择器通过不同的链接方式构成的。

1.“交集”选择器
     “交集”复合选择器由两个选择器直接链接构成，其结果是选中两者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。
     如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p
        {
            color: Black;
        }
        p.special
        {
            color: Red;
        }
        .special
        {
            color: Yellow;
        }
    </style>
</head>
<body>
    <p>
        计算机信息资源管理
    </p>
    <p class="special">
        计算机信息资源管理
    </p>
    <h2 class="special">
        计算机信息资源管理
    </h2>
</body>
</html>

运行结果：
2.“并集”选择器
     并集选择器是多个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分，它的结果是同时选中各个基本选择器所选择的范围。

如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p, h1, h2, .divClass, #divID
        {
            color: Red;
        }
    </style>
</head>
<body>
    <p>
        实例文字p</p>
    <h1>
        实例文字h1</h1>
    <h2>
        实例文字h2</h2>
    <div class="divClass">
        实例文字div class</div>
    <div id="divID">
        实例文字div ID</div>
</body>
</html> 运行结果：文字全为红色。

     另外，对于实际网站中一些页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都是用同一
种CSS样式，但又不希望逐个来声明的情况，可以使用全局选择器“*”。
如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
       *
        {
            color: Red;
        }
    </style>
</head>
<body>
    <p>
        实例文字p</p>
    <h1>
        实例文字h1</h1>
    <h2>
        实例文字h2</h2>
    <div class="divClass">
        实例文字div class</div>
    <div id="divID">
        实例文字div ID</div>
        埃及基金法司法局司法局
</body>
</html> 运行结果：全为红色；
3.“后代”选择器
     在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当<p>与</p>之间包含<span></span>标
记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空
格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代。
     如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p span
        {
            color: Red;
        }
        span
        {
            color: yellow;
        }
    </style>
</head>
<body>
    <p>
        <span>嵌套span中的实例文字</span>
    </p>
    <span>单独span中的实例文字</span>
</body>
</html>
运行结果：第一行是红色，第二行是黄色。
     需要注意的是，后代选择器产生的影响不限于元素的“直接后代”，而且会影响到它的“各级后代”。
例如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p span
        {
            color: Red;
        }
    </style>
</head>
<body>
    <p>这是最外层的文字
        <span>这是中间层的文字<b>这是最内层的文字</b></span>
    </p>
</body>
</html>
运行结果：
二.CSS的继承特性
     CSS继承是指子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，
产生新的样式，而子标记的样式风格完全不会影响父标记。
     CSS的继承贯穿整个CSS设计的始终，每个标记都要都要遵循着CSS继承的概念。
二.CSS的层叠特性
     CSS层叠是指由于每个元素会受到父元素或者其他元素的影响导致元素的样式出现问题，这就出现了
冲突问题，由此出现优先级高低的问题等，这种情况叫做CSS的层叠性。
     CSS中的优先级可以大体按照如下规则：
          行内样式>ID样式>类别样式>标记样式

posted on 2011-11-03 17:16  iYiming  阅读(304)  评论(0)  编辑  收藏  举报

导航