第01阶段，前端基础.CSS初识-CSDN博客

本文链接：https://blog.csdn.net/wutang_xiaobai/article/details/121922589

HTNL的局限性

CSS的最大的贡献就是：让HTNL从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS

结构（html）与样式（css）相分离

概念：

CSS（Cascading Style Sheets），通常称为CSS样式表或层叠样式表（级联样式表）

作用：

称行内样式，行间样式

是通过标签的style属性来设置元素的样式

<标签 style="属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;">内容</标签>

实际上任何HTML标签都拥有style属性，用来设置行内式

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱<div>

注意：
- style其实就是标签的属性
- 样式属性和值中间的":"
- 多组属性值之间用";"隔开
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码
缺点:
- 没有实现样式和结构相分离

<head>
    <style type="text/css">
        选择器{
            属性1: 属性值1;
            属性2: 属性值2;
        }
    </style>
</head>

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

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方
- type="text/css"在html5中可以省略
- 只能控制当前页面

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件
type	定义所链接文档的类型，在这里需要指定为"text/css"。表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径