基于Lora通讯加STM32空气质量检测WIFI通讯-CFANZ编程社区

本节⽬标

掌握 CSS 基本语法规范和CSS选择器的各种⽤法, 熟练使⽤CSS的常⽤属性.

一.CSS介绍

1.什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

CSS前 -> CSS修饰后

2.基本语法规范

选择器 + {⼀条/N条声明}

选择器决定针对谁修改 (找谁)
声明决定修改啥. (⼲啥)
声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.

<head>
    <title>Document</title>
    <style>
        div{
            color: brown;

        }
    </style>
</head>

3.引⼊⽅式

CSS有3种引⼊⽅式，语法如下表格所⽰：

3种引⼊⽅式对⽐:

内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.
⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
外部样式，html和css实现了完全的分离, 企业开发常⽤⽅式.

4.规范

样式⼤⼩写

虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟

空格规范

冒号后⾯带空格
选择器和 { 之间也有⼀个空格.

二.CSS选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.

CSS选择器主要分以下⼏种:

1. 标签选择器

2. class选择器

3. id选择器

4. 复合选择器

5. 通配符选择器

我们通过代码来学习CSS选择器的使⽤.

1. 标签选择器

<!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>
        div {
            color:purple;
        }
        a {
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <div>我是一个div2</div>
    <div><a href="#">我是一个div3</a></div>
</body>
</html>

2. 类选择器

<!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>
          /* 类选择器 */
          .cla1 {
            font-size: 40px;
          }
    </style>
</head>
<body>
    <div id="div" class="cla1">我是一个div</div>
    <div id="div2" class="cla1">我是一个div2</div>
    <div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>

3. ID选择器

<!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>
         /* id选择器 */
         #div {
            color: purple;
         }
         #div2 {
            color: red;
         }
    </style>
</head>
<body>
    <div id="div" >我是一个div</div>
    <div id="div2">我是一个div2</div>
    <div id="div3"><a href="#">我是一个div3</a></div>
</body>
</html>

4. 通配符选择器

<!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>
           /* 通配符选择器 */
           * {
            color: rebeccapurple;
           }
    </style>
</head>
<body>
    <div id="div" class="cla1">我是一个div</div>
    <div id="div2" class="cla1">我是一个div2</div>
    <div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>

5. 复合选择器

（1）中间使用“，”为并集

#div,#div2 {
            color: antiquewhite;
        }

（2）具有父子关系的中间带空格，表示最关系最下面的更改

  ul li {
            color: aquamarine;
        }

三、常⽤CSS

接下来学习⼀些常⻅的css样式

准备如下html

<div class="text1">我是⽂本1</div>

1.color

color: 设置字体颜⾊

div {
            color: #fff;
            color:aliceblue;
            color:rgb(0,255,255);

        }

颜⾊有如下⼏种表达⽅式:

英⽂单词,如red,blue
rgb代码的颜⾊如rgb(255,0,0)
⼗六进制的颜⾊如#ff00ff

2.font-size

font-size: 设置字体⼤⼩

   div {
            font-size: 200px;
        }

3. border

border: 边框

边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断

        div {
            width: 500px;
            height: 600px;
            border-width: 10px;
            border-style: dashed;
            border-color: aqua;
        }

以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜⾊.

也可以拆开来设置

样式	说明	取值
border-width	设置边框粗细	数值
border-style	设置边框样式	dotted : 点状 solid : 实线 double : 双线 dashed: 虚线
border-color	设置边框颜⾊	同 color

border: 1px solid purple; 
/*就等同于以下代码:*/
.text1 {
/* border: 1px purple solid; */
border-width: 1px;
border-style: solid;
border-color: purple;
}

4.width/height

width: 设置宽度
height: 设置⾼度

只有块级元素可以设置宽⾼

        #div4  {
            display: block;
            width: 40px;
            height: 100px;
            border-color: brown;
            border-width:10px;
            border-style: dotted;
        }