diff --git "a/\345\220\264\345\230\211\347\216\262/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" "b/\345\220\264\345\230\211\347\216\262/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..925b431c1edbf5c5d2705ec2ca164d46c96bc63f --- /dev/null +++ "b/\345\220\264\345\230\211\347\216\262/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,246 @@ +# 笔记 + +### a标签有以下四种伪类 +- `:link` “链接”：超链接点击之前 +- `:visited` “访问过的”：链接被访问过之后 +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 +css ++ 去掉小圆点: +`list-style: none;` ++ 让内容水平居中： +`text-align: center;` ++ 去边框: +`outline:none` + + +### 伪类： ++ `fast-child`：父类的第一个子类 ++ `last-child`：父类的最后一个子类 ++ `nth-child(n)`:第几个，2n就是偶数个2n-1就是奇数个 + +# 作业 +**21-32题目** +```html + + + + Document + + + +
+ + + + + 5 + +
+ + +
+ 1 + + 2 + + + 3 + + 4 + 5 + + + 6 + +
+ +
+ + 1 + 2 + + + 3 + + + 4 + +
+ + +
+ 1 + 1 + 3 + 4 + 5 + 5 +
+ +
+ + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ +``` diff --git "a/\345\220\264\345\230\211\347\216\262/20241016\345\261\202\345\217\240.md" "b/\345\220\264\345\230\211\347\216\262/20241016\345\261\202\345\217\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..533c67d850f6d4bfe14ed8625ecd5de0f2e3a516 --- /dev/null +++ "b/\345\220\264\345\230\211\347\216\262/20241016\345\261\202\345\217\240.md" @@ -0,0 +1,299 @@ +# 笔记 + +## 层叠和继承性 +### 层叠性 +主要内容 +- CSS的继承性 +- CSS的层叠性 + - 计算权重 + - 权重问题大总结 + - CSS样式表的冲突的总结 +- 权重问题深入 + - 同一个标签，携带了多个类名 + - !important标记 + +1. 继承性 + +- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 +- 关于盒子、定位、布局的属性，都不能继承。 + +2. 层叠性(就是处理冲突的问题) +- id 选择器 +- 类选择器、属性选择器、伪类选择器 +- 标签选择器、伪元素选择器 + +**选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器** + +- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 +- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。 + +### CSS样式表的冲突的总结 + +- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 +- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器 + +> 总结：就近原则。ID选择器优先级最大。 + + +### !important标记：优先级最高 + + +**（1）!important提升的是一个属性，而不是一个选择器** +**（2）!important无法提升继承的权重，该是0还是0** +**(3)!important不影响就近原则** + +## 盒子模型 + +### 盒子中的区域 +- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。 +- padding：内边距。 +- border：边框。 +- margin：外边距。 + +**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。 + ++ 举例2：利用 border 属性画一个三角形（更推荐的技巧） + +上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？ + +完整代码如下：（用 css 画等边三角形） + +```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; +} + +``` ++ 我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。 + +# 作业 +1. 题1，文字“中华人民共和国”是何种颜色？ 蓝色 +```html + + + +
+
+
+

中华人民共和国

+
+
+
+ +``` +2. 题2，文字“中华人民共和国”是何种颜色？ 红色 +```html + + + + +
+

+ + 中华人民共和国 + +

+
+ +``` +3. 题3，文字“中华人民共和国”是何种颜色？ 点是蓝色,文字是绿色 +```html + + + +
+ +
+ + +``` +4. 文字“中华人民共和国”是何种颜色？ 绿色 +```html + + + +
+
+
+

中华人民共和国

+
+
+
+ + +``` +5. 文字“中华人民共和国”是何种颜色？（面试题） 蓝色 +```html + +
+

+ 中华人民共和国 +

+
+ + + +``` +6. 蓝色 +```html + + +
+

+ 中华人民共和国 +

+
+``` +7. 黄色 +```html +
+
+
+ 中华人民共和国 +
+
+
+ + +``` + +## 盒子模型作业 + +1. 说出下面盒子的真实占用的宽高，并画出盒子模型图 +width:242px; +height-top:212px; +height-bottom:232px; +```css + + div{ + width: 200px; + height: 200px; + padding: 10px 20px 30px; + padding-right: 40px; + border: 1px solid #000; + } +``` + +2. 说出下面盒子的真实占用的宽高，并画出盒子模型图 +盒子总宽度:302px; +总高度:272px; + +```css + div { + width: 200px; + height: 200px; + padding-left: 10px;//被覆盖 + padding-right: 20px;//被覆盖 + padding: 40px 50px 60px; + padding-bottom: 30px; + border: 1px solid #000;} + +``` +3. 有如下盒子模型图，请写出代码，尝试用最简单的方式 +```css + div{ +width: 123px; +height:123px; +padding: 20px 40px; +border: 1px solid black; + } +``` +4. 有如下盒子模型图，请写出代码，尝试用最简单的方式 +```css + div{ +width: 123px; +height:123px; +padding: 20px 40px 20px 20px; +border: 1px solid black; + } +```