From 7a36d0c517be736be89b410c6a5d38efbc1b9959 Mon Sep 17 00:00:00 2001
From: Zhoujiahui <539943419@qq.com>
Date: Mon, 29 Jul 2024 09:04:12 +0800
Subject: [PATCH] ..

---
 aboutCSS.md | 190 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 aboutCSS.md

diff --git a/aboutCSS.md b/aboutCSS.md
new file mode 100644
index 0000000..02593fa
--- /dev/null
+++ b/aboutCSS.md
@@ -0,0 +1,190 @@
+# 与 css 相关，多学习 css
+
+## css inset
+-   inset : top | right| bottom | left
+-   使用例：
+    ```css
+    .className {
+        inset: 4px 8px; /* 上下 | 左右 */
+        inset: 5px 15px 10px; /* 上 | 左右 | 下 */
+        inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
+    }
+    ```
+## css 过渡 transition
+-   有transition-property、transition-duration、transition-timing-function 和 transition-delay这几个属性，不过一般使用时应该都是用transition合起来写。
+-   使用例：
+
+    ```css
+    .className {
+        /* property name | duration | timing function | delay */
+        transition: margin-right 4s ease-in-out 1s;
+
+        /* Apply to 2 properties */
+        transition: margin-right 4s, color 1s;
+    }
+    ```
+
+## css 动画相关
+
+-   分为“定义”与“使用”两个阶段。
+-   “定义”阶段的 keyword 为@keyframes，例：
+
+    ```scss
+    // 每个时间点填对应时间点的style
+    @keyframes animationName {
+        0% {
+            border-radius: 1px;
+        }
+        50% {
+            border-radius: 12px;
+        }
+        100% {
+            border-radius: 123px;
+        }
+    }
+    ```
+
+-   “使用”阶段的 keyword 为 animation，使用 animation 绑定动画，例
+    ```scss
+    div {
+        animation: animationName 5s;
+    }
+    ```
+-   animation 有许多属性
+
+    ```scss
+    div {
+        // 绑定的动画名
+        animation-name: animationName;
+        // 动画执行总时长
+        animation-duration: 5s;
+        // 速度曲线。默认是 "ease"。
+        animation-timing-function: linear;
+        animation-delay: 2s;
+        // 播放次数，默认1
+        animation-iteration-count: infinite;
+        // 是否在下一个周期逆向播放
+        animation-direction: alternate;
+        // 是否正在播放（）
+        animation-play-state: running;
+        // 简写
+        animation: animationName 5s linear 2s infinite alternate;
+        // 多个动画之间使用逗号进行隔开
+        animation: a1..., a2...;
+    }
+    ```
+
+## before 与 after
+
+-   伪元素，通过 content 来指定内容，before 就是在前面，after 就是在后面（哇好有道理呢）
+-   用途一般是加个 icon 啥的，content 可以为 url(...)
+-   不能应用在替换元素上，比如 `<img>`
+-   伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素
+    使用例：
+
+    ```css
+    a {
+        color: #0000ff;
+        text-decoration: none;
+    }
+
+    a::before {
+        content: '🔗';
+    }
+    ```
+
+-   使用 inherit 使子元素拥有与父元素相同的特定属性值
+    使用例：
+
+    ```css
+    div {
+        position: relative;
+        background: url('your-image-url.jpg');
+    }
+
+    div::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: inherit;
+        z-index: -1;
+    }
+    ```
+
+## !important 相关
+
+-   不到万不得已不要用，是不好的写法
+-   如果你的 important 不够 important,那可以写 class 的时候多写点前缀，例：
+
+    ```scss
+    // 一般
+    .ant-slider-rail {
+        background-color: rgb(141, 93, 56) !important;
+    }
+    // 优先级特别高
+    .slider .ant-slider .ant-slider-rail {
+        background-color: rgb(141, 93, 56) !important;
+    }
+    ```
+
+## xx[a=xxx]的使用
+
+-   这玩意叫属性选择器
+-   案例：
+
+    ```css
+    a {
+        color: blue;
+    }
+
+    /* 以 "#" 开头的页面内部链接 */
+    a[href^='#'] {
+        background-color: gold;
+    }
+
+    /* 包含 "example" 的链接 */
+    a[href*='example'] {
+        background-color: silver;
+    }
+
+    /* 包含 "insensitive" 的链接，不区分大小写 */
+    a[href*='insensitive' i] {
+        color: cyan;
+    }
+
+    /* 包含 "cAsE" 的链接，区分大小写 */
+    a[href*='cAsE' s] {
+        color: pink;
+    }
+
+    /* 以 ".org" 结尾的链接 */
+    a[href$='.org'] {
+        color: red;
+    }
+
+    /* 以 "https" 开始，".org" 结尾的链接 */
+    a[href^='https'][href$='.org'] {
+        color: green;
+    }
+    ```
+
+    -   属性不一定要是 href 什么的，自己定也没关系。
+    -   案例：
+
+    ```css
+    /* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
+    div[lang] {
+        font-weight: bold;
+    }
+
+    /* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
+    div[lang~='en-us'] {
+        color: blue;
+    }
+
+    /* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
+    div[lang='pt'] {
+        color: green;
+    }
+    ```