寒假第二周总结

# css的知识复习

 

## 选择器

 

选择器的作用：

 

选择器的作用就是根据不同的标签来选择出来

 

选择器的分类：基础选择器和复合选择器

 

基础选择器是由单个选择器组成的

 

其又包括：标签选择器、类选择器、id选择器和通配符选择器

 

标签选择器（属性选择器）：根据属性选择名和属性值选中元素（通过css中选中属性来给其规定样式，也可以属性给值专指某个元素，还可以选中包含某个值的元素，例如class元素包含b并选定class~=b时，则例如百度属性值包含了b就会被选中）

 

类选择器：单独选择一个或者多个标签的时候会选择类选择器（样式点定义 结构类调用 一个或多个 开发最常用）

可以出现多个类名，但必须用空格分开，可以分别具有这些样式

常见的命名规则：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

登录条：loginbar

 

id选择器：用#来定义选择器，id属性命名（样式#定义，结构id调用，只能调用一次，被人切勿使用）

 

通配符选择器：使用*定义，表示选取页面全部元素（标签）

 

## 字体属性

 

1. font-size

 

元素内部文字的尺寸的大小

 

1）px:像素：简单的理解为文字的高度占多少个像素（绝对单位）

2）em：相对单位（相对于父元素的大小）（每个元素都有字体大小，如果元素设定字体大小会继承父元素的字体大小，如果没有父元素则会使用基准字号（浏览器默认的字体大小）

 

>user agent(UA)用户代理（浏览器）

 

2. font-weight

 

文字粗细程度，可以取值数字，可以取值预设值（normal默认值相当于400）（bold相当于700）（每个字体的粗细程度跟适配有关，不是每个数字都能表达，一般常用的就是normal和bold）

 

strong，默认加粗（strong表示重要的内容，不能忽略）

 

3. font-family

 

文字类型（例如：微软雅黑）

 

必须用户计算机中存在的字体才会有效

 

使用多个字体，用以匹配不同环境（会从左到右依次寻找哪个存在用哪个【中英文不互通】）

 

sans-serif,非衬线字体（指字体的边缘未修饰）（指的是系统字体中的一类，当别的字体都没有时到它会自动在系统中寻找可用的字体）

 

4. font-style

 

字体样式，通常用它设置斜体（italic）

 

>i元素，默认元素为倾斜字体（语义：表示这块是一个特殊文本，应用特殊的语调来朗读），实际使用中通常用于表示一个图标

 

em元素：表示强调的内容（也是默认的斜体）

 

5. text-decoration

 

文本修饰，表示给文本加线。（后面跟线的样式）

 

例如：line-through（表示中间穿过的线），over-line（上面加一条线），under-line（下面加一条线）

 

a元素默认的就是下面加了一条线，del元素：表示废弃的，错误的内容（默认用于line-through）s元素：表示过期的元素(默认用line-through)

 

6. line-height

 

表示每行文本的高度，该值越大，每行文本的距离越大

 

设置行高为容器的高度，可以让单行文本垂直居中（指上下居中）

 

行高可以设置为纯数字，表示当前元素的字体大小的相对距离

 

7. color

 

元素内部的文字元素

 

**预设值**：定义好的单词

 

**三原色，色值**：光学三原色（红，绿，蓝）（其他颜色都可以用其来组合）（每个元素可以用0-255之间的数字来表示，这个数字叫做数值

 

```

rgb表示法：

color:rgb(0,255,0)(这三个数分别对应红、绿、蓝)

hex（16进制）表示法：

也是书写三个数字    color:#008c8c(每两位对应一个颜色)（且每两个数字对应的是16进制）(如果三个颜色的个位和十位都相同则可以简写直接写一个即可)

黑色：#000

白色；#fff

紫色:#f0f

青色:#0ff

黄色:#ff0

灰色:#ccc

```

 

## 样式表

 

内部样式表：放在head里用style规定样式，可以方便控制整个页面的样式（在html里书写样式）

 

行内样式表：在元素标签内部style属性规定样式（适用于简单的样式）

 

外部样式表：将样式写到css文件中，再引入css文件

 

## chrome调试工具使用

 

1. ctrl+滚轮可以放大开发者工具代码大小

 

2. 左边是html元素结构，右边是css样式

 

3. 右边css样式可以改变数值和查看颜色

 

4. ctrl+0复原浏览器大小

 

5. 如果点击元素，发现右侧没有样式引入，极可能是类名或者样式错误

 

6. 如果有样式，但是有黄色感叹号，则是样式属性书写错误

 

## emmet语法

 

1. 生成标签，直接输入标签名按tab键即可

 

2. 如果想要生成多个相同标签，加上*就可以了，比如：div*3，就可以生成3个div

 

3. 如果有父子级关系的标签，可以用>，比如：ul>li就可以了

 

4. 如果有兄弟关系的标签，用+就可以了

 

