From ee8686527da75c5fb5b246e63618f9edbc02be84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=80=9D?= <1662679300@qq.com>
Date: Wed, 9 Oct 2024 20:26:08 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B8=90=E5=8F=98=E7=AC=94=E8=AE=B0?=
=?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...60\345\222\214\344\275\234\344\270\232.md" | 151 ++++++++++++++++++
1 file changed, 151 insertions(+)
create mode 100644 "\346\235\216\346\200\235/20241009-\346\270\220\345\217\230\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md"
diff --git "a/\346\235\216\346\200\235/20241009-\346\270\220\345\217\230\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/\346\235\216\346\200\235/20241009-\346\270\220\345\217\230\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..75f8855
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241009-\346\270\220\345\217\230\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md"
@@ -0,0 +1,151 @@
+## 渐变
+
+渐变分为：
+
+ 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+
+ 径向渐变：从一个中心点开始沿着四周产生渐变效果。
+
+ 重复渐变。
+
+
+### 线性渐变
+
+代码
+```
+
+background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+
+background-image: linear-gradient(to right, rgb(99, 163, 247),white);
+
+```
+
+方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
+
+不写方向，表示默认的方向是：从上往下
+
+```
+
+
+
+
+
+```
+
+突变
+```
+
+
+
+
+
+
+
+```
+
+### 径向渐变
+
+格式
+```
+background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+```
+
+中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
+
+辐射半径为100px，中心点在中间
+
+```
+
+
+
+
+
+
+
+```
+
+## 作业
+
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-09%20195539.png)
+
+```
+
+
+
+
+
+
+
+ 中华人民共和国
+
+
+
+```
\ No newline at end of file
--
Gitee
From fccf74895f7b2f120f5f5ff0104262fd6601741e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=80=9D?= <1662679300@qq.com>
Date: Sun, 13 Oct 2024 18:43:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?20241023css=E6=A0=B7=E5=BC=8F=E8=A1=A8?=
=?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=AC=94=E8=AE=B0=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...60\345\222\214\347\273\203\344\271\240.md" | 481 ++++++++++++++++++
1 file changed, 481 insertions(+)
create mode 100644 "\346\235\216\346\200\235/20241012-css\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md"
diff --git "a/\346\235\216\346\200\235/20241012-css\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md" "b/\346\235\216\346\200\235/20241012-css\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..dfcff6a
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241012-css\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md"
@@ -0,0 +1,481 @@
+
+## css
+
+CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。
+
+CSS 优点：
+
+1. 使数据和显示分开
+2. 降低网络流量
+3. 使整个网站视觉效果一致
+4. 使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）
+
+### css语法
+
+语法格式：
+
+```html
+选择器{ 属性名: 属性值; 属性名: 属性值; }
+```
+
+或者可以写成：
+
+```css
+选择器 {
+ k: v;
+ k: v;
+ k: v;
+ k: v;
+}
+选择器 {
+ k: v;
+ k: v;
+ k: v;
+ k: v;
+}
+```
+
+解释：
+
+ 选择器代表页面上的某类元素，选择器后一定是大括号。
+ 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
+ 冒号和属性值之间可以留一个空格（编程习惯的经验）。
+ 如果一个属性有多个值的话，那么多个值用**空格**隔开。
+
+##### css 代码的注释
+
+CSS 只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`
+
+
+ 一行文字
+
+```
+
+ 在 head 标签中加入`
+ ```
+ 空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。
+
+
+ 交集选择器：选择器之间紧密相连
+
+ 定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。
+ 如果后一个选择器是类选择器，则写为`div.special`；如果后一个选择器 id 选择器，则写为`div#special`。
+
+
+ 并集选择器（分组选择器）：用逗号隔开
+
+
+ 伪类选择器
+
+ 伪类选择器分为两种。
+
+ （1）**静态伪类**：只能用于**超链接**的样式。如下：
+
+ `:link` 超链接点击之前
+ `:visited` 链接被访问过之后
+
+ PS：以上两种样式，只能用于超链接。
+
+ （2）**动态伪类**：针对**所有标签**都适用的样式。如下：
+
+ `:hover` “悬停”：鼠标放到标签上的时候
+ `:active` “激活”： 鼠标点击标签，但是不松手时。
+ `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+
+## 练习
+
+
+选择所有的plate
+代码：
+```
+
+
+
+
+```
+
+
+选择所有的bento
+代码：
+```
+
+
+
+
+
+
+```
+
+
+选择id为fancy的plate
+代码:
+```
+
+
+
+
+```
+
+
+选择plate里面的apple
+代码：
+```
+
+
+
+
+
+```
+
+
+选择id为fancy的plate中的pickle
+代码：
+```
+
+
+
+
+
+
+```
+
+
+选择small的apple
+代码:
+```
+
+
+
+
+
+
+
+```
+
+
+选择small的orange
+代码：
+```
+
+
+
+
+
+
+
+```
+
+
+选择bento中的small orange
+代码：
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+