03、CSS基础知识 - CSS样式表分类

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS样式表

Cascading Style Sheets：层叠样式表，简称CSS

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类

• 行内样式表（行内式）
• 内部样式表（嵌入式）
• 外部样式表（链接式）

二、行内样式表（行内式）

行内样式表：在元素标签内部的style属性中设置css样式

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 
//在style属性中写元素的样式
//写法规范：双引号中间，属性与值之间使用：（冒号），不同属性之间使用；（分号）
//不推荐大量使用这种写法（书写繁琐，没有体现出结构与样式相分离的思想）
//为元素添加简单样式时，可以考虑使用

三、内部样式表（嵌入式）

内部样式表：将CSS代码写在html页面的style标签中

<style> 
    div {
   
      
      color: red; 
      font-size: 12px; 
    } 
 </style>

style 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的head标签中。
代码结构清晰，但是并没有实现结构与样式完全分离

四、外部样式表（链接式）

外部样式表：样式单独写在css文件中，并将css文件引入到html页面中

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件
 <link rel="stylesheet"  href="css文件路径">