CSS（层叠样式表）学习笔记

层叠样式表（cascading style sheet)

1 认识标签语义化

赋予标签意义，使每个标签各有各自的含义，在合适的位置使用合适的标签对，当用户在进行信息的搜集时使其更加排列向前，便于提高用户的体验（优化搜索引擎）
当一个网页去掉样式后，结构内容依旧非常清晰（表示这是一个非常好的语义化网页）

网页加上样式表的样子.png 去掉样式表之后的样子.png

比如：＜ｐ＞段落标签，< div >快标签

• 语意重的地方多用有语意的标签
• 网页中常见的样式：网页中背景颜色，文本的颜色和大小，图片的大小以及位置的定位
• CSS书写环境用＜style></style>来进行搭建（style标签对放在head头部）
• 元素的显示模式=标签+标签属性+标签内容
• 使用结构语法：
  元素{元素属性1:属性值；
  元素属性2:属性值；
  }（使用多个属性时用分号隔开）

2 认识元素中常见的各种类型

1 认识基本元素的类型

• 块状元素(block)
  1 在标注文档流中，所属标签独自霸占一行，且从上到下依次排列
  2 常见块状元素：p/h1-h6/div/ul-li/ol-li/
  3 块状元素在样式表中可以设置宽度和高度
• 内联元素（inline）
  1 在标准文档流中。所属标签会依次从左到右，且从上到下排列
  2 常见内联元素：a/strong/span/del/
  3 内联元素在样式表中不可以设置宽度和高度
• 内联块元素（inline-block）
  1 在标准文档流中，所属标签会依次从从左到右且从上到下依次进行排列
  2 常见内联块元素：img/input
  3 内联块元素在样式表中可以设置宽和高

2 元素类型之间的装换

• 快元素转换内联元素：使用display：inline-block（让块元素具有内联元素的属性）
• 内联元素装换为快元素：使用display：block（让内联元素具有快元素的属性）

3 CSS常用属性

• text-align:文字对齐方式（left、center，right，justify（一般要设置宽度））
• text-indent：文字缩进（用em单位）
• color:文字颜色
• font-size：文字字体大小
• text-decoration:去掉下划线
• list-style：去掉序列列表的序列号

4 居中对齐

• 在父级块元素中设置text-align:center（内联元素和内联块元素）
• 在内联块(行内元素)元素和内联元素(行内快元素)中设置了宽和高的时候text-align:center（不会起作用）
• 在块级元素设置margin：0 auto（进行居中）

3 认识元素选择器

1 基础选择器：

• 复合选择器：标签选择器，类选择器，id选择器，通配符选择器

2 复合选择器：悬着器的叠加使用

• 并集选择器(标签选择器+内选择器组合使用，最多只能使用一次)
• 交集选择器(多个选择器同时设置一个属性)

1 id选择器

