由浅入深，理解样式的设置方法

最新推荐文章于 2024-10-07 09:24:46 发布

CHINA_RED

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量230

点赞数 5

文章标签：程序人生 javascript html5 css

本文链接：https://blog.csdn.net/china_red/article/details/140376150

版权

好了，之前的例子我们看到了，如何改变背景颜色，如何使用<h1>~<h6>标题和改变他们的颜色。

现在我们在代码里多添加几个<h1>标题，那会是什么样子呢？我们一起来看看。

<html>
<head>
<title>My First Html</title>
</head>
<body  style="background-color:#e62f6">
<div>
<h1 style = "color:red">
Hello World!
</h1>
 
<h1 style = "color:#6895BF">这是一个h1标题</h1>
 
<h2 style = "color:#7DA2CE">这是一个h2标题</h2>
 
<h3 style = "color:#B9C2E3">这是一个h3标题</h3>
 
<h4 style = "color:#A4CBEC">这是一个h4标题</h4>
 
<h5 style = "color:#B9E3FB">这是一个h5标题</h5>
 
<h6 style = "color:#CBEEF8">这是一个h6标题</h6>

<h1>这个也是一个h1标题</h1>

<h1>这个还是一个h1标题</h1>

 </div>
</body>
</html>

现在的效果就像下面图片一样

是不是和你想想的不一样，为什么后添加的两个标题不是和第一个标题一样呢？

这是因为我们之前给<h1>标题设置的样式，称之为内联样式，就是在HTML元素中使用style属性来设置，它只对当前的元素起作用。不会影响到其他的元素。

那么你们会不会想到一些问题，我的标题可能会有好多个，如果都是这样一个一个的在标签里添加，真的是太麻烦了，而且还非常可能出错。有没有什么办法能更方便呢？

这个办法最好只在一写一次就能在相同的标签中起到同样的作用，达到同一个效果。当然有这样的方法。下面就让我们来看看是怎样的方法吧。

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            h1 {
                color: #6895BF;
            }
        </style>        
    </head>
    <body>
        <div>
            <h1 style = "color:red">
                Hello World!
            </h1>
 
            <h1 style = "color:#6895BF">这是一个h1标题</h1>
 
            <h2 style = "color:#7DA2CE">这是一个h2标题</h2>
 
            <h3 style = "color:#B9C2E3">这是一个h3标题</h3>
 
            <h4 style = "color:#A4CBEC">这是一个h4标题</h4>
 
            <h5 style = "color:#B9E3FB">这是一个h5标题</h5>
 
            <h6 style = "color:#CBEEF8">这是一个h6标题</h6>

            <h1>这个也是一个h1标题</h1>

            <h1>这个还是一个h1标题</h1>

        </div>
    </body>
</html>

现在的效果是这样的：

看，现在和我们想要的效果一样了。

像这一段代码，在文件的<head>部分加上<style>元素的方法，被称为内部样式表。它对当前页面的所以对应的标签起作用。现在我们是在第一个<h1>标题设置了和<style>里元素相同的样式，如果是不同的，哪么哪个样式起作用呢？带着问题我们来改一下。为了明显，我们把<h1>里的style属性设置为红色，看看什么效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            h1 {
                color: #6895BF;
            }
        </style>        
    </head>
    <body>
        <div>
            <h1 style = "color:red">
                Hello World!
            </h1>
 
            <h1 style = "color:#red">这是一个h1标题</h1>
 
            <h2 style = "color:#7DA2CE">这是一个h2标题</h2>
 
            <h3 style = "color:#B9C2E3">这是一个h3标题</h3>
 
            <h4 style = "color:#A4CBEC">这是一个h4标题</h4>
 
            <h5 style = "color:#B9E3FB">这是一个h5标题</h5>
 
            <h6 style = "color:#CBEEF8">这是一个h6标题</h6>

            <h1>这个也是一个h1标题</h1>

            <h1>这个还是一个h1标题</h1>

        </div>
    </body>
</html>

现在的效果是这样的