第四篇 CSS

在标签上设置style属性：

background-color：#2459a2；

height：48px；

。。。

编写CSS样式：

如何注释：/* 或 */

一. 在标签的属性中编写

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8       <div style="background-color: aqua;height:48px;">12fhjkhjjk44</div>
 9       <div style="background-color: red;height:48px">ff1537ff</div>
10       <div style="background-color: pink;height: 48px">fhajhjak</div>
11 </body>
12 </html>

二. 写在head里面，style标签中写样式

1. id选择区

#i1{

background-color: #2459a2;

height: 48px;

}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color: aqua;height:48px;
 9         }
10         #i2{
11             background-color: aqua;height:48px;
12         }
13     </style>
14 </head>
15 <body>
16       <div id="i1">12fhjkhjjk44</div>
17       <div id="i2">ff1537ff</div>
18       <div style="background-color: pink;height: 48px">fhajhjak</div>
19 </body>
20 </html>

2. class选择器

.名称{

...

}

<标签 class=‘名称’> </标签>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color: aqua;height:48px;
 9         }
10         #i2{
11             background-color: aqua;height:48px;
12         }
13         .c1{
14             background-color: aqua;height:48px;
15         }
16     </style>
17 </head>
18 <body>
19       <div class="c1">12fhjkhjjk44</div>
20       <span class="c1">ff1537ff</span>
21       <div class="c1">fhajhjak</div>
22 </body>
23 </html>

3. 标签选择器

在head标签内的style标签中div{

......

}

所以div设置上此样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .c1{
 9             background-color: aqua;height:48px;
10         }
11         div{
12             background-color: red;color:black
13         }
14     </style>
15 </head>
16 <body>
17       <div>12fhjkhjjk44</div>
18       <span class="c1">ff1537ff</span>
19       <div>fhajhjak</div>
20 </body>
21 </html>

4. 层级选择器

.c1 .c2 div{

......

}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .c1{
 9             background-color: aqua;height:48px;
10         }
11         span div{
12             background-color: red;color:black
13         }
14     </style>
15 </head>
16 <body>
17       <div>12fhjkhjjk44</div>
18       <span class="c1">ff1537ff
19             <div>shjhjhjjhk</div>
20       </span>
21       <div>fhajhjak</div>
22 </body>
23 </html>

5. 组合选择器（逗号）

6. 属性选择器

对选择到的标签再通过属性再进行一次筛选

.c1 [n='alex'] { 100px; height: 200px;}

PS:

优先级，标签上style优先，编写顺序，就近原则

css样式也可以写在单独文件中

三注释

/* */

相关阅读:
Scratch编程：初识Scratch及编程工具安装（一）
关于少儿编程教育，这三大事项必须提前了解
 Scratch 少儿编程之旅（四）— Scratch入门动画《小猫捉蝴蝶》（中）
操作系统：概述
 剑指offer：斐波那契数列
 剑指offer：旋转数组的最小数字
 剑指offer：用两个栈实现一个队列
 剑指offer：重建二叉树
 剑指offer：从尾到头打印链表
 剑指offer：替换空格
原文地址：https://www.cnblogs.com/wz123/p/10323013.html