CSS-基础知识

CSS语法规范

​

---

CSS代码风格

1.样式格式书写

​

2.样式大小写

​

​

3.空格规范

​

---

CSS基础选择器

1.标签选择器

​

---

2.类选择器

​

​

​ ​

 特殊-多类名的使用

​ ​

​​

---

3.id选择器

​

---

>id选择器与类选择器的区别

​

---

4.通配符选择器

​

---

>基础选择器总结

​

---

CSS复合选择器

1. 后代选择器

2.子元素选择器

3.并集选择器

4.伪类选择器

 4.1链接伪类选择器

 4.2focus伪类选择器

>复合选择器总结

---

CSS文字属性

CSS fonts(字体)属性用定义字体系列、大小、粗细、和文字样式(如斜体)。

1.font-family设置字体系列

​

---

2.font-size字号大小

​

在body中统一修改属性时，标题标签比较特殊，需要单独指定文字大小

​​

 ​​

---

 3.font-weight字体粗细

​

---

 4.font-style字体样式

​

---

5.font复合属性写法

​

---

>字体属性总结

​

---

CSS文本属性

CSS-text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

​

---

文本对齐text-align

​

---

 文本装饰text-decoration

​

---

 文本缩进text-indent

​

---

行间距line-height

​

---

>文本属性总结

​

---

CSS的引入方式

按照CSS样式书写的位置(或者引入的方式)，CSS样式表可以分为三大类:
1行内样式表(行内式)
2内部样式表(嵌入式)
3.外部样式表(链接式)

按照CSS样式书写的位置(或者引入的方式)，CSS样式表可以分为三大类:
1行内样式表(行内式)
2内部样式表(嵌入式)
3.外部样式表(链接式)

1.行内样式表

​

---

 2.内部样式表

​

---

 3.外部样式表

​

---

>CSS引入方式总结

​

---

 补充知识点

 

---

Emmet语法

1.快速生成HTML语法

2.快速生成css样式

3.快速格式化代码

---

 CSS的元素显示模式

1.什么是元素显示模式

2.块元素

3.行内元素

3.行内块元素

>元素显示模式总结

4.元素显示模式转换

---

CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1.背景颜色

2.背景图片

3.背景平铺

页面元素既可以添加背景图片也可以添加背景颜色，只不过背景图片会压住背景颜色。

4.背景图片位置

 x,y默认都为center,而x的方位有right 和left，y的方位有top和buttom，可以通过对应方位词来确定哪一个是默认的

5.背景图像固定（背景附着）

 6.背景复合写法

7.背景色半透明

>背景总结

---

 CSS三大特性

css有三个非常重要的特性，分别是层叠性，继承性，优先级

1.层叠性

 2.继承性

 

注意，会继承父标签的某些样式，并非所有样式。一般与文字相关的都会继承。

2.1行高的继承

3.优先级

 3.1优先级注意点

继承的权重是0，所以不会显示红色仍会显示默认的样式蓝色

3.2权重叠加问题

权重虽然会叠加，但永远不会进位

---

CSS盒子模型

1.盒子模型组成

2.边框（border）

2.1边框的复合写法

 3.表格的细线边框

4.边框会影响盒子实际大小

 5.内边距（padding）

5.1内边距复合属性

5.2内边距会影响盒子实际大小

 5.3 内边距应用-导航栏

 5.4内边距不会撑开盒子的情况

 6.外边距（margin）

6.1外边距应用-让盒子水平居中

 6.2外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

7.清除内外边距

 8.圆角边框

数值越大，弧度越明显

 

 

 9.盒子阴影

附带参数个人理解：
h-shadow:水平阴影位置，即x轴，正右负左
v-shadow:垂直阴影位置，即y轴，正下负上
blur:阴影虚实程度。由实到虚
spread:阴影大小
color:阴影颜色
inset:修改为内部阴影（默认外部无需写）

10.文字阴影

---

CSS浮动

1.传统网页布局的三种方式

 1.1标准流

 2.浮动

2.1为什么要用浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

 2.2什么是浮动？

 2.3浮动特性（重难点）

2.4浮动元素经常和标准流父级搭配使用

3.常见网页布局

4.浮动布局注意点

 5.清除浮动

5.1为什么要清除浮动

5.2清除浮动本质

5.3清除浮动语法

 5.4清除浮动方法

5.4.1额外标签法

 

5.4.2父级添加overflow属性

5.4.3父级添加after伪元素

5.4.4父级添加双伪元素

 5.5清除浮动总结

 定位

定位可以让盒子自由地在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

1.定位组成

2.静态定位static

3. 相对定位relative (重要）

 

4.绝对定位absolute（重要）

5.子绝父相

 6.固定定位fixed（重要）

 

 7.粘性定位sticky

8.定位总结

9.定位叠放顺序z-index

10.定位的拓展

---

网页布局总结

---

元素的显示和隐藏

常见的网页中的x本质上就是元素的隐藏

1.display属性

 2.visibility显示隐藏元素

 继续占有原来位置      不继续占有原来位置

 3.overflow溢出显示隐藏

/* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */
/* overflow: scroll; */
/* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
/* overflow: auto; */

 

---