CSS引入方式 - 技术栈

行内样式：写在标签的style属性中

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>焦点访谈：中国底气</title>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
<!--     方式1.行内样式 -->    y
    <h1 style="color: crimson;">焦点访谈：中国底气</h1>
    <hr>
</body>
</html>

内嵌样式：写在style标签中（通常写在head中）

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>焦点访谈：中国底气</title>
    <!-- 方式2：内嵌样式 -->
    <style>
        h1{
            color: crimson;
        }
    </style>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
</body>
</html>

外联样式：写在一个单独的.css文件中（通过link标签在网页中引入）

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>焦点访谈：中国底气</title>
    <link rel="stylesheet" href="./css/news.css">
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
</body>
</html>

html 复制代码

h1{
    color: crimson;
}

颜色表示形式：

表示方式

关键字--------预定义的颜色名---------red，green，blue

rgb表示法-----红绿蓝三原色，每项取值范围：0-255-----rgb（0，0，0），rgb（255，255，255）

十六进制表示法-----#开头，将数字转换成十六进制表示--------#00000000，#ff000000

CSS选择器：用来选取需要设置样式的元素（标签）

元素选择器

/* 元素选择器 */

span{

color: #ff0000;

}

类选择器

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>焦点访谈：中国底气</title>
    <style>
        h1{
            color: blue;
        }
       .cla{
            color: #0f0;;
       }
    </style>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
    <span class="cla">2023.8.25</span>
    <hr>
</body>
</html>

ID选择器

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>焦点访谈：中国底气</title>
    <style>
        h1{
            color: blue;
        }
       #time{
            color: rgb(240, 11, 53);
       }
    </style>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
    <span id="time">2023.8.25</span>
    <hr>
</body>
</html>

小结：

1.<span>标签

大量会用到的没有语义的局部标签

2.CSS选择器

优先级：id选择器>类选择器>元素选择器

3.font-size：

字体大小（注意：记得加px）