请输入图片描述

CSS语法格式： 选择器{属性：值}; 如果需要定义多个属性值需要用分号进行分开

CSS注释： /*注释内容*/

案例： 第一种：可读性和代码复用性差

<div style="border-width:3px;border-color:red red red red;border-style: solid">标签1</div>

案例： 第二种：在标签里面定义

<style type="text/css">
    span{border: 1px solid blue}
</style>

案例： 第三种 把css样式写成一个单独的css文件，再通过link标签引入即可复用。

创建一个css文件里面写入样式例如：
p{
    border-width:3px;
    border-color:red red red red;
    border-style: solid
}
span{
    border: 1px solid blue
}

然后调用link链接一个外部css样式表：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

选择器的用途是：选择了这个东西 然后对他进行修饰。
选择器： 标签名选择器 id选择器 类型选择器
id选择器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器的使用</title>
    <style type="text/css">
        #b001{
            color:blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #c002{
            color: red;
            font-size: 20px;
            border-color:blue ;
            border-style: dashed;
            border-width: 5px;
        }
    </style>
</head>
<body>
<div id="b001">今天是2020/3/29</div>
<div id="c002">今天我吃了一块巧克力</div>

</body>
</html>

类型选择器

.class属性值{
    属性：值
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器的使用</title>
    <style type="text/css">
        #b001{
            color:blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #c002{
            color: red;
            font-size: 20px;
            border-color:blue ;
            border-style: dashed;
            border-width: 5px;
        }
        .class01{
            color: blue;
            font-size: 30px;
            border-width: 3px;
            border-color: black;
            border-style: dotted;

         }
        .class02{
            color: gray;
            font-size: 26px;
            border-width: 1px;
            border: red solid;
        }
    </style>
</head>
<body>
<div class="class01">今天是2020/3/29</div>
<div class="class02">今天我吃了一块巧克力</div>

</body>
</html>

组合选择器

组合选择器的格式是：

选择器1，选择器2，选择器n{
    属性：值；
    ……
}

案例：
请输入图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器的使用</title>
    <style type="text/css">
        .class03,#id001{
            color: blue;
            font-size: 20px;
            border-width: 1px;
            border-color: yellow;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div class="class03">我是div</div>
    <span id="id001">我是span</span>
</body>
</html>