From 8dc6f507a1d8c29adff8e551f6a26ff8157171c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E5=A9=89=E5=A9=B7?= <14091842+dreaming-of-becoming-a-fupo@user.noreply.gitee.com> Date: Mon, 21 Oct 2024 00:50:07 +0800 Subject: [PATCH] =?UTF-8?q?10.17=E4=BD=9C=E4=B8=9A=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\346\200\247\345\272\217\345\210\227.html" | 142 ++++++++++++++++++ .../\346\265\256\345\212\250.html" | 104 +++++++++++++ ...\345\255\220\346\250\241\345\236\213.html" | 28 ++++ ...\347\233\256\347\273\203\344\271\240.html" | 120 +++++++++++++++ .../2024.10.14-\344\274\252\347\261\273.md" | 74 +++++++++ ...22\345\255\220\346\250\241\345\236\213.md" | 56 +++++++ .../2024.10.17-\346\265\256\345\212\250.md" | 72 +++++++++ 7 files changed, 596 insertions(+) create mode 100644 "\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227.html" create mode 100644 "\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\265\256\345\212\250.html" create mode 100644 "\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\347\233\222\345\255\220\346\250\241\345\236\213.html" create mode 100644 "\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" create mode 100644 "\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.14-\344\274\252\347\261\273.md" create mode 100644 "\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.16-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247and\347\233\222\345\255\220\346\250\241\345\236\213.md" create mode 100644 "\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.17-\346\265\256\345\212\250.md" diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227.html" new file mode 100644 index 00000000..6ed51386 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227.html" @@ -0,0 +1,142 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\265\256\345\212\250.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\265\256\345\212\250.html" new file mode 100644 index 00000000..7f883ae1 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\265\256\345\212\250.html" @@ -0,0 +1,104 @@ + + + + + + Document + + + +
+
+ +
语言选择
+
导航条
+
+
+
大广告
+
浅蓝上
+
浅蓝中
+
浅蓝下
+
紫色
+
深蓝
+
+
+
土黄
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\347\233\222\345\255\220\346\250\241\345\236\213.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\347\233\222\345\255\220\346\250\241\345\236\213.html" new file mode 100644 index 00000000..f74af0a0 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\347\233\222\345\255\220\346\250\241\345\236\213.html" @@ -0,0 +1,28 @@ + + + + + + Document + + + +
+
+ + \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" new file mode 100644 index 00000000..65222ece --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" @@ -0,0 +1,120 @@ + + + + + + Document + + + +
+
+

Welcome

+

This is the introduction section.

+
+
+

Post Title

+

Post content...

+ +
+ +
+ +
+ + + +
+ + + +

Special Title

