html \css 2 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="class2.css">
 7 </head>
 8 <body>
 9     <div>
10         <span>123</span>
11     </div>
12     <span>234</span>
13     <div class="wrapper">
14         <strong class="box">
15             <em>234</em>
16         </strong>
17     </div>
18 
19     <div>1</div>
20     <div class="demo">2</div>
21     <p class="demo">3</p>
22 
23     <div>1</div>
24     <em>2</em>
25     <span>3</span>
26 
27     <div class="demo1"></div>
28     <div class="demo2"></div>
29     
30 
31     <div>举个例子</div>
32 </body>
33 </html>
 1 /*浏览器遍历父子选择器的顺序为从右向左*/
 2 /*权重一样时 后来的代码会覆盖前面的代码*/
 3 /*父子选择器 / 派生选择器*/
 4 div span{
 5     background-color: red;
 6 }
 7 .wrapper .box em{
 8     background-color: red;
 9 }
10 
11 /*直接子元素选择器*/
12 div > em{
13     /*只特指 1*/
14     background-color: red;
15 }
16 
17 /*并列选择器 无空格*/
18 div.dimo{
19 }
20 
21 /*共用一个代码块 用，隔开*/
22 em,
23 span,
24 div{
25     background-color: red;
26 }
27 /*简化代码*/
28 .demo1{
29     background-color: red;
30 }
31 .demo2{
32     background-color: green;
33 }
34 .demo1,
35 .demo2{
36     width: 100px;
37     height: 100px;
38 }
39 
40 
41 
42 /*css代码*/
43 div{
44     font-size: 16px; 
45     font-weight: bold;/*lighter light blod bloder 100 200 ——900*/
46     font-style: italic;/*斜体*/
47     font-family: arial;
48     color: red;
49     /*给容器加一个外包快 粗细  风格 颜色*/
50     border: 1px solid black;
51     border-width: 20px;
52     border-style: dashed; /*条状虚线*/
53     border-left-color: red;
54     border-top-color:transparent ;/*透明色*/
55 
56 }
57 /*
58 设置字体颜色
59 1.纯英文单词 开发时不能用 颜色太多了
60 2.颜色代码 如 #ff40 
61 
62 r           g             b
63 00--ff   00--ff       00--ff
64 #000000
65 
66 
67 3.颜色函数
68 rgb( , , )
69     0-255,0-255,0-255
70 */

 

posted @ 2021-11-14 20:17  取鱼  阅读(58)  评论(0)    收藏  举报