CSS样式嵌入html中的三种方式

最新推荐文章于 2024-04-08 01:31:48 发布

tanxinji

最新推荐文章于 2024-04-08 01:31:48 发布

阅读量1.9w

点赞数 6

分类专栏：前端基础文章标签： css html html5

本文链接：https://blog.csdn.net/wasane/article/details/120396241

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

当我们写一个html静态页面的时候，发现所生成的排版或者效果非常的不好时，我们就可以使用CSS样式来美化所生成的html的控件，css样式的生效完全依赖于html文件，下面介绍如何将css样式嵌入到html中。

下面写一个输入框的html文件。

<!DOCTYPE html>
<html>

<head>
    <title> test </title>
</head>

<body>


    <input type="text" />
</body>



</html>

在网页中运行就只有一个在最左上角的输入框。

1.在标签中写入style属性

2. 将样式放置为style标签中

3.将style标签放置 .css文件内

下面我们通过不同形式的CSS样式将其简单的变样。

1.在标签中写入style属性

在每一个标签里可以写入类似于 style = " "的形式在该标签里写入CSS样式，该样式只作用于该标签。

就像上述例子，我们发现输入框输入的字体颜色是黑色，我们将其修改为红色，将输入框适当的居中显示。

<!DOCTYPE html>
<html>

<head>
    <title> test </title>
</head>

<body>


    <input type="text" style="border:2px solid black; color:red ; position:absolute ; left:30%;top:30%; " />
</body>



</html>

就会呈现出这样的效果。

2. 将样式放置为style标签中

通过在每一个标签写入style = " "可以将样式写入到该标签中，当html文件有多个重复的标签都需要该样式的时候，我们就会发现在每一个标签中写入该样式太麻烦。这个时候我们就可以在html文件中写入style标签，在style标签写CSS样式。

另外在style标签中写入css样式有三种模式。我们需要指定该样式是写在哪里的。其写在哪里的就可以包含标签，id 属性, class属性。

标签选择器

通过写入某标签样式的格式:

某标签名{

样式

}

通过在css样式中写入标签选择器可以统一改变指定标签的样式。

        id选择器

        通过写入id属性样式的格式:

#id名{

样式

        }

class选择器

通过写入class属性样式的格式:

.class名{

样式

}

在html中，标签中id属性是唯一，也就是说但某一个标签用了id = "1" 时，那么后续的标签则不可以使用id= "1"来表示。class属性则不唯一，可以多个标签使用同一个class值。这一性质也说明了id选择器和class选择器的区别。id选择器差不多只能表示一个具体的标签样式，class选择器则可以表示多个相同class属性值的标签。两个选择器对于标签选择器来说的话就显得更加灵活。

举个例子，我们在网页中输入4个字母A。

<!DOCTYPE html>
<html>

<head>
    <title> test1 </title>
</head>

<style type="text/css">
    div {
        color: red;  
    }
    
    #ida {
        color: blue; 
    }
    
    .classa1 {
        color: green;
    }
</style>

<body>
    <div> A </div>
    <div id="ida"> A </div>
    <div class="classa1"> A </div>
    <div class="classa1">A</div>
</body>


</html>

得出的效果图为:

另外其中的

*{

} 可以表示全部标签的样式

在<style> </style>内的注释是由/*注释内容*/ 来注释的。

3.将style标签放置 .css文件内

我们发现通过style标签来写入css样式已经相当不错了。但是，假如我们在过一段时间后，需要对其style标签中的样式进行修改，就需要修改html文档，并且假如html文档足够的多，或许这是一件麻烦事。我们又发现一些样式在n多个html文件中都通用，假如每一个html文件中都写入了style标签css样式的话，显然很麻烦。对此我们就可以采用将style标签封装到另一个后缀为.css文件中。

我们在上述html文件的同路径下，创建一个名为css文件夹，在css文件夹中创建一个test.css文件，text.css就是写入css样式的，对此我们可以将上述的style标签中的css样式原封不动的放到text.css中。

当发现css样式text.css和html文件test.html相互分离开来了，想要在html文件中能够使用到text.css样式则需要让其两个又联系。我们可以在html文件的head标签内写入link标签，让.css文件连接到html文件中。

<link href="css/test.css" rel="stylesheet" type="text/css" />

只需要修改href属性里面的值就可以来将.css文件连接到html文件中，其href属性的值就就是.css的路径。

我们对上述输入4个字母A的html进行修改。

<!DOCTYPE html>
<html>

<head>
    <title> test </title>
    <link href="css/test.css" rel="stylesheet" type="text/css" />
</head>


<body>


    <div> A </div>
    <div id="ida"> A </div>
    <div class="classa1"> A </div>
    <div class="classa1">A</div>




</body>

</html>

在test.css中添加:

div {
    color: red;
}

#ida {
    color: blue;
}

.classa1 {
    color: green;
}

运行html文件就可以得出一模一样的样式来。

此外，CSS样式非常之多，这里不一一例举。

tanxinji

关注

6
点赞
踩
53

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS样式嵌入html中的三种方式

当我们写一个html静态页面的时候，发现所生成的排版或者效果非常的不好时，我们就可以使用CSS样式来美化所生成的html的控件，css样式的生效完全依赖于html文件，下面介绍如何将css样式嵌入到html中。 1.在每个标签中嵌入 ...
复制链接

扫一扫