CSS的引入方式-526互联

CSS包括选择器和一条多多态声明（样式)CSS引入方式包括内联样式、内部样式和外部样式

1.内联样式：在标签中以属性方式添加style,在属性中用；隔开各个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: aqua;font-size: 50px;"></p>        <!--内联样式  利用标签属性加style-->
</body>
</html>

但不推荐使用

2.内部样式：通过在<head>标签中添加<style>标签,以选择器{}的样式该表图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  <!--内部样式，但多个页面容易混乱-->
    <style>
        h3{
            color: aqua; 
            font-size: 30px;
        }           
        p{
            color:aquamarine;
        }            <!--所有的p标签都会随之改变-->
    </style>                    
</head>
    <h3>文本标题</h3>
    <P> <a href="./index.html">chN</a>
    </body></P>
   <p>2</p>
   <p>1</p>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        段落
    </p>
</body>
</html>

其缺点是只可以一次性改变一个页面的样式，当存在多个页面时，容易混乱

3.外部样式:通过改变一个文件来改变整个站点的外观，使用<link>标签，在文档头部，当需要应用很多页面时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
</head>
<body>
    <p>产品</p>
    <a href="./home.html">11</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
</head>
<body>
    <p>段落</p>
</body>
</html>

p{
    color: rebeccapurple;
    font-size: 30px;
}

需要单独创建一个CSS文件，在该文件中编写修改选择器的代码，如上p为选择器

可同时改变两个页面的选择器样式。