css组成

最新推荐文章于 2024-07-19 11:42:08 发布

好好学java吧

最新推荐文章于 2024-07-19 11:42:08 发布

阅读量51

点赞数

分类专栏： css 文章标签： android html5 css intellij-idea

本文链接：https://blog.csdn.net/m0_56183716/article/details/132678769

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在HTML中使用css

在HTML中使用css一共有三种方式，外部样式表、内部样式表、内联样式表。

外部样式表

外部样式表在后缀为.css的文件中。

使用link元素来连接css外部样式表：

HTML

<!DOCTYPE html>
<html lang = "en" >
<head >
    <meta charset = "UTF-8" >
    <title >我的css测试</title >
    <link type="text/css" href="css组成.css">
</head >
<body >
        <h3>这是第一个css元素</h3>
        <p>这是外部样式表</p>
</body >
</html >

css样式表可以如下表示：

h3{
    color: green;
    border:1px solid black;

}
p{
    color: red;
}

值得注意的是，在上边的link元素中的href属性需要引用的是同一个文件夹下的文件，但当css文件和html文件不在同一路径下时，就要调整对应的路径，以下有三种方式：

 <!--在当前目录中，引用子父级文件夹的css文件文件夹的-->
    <link type="text/css" href="css1/css2/css组成.css">
    <!--在当前文件夹中，引用子目录的css1中的css2文件-->
    <link type="text/css" href="css1/css2/css组成.css">
    <!--在当前目录中引用子目录的文件-->
    <link type="text/css" href="css1/css组成.css">

内部样式表

这里用的是<style>标签，且在<head>标签内或<body>标签之前，这样就可以把css样式表作用在html上。

这样就可以写出一个内部样式表的html页面：

<!DOCTYPE html>
<html lang = "en" >
<head >
    <meta charset = "UTF-8" >
    <title >这是内部样式表的测试</title >
</head >
    <!--这里用的是<style>标签
    且在
    -->
    <style>
        h1{
            color: green;
        }
    </style>
<body >
    <h1>这是内部样式表的测试</h1>
</body >
</html >

内联样式表

内联样式表需要写在标签的style属性中，

一个内联样式表的html页面可能如下：

<!DOCTYPE html>
<html lang = "en" >
<head >
    <meta charset = "UTF-8" >
    <title >这是内联样式表的测试</title >
</head >
<body >
        <h2 style="color: blue">这是内联样式表的测试</h2>
</body >
</html >

目前外部样式表是最为推荐的，但初学者适合内联样式表。

部分内容取材于网络哈，我也是前端学习阶段，了解的可以交流交流哈。

好好学java吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css组成

这里用的是标签，且在标签内或标签之前，这样就可以把css样式表作用在html上。在HTML中使用css一共有三种方式，外部样式表、内部样式表、内联样式表。部分内容取材于网络哈，我也是前端学习阶段，了解的可以交流交流哈。目前外部样式表是最为推荐的，但初学者适合内联样式表。内联样式表需要写在标签的style属性中，外部样式表在后缀为.css的文件中。
复制链接

扫一扫