5. 如果生成带有类名或者id名字的，直接写.demo或者#two  tab键就可以了

 

6. 如果生成的div类名是有顺序的，可以用自增符号$

 

7. 如果想要在生成的标签内部写内容就可以用{}表示

 

8. 在保存时自动格式化代码，设置中找到文本编译器可以自动格式化

 

## 复合选择器

 

是由基础选择器组合形成的，可以更加高效的，准确的选择目标标签

 

通常包括：后代选择器、子选择器、并集选择器、伪类选择器

 

后代选择器：（包含选择器，可以选择父元素里的子元素写法就是把外层标签写在前面，内层标签写在里面用空格隔开）

 

子元素选择器:只能选择最近一级的元素，只能选择亲儿子元素（加上>可以达到这样的效果）

 

并集选择器：可以选择多组标签，同时给定样式。（用逗号隔开，最后一个不加逗号）

 

伪类选择器：用于向某些选择器添加特殊效果，比如给链接加上特殊效果（用冒号表示）（记忆：love hate）

 

hover：表示鼠标悬停的状态

 

active：鼠标按下的状态

 

link：表示超链接未访问的状态

 

visited：表示超链接已经访问过的状态

 

focus伪类选择器：用于选取获得焦点的表单元素（一般是input表单元素使用）

 

## css的显示模式

 

html元素一般分为块元素和行内元素两种类型

 

常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<div>等

 

特点：

 

1. 比较霸道，自己独占一行

 

2. 高宽度，外边和内边距都可以控制

 

3. 宽度默认是容器的100%

 

4. 是一个容器及盒子，可以放行内或者块级元素

 

注意：文字类不能放块级元素，比如<p>、<h1>~<h6>

 

常见的行内元素：<a><strong><b><em><i><del><ins><s><u><span>等，其中<span>标签最典型的，有时也叫做内联元素。

 

行内元素特点：

 

1. 相邻行内元素在一行上，一行可以显示多个

 

2. 高宽直接设置无效的

 

3. 默认高度就是他本身的内容高度

 

4. 行内元素只能容纳文本元素或其他行内元素

 

行内块元素：<img><input><td>同时具有行内元素和块元素的特点

 

转换显示模式：display：block（转换为块级元素）display:inline(转换为行内元素)

 

## css的背景

 

background-color定义背景颜色，transparent表示透明

 

background-image描述背景图片（加上url用绝对或者相对定位）

 

background-repeat属性对背景图片进行平铺（默认是平铺的）（repeat-x对于x轴水平平铺，repeat-y对于垂直平铺）

 

background-position属性改变图片的位置

1. x轴y轴跟方位名词有关；

 

2. 如果后面参数是精确单位则一定是先x轴再y轴，只有一个数值则是x轴的，另一个默认垂直居中

 

3. 如果是精确和方位混用，还是第一个是x轴，第二个是y坐标

 

background-attachment设置背景是否固定或者随着页面其余部分滚动

 

背景元素复合写法

 

background：背景颜色 背景图片地址 背景平铺 背景是否滚动 背景图像位置（一般约定的顺序，没有固定顺序）

 

背景色透明

 

background：rgba（0,0,0,0.3）;前面三个是三原色，最后一个是alpha透明度(0~1)(可以把透明度的值的0省略不写)

 

# 继承

 

子元素会继承父元素的某些属性

 

通常，跟文字属性相关的属性都能被继承

 

# 层叠

 

声明冲突：同一个样式多次用到同一个元素

 

层叠：解决声明冲突的过程，浏览器自动处理

 

## 1. 比较重要性

 

重要性从高到低:

 

1） 作者样式表中的！important样式(最高样式)在样式后加一个!important

2）作者样式表中的普通样式

3）浏览器默认样式表中的样式

 

## 2. 比较特殊性

 

看选择器

 

总规则：选择器选中的范围越窄，越特殊

 

具体规则：通过选择器，计算出一个4位数（xxxx）（256进制）

 

1. 千位：如果是内联样式，记作1，否则记为0（相当于它最大）

2. 百位：等于选择器中所有id选择器的数量

3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

 

## 3. 比较源次序

 

代码书写靠后的胜出

 

## 应用

 

1. 重置样式表

 

书写一些作者样式，覆盖浏览器默认样式

 

重置样式表 -> 浏览器默认样式

 

常见的重置样式表：normalize.css   reset.css   meyer.css  

 

2. 爱恨法则

 

link > visited > hover > active(书写顺序不能乱)

# 属性值的计算过程

 

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

由根元素从上到下依次渲染

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

 

一个元素，从所有的属性都没有值，到所有的属性都有值，这个过程叫属性计算过程

 

特殊的两个CSS取值：

 

- inherit:手动（强制）继承，将父元素的值取出应用到该元素

- initial：初始值，将该属性设置为默认值

 

css基础复习到这结束，下周开始进阶学习