1 year ago · b0af65c4fd
--- a/css/6.选择器.html
+++ b/css/6.选择器.html
@@ -56,14 +56,33 @@
 
				             color: #0f0;
			
 
				             font-size: 30px;
			
 
				         }
			
 
				-        /* 11.通配符选择器 匹配全局* */
			
 
				+        /* 11.通配符选择器 匹配全局：* */
			
 
				         * {
			
 
				             list-style: none;
			
 
				             text-decoration: none;
			
 
				         }
			
 
				+        span {
			
 
				+            color:red !important;
			
 
				+        }
			
 
				+        span {
			
 
				+            color: yellowgreen;
			
 
				+        }
			
 
				+        /* 12.属性选择器 
			
 
				+            标签[属性=xxx] {
			
 
				+                
			
 
				+            }
			
 
				+        */
			
 
				+        /* img {
			
 
				+            width: 200px;
			
 
				+        } */
			
 
				+        img[alt=aaa] {
			
 
				+            width: 200px;
			
 
				+        }
			
 
				     </style>
			
 
				 </head>
			
 
				 <body>
			
 
				+    <img src="../html/images/img01.gif" alt="aaa">
			
 
				+    <span>这是哈哈哈</span>
			
 
				     <div></div>
			
 
				     <div class="new">这是一段新内容</div>
			
 
				     <ul>
			
--- a/css/7.选择器的优先级.html
+++ b/css/7.选择器的优先级.html
@@ -0,0 +1,16 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        选择器的优先级：
			
 
				+
			
 
				+        ！important > 内联样式 > id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 伪元素选择器 = 标签选择器 > * (通配符选择器)
			
 
				+        正无穷          1,0,0,0   0,1,0,0       0,0,1,0                            0,0,0,1                  0,0,0,0
			
 
				+     -->
			
 
				+</body>
			
 
				+</html>
			
--- a/css/8.盒模型.html
+++ b/css/8.盒模型.html
@@ -0,0 +1,30 @@
 
				+<!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>
			
 
				+        * {
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+        /* 
			
 
				+            盒模型：
			
 
				+                标准盒模型：width = 内容宽度 + border + padding :box-sizing: content-box;
			
 
				+                怪异盒模型（IE盒模型）：width = 内容宽度（border + padding +内容宽度）：box-sizing: border-box;
			
 
				+
			
 
				+        */
			
 
				+        #box1 {
			
 
				+            width: 300px;
			
 
				+            height: 300px;
			
 
				+            background: #00f;
			
 
				+            border: 3px solid #000;
			
 
				+            padding: 20px;
			
 
				+            margin: 20px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/css/9.css样式.html
+++ b/css/9.css样式.html
@@ -0,0 +1,48 @@
 
				+<!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>
			
 
				+      input {
			
 
				+        /* 轮廓outline */
			
 
				+        outline: none;
			
 
				+        outline: 3px solid #f00;
			
 
				+        outline-width: 1px;
			
 
				+        outline-style: dashed;
			
 
				+        outline-color: purple;
			
 
				+        /* border: none; */
			
 
				+      }
			
 
				+      div {
			
 
				+        /* 将元素转成行内元素 */
			
 
				+        /* display: inline; */
			
 
				+      }
			
 
				+      span {
			
 
				+        width: 300px;
			
 
				+        height: 300px;
			
 
				+        border: 3px solid #000;
			
 
				+        margin-left: 20px;
			
 
				+        /* 将元素转成块级元素 */
			
 
				+        /* display: block; */
			
 
				+        /* 将元素转成行内款元素 */
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+      h2 {
			
 
				+        /* 将元素隐藏 */
			
 
				+        display: none;
			
 
				+        /* color: rgba(0, 0, 0, 0); */
			
 
				+        /* opacity: 0; */
			
 
				+        /* 显示元素 */
			
 
				+        display: block;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <input type="text" name="" id="" />
			
 
				+    <div>111</div>
			
 
				+    <span>2222</span>
			
 
				+    <span>333</span><span>444</span>
			
 
				+    <h2>显示/隐藏</h2>
			
 
				+  </body>
			
 
				+</html>
			
--- a/css/9.padding和margin.html
+++ b/css/9.padding和margin.html
@@ -0,0 +1,41 @@
 
				+<!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>
			
 
				+        #box1 {
			
 
				+            width: 300px;
			
 
				+            height: 300px;
			
 
				+            border: 5px solid #f00;
			
 
				+            padding:20px;
			
 
				+            margin: 20px;
			
 
				+            /* padding-left: 70px; */
			
 
				+        }
			
 
				+        /* 
			
 
				+            padding 内边距：内容与边框之间的距离 复合属性
			
 
				+            一个值：上下左右
			
 
				+            两个值：上下 左右
			
 
				+            三个值：上 左右 下
			
 
				+            四个值：上 右 下 左
			
 
				+            padding-left
			
 
				+            padding-right
			
 
				+            padding-top
			
 
				+            padding-bottom
			
 
				+            margin 外边距：边框外的距离 复合属性
			
 
				+            一个值：上下左右
			
 
				+            两个值：上下 左右
			
 
				+            三个值：上 左右 下
			
 
				+            四个值：上 右 下 左
			
 
				+            margin-left
			
 
				+            margin-right
			
 
				+            margin-top
			
 
				+            margin-bottom
			
 
				+        */
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box1">hahahah</div>
			
 
				+</body>
			
 
				+</html>