CSS核心基础 - 码农教程

7.1 构造CSS规则

CSS的作用就是设置网页的各个组成部分的表现形式。

CSS就是3个基本部分组成的——“对象”，“属性”和“值”。

7.2 基本CSS选择器

再CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有个专门的名称——选择器（selector）。

所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现效果。

“复合”选择器是通过对基本选择器进行组合而构成的。

基本选择器有标记选择器、类别选择器和ID选择器3种。

7.2.1 标记选择器

一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。

每一种HTML标记的名称都可以作为相应的标记选择器的名称。

<style> h1 {
    color:red;
    font-size:25px;
}
</style>

注：每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对有、同一个标记声明多个样式风格。

CSS语言对于所有属性和值都有相对严格的要求。如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。

Head-height:      48px;                 /*非法属性*/
color:         ultraviolet;                 /* 非法值  */

对于上面提到的这些错误，通常情况下可以直接利用CSS编辑器的语法提示功能避免，但某些时候还需要查询CSS手册，或者登录W3C的官方网站（http://www.w3.org/)来查询CSS的详细规格说明。

7.2.2 类别选择器

例如当声明了<p>标记为红色时，页面中所有的<p>标记都将显示为红色。如果希望其中的某一个<p>标记不是红色，而是蓝色，这时紧依靠标记选择器是不够的，还需要引入类别（class）选择器。

类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>class选择器</title>
        <style type="text/css">
</style>
    </head>
    
    <body>
        <p class="red">class选择器1</p>
        <p class="green">class选择器2</p>
        
<h3 class="green">h3同样适用</h3>

    </body>

</html>

注：1.任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如<h3>标记同样使用了.green这个类别；

2.最后一行<h3>标记显示效果为粗体字，而也使用了.green选择器的第2个<p>标记却没有变成粗体。这是因为在.grteen类别中没有定义字体的粗细属性，因此各个HTML标记都采用了其自身默认的显示方式，<p>默认为正常粗细，而<h3>默认为粗体字。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>class选择器与标记选择器</title>
        <style type="text/css">
</style>
    </head>
    
    <body>
        <p>class选择器与标记选择器1</p>
        <p>class选择器与标记选择器2</p>
        <p>class选择器与标记选择器3</p>
        <p class="special">class选择器与标记选择器4</p>
        <p>class选择器与标记选择器5</p>
        <p>class选择器与标记选择器6</p>
    </body>

</html>

注：在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别样式同时运用到一个标记中。这在实际制作网站时会很有用，可以适当减少代码的长度。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>同时使用两个</title>、
        <style type="text/css">
</style>
    </head>
    
    <body>
        
<h4>一种都不使用</h4>

        
<h4 class="blue">两种class，只使用blue</h4>

        
<h4 class="big">两种class，只使用big</h4>

        
<h4 class="blue big">两种class，同时使用class和big</h4>

        
<h4>一种都不使用</h4>

    </body>

</html>

7.2.3 ID选择器

ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>ID选择器</title>
        <style type="text/css">
</style>
    </head>
    
    <body>
        <p id="bold">ID选择器1</p>
        <p id="green">ID选择器2</p>
        <p id="green">ID选择器3</p>
        <p id="bold green">ID选择器4</p>
    </body>

</html>

注：1.在很多浏览器下，ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记时错误的，因为每个标记定义的id不只是CSS可以调用。JavaScript等其他脚本语言同样可以调用。如果一个HTML中有两个相同id的标记，那么将会导致JavaScript在查找id时出错，例如函数getElementById（）；

2.正因为JavaScript等脚本语言也能调用HTML中设置的id，因此ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记；

3.最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似“id="bold green"”是完全错误的语法。

7.3 在HTML中使用CSS的方法

7.3.1 行内样式

行内样式是所有样式方法中中最直接的一种，它直接对HTML的标记使用style属性，最后将CSS代码直接写在其中。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    
    <body>
        <p style="color:#FF0000; font-size:20px;text-decoration:underline;">正文内容1</p>
        <p style="color:#000000;font-size:italic">正文内容2</p>
        <p style="color:#FF00FF:font-size:25px; font-weight:bold;">正文内容3</p>
    </body>

</html>

注：1.可以看到在3个<p>标记中都使用了style属性，并且设置了不同的CSS样式，各个样式之间互不影响，分别显示自己的样式效果；

2.行内样式是最简单的CSS使用方法，但由于需要为每一个标记设置style属性，后期维护成本很高，而且网页很容易过“胖”，因此不推荐使用。

7.3.2 内嵌式

内嵌样式就是将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明如果（7.3.1中的代码）如果采用内嵌式的方法，则3个<p>标记显示的效果将完全相同。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
        <style type="text/css">
</style>
    </head>
    
    <body>
        <p>这是第1行正文内容……</p>
        <p>这是第2行正文内容……</p>
        <p>这是第3行正文内容……</p>
    </body>

</html>

注：上述代码部分被集中在了一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的<p>标记都要采用同样的风格时，内嵌式的方法就显得略微麻烦，维护成本也高，因此适用于对特殊的页面设置单独的样式风格。

7.3.3 链接式

链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好地分工合作。

同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使网站整体风统一、协调，并且后期维护的工作量也大大减少。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
        <link href="a.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
        
<h2>CSS标题</h2>

        <p>这是正文内容……</p>
        
<h2>CSS标题</h2>

        <p>这是正文内容……</p>
    </body>

</html>

创建文件内容如下所示。保存文件保存文件时确保这个文件和上面的代码在同一个文件夹中，否则href属性中需要带有正确的文件路径。

h2 {
    color:#0000FF;
}
p {
    color:#FF0000;
    text-decoration: underline;
    font-weight: bold;
    font-size: 15px;
}

注：1.文件将所有的CSS代码从HTML文件中分离出来，然后在文件中加入<head>和</head>标记之间加上“<link href="a.css" type="text/css"rel="stylesheet">语句，将CSS文件链接到页面中，对其中的标记进行样式控制，达到如图所示的效果；

2.链接式样式表的最大优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML链接使用。因此在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的样式风格。如果整个网站都需要进行样式上的修改，就只需要修改这一个CSS文件即可。

7.3.4 导入样式

导入样式与上一小节提到的链接样式表的功能基本相同，只是语法和运作方式上略有区别。才用import方式导入的样式表，在HTML文件初始化后，会被导入到HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。

7.3.5 各种方式的优先级问题

把导入式和链接式统称为外部样式，那么优先级应该写为：

（1）行内式>嵌入式>外部样式；

（2）外部样式中，出现在后面的优先级高于出现在前面的。

7.4 HTML与CSS的区别

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>演示</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <style>
</style>
    </head>
    
    <body>
        
<h2>这是标题文本</h2>

        <p>这里是正文内容</p>
        
<h2>这是标题文本</h2>

        <p>这里是正文内容</p>
        
<h2>这是标题文本</h2>

        <p>这里是正文内容</p>
    </body>

</html>

黑体

幼圆

用HTML语言编写

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>演示</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    
    <body>
        
<h2><font color="0000FF" face="幼圆">这是标题文本</font></h2>

        <p>这里是正文内容</p>
        
<h2><font color="0000FF" face="幼圆">这是标题文本</font></h2>

        <p>这里是正文内容</p>
        
<h2><font color="0000FF" face="幼圆">这是标题文本</font></h2>

        <p>这里是正文内容</p>
    </body>

</html>

总结

原文地址：https://www.cnblogs.com/qinghshan/p/11322655.html