From f2c3b540e2e73297d9d65a2b4f62539ba784e6b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E6=9D=A8=E6=82=A6?=
 <14091313+ding-yangyue@user.noreply.gitee.com>
Date: Mon, 14 Oct 2024 19:44:15 +0800
Subject: [PATCH 1/2] 10.14

---
 .../20241014 css\344\274\252\347\261\273.md"  | 212 ++++++++++++++++++
 1 file changed, 212 insertions(+)
 create mode 100644 "\344\270\201\346\235\250\346\202\246/20241014 css\344\274\252\347\261\273.md"

diff --git "a/\344\270\201\346\235\250\346\202\246/20241014 css\344\274\252\347\261\273.md" "b/\344\270\201\346\235\250\346\202\246/20241014 css\344\274\252\347\261\273.md"
new file mode 100644
index 00000000..08d955f3
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20241014 css\344\274\252\347\261\273.md"	
@@ -0,0 +1,212 @@
+### 伪类
+1. 链接伪类：
+* :link：用于未被访问的链接。
+* :visited：用于已被访问的链接。
+* :hover：鼠标悬停在元素上时。
+* :active：当元素被激活（如点击）时。
+
+示例代码：
+````
+css
+a:link {
+    color: green;
+}
+a:visited {
+    color: purple;
+}
+a:hover {
+    color: red;
+}
+a:active {
+    color: yellow;
+}
+````
+
+2. 结构伪类：
+* :first-child：选择作为其父元素的第一个子元素的元素。
+* :last-child：选择作为其父元素的最后一个子元素的元素。
+* :nth-child()：选择父元素中的特定位置的子元素。
+* :nth-last-child()：从父元素的末尾开始选择特定位置的子元素。
+* :first-of-type：选择作为其父元素的第一个特定类型的子元素。
+* :last-of-type：选择作为其父元素的最后一个特定类型的子元素。
+* :nth-of-type()：选择父元素中的特定位置的特定类型的子元素。
+* :nth-last-of-type()：从父元素的末尾开始选择特定位置的特定类型的子元素。
+* :only-child：选择是其父元素的唯一子元素的元素。
+* :only-of-type：选择是其父元素的唯一特定类型的子元素。
+
+示例代码：
+````
+css
+p:first-child {
+    font-weight: bold;
+}
+li:nth-child(2) {
+    color: blue;
+}
+````
+
+3. 状态伪类：
+* :checked：用于单选按钮、复选框或选项按钮被选中时。
+* :disabled：用于禁用的表单元素。
+* :enabled：用于启用的表单元素。
+* :required：用于设置了 required 属性的表单元素。
+* :optional：用于没有设置 required 属性的表单元素。
+* :valid：用于输入值有效的表单元素。
+* :invalid：用于输入值无效的表单元素。
+* :in-range：用于输入值在指定范围内的表单元素。
+* :out-of-range：用于输入值不在指定范围内的表单元素。
+
+示例代码：
+````
+css
+input:checked {
+    background-color: lightgray;
+}
+input:disabled {
+    background-color: lightgray;
+}
+````
+
+4. 否定伪类：
+* :not()：否定一个选择器，表示不选择匹配该选择器的元素。
+
+示例代码：
+````
+css
+p:not(:first-child) {
+    color: gray;
+}
+````
+
+5. 目标伪类：
+* :target：用于页面上被锚点指向的元素。
+
+示例代码：
+````
+css
+section:target {
+    background-color: yellow;
+}
+````
+
+6. 语言伪类：
+* :lang()：用于根据元素的 lang 属性选择元素。
+
+示例代码：
+````
+css
+p:lang(en) {
+    color: blue;
+}
+````
+
+7. 动态伪类：
+:nth-child() 和 :nth-of-type() 可以结合 odd 和 even 关键字使用，选择奇数或偶数位置的子元素。
+
+示例代码：
+````
+css
+li:nth-child(odd) {
+    background-color: lightgray;
+}
+li:nth-child(even) {
+    background-color: white;
+}
+````
+
+## 作业
+1. 出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>标签的字体变为粗体，并且<aside>类中的<h3>标签的字体变为斜体。
+
+代码：
+````
+    .main section h1,
+      .main article h2{
+        font-weight: bold;
+      }
+
+      .sidebar h3{
+        font-style:italic;
+      }
+````
+
+图示：
+![](./23.1.png)
+
+2. 请写出CSS规则，使得所有带有required属性的<input>元素在获得焦点时边框变为蓝色，并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色。
+
+代码：
+````
+ input[required]:focus{
+        border-color: rgb(0, 153, 255);
+      }
+      input[placeholder]::placeholder{
+        color: rgba(223, 220, 217, 0.493);
+      }
+````
+图示：
+![](../作业图片/伪类2.png)
+
+3. 请写出CSS规则，使得导航栏中当前激活的链接（class="active"）的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色。
+
+代码：
+````
+ nav ul li a.active:hover{
+        background-color: #ffffff85;
+        }     
+        a:hover{
+            color: white; 
+        }
+````
+
+图示：
+![](../作业图片/伪类3.png)
+
+4. 请写出CSS规则，使得带有class="special-title"的<h2>标签的第一个字母首字下沉，并且首字下沉的字母颜色为金色，背景色为透明。
+
+代码：
+````
+     .special-title::first-letter {
+            font-size: 3em;
+            color: gold;
+            background-color: transparent;
+            float: left;
+            line-height: 1;
+            margin-right: 0.1em;
+        }
+
+        .special-title {
+            line-height: 1.2;
+            font-size: 24px;
+        }
+````
+
+图示：
+![](../作业图片/伪类4.png)
+
+5. 请写出CSS规则，使得.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色。
+
+代码：
+````
+  .list li>ul{
+            background-color: #ffffffbb;
+        }
+        .list li:hover *{
+            color: rgb(38, 0, 255);
+        }
+````
+图示：
+![](../作业图片/伪类5.png)
+
+6. 请写出CSS规则，使得.container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，并且所有标签<label>在悬停时背景色变为浅蓝色。
+
+代码：
+````
+ .container form input:focus{
+        border-color: green;
+    }
+    .container label input:hover{
+        background-color: #6acbf8;
+    }
+````
+图示：
+![](../作业图片/伪类6.png)
\ No newline at end of file
-- 
Gitee