+ + + +
+
+ + + + + +
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.14-\344\274\252\347\261\273.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.14-\344\274\252\347\261\273.md" new file mode 100644 index 00000000..95c1fb08 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.14-\344\274\252\347\261\273.md" @@ -0,0 +1,74 @@ +## 什么是伪类？ + 伪类是一种特殊的类选择器，用于选择元素的特定状态或位置。它们以冒号（:）开头，并在CSS中广泛使用。伪类不对应HTML中的任何标签，而是根据元素的特征或状态来选择元素。 +## 常见的伪类 +1. :hover(当用户将鼠标悬停在元素上时，应用样式。) +``` +例：button:hover { + background-color: blue; + color: white; +} +``` +2. :focus(当元素获得焦点时（如输入框被点击），应用样式。) +``` +例：input:focus { + border: 2px solid green; +} +``` +3. :active(当元素被激活时（如按钮被点击），应用样式。) +``` +例：button:active { + transform: scale(0.95); +} +``` +4. :first-child(选择属于其父元素的第一个子元素的每个元素。) +``` +例：p:first-child { + font-weight: bold; +} +``` +5. :last-child(选择属于其父元素的最后一个子元素的每个元素。) +``` +例：p:last-child { + color: red; +} +``` +6. :nth-child(n)(选择属于其父元素的第n个子元素的每个元素，n可以是数字、关键词或公式。) +``` +例：li:nth-child(2) { + background-color: yellow; +} +``` +7. :not(selector)(选择不匹配给定选择器的元素。) +``` +例：div:not(.active) { + opacity: 0.5; +} +``` +8. :checked(选择每个被选中的 <input >元素(适用于单选按钮和复选框)) +``` +例：input:checked + label { + text-decoration: underline; +} +``` +9. :disabled(选择每个被禁用的 <input> 或 <button>元素。) +``` +例：button:disabled { + cursor: not-allowed; +} +``` +10. :enabled(选择每个未被禁用的<input> 或<button> 元素。) +``` +例：input:enabled { + border: 1px solid black; +} +``` +## 伪类的组合使用 +``` + 当鼠标悬停在未被禁用的按钮上时，按钮的背景颜色变为紫色。 +例：button:hover:not(:disabled) { + background-color: purple; +} +``` +## 伪类与伪元素的区别 +* 伪类：用于选择元素的特定状态或位置，如 :hover、:first-child。 +* 伪元素：用于选择元素的一部分内容，并为其添加样式，如 ::before、::after。 diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.16-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247and\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.16-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247and\347\233\222\345\255\220\346\250\241\345\236\213.md" new file mode 100644 index 00000000..f7ffdaac --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.16-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247and\347\233\222\345\255\220\346\250\241\345\236\213.md" @@ -0,0 +1,56 @@ +## 一、CSS样式表的继承性 +``` + CSS的继承性是指被包在内部的标签将拥有外部标签的样式性质。它是依赖于祖先-后代的关系的，允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。 +``` +1. **典型应用**： +``` +继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部分设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。 +``` +2. **可继承的样式**： +* 文本属性（如color、font-系列等）和字体属性（如font-size、font-family等）可以继承，且不影响布局。 +* line-height等属性也可以继承。 +3. **不可继承的样式**： +* 布局相关的属性（如background、border、margin、padding、width、height、overflow等）不能继承。 +* vertical-align属性也不能继承。 +4. **继承的权重**： +``` +继承的CSS完全没有特殊性，即其特殊性为0。当存在多个样式规则时，继承的样式优先级低于显式声明的样式。 +``` +5. **使用继承的优点**： +``` +恰当地使用继承可以简化代码，降低CSS样式的复杂性。例如，为body元素设置一种字体，那么文档中的所有元素都将继承这些样式，无需为每个元素单独设置。 +``` +## 二、CSS样式表的层叠性 +``` +CSS的层叠性是指当多个选择器选中同一个标签并设置同一个样式时，浏览器中加载时会根据一定的规则（如选择器的优先级、样式的来源等）来挑选其中一个加载，即其中一个值会层叠/覆盖掉其他的值。 +``` +1. **样式来源**： +* **浏览器默认样式**:如h1标签默认显示粗体，em标签默认显示斜体。 +* **用户自定义样式**:一些页面中会提供一些让用户自定义字体大小、颜色等的快捷键。 +* **外部样式**:通过<link>标签引用的CSS文件。 +* **内部样式**:写在<style> </style>标签内的样式。 +* **内联样式**:直接写在标签style属性内的样式。 + +2. **优先级规则**： +* **显式权重**：有!important标志的声明的权重要高于不带!important标志的声明。 +* **来源**：创作人员的样式（包括外部样式、内部样式和内联样式）优先级高于用户自定义样式，用户自定义样式优先级高于浏览器默认样式。但带有!important标志的用户自定义样式优先级最高。 +* **选择器优先级**：各选择器有优先级，基本选择器（如元素选择器、类选择器、ID选择器等）的优先级从低到高为：通配选择器、元素选择器、类选择器、ID选择器。复合选择器（如交集选择器、并集选择器、后代选择器、子代选择器等）的优先级根据包含的基本选择器和关系来确定。 +* **出现顺序**：当选择器优先级相同时，后定义的样式会覆盖前面定义的样式。 +3. **层叠性的应用**: +``` +通过层叠性，可以实现样式的覆盖和优先级控制。例如，为某个元素同时设置了内部样式和内联样式，那么内联样式会覆盖内部样式。 +``` +## 盒子模型的基本概念 +``` +CSS盒子模型是一个用于描述HTML和CSS中元素布局的概念。它将每个HTML元素看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距四部分组成。 +``` +1. **内容区域（content）**：盒子中呈现实际内容的部分，例如文本、图片等。它的大小由width和height属性决定。 +2. **内边距（padding）**：内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。内边距以padding属性定义，可以设置为一个值（表示四个方向都相同），或者分别设置上、右、下、左四个方向的值。 +3. **边框（border）**：包围内容区域和内边距的线条，用于装饰或区分元素。边框以border属性定义，包括宽度、样式和颜色。边框样式有多种，如solid（实线）、dashed（虚线）、dotted（点线）等。 +4. **外边距（margin）**：盒子与周围元素之间的空白区域，用于控制盒子与其他元素之间的距离。外边距以margin属性定义，同样可以设置为一个值（表示四个方向都相同），或者分别设置上、右、下、左四个方向的值。 +## 盒子模型的常用属性 +1. width和height：控制内容区域的宽度和高度。 +2. padding：控制内边距的大小和颜色。 +3. border：控制边框的宽度、样式和颜色。 +4. margin：控制外边距的大小。 +5. box-sizing：控制盒子模型的模式。 \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.17-\346\265\256\345\212\250.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.17-\346\265\256\345\212\250.md" new file mode 100644 index 00000000..2f50a792 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.17-\346\265\256\345\212\250.md" @@ -0,0 +1,72 @@ +## 基本用法 +1. 浮动元素：使用 float 属性将元素浮动到左或右。 +``` +.float-left { + float: left; +} + +.float-right { + float: right; +} +``` +2. 清除浮动：使用 clear 属性来指定一个元素不应该与浮动元素相邻。 +``` +.clear-both { + clear: both; +} + +.clear-left { + clear: left; +} + +.clear-right { + clear: right; +} +``` +## 浮动的影响 +1. 父元素高度塌陷：当一个元素的所有子元素都浮动时，父元素的高度可能会塌陷到0，因为父元素不包含任何非浮动的子元素。 +``` +
+
浮动内容
+
浮动内容
+
+在这种情况下，.parent 的高度可能为0。 +``` +## 清除浮动的方法 +1.使用伪元素：这是现代CSS中推荐的清除浮动的方法。 +``` +.clearfix::after { + content: ""; + display: table; + clear: both; +} +在需要清除浮动的父元素上应用 .clearfix 类。 +``` +2. 使用额外的清除元素：在浮动元素之后添加一个具有 clear 属性的元素。 +``` +
+
浮动内容
+
浮动内容
+
+
+``` +3. 浮动容器：有时，你可以将浮动元素包裹在一个独立的浮动容器中，并在外部容器中使用清除浮动。 +## 浮动与布局 +1. 两栏布局：左侧浮动栏和右侧内容栏。 +``` +
+
侧边栏
+
主要内容
+
+``` +2. 三栏布局：左栏、右栏和中间内容栏。通常，中间内容需要一些特殊的处理来确保它不被浮动元素覆盖。 +``` +
+
左栏
+
+
主要内容
+
+
右栏
+
+中间内容部分的 .inner 需要适当的宽度和 margin 来确保不被左右浮动栏覆盖。 +``` \ No newline at end of file -- Gitee