From bd1e515189d60afcf5183b668d0e6c3dc1c837dd Mon Sep 17 00:00:00 2001 From: Zhangyuyan <3136627705@qq.com> Date: Mon, 14 Oct 2024 19:25:10 +0800 Subject: [PATCH 1/2] 20241014 --- .../20241012/test11.html" | 26 ++++++++++ .../20241012/test12.html" | 25 +++++++++ ...\347\233\256\347\273\203\344\271\240.html" | 35 +++++++++++++ .../20241014/test02.html" | 23 +++++++++ .../20241014/test03.html" | 30 +++++++++++ .../20241014/test04.html" | 18 +++++++ .../20241014/test05.html" | 31 +++++++++++ .../20241014/test06.html" | 27 ++++++++++ ...\346\236\234\345\210\235\346\216\242.html" | 51 +++++++++++++++++++ ...\351\241\271\350\256\255\347\273\203.html" | 23 +++++++++ ...14\351\200\211\346\213\251\345\231\250.md" | 2 +- ...45\347\232\204\347\276\216\345\214\226.md" | 26 ++++++++++ 12 files changed, 316 insertions(+), 1 deletion(-) create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\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\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" new file mode 100644 index 00000000..5bf371d4 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" @@ -0,0 +1,26 @@ + + + + + test11 + + + +
+ + + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" new file mode 100644 index 00000000..40356b6e --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" @@ -0,0 +1,25 @@ + + + + + test12 + + + +
+ + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\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\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\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..8e8eea47 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\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,35 @@ + + + + + test01 + + + +
+
+

Welcome

+

This is the introduction section.

+
+
+

Post Title

+

Post content...

+ +
+ +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" new file mode 100644 index 00000000..952b182f --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" @@ -0,0 +1,23 @@ + + + + + test02 + + + +
+ + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" new file mode 100644 index 00000000..2e6e0985 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" @@ -0,0 +1,30 @@ + + + + + test03 + + + + + + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" new file mode 100644 index 00000000..3403fd64 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" @@ -0,0 +1,18 @@ + + + + + test04 + + + +

Special Title

+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" new file mode 100644 index 00000000..18acbf0a --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" @@ -0,0 +1,31 @@ + + + + + test05 + + + + + + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" new file mode 100644 index 00000000..176451fa --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" @@ -0,0 +1,27 @@ + + + + + test06 + + + +
+
+ + + + + +
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" new file mode 100644 index 00000000..b94f430a --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" @@ -0,0 +1,51 @@ + + + + + test07 + + + +
头部
+
+
内容
+
+
底部
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" new file mode 100644 index 00000000..5fc385d4 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" @@ -0,0 +1,23 @@ + + + + + + test08 + + + + +
+ + 这是一段没有感情的文字 +
+ + + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" index 2b34826e..5012f681 100644 --- "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" @@ -136,7 +136,7 @@ h3后面紧挨着的第一个兄弟 ``` ## 伪类（伪类选择器 ： ）——静态、动态 -伪类：同一个标签，不同的状态，有不同的样式。例如，查看前、后。 +伪类：同一个标签，不同的状态，有不同的样式。例如，查看前、后 1. `静态`伪类选择器：只能用于`超链接`的样式 - `:link` 链接：超链接点击之前 diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" new file mode 100644 index 00000000..196fbc81 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" @@ -0,0 +1,26 @@ +### 超链接的美化 + +`a{}`定义超链的属性，`a:link{}`定义超链点击之前的属性。 + +**`a{}`和`a:link{}`的区别：** + - `a{}`定义的样式针对所有的超链接(包括锚点) + - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) + +> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性） +> 在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范 + +```css +/*两个伪类的属性，可以用逗号隔开*/ +.nav ul li a:link , .nav ul li a:visited{ + text-decoration: none; + background-color: purple; + color:white; + } +/*去掉小圆点*/ +list-style: none; +/*让行高等于nav的高度，就可以保证内容垂直居中*/ +line-height: 50px; +height: 50px; +/*border-collapse属性：对表格的线进行折叠*/ +border-collapse: collapse; +``` \ No newline at end of file -- Gitee From 77b1495a8a9332bfcb22cd08568591e1258ae0b5 Mon Sep 17 00:00:00 2001 From: Zhangyuyan <3136627705@qq.com> Date: Wed, 16 Oct 2024 13:34:28 +0800 Subject: [PATCH 2/2] 20241016 --- ...\345\272\217\345\210\227\351\242\230.html" | 27 +++ .../20241016/test02.html" | 25 +++ .../20241016/test03.html" | 36 ++++ .../20241016/test04.html" | 24 +++ .../20241016/test05.html" | 31 ++++ .../20241016/test06.html" | 23 +++ .../20241016/test07.html" | 29 ++++ ...\345\255\220\346\250\241\345\236\213.html" | 19 +++ .../20241016/test09.html" | 21 +++ .../20241016/test10.html" | 18 ++ .../20241016/test11.html" | 19 +++ ...22\345\255\220\346\250\241\345\236\213.md" | 155 ++++++++++++++++++ 12 files changed, 427 insertions(+) create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\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\351\242\230.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/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/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\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\351\242\230.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\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\351\242\230.html" new file mode 100644 index 00000000..403f9b45 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\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\351\242\230.html" @@ -0,0 +1,27 @@ + + + + + 蓝色 + + + +
+
+
+