From aa97737ac5151bf5196f5f66fbe798f83d885c6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E6=9D=A8=E6=82=A6?=
 <14091313+ding-yangyue@user.noreply.gitee.com>
Date: Wed, 16 Oct 2024 23:26:07 +0800
Subject: [PATCH 2/2] 10.16

---
 ...22\345\255\220\346\250\241\345\236\213.md" | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 "\344\270\201\346\235\250\346\202\246/20241016 css\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md"

diff --git "a/\344\270\201\346\235\250\346\202\246/20241016 css\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\344\270\201\346\235\250\346\202\246/20241016 css\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 00000000..8aff993d
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20241016 css\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md"	
@@ -0,0 +1,121 @@
+#### CSS继承性
+继承性是CSS的一个核心特性，它允许某些CSS属性值从父元素传递到子元素。这意味着，如果一个属性在父元素上定义了，那么它的子元素会自动继承这个属性，除非子元素有更具体的规则覆盖它。
+
+1. 常见的可继承属性：
+* font-family
+* font-size
+* font-weight
+* color
+* line-height
+* cursor
+* visibility
+* text-align（在一些浏览器中）
+
+2. 不可继承的属性：
+* width, height
+* margin, padding
+* border
+* background
+* float, clear
+* display, position
+
+#### CSS层叠性
+层叠性是指当多个规则应用于同一个元素时，浏览器如何决定最终应用哪个规则。
+
+层叠性由以下规则决定：
+1. 重要性（Importance）：使用!important规则的样式会覆盖其他所有规则。
+2. 特异性（Specificity）：如果两个规则具有相同的重要性，那么具有更高特异性的选择器将被应用。特异性由选择器的类型和数量决定。
+3. 源代码顺序：如果两个规则具有相同的特异性和重要性，那么在CSS文件中最后出现的规则将被应用。
+4. 继承：继承的样式总是比在元素上直接声明的样式具有更低的优先级。
+
+#### CSS盒子模型
+CSS盒子模型是CSS布局的基石，它描述了如何显示HTML元素。
+
+每个盒子由以下几个部分组成：
+1. 内容（Content）：盒子的内容，比如文本、图片等。
+2. 内边距（Padding）：内容与边框之间的空间。
+3. 边框（Border）：围绕内边距的边框。
+4. 外边距（Margin）：边框外的空间，用于分隔其他元素。
+
+盒子模型的宽度和高度计算方式取决于box-sizing属性的值：
+1. content-box（默认值）：宽度和高度只包括内容区域。
+2. border-box：宽度和高度包括内容区域、内边距和边框，但不包括外边距。
+
+## 作业
+#### 二十四
+1. 24.1 
+呈现蓝色
+
+2. 24.2 
+呈现红色
+
+3. 24.3 
+呈现绿色
+
+4. 24.4 
+呈现绿色
+
+5. 24.5 
+呈现蓝色
+
+6. 24.6
+呈现蓝色
+
+7. 24.7
+呈现黄色
+
+#### 二十五
+1. 25.1
+代码
+````
+   div{
+        width: 200px;
+        height: 200px;
+        padding: 10px 20px 30px;
+        padding-right: 40px;
+        border: 1px solid #000;
+    }
+
+````
+
+答案：真实宽高为262*242
+模型：![](../作业图片/25.1.png)
+
+2. 25.2
+代码
+````
+	div{
+		width: 200px;
+		height: 200px;
+		padding-left: 10px;
+		padding-right: 20px;
+		padding:40px 50px 60px;
+		padding-bottom: 30px;
+		border: 1px solid #000;
+	}
+````
+
+答案：宽高为302*272
+模型：![](../作业图片/25.2.png)
+
+3. 25.3
+代码：
+````
+  div{
+            width: 123px;
+            height: 123px;
+            padding: 20px 40px 20px 40px;
+            border: 1px solid blue;
+        }
+````
+
+4. 25.4 
+代码：
+````
+    div{
+            width: 123px;
+            height: 123px;
+            padding: 20px 40px 20px 20px;
+            border: 1px solid red;
+        }
+````
-- 
Gitee