手记

一周一章前端书·第14周:《HTML与CSS进阶教程》S02E01

第3章:CSS基础知识

3.1 CSS单位

3.1.1 绝对单位

  • CSS单位分为两大类:绝对单位相对单位。绝对单位使用的是物理度量单位,大小是固定的。在前端开发中一般不会用到绝对单位,了解即可。

绝对单位说明
cm厘米
mm毫米
in英寸
pt(poin)印刷的点数,磅
pc(pica)1pc=12pt

3.1.2 相对单位

相对单位说明
px像素
%百分比
em当前元素字体大小的倍数
rem根元素字体大小的倍数
px(像素)
  • px(pixel)像素,是分辨率的基本单位,是屏幕显示最小的点。像素不像是厘米,属于物理上绝对的大小单位,它可以很大,也可以很小。

  • 如果画面由很多且很小的显示点构成,那么画面就很清晰,我们称为“分辨率高”;相反,如果画面由很少且很大的显示点构成,“分辨率低”画面就模糊。

  • 比如分辨率为“800px × 600px”,就是说计算机的显示由宽是800个像素点,高是600个像素点构成。

%(百分比)
  • CSS中支持百分比作为单位的属性大致有三大类:

    • 比如父元素的width:100px,那么子元素width:50%,则实际宽度为50px

    • 比如父元素的font-size:30px,那么子元素font-size:50%,则实际字体大小为15px

    • widthheightfont-size根据父元素相同属性值来进行百分比计算:

    • line-heigt根据父元素的font-size属性值来进行百分比计算;

    • vertical-align根据当前元素的line-heigt属性值来进行百分比计算;

em(当前元素字体大小的倍数)
  • em是当前元素字体大小的百分比,例如当前元素的font-size:10px时,1em等于10px

  • 如果当前元素没有定义font-size,则会基础父元素的font-size。如果所有祖先元素都没定义font-size,则会继承浏览器默认的font-size(所有浏览器默认的font-size:16px)。

『em单位的使用技巧』
  1. 通过text-indent:2em实现首行缩进;

  2. 使用em作为统一单位,任何元素都不设置具体的px单位,而是指定根元素的font-size的倍数。但值得注意的是,如果出现多重嵌套内容时,使用em作为单位则需要重新计算;

  3. 使用em作为统一字体大小单位,当需要改变页面整体字体大小时,无需逐个修改,只改根元素的字体大小即可;

rem(根元素字体大小的倍数)
  • rem(font size of the root element),相对于根元素字体大小的倍数。

  • 是CSS3新引入的单位,除了IE8以及更早版本之外,大部分主流浏览器都支持rem。rem布局也是移动端最常用的字体大小之一。

  • em是相对于“当前元素”的字体大小,而rem是相对于“根元素”的字体大小,从而可以避免多重嵌套导致的复杂计算。

『实际开发中,px、em和rem各自的使用场景』
  • 国外大多数网站都使用em作为单位,W3C也建议使用em。但国内大部分网站使用px作为单位。这是由于国外的法律规定(如美国)网站必须具有兼容性,为了方便对IE早期版本的兼容,em更适合。

  • 所以:

    • 需要兼容IE或者其他低版本浏览器时,使用em单位;

    • 不需要兼容IE,也不考虑移动端浏览器时,使用px单位;

    • 需要在移动端且不考虑IE等比版本浏览器时,使用rem单位;

3.2 CSS特性

3.2.1 继承性

  • CSS的继承性是指,子元素可以继承父元素的某些样式属性,从而减少重复代码的编写。

  • 但不是所属性都具有继承性,CSS中具有继承性的属性有三大类:

    • 文本相关的属性:font(font-family/font-size/font-style/font-weight)、line-heighttext-aligntextindentword-spacing

    • 列表相关的属性:list-style-imagelist-style-positionlist-style-typelist-style

    • 颜色相关的属性:color

3.2.2 层叠性

  • CSS的层叠性是指,同一个元素可以根据选择器的权重进行样式的覆盖。

3.3 CSS优先级

  • 当CSS样式层叠时,遵循一定的优先级规则来覆盖,常见的情况有五种:

    • 当指定“当前元素”的样式发生冲突时,以样式权重高者为准

    • 行内样式的优先级最高,内部样式和外部样式的优先级相等,以最后引入的样式为准。

    • 引用方式冲突:行内样式 > (内部样式 = 外部样式)

    • 继承方式冲突:以最近的祖先元素为准

    • 指定样式冲突:行内样式 > id选择器 > class选择器 > 元素选择器

      选择器权重值(数额大的权重高)
      通配符0
      伪元素(比如:hover1
      元素选择器1
      class选择器10
      伪类10
      属性选择器10
      id选择器100
      行内选择器1000
    • 继承样式和指定样式冲突:以指定样式为准;

    • !important!important规则来改变样式的优先级,它同样也遵循后来者居上的覆盖原则;

3.4 CSS引入方式

  • CSS引入方式有三种:link方式外部样式表、内部样式表和行内样式表。

说明:另外还有一种@import方式,但在实际开发中极少使用。原因在于,@import方式先加载HTML后加载CSS,而link方式是先加载CSS后加载HTML。

3.4.1 外部样式表

  • 外部样式表是把CSS代码和HTML代码单独放在不同文件中,然后在HTML文档中使用<link>标签来引入CSS样式表。当样式被应用到多个页面时,外部样式表是最理想的方案,可以提升网站性能和可维护性。

3.4.2 内部样式表

  • 外部样式表是最常用的CSS引用方式,但不代表内部样式表和行内样式表就一无是处。

  • 在实际的开发当中,多个页面的公有样式应当使用外部样式表,而单个页面的个别样式则可以使用内部样式来定义。

6.4.3 行内样式表

  • 如果只需要在页面具体的某个小地方修改样式,或者需要通过权重来覆盖样式时,可以使用行内样式。

3.5 CSS选择器

  • 通过CSS选择器可以选择页面上你想要的标签元素,基本的选择器有:元素选择器、id选择器、class选择器、群组选择器。

  • 初次之外,还有层次选择器。层次选择器就是通过元素之间的层次关系来选择元素。

  • 常见的层次选择器包括:父子、后代、兄弟和相邻。

选择器说明
M N后代选择器,选择M元素内部所有后代N元素
M > N子代选择器,选择M元素内部子代N元素
M ~ N兄弟选择器,选择M元素后所有同级的N元素
M + N相邻选择器,选择M元素相邻的下一个元素



作者:梁同学de自言自语
链接:https://www.jianshu.com/p/4e6c58873eab


0人推荐
随时随地看视频
慕课网APP