CSS样式引入的四种方式

目录：html5+css3网页设计与制作目录

一.CSS引入的四种方式

1.内联样式（行内样式），即将style样式直接写在html5的标签中。

<!-- CSS样式引入的方式一：（内联样式）行内样式，优先级最高，缺点是代码臃肿，不容易维护 -->
    <p style="font: '微软雅黑';line-height: 30px;border:1px solid firebrick">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font color="red">(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font color="red">img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>

效果图

 

2.嵌入式，即在head标签中间增加style标签，并在style标签中中写css样式，最后在body中引用

复制代码
<!-- CSS样式引入的方式二：嵌入式-->
    <style>
        .p_two {
            font-size: 24px;
            font-family: "隶书";      
            line-height: 30px;         
            border: 2px dotted green;
        }
    </style>
复制代码
<p class="p_two">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font>(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font>img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>

 效果图：

 3.链接式，讲CSS样式写到外部文件中，在html页面中使用link标签链接。

在项目中增加一个名为css的文件夹，添加一个扩展名为css的样式文件，文件名称为css，写入以下内容

.p_three {
   font-family: "隶书";
            width: 500px;
            height: 400px;
            color: darkred;
        }

在html文件的head之间加入link标签

<!-- CSS样式引入的方式三：链接式-->
    <link href="css/css.css" type="text/css" rel="stylesheet" />

html文件中增加一个p标签，样式名为.p_three

<p class="p_three">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font>(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font>img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>

效果图为：

 4.使用@import引入： 跟链接式的用法相似，但必须放在<STYLE>...</STYLE> 中。

在项目CSS文件夹中增加一个外部样式表文件，名为css_import.css文件

 编写内容如下

.p_four{
            width: 700px;
            height: 300px;
            background-color: antiquewhite;
        }

在html文件中使用@import导入该文件

<!-- CSS样式引入的方式四：使用@import导入外部css文件-->
    <style>
      @import url("css/css_import.css"); 
    </style>

html文件中增加一个p标签，样式名为.p_four

<p class="p_four">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font>(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font>img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>

效果图：

完整代码：

复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS样式的使用</title>
    <!-- CSS样式引入的方式三：链接式-->
    <link href="css/css.css" type="text/css" rel="stylesheet" />
    <!-- CSS样式引入的方式二：嵌入式-->
    <style>
        .p_two {
            font-size: 24px;
            font-family: "隶书";      
            line-height: 50px;
            border: 2px dotted green;
        }
    </style>
    
        <!-- CSS样式引入的方式四：使用@import导入外部css文件-->
    <style>
      @import url("css/css_import.css"); 
    </style>
    
</head>
<body>
    
    
    
    <!-- CSS样式引入的方式一：（内联样式）行内样式，优先级最高，缺点是代码臃肿，不容易维护 -->
    <p style="font-family: '微软雅黑';line-height: 30px;border:1px solid firebrick">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font color="red">(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font color="red">img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>
    
    
    
    <p class="p_two">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font>(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font>img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>
    
    <p class="p_three">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font>(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font>img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>
    
    <p class="p_four">&nbsp;&nbsp;&nbsp;&nbsp;写这篇文章源自我之前的一次面试，题目便是问img标签属于
    块级元素还是行内元素，当时想都没想就说了是<b>行内<font>(inline)</font>元素</b>，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。写这
    篇文章源自我之前的一次面试，题目便是问<font>img</font>标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，
    面试官追问为什么能够设置img标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。</p>
</body>
</html>
View Code
复制代码
posted @   YorkShare  阅读(2800)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