HTML插入外部样式表

最新推荐文章于 2023-03-08 15:06:56 发布

@w风

最新推荐文章于 2023-03-08 15:06:56 发布

阅读量3.6k

点赞数 1

分类专栏： HTML插入外部样式表文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_41729055/article/details/121108032

版权

HTML插入外部样式表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inlin

(1)外部样式表的创建：

在当前.html文件外部新建一个.css文件(最好和.html文件在同一个目录下) 例如下:

test2.css中代码如下:

.demo01{
    background-color:aliceblue;
}

(2)外部样式表的插入：

在.html文件的<head>(头部)中使用link标签把.css文件中编写的样式引入到当前的HTML页面中.link标签是HTML和css文件的桥梁 href=".css文件路径"

<head>
      <link rel="stylesheet" href="test2.css">
</head>

(3)外部样式表的使用(以页面的背景颜色为一简单小例):

<body class="demo01">
</body>

完整代码:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="test2.css">
        <meta charset="UTF-8">  <!--定义网页编码格式为utf-8-->
        <title>页面标题</title>
    </head>

    <body class="demo01">
        <!-- 标题大小与字体大小的关系：1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题-->
        <h1>第一个标题</h1>
        <font size="6">这是六号字体文本</font>
        <p>内容1 <br>内容1.1 <br>内容1.2</p>          <!-- <br>换行 -->
        <h2>第二个标题</h2>
        <font size="5">这是五号字体文本</font>
        <p>内容2</p>
        <!-- HTML 链接是通过标签 <a> 来定义的。 -->
        <!-- href属性 如果你将 target 属性设置为 "_blank", 链接将在新窗口打开-->   
        <a href="https://www.baidu.com/" target="_blank" >去百度看看</a> 
    </body>
</html>

执行效果如下:

@w风

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML插入外部样式表

插入样式表的方法有三种:外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inlin(1)外部样式表的创建：在当前.html文件外部新建一个.css文件(最好和.html文件在同一个目录下) 例如下: test2.css中代码如下: .demo01{ background-color:aliceblue;}(2)外部样式表的插入：在.html文件的&l...
复制链接

扫一扫