HTML、CSS和JavaScript学习二(Css样式选择器及各选择器的优先级)

最新推荐文章于 2023-02-01 10:25:01 发布

rainmeterLotus

最新推荐文章于 2023-02-01 10:25:01 发布

阅读量919

点赞数

本文链接：https://blog.csdn.net/rainmeterlinux/article/details/8292610

版权

在HTML中使用CSS

地Css的选择器大概了解之后就可以使用CSS对页面进行全方位的控制了。下面介绍的是在HTML代码中怎么使用CSS样式。具体有行内式、内嵌式、链接式、导入式等。

1.行内式

行内式样式是所以样式中最为直接的一种。它直接对HTML的标签使用style属性，然后将CSS代码直接写在其中即可，看代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p style="color:#00FF00; font-size:20px; text-decoration:none;">行内式演示1</p>
<p style="color:#000099; font-size:25px; text-decoration:underline;">行内式演示2</p>
<p style="color:#CC0000; font-size:30px; text-decoration:overline;">行内式演示3</p>
<p style="color:#66FFFF; font-size:40px; text-decoration:inherit;">行内式演示4</p>
</body>

效果图如下，可以看到四个<p>标签中都使用了style属性，而且都设置了不同的CSS样式，各个样式之间互不影响，都是分别显示自己的样式效果。

2.内嵌式

内嵌样式就是讲CSS写在<head>与</head>之间，并且用<style></style>标签进行声明，前面就有演示，如下面的代码，3个<p>标签的显示效果则是一样的。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#00FF00; 
font-size:20px; 
text-decoration:none;
}
</style>
</head>
<body>
<p>行内式演示1</p>
<p>行内式演示2</p>
<p>行内式演示3</p>
</body>

3.链接式

链接式是使用频率最高，也是最为实用的方法。它将HTML本身与CSS样式分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中。代码：

HTML中的代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="tool.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>CSS  h1标题</h1>
<p>行内式演示1</p>
<p>行内式演示2</p>
<p>行内式演示3</p>
</body>

CSS样式代码：保存文件名为tool.css，保存时确保整个文件和上面的html文件在同一个文件夹下，如果不是就要浏览查找路径。在html代码中只要有<link href="tool.css" type="text/css" rel="stylesheet">即可将自定义的CSS文件链接到html的文件中。

/* CSS Document */
h1{
color:#000066;
font-size:18px;
}
p{
color:#CC3300;
text-decoration:underline;
font-size:36px;
}

4.导入式

导入式和链接式差不多，采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为HTML文件的一部分，类似内嵌式；而链接式则是在HTML的标签需要样式时才以链接的方式引入。

在HTML文件中导入样式表，常用如下几种方式@import语句，可以选择任意一种方法<style></style>标签中间。

@import url(tool.css);

@import url(“tool.css”);

@import url(‘tool.css’);

@import tool.css;

@import “tool.css”;

@import ‘tool.css’;

下面看示例，代码：css的代码还是上面演示用的tool.css代码，其中又导入了tool1.css文件，为了说明一个HTML文件可以导入多个CSS样式文件。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
@import url(tool.css);
@import url(tool1.css);
</style>
</head>
<body>
<h1>CSS h1标题</h1>
<h2>CSS h2标题</h2>
<p>导入式演示1</p>
<p>导入式演示2</p>
<p>导入式演示3</p>
</body>
tool1.css的代码如下
/* CSS Document */
h2{
color:#CC00CC;
}

其实不单是HTML中可以导入多个CSS样式文件，在CSS文件自己内部也可以导入其它的样式文件，例如上面的例子，将@import url(tool1.css);删除，在tool.css文件中加入@import url(tool1.css);也可以达到相同的效果。

5.各种方式的优先级问题

上面的4中方法如果同时运行在同一个HTML文件的同一个标签上，就要考虑优先级的问题了。如果在各种方法中设置的属性不一样，那么是不需要考虑优先级的，例如，内嵌式设置字体大小为36px，行内式设置字体为红色，那么显示的效果会让二者结合使用，但是如果内嵌式也将字体设置了颜色，那就要考虑优先级了。

1.下面的代码中有行内式、内嵌式和链接式，看清楚了，导入式和内嵌式都在同一个<style>中。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#000099; //蓝色
}
@import url(color.css);
</style>
</head>
<body>
<p style="color:#FFFF00;">发的健康的减肥空间的</p>//黄色
</body>

CSS样式代码

/* CSS Document */
p{
color:#CC0000;//红色
}

看效果图，可以看到是黄色，是以行内式为主，

接着把行内式的style属性删除，看效果图，以内嵌式为主

再接把内嵌式删除，看效果图，以链接式为主

这时三者的优先级就很明显了，即行内式>内嵌式>链接式

2.下面再看一种情况，有三个文件，分别是html文件，两个css文件(blue.css和red.css)，

blue.css文件：

/* CSS Document */
p{
color:#0000CC;
}

red.css文件:

p{
color:#FF0000;
}

html文件又分下面两张情况

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<!--情况一：链接式在前，导入式在后
<link href="color.css" type="text/css" rel="stylesheet">
<style type="text/css">
@import url(color2.css);
</style>
-->
<!--情况二：导入式在前，链接式在后-->
<style type="text/css">
@import url(color2.css);
</style>
<link href="color.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>发的健康的减肥空间的</p>
</body>

运行后发现，哪种放在后面就以哪种为主。即后面的优先级>前面的优先级

3.下面还有另外一种情况，看清楚了，内嵌式和导入式都在不同的<style>中。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#FFFF00;
}
</style>
<link href="color.css" type="text/css" rel="stylesheet">
<style type="text/css">
@import url(color.css);
</style>
</head>
<body>
<p>发的健康的减肥空间的</p>
</body>

运行以后，会发现，优先级遵循是最后面的导入式，其次是链接式，最后才是内嵌式。到此结合上面三个演示做个结论：

如果把链接式和导入式统称为外部式，那么优先级：

(1)行内式>内嵌式>外部式(注意内嵌式和外部式(并且这个外部式只能是导入式)在同一个<style>中)

(2)外部式中，出现在后面的优先级>出现在前面的优先级(即在不同的<style>中，链接式相当于一个<style>)

(3)不考虑行内式，在不同的<style>中，出现在最后面的优先级最高，往上依次递减，最前面优先级最低。