• 每个元素只能有一个id选择，id选择器会限制次数
• 使用结构语法：id=“id值” (#)

2 类选择器

• 类选择命名规范（开头不要以数字开头，可以使用字母大小写，单词缩写或者单词命名不可用标签名代替）
• 使用结构语法：class="命名值"（.）

3 子代选择器

• 父级元素下的第一个元素（用>来进行指定）
• 使用结构语法：body>div（body>div）

4 标签选择器

• 直接使用标签元素进行选择
• 使用结构语法：body（直接写标签）

5 多个选择器

• 多个元素设置同一个属性
• 使用结构语法:.p,h,a（中间用逗号隔开）

6 后代选择器

• 父级元素下的同级标签，
• 使用结构语法：body div（用空格隔开）

7 组合选择器

• 多个类型的选择器进行同一个属性设置
• p.a#id

8 通配符选择器

• 为全部标签进行同一个属性进行设置
• 使用结构语法：使用*

9 伪选择器（一般用在a标签）

• a:link：默认属性
• a:visited:鼠标访问过后显示的样式
• a:hover:鼠标悬停时显示的信息
• a:action:鼠标点击时显示的样式

4 css书写位置

1 css构造函数中书写(在head中使用)
2 行内式(直接在标签中使用属性)
3 外部式(将css中要设置的各种属性在外部的一个单独css文件中进行编辑)

三种样式比较.png

5 css三大特征

1 :继承

• 子级元素可以继承父级的一部分特征
• 并不是所有的属性都会被继承
• 文字类的属性基本会被子级继承

2 :层叠

• 同一个属性，前面的css属性会被后面相同的css属性代替

3 :优先级(相对于选择器)

• 在同一个属性里面，属性会继承权重高的属性
• 权重值对比(标签选择器<类选择器<id选择器<行内样式<!important)
• 权重值会叠加(id选择器+标签选择器>id选择器)
• 多个选择器的时候！继承属性值的权重为零

优先级.png

6 认识字体

1 font-常见字体的属性

• 字体大小：font-size
• 字体粗细：font-weight
• 字体颜色：color
• 字体斜体：font-style
• 字体行高：line-height
• 文字缩进：text-indent(文字可以为负值)
• 文字对齐方式：text-align
• 文字的字体:font-family(chrome浏览器查找字体:escape("查找的字体"))

1 .2字体的css书写顺序

• 样式:font-style(比如:italic,斜体)
• 粗细
• 大小(字体设置时必须添加此属性)
• 行高(只能放在字体属性的最后，因为fon有默认的行高)
• 字体样式(字体设置时必须添加此属性)

1 text-认识文本的各种属性

• 文本下划线：text-decoration：none(去掉下划线)
• 文本下划线：text-decoration：underline(设置文本下划线)
• 文本

7 图片和背景色(img，background-img:url("图片文件路径"))

1 背景色

• background-color：设置背景色
• background-image：背景图片
• background-repeat：no-repeat(背景图片不重铺)
• background-repeat：x(水平重铺)
• background-repeat：y(垂直居中)
• background-position：背景定位(六个方向取值)
• background-attachment:图片滚动(scroll fixed)

2 背景图和插入图的区别

• 背景图相对于更容易被定位
• 插入图片容易占位
• 插入图片语义高，容易被搜索引擎收录
• 插入图片有bug(使用vertical-align:bottom)对块状元素不起作用

8 盒子模型

1 border-边框(常见属性)

• border-color：边框颜色
• border-style：边框样式（solid，dashed，dotted，none）
• border-width：边框粗细(normal,bold)
• border-collapse：边框合并
• 边框使用顺序：粗细、样式，颜色

2 padding-内边距(盒子和盒子里面的内容)

• 内边距取值有四个(top,right,bottom,left)
• 内边距会撑开盒子(原有的宽度和高度会累加)
• 内边距的top和bottom不起作用
• 内边距内容宽度=盒子内容的宽度+左右的边框+左右的外边距+左右的内边距
• 内边距内容高度=盒子内容的高度+上下的边框+上下的外边距+上下的内边距

3 margin-外边距（盒子和盒子之间的距离）

• 外边距的取值有四个（top，right，bottom，left）
• 外边距的top和bottom对行内样式不起作用

4 盒子外边框合并
4.1 父子级的边框合并问题

• 为父级顶部设置边框
• 为父级顶部设置内边距
• 直接为父级盒子设置overflow：hidden

5 居中(margin:0 auto)块元素居中对齐

• margin-left:auto(盒子左边的区域充满)
• margin-right:auto(盒子右边的区域充满)

9 浮动-font

1 认识浮动的基本结构

• 浮动可以让块元素在一行显示(也可以让内联元素变成内联块元素的属性)
• 浮动取值(left/right)
• 浮动不脱离标注流(盒子会脱离标准流)

2 浮动的对齐方式

• 当两个兄弟级的并列的盒子，(他们的顶端会对齐)
• 兄弟级的并列的盒子，a不浮动b浮动(他们的底端会对齐)
• 当兄弟级的盒子都浮动的时候(浮动的时候都要浮动)
• 浮动的书写位置显示(left/right)
• 浮动的模式转换

3 浮动造成的塌陷

• 为父级盒子设置高度
• 在子级元素的最后添加另一个盒子:clear:both
• 为父级盒子加:overflow：hidden(强制检测自身高度)
  注意事项：父级元素中有两个子集元素在进行一左一右的浮动时候，当两个元素高度不一样的时候，下面的元素会被阻挡或者产生其他不知道的影响

4 溢出隐藏

• overflow：hidden(隐藏溢出的内容)
• overflow：auto(自动判断内容是否溢出)
• overflow：visible(显示溢出的内容)
• overflow：scroll(当内容溢出的时候自动设置滚动条)

5 元素的浮动和display的区别

• 元素会脱离标注文档流(同时会让周围的元素环绕当前浮动的元素)
• display对其的方式是以基线为准(可以使用vertical属性来设置对其方式)，float是以顶部作为对其
• 浮动后不能设置父级元素的text-align:center
• display:inline-block(多个元素之间会有空隙)//可以使用负边距来解决

10 定位-position

1 静态定位(static)

• 网页的默认显示模式

2 相对定位(relative)

• 相对于自己原来的位置进行定位
• 取值有四个(left/right/top/bottom)可以取负值
• 脱离标注流
• 初始的位置被自身占位
• 取值方向(正值往盒子里面走、负值往外面走)

3 绝对定位(absolute)

• 脱离标准流
• 取值有四个(left/top/right/bottom)
• 使用定位的坐标来进行定位

4 固定定位(fixed)

• 网页的窗口相应位置进行定位
• 取值有四个(left/top/right/bottom)
• 脱离标准流

5 定位注意的问题(绝对定位)
5.1 当父级元素没有定位，子级元素定位

• 子级定位坐标会以第一屏为基准

• 父级有定位,子级会以最近的具有定位的父级进行绝对定位(使用规则-"子绝父相")

                                                                              -9.1