将CSS引入HTML的方式

最新推荐文章于 2023-07-08 15:23:20 发布

一份蛋炒饭

最新推荐文章于 2023-07-08 15:23:20 发布

阅读量731

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/weixin_52019215/article/details/115255368

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sheet1.css">
</head>

<body>
    <!-- 将CSS引用到HTML -->

    <!-- 很多人其实会说,将CSS引用到HTML有什么好说的,直接用link标签不就可以了吗
    其实这里面还有些东西的,
    下面是通过vs生成的link标签,将其放在head标签中可以将外部样式表
    引用到HTML文档中,通过link链接的外部样式表不是HTML中的一部分,但却被HTML文件使用,
    link标签的rel属性是relation的简称,rel="stylesheet"来表示CSS样式表,
    href属性用来引用外部css文件
    当然这两个属性大家都知道这里只是简单的提一下
    <link rel="stylesheet" href="./css/sheet1.css">
    除了这两个属性外还有其他属性其实是被VS省略掉的
    第一个是type="text/css",type属性的值始终是text/css,这也是vs将其省略的原因
    第二个是media="screen, projection"用于说明该样式在那些媒体下使用,我们一般是在screen中
    
    第二种引入css文件的方式是@import指令
    @import指令放在style标签中,并且是在style样式的最前面
    一个文档可以引入多个@import指令
    当然@import也可以添加媒体样式,直接空格隔开在后面写就可以 如下:
    @import url(sheet.css) screen
    这里需要注意的是旧版IE浏览器不会放过如何@import指令,它会将出现的@import全部引入
    即使你将其放在style样式表中的下面,

    第三种遍是行内样式
    直接在标签中写style="color:red;background-color: blue;"
    这种通常用在书写比较单一的样式,只对单个标签生效,但是建议不要这样写
    这样写也失去了css的一些优点,比如统一修改样式等,但是他提供了一定的灵活性
    在实际开发中尽量少使用
    -->

一份蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将CSS引入HTML的方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