CSS样式引入的四种方式

一.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 @ 2021-03-08 09:58 YorkShare 阅读(2757) 评论(0) 编辑收藏举报

刷新页面返回顶部

YorkShare_z

笨鸟先飞

CSS样式引入的四种方式

公告