CSS基础语法

  1 DOCTYPE html>
  2 html lang="zh-cn">
  3 head>
  4     meta charset="UTF-8">
  5     meta http-equiv="refresh" content="5"/>
  6     meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     title>css基础title>
  8     
  9     link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
 10     
 11     style>
 12         /* 1 首先我们来弄一个绿色的背景 */
 13         body{
 14             background-color: green;
 15         }
 16 
 17         /* 2 了解css选择器*/
 18         /* 通用选择器   所有文字30px加粗*/
 19         *{
 20             font-size:30px; 
 21             font-weight: bold;
 22         }
 23 
 24         /* 元素选择器 */
 25         h1{
 26             color: red;
 27         }
 28         h2{
 29             color:blue;
 30         }
 31         h3{
 32             color:yellow;
 33         }
 34 
 35 
 36         /* 类选择器  标签上面的class属性*/
 37         .div{
 38             width: 200px;
 39             height: 200px;
 40             background: red;
 41         }
 42         /* 挨着 */
 43         .div1.div2{
 44             width: 200px;
 45             height: 200px;
 46             background-color:blue;
 47         }
 48         p.div5{
 49             color:white;
 50         }
 51         /* 不挨着 */
 52         .div3 .div4{
 53             width: 200px;
 54             height: 200px;
 55             background-color:pink;
 56         }
 57         p .div6{
 58             color:blue;
 59             font-size: 50px;
 60         }
 61 
 62         /* ID选择器 */
 63         #app{
 64             width: 300px;
 65             height: 300px;
 66             background-color:yellow;
 67         }
 68 
 69 
 70         /* 属性选择器 */
 71         /* 简单属性选择器  有这个属性就成*/
 72         h1[class]{
 73             color:yellow;
 74         }
 75         /* 具体属性选择器 有这个属性还得和设置的相等*/
 76         input[type=text]{
 77             color:red;
 78         }
 79 
 80         /*3、部分属性选择器 了解即可 没有DEMO
 81 
 82         [class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素
 83         　　例如：class="ab"不满足[class ~="b"]，而class="a b"或class="b"满足
 84 
 85         [class |="b"] 选择class属性值等于b或以b-开头的所有元素
 86         　　例如：class="ab"或class="ab-"不满足[class |="a"]，而class="a"或class="a-"满足
 87 
 88         [class ^="b"] 选择class属性值以"b"开头的所有元素
 89         [class $="b"] 选择class属性值以"b"结尾的所有元素
 90         [class *="b"] 选择class属性值包含"b"的所有元素*/
 91 
 92         /* 分组选择器  */
 93         span,em{
 94             color:red;
 95         }
 96         /* 后代选择器 */
 97         ul li {
 98             color:white;
 99         }
100         /* 兄弟选择器 */
101         h5 + h6{
102            color:blue;
103         }
104         /* 伪类选择器 */
105         #pse_class:hover{
106             color:black;    
107         }
108         /* 伪元素选择器 */
109         .after:after{
110             content: "123";
111         }
112     style>
113 head>
114 body>
115     
116     div style="width: 500px;height: 500px;border:10px solid red;" style="background-color: yellow;">
117         行间样式DEMO
118     div>
119 
120 
121     
122     h1>红色文字h1>
123     h2>蓝色文字h2>
124     h3>绿色文字h3>
125 
126     div class="div">红色背景200*200div>
127     
128     div class="div1 div2">蓝色背景200*200div>
129     
130     div class="div3">
131         div class="div4">粉色背景200*200div>
132     div>
133 
134     p class="div5">白色文字p>
135 
136     p>
137         div class="div6">绿色文字(这个很奇怪没生效我们以后解释)div>
138     p>
139 
140     div id="app">
141         ID选择器 黄色背景300*300
142     div>
143 
144     
145     h1 class="app">
146             简单属性选择器        黄色文字
147     h1>
148 
149     
150     input type="text" value="红色">
151     input type="numnber" value="默认颜色">
152 
153     br>
154 
155     
156     span>红色spanspan>
157     em>红色emem>
158 
159     
160     ul>
161         li>1li>
162         li>2li>
163         li>3li>
164         li>4li>
165     ul>
166 
167     
168     h5>H5h5>
169     h6>H6h6>
170 
171     
172     span id="pse_class">鼠标移入到此span>
173 
174     
175     div class="after">div>
176 body>
177 html>

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     title>权重问题title>
 7     style>
 8         /* 1、内联样式 -> 1,0,0,0  style="color:red"
 9 
10         　　2、ID属性值 -> 0,1,0,0    id="app"
11 
12         　　3、类属性值、属性选择或伪类 -> 0,0,1,0  class="app"
13 
14         　　4、元素或伪元素 -> 0,0,0,1  
15 
16         　　5、结合符和通配选择器 -> 0,0,0,0 */
17 
18         .test {    /*权重:0,0,1,0*/
19             color:red;
20         }
21         #app{      /*权重:0,1,0,0*/
22             color:blue;
23         }
24 
25         /* 不进位 */
26         .a.b.c.d.e.f.g.h.i.j.k.l{  /*权重:0,0,12,0*/
27             width: 500px;
28             height: 500px;
29             border:1px solid red;
30             background-color: red;
31         }
32         #box{ /*权重:0,1,0,0*/
33             background: yellow;
34         }
35 
36         .important{
37             width: 500px;
38             height: 500px;
39             border:1px solid red;
40             color:red !important;
41         }
42 
43         #important{
44             color:blue;
45         }
46     style>
47 head>
48 body>
49     span id="app" class="test">
50         由于  0,1,0,0  > 0,0,1,0  所以显示文字为蓝色
51     span>
52 
53 
54     div class="a b c d e f g h i j k l" id="box">
55         由于  0,1,0,0  > 0,0,12,0  所以显示文字为蓝色
56         但是.a.b.c.d.e.f.g.h.i.j.k.l 设置的其他样式 width:500px等仍然可以正常显示
57     div>
58 
59     div class="important" id="important" style="color:green">
60         文字颜色是红色
61         !important 权重最高
62         style 权重  1,0,0,0
63         id 权重 0,1,0,0
64     div>
65 body>
66 html>