中华人民共和国

+
+
+
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" new file mode 100644 index 00000000..b5601234 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" @@ -0,0 +1,25 @@ + + + + + 红色 + + + +
+

+ + 中华人民共和国 + +

+
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" new file mode 100644 index 00000000..c9d56eb3 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" @@ -0,0 +1,36 @@ + + + + + 绿色 + + + +
+ +
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" new file mode 100644 index 00000000..1e0ba0f9 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" @@ -0,0 +1,24 @@ + + + + + 绿色 + + + +
+
+
+

中华人民共和国

+
+
+
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" new file mode 100644 index 00000000..88a577f7 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" @@ -0,0 +1,31 @@ + + + + + 蓝色 + + + +
+

+ 中华人民共和国 +

+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" new file mode 100644 index 00000000..abc4dddf --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" @@ -0,0 +1,23 @@ + + + + + 蓝色 + + + +
+

+ 中华人民共和国 +

+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" new file mode 100644 index 00000000..1242e886 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" @@ -0,0 +1,29 @@ + + + + + 黄色 + + + +
+
+
+ 中华人民共和国 +
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" new file mode 100644 index 00000000..4cdd8467 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" @@ -0,0 +1,19 @@ + + + + + test08 + + + +
真实占用的宽为262px,高为242px
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" new file mode 100644 index 00000000..a0ac0d15 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" @@ -0,0 +1,21 @@ + + + + + test09 + + + +
真实占用的宽为302px,高为272px
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" new file mode 100644 index 00000000..68ce810c --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" @@ -0,0 +1,18 @@ + + + + + test10 + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" new file mode 100644 index 00000000..fbd794e2 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" @@ -0,0 +1,19 @@ + + + + + test11 + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/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/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/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..710c7bac --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/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,155 @@ +## CSS的继承性 +**继承性**：某些属性，当给自己设置的时候，自己的后代也继承上了。从自己开始，直到最小的元素 + +- 关于文字样式的属性，都具有继承性。包括：color、 text-开头的、line-开头的、font-开头的 + +- 关于盒子、定位、布局的属性，都不能继承 + +> 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0 + +## CSS的层叠性——css处理冲突的能力 +css有着严格的处理冲突的机制。当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重： + +- id 选择器 +- 类选择器、属性选择器、伪类选择器 +- 标签选择器、伪元素选择器 + +**权重相同时**：第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则：大家权重相同，采用就近原则：谁描述的近，听谁的） + +### CSS样式表的冲突的总结 +1. 对于相同的选择器（如同是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +2. 对于相同类型的样式表（如同是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 +3. 外部样式表的ID选择器 > 内嵌样式表的标签选择器 +4. 对于同一个标签，如果用到的都是`内嵌样式表`，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁 +5. 对于同一个标签，如果用到的都是`外部样式表`，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁 + +### !important标记：优先级最高,给一个属性提高权重。这个属性的权重就是 无穷大 +语法： +``` +font-size:60px !important; +``` +1. !important提升的是一个属性，而不是一个选择器 +2. !important无法提升继承的权重，还是0 +3. !important不影响就近原则 + +PS：做网站的时候，!important 尽量不要用。否则会让css写的很乱 + +## 盒子模型box model——如div、span、a +图片、表单元素一律看作文本，不是盒子 + +### 盒子中的区域 +一个盒子中主要的属性就5个：width、height、padding、border、margin + +- width和height：`内容`的宽度、高度（不是盒子的宽度、高度） + - 注意：宽度和真实占有宽度，不是一个概念 + - 真实占有宽度 = 左border + 左padding + width + 右padding + 右border + - 如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width +- padding：内边距 +- border：边框 +- margin：外边距 + +### 标准盒模型和IE盒模型 +- **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 +- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度 + +### ``标签也有margin +整个网页最大的盒子是``，即浏览器。``是``的儿子。浏览器给``默认的margin大小是8个像素px，此时``占据了整个页面的一大部分区域，而不是全部区域 + +### padding区域也有颜色 +padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域** + +### padding有四个方向 +方法有两种，第一种写小属性；第二种写综合属性，用空格隔开 +```css + /*小属性*/ + padding-top: 30px; + padding-right: 20px; + padding-bottom: 40px; + padding-left: 100px; +``` +```css + /*综合属性*/ + padding: 30px 20px 40px 100px;(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的） + padding: 20px 20px 20px;(上、右左、下) + padding: 40px 40px;(上下、左右) + padding: 100px;(上下左右) +``` +```css + /*用小属性层叠大属性*/ + padding: 20px; + padding-left: 30px; +``` + +### 一些元素，默认带有padding(如ul标签) +```css + /*使用`*`进行清除*/ + *{ + margin: 0; + padding: 0; + } +``` + +但`*`的效率不高，所以我们使用并集选择器，罗列所有的标签 +```css +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ + margin:0; + padding:0; +} +``` + +### 认识border +边框三要素：像素（粗细）、线型、颜色（默认为黑色） +```css +border: 2px solid red; +``` +较稳定的border-style:solid、dashed、dotted + +### border拆分 +两大拆开方式： + +- 按`三要素`拆开：border-width、border-style、border-color（一个border属性是由三个小属性综合而成的,如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序） +- 按`方向`拆开：border-top、border-right、border-bottom、border-left +- 按`三要素和方向`拆：把每个方向的每个要素拆开（3*4 = 12） +``` +border-width:10px 20px; +border-style:solid dashed dotted; +border-color:red green blue yellow; +``` + +小技巧：在sublime text中，为快速输入`border:1px solid red;`这个属性，可直接输入`bd`，然后选第二个后回车 + +### 利用 border 属性画直角三角形、等边三角形、扇形（小技巧） +```css +/*直角三角形*/ +div{ + width: 0; + height: 0; + border: 50px solid transparent; + border-top-color: red; + border-bottom: none; +} +``` + +```css +/*等边三角形*/ +.div1{ + width: 0; + height: 0; + border-top: 30px solid red; + /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */ + border-left: 20px solid transparent; + border-right: 20px solid transparent; +} +``` + +```css +/*扇形*/ +.div1{ + width: 0; + height: 0; + border-top: 30px solid red; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-radus: 20px; +} +``` \ No newline at end of file -- Gitee