css知识点回顾

一、CSS引入方式

1.内联引入：在head中写入代码。

<style>
    div{
        color:red;
    }
</style>

2.行间样式引入：在body中写入代码。

<div style="color:red;">...</div>

3.外部引入：使用link标签引入。
4.@import url(reset.css).使用@import会增加页面的总体加载时间。IE中使用@import会改变文件的加载顺序。这可能会增加CSS文件的加载时间，阻碍页面渲染。

有冲突的样式，行间引入方式高于其他引入方式

二、选择器

1.id选择器 ＃id

2.class选择器 .class

3.标签选择器 tag

4.通配选择器 *

5.层级选择器 div span div>span

div span 选中所有子子孙孙名为span的元素
div>span 选中的为子元素，子孙元素不会被选

6.分组选择器

  • 优先级 id>类选择器>标签选择器》通配选择器

通配选择器慎用，id选择器少用。!important 为某些样式设置最高权值

三、颜色值

1.关键词:

就是一些颜色英文单词，有17种合法命名颜色：aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

2.16进制:

16进制是设置颜色值的常用方式，将三个介于00-FF的十六进制数连接起来，若16进制的3组数各自成对，则可简写为3位

3.rgb:

red green blue组合而成，取值介于0～255.

4.rgba(IE8-浏览器不支持):

多了一个a，a就是alpha透明度，取值范围为0-1.0代表完全透明，1代表完全不透明

5.hsl(IE8-浏览器不支持):

通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色.

6.hsla (IE8-浏览器不支持):

和rgba一样，多加了一个透明度

四、单位

1.px 具体单位，具体到像素

2.百分比 根据父级

3.em 是父级的倍数

4.rem 基于根元素html进行设置 r=root

五、基线、底线、顶线、行距、行高

基线,底线,顶线

行高指的是文本行的基线间的距离。
基线并不是汉字的下端沿，而是英文字母”x”的下端沿

行距，行高

行距,行高

六、font字体

font的复合写法：font-weight或者font-style font-size/line-height font-family

  • font-weight:blod/normal 是否加粗
  • font-style:italic/normal 是否斜体
  • font-size:字体大小 inherit是否继承父级字体大小
  • line-height:行高
  • font-family:”黑体”，“微软雅黑”，Arial 设置字体类型

七、BFC

  • FC全称”Formatting Context”, 中文为“格式化上下文”

  • BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”

  • IFC全称”Inline Formatting Context”, 中文为“行级格式化上下文”

1.BFC的生成,满足下列CSS声明之一的元素便会生成BFC。

  • 根元素

  • float的值不为none

  • overflow的值不为visible

  • display的值为inline-block、table-cell、table-caption

  • position的值为absolute或fixed

Share