css 学习笔记

Cascading style sheets

1. CSS 介绍

1.1 CSS是怎么工作的

CSS 是一种用于向用户指定文档如何呈现的语言 - 它们如何被指定样式、布局等。

一个 CSS 规则由以下组成:

  • 一组 属性,属性的值更新了 HTML 的内容的显示方式。
  • 一个 选择器, 它选择元素,这(些)元素是你想应用这些最新的属性值于其上的元素。

CSS 实际上如何工作

  1. 浏览器将 HTMLCSS (文档对象模型)。DOM 在计算机内存中表示文档。它把文档内同和其样式结合在一起。
  2. 浏览器显示 DOM 的内容。

关于 DOM

DOM 是一种树形结构,标记语言中的每个元素,属性,文本片段都变成一个DOM节点。这些节点有它们与其它 DOM 节点的关系来定义。
由于 DOM 是 CSS 与文档内容的相遇之处,理解 DOM 有助于设计,调试和维护你的 CSS 文件。

如何将你的 CSS 应用到你的 HTML 上

  1. 外部样式表(external stylesheet)
1
<link rel = "stylesheet" href = "style.css">
  1. 内部样式表(internal stylesheet)
1
2
3
4
5
6
7
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
</style>
  1. 内联样式表(inline styles)
1
<h1 style = "color: blue; backgroundcolor: yellow; border: 1px solid black;">Hello World!</h1>

1.2 CSS 语法

从最基本的层次来看,CSS是由两块内容组合而成的:

  • 属性(Properties): 一些人类可理解的标识符,这些标识符指出你想修改哪一些样式特征(stylistic feature)。
  • 属性值(Values): 每个指定的属性都需要给定一个值,这个值表示你想把那些样式特征修改成什么样。

CSS 声明(CSS declarations)

1
color: transparent;

CSS 声明块(CSS declaration blocks)

1
2
3
4
{
height: 99px;
color: transparent;
}

CSS 选择器和规则(CSS selectors and rules)

1
2
3
4
.container {
height: 100px;
background: #369;
}

CSS 语句(CSS statements)

CSS 规则只是被称为 CSS 语中的一种,其它类型如下:

  • @-规则(At-rules) 在 CSS 中被用来传递元数据、条件信息或其它描述性信息。它由(@)符号开始,紧跟着一个表明它是哪种规则的描述符,之后是这种规则的语法快,并最终由一个半角分号(;)结束。每种由描述符定义的@-规则,都有其特有的内部语法和语义,如:

    • @charset@import (元数据)
    • @media@document (条件信息)
    • @font-face (描述性信息)
  • 嵌套语句是@-规则中的一种,它的语法规则是CSS规则中的嵌套块,只有在特定条件匹配时才会应用到文档上,如:

    • @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容;
    • @supports 只有浏览器确实支持被测试功能是才会应用该@-规则的内容;
    • @document 只有当前页面匹配一些条件时才会应用该@-规则的内容;

1.3 选择器

1.3.1 简单选择器(Simple selectors)

通过元素类型、classid 匹配一个或多个元素。

  • 类型选择器(元素选择器)

  • 类选择器(Class selectors)

  • ID 选择器

  • 通用选择器(Universal selector)

  • 组合器(Combinators)

    • 后代选择器-(空格键)
    • 子选择器 - >
    • 相邻兄弟选择器 - +
    • 通用兄弟选择器 - ~

1.3.2 属性选择器(Attribute selectors)

  • 存在和值(Presence and Value)属性选择器

    • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
    • [attr = val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
    • [attr ~= val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。
  • 子串值(Substring value)属性选择器

    • [attr |= val]:选择 attr 属性的值以 val(包括val)或val-开头的元素(-用来处理语言编码)。
    • [attr ^= val]:选择 attr 属性的值以 val 开头(包括val)的元素。
    • [attr $= val]:选择 attr 属性的值以 val 结尾(包括val)的元素。
    • [attr *= val]:选择 attr 属性的值中包含字符串 val 的元素

通过 属性 / 属性值 匹配一个或多个元素。

1.3.3 伪类(Pseudo-classes)

匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
:link
:visited
:hover
:active

:first-child
:last-child
:nth-child()
:nth-last-child()
:only-child

:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
:only-of-type

:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:fullscreen
:focus
:indeterminate
:in-range
:invalid
:lang()
:left
:not()
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root:
:scope
:target
:valid

1.3.4 伪元素(Pseudo-elements)

匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。

1
2
3
4
5
6
::after
::before
::first-letter
::first-line
::selection
::backdrop

1.3.5 组合器(Combinators)

这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。

Combinators Select
A, B 匹配满足A(和/或)B的任意元素
A B 匹配任意元素,满足条件:B是A的后代节点(B是A的子节点,或者A的子节点的子节点)
A > B 匹配任意元素,满足条件:B是A的直接子节点
A + B 匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父节点,并且B紧跟在A的后面)
A ~ B 匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)

1.3.6 多用选择器(Multiple selectors)

这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。如:

1
2
3
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, 'sans serif';
}

1.4 CSS 的值和单位

1.4.1 数值(Numeric values)

  • 像素(px) 是一种绝对单位(absolute units),因为无论其他相关的设置怎么变化,像素制定的值是不会变化的。其他绝对单位如mmcminptpc

  • em 1em与当前元素的字体大小相同,em 是 Web 开发中最常用的相对单位。

  • ex, ch 分别是小写的x的发哦都和数字0的宽度。但不像 em 那样被普遍的使用或很好的支持。

  • rem REM(root em)和 em 以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体将不起作用。在旧版本的 IE 上不被支持。

  • vw, wh 分别是视口宽度的1/100和视口高度的1/100,其次它不像rem那样被广泛支持。

  • 无单位的值 有时候会在CSS遇到无单位的数值,这不总是一个错误,事实上它是在某些情况下,完全可以。

1.4.2 百分比(Percentages)

还可以使用 百分比值 指定可以通过特定数值指定的大部分内容。这使我们可以创建,例如,其宽度总是会移动到其父容器宽度的一定百分比的框中。

  • 可以使用 液体布局 来确保标准文档始终适合于屏幕,并且可以在不同的移动设备屏幕大小显示良好

*[液体布局]: 随浏览器视口大小的变化而变化的框布局类型

  • 一个 固定宽度布局 可以用来保持在线地图的大小相同;浏览器视口可以在地图上滚动,只在一个时间内查看一定数量的地图。您可以立即看到的数量取决于您的视口有多大。

*[固定宽度布局]: 不管怎样都保持不变

1.4.3 颜色(Colors)

  • 关键词,最简单、最古老的颜色类型在 CSS 颜色关键词。这些都是特定的字符串代表特定的颜色值,如 background-color: red;

  • 十六进制,每个十六进制值由一个(#)和六个16进制数组成,如 #ff0000

  • RGB,一个RGB值是一个带有三个参数的函数rgb(),如 rgb(255, 0, 0),与十六进制的差别在于,每个通道不是由两个十六进制数字表示的,而是由0到255之间的十进制数表示的。

  • HSL,hsl()函数接受的是 色相饱和度 以及 明度值,用来区分1670万种颜色。

    1. 色调:颜色的底色调。这个值在0到360之间,表示色轮周围的角度。
    2. 饱和度:值从0到-100%,其中0是没有颜色,100%是全彩色饱和度。
    3. 明度:值从0-100%,其中0是无光,100%是充满光的。
  • RGBA 和 HSLA,RGB和HSL都有相应的模式-RGBA和HSLA,不仅允许您设置想要的显示的颜色,还有次颜色的 透明度(transparency)。它们相应的函数采用同样的参数,再加上第四个值,范围在0-1,设置透明度,或 alpha通道,0是完全透明的,1是完全不透明的。

  • 透明度(Opacity),通过CSS-opacity属性。与设置某个特定的颜色的透明度相比,这会设置所有选定元素以及它们的孩子节点的透明度。

1.4.4 函数(Functions)

函数(Functions),functions是代码中的可重复使用的部分,它可以多次运行,以便开发人员和计算机以最小的代价完成重复的任务,同样的,它也作为属性存在于CSS中。我们已经在Color部分中看到函数了,例如rgb()hsl()


1.5 层叠和继承

1.5.1 层叠

CSS 规则的顺序很重要,但层叠比顺序更复杂。什么选择器在层叠中胜出取决于三个因素(排在前面会否决排在后面的一种)
*[CSS]: Cascading Style Sheets

  1. 重要性(Important)
  2. 优先级(Specificity)
  3. 源代码次序(Source order)
  • 重要性(Important)

在 CSS 中,有一个特别的语法可以让一条规则总是优先于其他规则:!important。把它加在属性值的后面可以使这条声明有无比强大的力量。

相互冲突的声明将按一下顺序适用,后一种将覆盖先前的声明:

  1. Declarations in user agent style sheets
  2. Normal declarations in user style sheets
  3. Normal declarations in author style sheets
  4. Important declarations in author style sheets
  5. Important declarations in user style sheets
  • 优先级(Specificity)

优先级 基本上是衡量选择器的具体程度的一种方法,它能匹配多少元素。一个选择器的优先级量使用四种不同的值(或组件)来衡量的,它们可以被认为是千位,百位,十位和个位

  1. 千位:如果声明在一个 style 属性中应该加1分,否则为0分

  2. 百位:在整个选择器中每包含一个ID选择器就在该列中加1分

  3. 十位:对于每包含一个类选择器,属性选择器,或者包含在全局选择器中的伪类就在该列中加1分

  4. 个位:对于整个选择器中包含的每一个元素选择器或伪元素就在该列中加1分

  • 源代码次序(Source order)

如果多个相互竞争的选择器具有相同的重要性和优先级,那么第三个因素将帮助决定哪一个规则获胜,后面的规则将战胜先前的规则。
在考虑所有这些层叠理论和什么样式优先于其他样式被应用时,你应该记住的一件事是,所有这些都发生在属性级别上——属性覆盖其他属性,但你不会让整个规则凌驾于其他规则之上。
当多个CSS规则匹配相同的元素时,它们都被应用到该元素中。只有在这之后,任何相互冲突的属性才会被评估,以确定哪种风格会战胜其他类型。

1.5.2 继承

CSS 继承的思想是 应用于某个元素的一些属性值将有该元素的子元素继承,而有些则不会。

  • 例如,对 font-familycolor进行继承是有意义的,因为这使得很容易设置一个站点范围的基本字体,方法是应用一个字体到 <html> 元素;然后可以在需要的地方覆盖单个元素的字体。

  • 再如,让 marginpaddingborderbackground-color 不被继承是有意义的,如果将这些属性设置在一个容器元素上,并将它们集成到每个子元素,然后不得不将它们全部放在每个单独的元素上,那么将会出现样式/布局混乱。

CSS 为处理继承提供了 三种特殊 的通用属性值:

  • inherit:该值将应用到选定元素的属性值设置为其父元素一样。

  • initial: 该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值,并且该属性是自然继承的,那么该属性值就被设置为 inherit

  • unset:该值将属性重置为其自然值,即如果属性是自然继承的,那么它就表现的像 inherit,否则就是表现的像 initial

1.6 框模型

CSS 框模型是网页布局的基础,每个元素被表示为一个矩形的方框,分别由框的 内容内边距边框外边距 组成。浏览器渲染网页布局时会计算这些内容以及框相对于其它框放在哪里。

1.6.1 框属性

文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的 CSS 属性调整。

  • widthheight
    设置 内容框(content box) 的宽度和高度。内容框是框内容显示的区域,包括框内的文本内容,以及表示嵌套子元素的其它框。

  • padding

    • 表示一个 CSS 框的 内边距(padding),这一层位于内容框的外边缘与边框的内边缘之间。
    • 对于block水平元素
      1. padding 值暴走,一定会影响尺寸
      2. widthautopadding 影响尺寸
      3. widthautobox-sizingborder-box,同时 padding值没有暴走,不影响尺寸
    • 对于 inline 水平元素
      1. 水平 padding 影响尺寸,垂直 padding 不影响尺寸,但是会影响背景色
    • padding 不支持任何形式的负值(支持负值的CSS属性有marginletter-spacingword-spacingvertical-align
    • padding 百分比均是相对于 宽度 计算的
    • inline水平元素的 padding 百分比值
      1. 同样相对于宽度计算
      2. 默认的高度宽度细节有差异
      3. padding 会断行
      4. inline 元素+ padding 高宽也不等
      5. inline 元素的垂直 padding 会让“幽灵空白节点”显现,也就是规范中的“strut”出现。
    • 标签元素的内置 padding
      • ol/ul列表
        1. ol/li元素内置 padding-left,但是单位是 px 不是 em
        2. 例如Chrome浏览器下是40px;
        3. 所以如果字号很小,间距就会很开;
        4. 所以如果字号很大,序号就会爬到容器外面;
      • 表单元素的内置 padding
        1. 所有浏览器 input/textarea 输入框内置 padding
        2. 所有浏览器 button 按钮内置 padding
        3. 部分浏览器 select 下拉内置 padding,如FireFox/IE8+可以设置 padding
        4. 所有浏览器 radio/checkbox 单复选框无内置 padding
        5. button 按钮元素的 padding 最难控制;
  • border

    • 是一个分隔层,位于内边距的外边缘以及外边距的内边缘之间。边框的默认大小为0
    • border-width 不支持百分比,类似的还有 outlinebox-shadowtext-shadow
    • 当没有指定 border-color 的颜色值时,会使用 color 作为边框色,类似的还有 outlinebox-shadowtext-shadow
  • margin

    • 代表 CSS 框周围的外部区域,称为 外边距(margin),它在布局中推开其它 CSS 框。
    • 普通元素的百分比 margin 都是相对于 父容器 的宽度计算的
    • 绝对元素的百分比 margin 都是相对于 第一个定位的祖先元素(relative/absolute/fixed) 的宽度计算的
    • margin合并的通常特性:
      1. block水平元素(不考虑 floatabsolute 元素)
      2. 不考虑 writing-mode,只发生在垂直方向( margin-top / margin-bottom
    • margin重叠的三种情景:
      1. 相邻的兄弟元素
      2. 父级和第一个/最后一个子元素
      3. 空的block元素
    • 父子margin重叠的其他条件
      • margin-top 重叠
        1. 父元素非块状格式化上下文元素
        2. 父元素没有 border-top 设置
        3. 父元素没有 padding-top
        4. 父元素和第一个子元素之间没有 inline 元素分隔
      • margin-bottom 重叠
        1. 父元素非块状格式化上下文元素
        2. 父元素没有 border-bottom 设置
        3. 父元素没有 padding-bottom
        4. 父元素和第一个子元素之间没有 inline 元素分隔
        5. 父元素没有 heightmin-heightmax-height 限制
      • 空block元素 margin 重叠的其他条件
        1. 元素没有 border 设置
        2. 元素没有 padding
        3. 里面没有 inline 元素
        4. 没有 height,或者 min-height
      • margin 重叠的计算规则
        1. 正正取大值
        2. 正负值相加
        3. 负负最负值
      • 理解 CSS 中的 margin-auto,原本应该填充的尺寸被 width/height 强制变更,而 margin-auto 就是为了填充这个变更的尺寸设计的
      • margin 负值下的两端对齐
      • CSS margin 无效情形解析
        1. inline (非替换元素)水平元素的垂直 margin 无效
        2. margin 重叠
        3. display:table-cell/display:table-row 等声明的 margin 无效
        4. 绝对定位元素非定位方位的 margin 值无效
        5. 鞭长莫及导致的 margin 无效
        6. 内联特性导致的 margin 无效
      • margin-start/margin-end
      • margin-collapse
        1. collapse:默认重叠
        2. discard:取消margin设置的效果
        3. separate:取消margin重叠的特性

==一些需要注意的点==:

  • 默认情况下 background-color/background-image 延伸到了边框的边界,该行为可以使用 background-clip 属性来改变。
  • 如果内容框变得比示例输出的窗口大,它将从窗口溢出,然后滚动条将会出现,允许你滚动窗口来查看盒子的剩余内容,可以使用 overflow 属性来控制溢出。
  • 框的高度不遵守百分比的长度;框的高度总采用框内容的高度,除非指定一个绝对的高度,这比在页面上默认设置是100%高度更实用。
  • 边框(border)也忽略百分比宽度设置。
  • 由于框的总宽度是widthpadding-rightpadding-leftborder-rightborder-left 属性之和,假如你想要一个框占窗口宽度的50%,但边框和内边距是用像素来表示的怎么办,为了避免这种问题,可以使用属性 box-sizing 来调整框模型,使用值 border-box

1.6.2 高级框的操作

  • Overflow
    当使用绝对值设置了一个框的大小,允许的大小可能不适合放置内容,这种情况下内容会从盒子溢出,我们可以使用 overflow 属性来控制这种情况的发生。

    • overflow基本属性值有:visible(default)hiddenscrollautoinherit
    • overflow-xoverflow-y(IE8+)
      1. 如果 overflow-xoverflow-y 值相同则等同于 overflow
      2. 如果 overflow-xoverflow-y 值不相同,且其中一个值为 visible,而另外一个被赋予 hiddenscrollauto,那么这个 visible 的值会被重置为 auto
    • 作用的前提
      1. display: inline 水平
      2. 对应方位的尺寸限制,width/height/max-width/max-height/absolute
      3. 对于单元格 td 等,还需要 tabletable-layout: fixed 状态才行
    • 在 IE7 浏览器下,需要给所有按钮添加 CSS 样式 overflow: visible,不然文字越多,按钮两侧 padding 留白就越大
    • 滚动条出现的条件
      1. overflow: auto/overflow: scroll/<html>/<textarea>
      2. 内容的尺寸超出了容器尺寸的限制
    • 无论什么浏览器,默认滚动条 均来自 <html> 而不是 <body> 标签
    • body/html与滚动条
      • IE7-浏览器默认:html { overflow-y: scroll; }
      • IE8+等浏览器默认:html { overflow: auto; }
    • 计算页面的滚动高度:

      1
      var st = document.body.scrollTop || document.documentElement.scrollTop;
    • overflowpadding-bottom 缺失现象(chrome除外)

    • 水平居中跳动问题的修复
      1. html { overflow-y: scroll; }
      2. .container { padding-left: calc(100vw - 100%); }
    • 自定义滚动条 - webkit

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      ::-webkit-scrollbar {
      width: 8px; height: 8px;
      }

      ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .3);
      border-radius: 6px;
      }

      ::-webkit-scrollbar-track {
      background-color: #ddd;
      border-radius: 6px;
      }
    • BFC(Block formatting context) - “块级格式化上下文”

      • 能触发BFC的 overflow 属性有:
        • overflow: auto;
        • overflow: scroll;
        • overflow: hidden;
      • BFC的常见应用:
        1. 清除浮动的影响
        2. 避免margin穿透问题(包括重叠)
        3. 两栏自适应布局
      • 清除浮动
        1
        2
        .clearfix { *zoom: 1; }
        .clearfix:after { content: ''; display: table; clear: both;}
  • background-clip
    框的背景是有颜色和图片组成的,它们堆叠在一起(background-colorbackground-image)。它们被应用到一个盒子里,然后被会在盒子的下面。默认情况下,背景延伸到了边框外边,该行为可以通过设置盒子的 background-clip 属性来调整。

  • outline
    一个框的 outline 的是一个看起来像是 border 但又不属于框模型的东西。它的行为和框边框差不多,但是并不改变框的尺寸,outline 是画在 border box 外面,边距区域里面的。

1.6.3 框类型

框类型应用通过指定 display 属性,这个属性有很多属性值,三个最普遍的类型:blockinlineinline-block

  • 块框(block box) 是定义为堆放在其他框上的框,其内容会独占一行,而且可以设置它的宽高,之前所有对于框模型的应用适用于块框

  • 行内框(inline box) 与块框是相反的,它随着文档的文字,对行内盒设置宽高无效,设置padding,margin 和 border 都会更新周围文字的位置,但是对于周围的块框不会有影响。

    1. 内同区域(content area)
    2. 内联盒子(inline boxes)
    3. 行框盒子(line boxes)
    4. 包含盒子(containing box)
  • 行内块状框(inline-block box) 像是上述两种的集合,它不会重新另起一行但会像行内框(inline box)一样随着文字而流动,而且他能够设置宽高,并且向块框一样保持了其块特性的完整性。

1.7 调试 CSS


2. 文本样式

2.1 基本的文字以及字体样式(Fundamental text and font styling)

元素中的是布置在元素的内容框中。以内容区域的左上角作为起点(或者是右上角,是在RTL语言的情况下),一直延续到行的结束部分。文本内容表现地像一些内联元素,被布置到相邻的行上,除非到达了行的尽头,否则不会换行。

用于样式文本的CSS属性通常可以分为两类:

  • 字体样式:作用于字体的属性,会直接应用到文本中,比如使用哪种字体,字体的大小是怎样的,字体是粗体还是斜体,等等。

  • 文本布局分隔:作用于文本的间距以及其他布局功能的属性,比如,允许操纵行与字之间的空间,以及在内容框中,文本如何对齐。

2.1.1 字体颜色(color

color 属性设置选中元素的前景内容的颜色(通常指文本,不过也包含一些其他东西,比如是使用 text-decoration 属性放置在文本上方或下方的线)

2.1.2 字体种类(font-family

可以使用 font-family 属性为浏览器指定一个字体(或者一个字体的列表)。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上,如果字体不可用,那么就会用浏览器默认的字体代替。

  • 网页安全字体

只有某几种字体可以应用到所有系统,可以毫不顾忌地使用,这些就是所谓的 网页安全字体,例如 ArialCourier NewGeorgiaTimes New RomanTrebuchet MSVerdana

  • 默认字体

CSS 定义了5个常用的字体名称:serifsans-serifmonospacecursivefantasy。这些都是非常通用的,当使用这些通用名称是,使用的字体完全取决于每个浏览器,而且它们所运行的每个操作系统也会有所不同。

  • 字体栈

由于无法保证你想在你的网页上使用的字体的可用性,你可以提供一个 字体栈(font stack),这样浏览器就有多种字体可以选择了,比如:

1
font-family: "Trebuchet MS", Verdana, sans-serif;

这种情况下浏览器从列表的第一个开始查看字体是否可用,如果可用,就把这个字体应用到选中的元素中,如果不可用,它就移动到列表中的下一个字体。在字体栈的最后提供一个合适的通用的字体名称是个不错的办法,这样即使列出的字体都无法使用,浏览器至少可以提供一个大约合适的字体。

==有一些字体名称不止一个单词,就需要用引号包裹==

2.1.3 字体大小(font-size

字体大小通过 font-size 属性设置,可以用来调整字体大小的单位是:

  • px(像素):将像素的值赋予你的文本。这是一个绝对单位,它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的。

  • emS:1em等于我们设计的当前元素的父元素上设置的字体大小。你可以使用 em 调整任何东西的大小,不止是文本。

  • remS:这个单位的效果和 emS 的效果差不多,除了1 rem 等于 HTML 中的根元素的字体大小。但 remS 不支持 Internet Explore 8 和一下的版本。

2.1.4 字体样式,字体粗细,文本转换和文本装饰(font-stylefont-weighttext-transformtext-decoration

CSS 提供了4种常用的属性来改变文本的样子:

  • font-style

    • normal
    • italic
    • oblic
  • font-weight

    • normal
    • bold
    • lighter
    • bolder
    • 100-900
  • text-transform

    • none
    • uppercase
    • lowercase
    • capitalize
    • full-width
  • text-decoration

    • none
    • underline
    • overline
    • line-through
      ==注意:text-decoration是一个缩写形式,它由text-decoration-line, text-decoration-styletext-decoration-color 构成,如:text-decoration: line-through red wavy;==

2.1.5 文字阴影(text-shadow

1
text-shadow: 4px 4px 5px red;

4个属性如下:

  1. 阴影与原始文本的水平偏移,必须指定

  2. 阴影与原始文本的垂直偏移,必须指定

  3. 模糊半径,更高的值意味着阴影分散得更广泛,不指定,默认为0,意味着没有模糊

  4. 阴影的基础颜色,可以使用大多数的 CSS 颜色单位。没有指定,默认为 black

您可以通过包含以逗号分隔的多个阴影值,将多个阴影应用于同意文本。

2.1.6 文本布局

  • 文本对齐(text-align

    • left:左对齐文本。
    • right:右对齐文本。
    • center:居中文字。
    • justify:是文本展开,改变单词之间的差距,使所有的文本行的宽度相同。
  • 垂直对齐(vertical-align

    • 支持的属性值
      1. inherit
      2. baseline(default),topmiddlebottom
      3. text-toptext-bottom
      4. subsuper
      5. 20px,2em,20%…(vertical-align 的百分比值是相对于 line-height 计算的)
    • vertical-align 起作用的前提
      1. inline水平(inline 和 inline-block)
      2. table-cell 元素
      3. 总结就是图片,按钮,文字和单元格。
    • 不定尺寸图片或多行文字的垂直居中

      1. 主体元素inline-block化
      2. 0宽度100%高度辅助元素
      3. vertical-align: middle
        1
        <p style="height: 200px;"><span>...</span><i></i></p>
      1
      2
      span { display: inline-block; vertical-align: middle; }
      i { display: inline-block; height: 100%; vertical-align: middle }
  • 行高(line-height

    • 两行文字基线之间的距离,该属性设置文本每行之间的高,推荐的行高大约是1.5-2(双倍间距)
    • 内联元素的高度是由 line-height 决定的。
    • 内容区域高度(content area) + 行间距(vertical spacing) = 行高(line-height)
    • line-height 支持属性值
      • normal
      • number
      • length
      • percent
      • inherit
    • 消除图片底部间隙的方法
      1. 图片块状化 - 无基线对齐 img { display: block; }
      2. 图片底线对齐 img { vertical-align: bottom; }
      3. 行高足够小 - 基线位置上移 .box { line-height: 0; }
  • 字母和字间距

    • letter-spacingword-spacing属性允许你设置你的文本中的字母与字母之间的间距、或是字与字之间的间距。
  • 其他一些 Font样式 以及 文本布局样式

    • font-variant: Switch between small caps and normal font alternatives.
    • text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
    • text-overflow: Define how overflowed content that is not displayed is signaled to users.
    • white-space: Define how whitespace and associated line breaks inside the element are handled.
    • word-break: Specify whether to break lines within words.
    • direction: Define the text direction
    • line-break: Relax or strengthen line breaking for Asian languages.
    • word-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.
    • writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.

2.1.7 Font 简写

许多字体的属性可以通过 font 的简写方式来设置,这些是按照以下顺序来写的:font-stylefont-variantfont-weightfont-stretchfont-sizeline-heightfont-family。在这些所有的属性中,只有 font-sizefont-family 是一定要指定的,如果你想要 font 的简写形式。一个正斜杠必须放在 font-sizeline-height 属性之间。

2.2 样式化列表(Styling lists)

  • 处理列表间距
    当您创建样式列表时,您需要调整样式,使其保持与周围元素相同的垂直间距和相互间的水平间距。

  • 列表特定样式

    • list-style-type:设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。
    • list-style-position:设置在每个项目开始之前,项目符号时出现在列表项内,还是出现在其外。
    • list-style-image:允许您为项目符号使用自定义图片,而不是简单的方形或圆形。
  • list-style 简写

    1
    list-style: square url(example.png) inside;

    属性值可以任意顺序排列,你可以设置一个,两个或者三个值,如果指定了type和image,由于某种原因导致图像无法加载,则type将用作回退。

  • 管理列表计数

    • start,该属性允许你从1以外的数字开始计数
    • reversed,该属性将启动列表倒计数
    • value,该属性允许设置列表项指定数值

2.3 样式化链接(Styling links)

2.3.1 链接状态

  • Link:这是链接的默认状态,当它没有处于其他状态的时候,它可以使用 :link伪类来应用样式
  • Visited:这个链接已经被访问过了(存在于浏览器的历史记录),它可以使用 :visited 伪类来应用样式
  • Hover:当用户的鼠标光标刚好停留在这个链接,它可以使用 :hover 伪类来应用样式
  • Focus:一个链接当它被选中的时候(比如通过键盘的 tab 移动到这个连接的时候,或者使用编程的方法来选中这个链接 HTMLElement.focus())它可以使用 :focus 伪类来应用样式
  • Active:一个链接当它被激活的时候(比如被点击的时候),它可以使用 :active 伪类来应用样式

2.3.2 默认的样式

  • 链接具有下划线,下划线使用 border-bottom 创造的,而不是 text-decoration
  • 未访问过的链接(Unvisited)是蓝色的
  • 访问过的链接(Visited)是紫色的
  • 悬停(Hover)在一个连接的时候鼠标会变成一个小手的图标
  • 选中(Focus)链接的时候,链接周围会有一个轮廓,你应该可以按 tab 来选中这个页面的链接
  • 激活(Active)的时候会变成红色(当你点击链接时,请尝试按住鼠标按钮)

2.4 网络字体(Web fonts)

1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'myFont';
src: url('fonts/cicle_fina-webfont.eot');
src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/cicle_fina-webfont.woff2') format('woff2'),
url('fonts/cicle_fina-webfont.woff') format('woff'),
url('fonts/cicle_fina-webfont.ttf') format('truetype'),
url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
font-weight: normal;
font-style: normal;
}

3. 样式框

3.1 背景(Backgrounds)

元素的 背景 是指,在 元素内容内边距边框 下层的区域。你可以使用 background-clip 属性改变背景所占用的区域,背景 并不在外边距的下层

  • background-color:为背景设置一个纯色
    • 默认值是 transparent
  • background-image:指定在元素的背景中出现的背景图像,这可以是静态文件,也可以是生成的渐变
    • 在默认情况下,图像在水平和垂直方向上都是重复的,可以用 background-repeat 来修复这个问题
    • 背景图像:渐变,线性渐变是通过 liner-gradient() 函数传入的,它是一个 background-image属性的值,需要三个参数,背景中渐变的方向,开始的颜色和结尾的颜色
  • background-position:制定背景应该出现在元素背景中的位置
    • 该空间指定了图像的水平(x)和垂直(y)坐标,图像的左上角是原点(0,0)
    • 该属性可以接受许多不同的值类型,最常用的是:px,rems,百分比和关键字(left,center,right,bottom)
  • background-repeat:指定背景是否应该被重复(平铺)
    • repeat:(默认值)一直重复
    • no-repeat:图像将不会重复,它只会显示一次
    • repeat-x:图像将在整个背景中水平地重复
    • repeat-y:图像会在背景下垂直地重复
  • background-attachment:当内容滚动时,指定元素背景的行为,它是滚动的内容,还是固定的?
    • scroll: 这将把背景修改为页面视图,因此它将在页面滚动时滚动。注意,我们说的是视图,而不是元素——如果你滚动实际的背景设置的元素,而不是页面,背景不会滚动。
    • fixed:这可以在页面的位置上固定背景,所以当页面滚动时,它不会滚动,不管你是滚动页面还是背景设置的元素,它都会保持在相同的位置。
    • local:这个值后来被添加了(它只在Internet Explorer 9+中得到支持,而其他的则在IE4+中得到支持),因为scroll值相当混乱,并且在许多情况下并没有真正做您想要的事情。 local 值将背景设置为它所设置的元素的背景,因此当您滚动元素时,背景会随之滚动。
  • background:在一行中指定以上五个属性的缩写
    • background:[background-color]|[background-image]|[background-position]|[/background-size]|[background-repeat]|[background-attachment]|[background-clip]|[background-origin],…
  • background-size:允许动态调整背景图像的大小
    • 需要包含两个背景大小值,一个用于水平维度,另一个用于垂直方向

3.2 边框(Borders)

元素有一个边框,它位于元素的内边距(padding)和外边距(margin)之间。

  • border-topborder-rightborder-bottomborder-left:设置边框一侧的宽度,样式和颜色
  • border-widthborder-styleborder-color:设置边框宽度度、样式或颜色,但是会设置边框的四个边。
  • border-radius
    • 每个角的边框半径分别是:border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
    • 可以创建椭圆形角(x半径与y半径不同)。两个不同的半径用正斜杠(/)分隔,您可以将其与值的任意组合组合。
  • border-image
    • 首先需要指定一个边框,否则边框图像将没有显示的空间。我们还将使用 background-clip,使任何背景色只填充内容和内边距的区域,并且不扩展到边框
    • 使用 border-image-source 指定要使用的源图像作为边框图像。 它的工作原理和 background-image 一样,能够接受一个url()函数或一个渐变作为一个值。
    • 使用 border-image-slice 来设置所需大小的切片,两个值:上和下,左和右;三个值:上,左和右,下;四个值:上,右,下,左
    • 使用 border-image-repeat 来指定我们希望图像如何填充边框。
      • stretch:默认;侧面的图像被拉伸来填满边框。这通常看起来很糟糕和像素化,所以不推荐。
      • repeat:边图像被重复,直到边框被填满。根据具体情况,这可能看起来不错,但您可能会看到一些难看的图像片段。
      • round: 边的图像被重复,直到边框被填满,它们都被稍微拉伸,这样就不会出现碎片。
      • space:边图像被重复,直到边框被填满,每个拷贝之间添加了少量的间隔,这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持。
    • border-image-width:只调整边框图像,而不是边框——如果这个设置小于border-width,它会在边框的外面,而不是填满它。如果它更大,那么它就会扩展到边框之外,并开始重叠在内边距/内容上。
    • border-image-outset:定义边框内部和内边距之间的额外空间的大小——有点像“边框填充”。如果需要的话,这是一种简单的方法,可以将边框图像移出一点。

3.3 样式化表格(Styling tables)

  • 使您的表格标记尽可能简单,并且保持灵活性,例如使用百分比,这样设计就更有响应性。
  • 使用 table-layout: fixed 创建更可预测的表布局,可以通过在标题 width 中设置 width 来轻松设置列的宽度。
  • 使用 border-collapse: collapse 使表元素边框合并,生成一个更整洁、更易于控制的外观。
  • 使用 <thead><tbody><tfoot> 将表格分割成逻辑块,并提供额外的应用CSS的地方,因此如果需要的话,可以更容易地将样式层叠在一起。
  • 使用斑马线 tbody tr:nth-child(odd/even) 来让其他行更容易阅读。
  • 使用 text-align 对齐您的要对齐您的htmlelement(“th”)和htmlelement(“td”)文本,使内容更整洁、更易于跟踪。和 <td> 文本,使内容更整洁、更易于跟踪。

3.4 高级盒子效果(Advanced box effects)

1
2
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

4. CSS 布局

4.1 float(浮动)

浮动的原本的原本作用 仅仅是为了实现文字环绕效果!

4.1.1 包裹与破坏

  1. 包裹 - 收缩,坚挺,隔绝
  • 具有包裹性的其他属性:
    • display: inline-block/table-cell/...
    • position: absolute/fixed/sticky
    • overflow: hidden/scroll
  1. 破坏
  • 具有破坏性的其他属性:
    • display: none;
    • position: absolute/fixed/sticky
  1. 清除浮动
  • 父元素BFC(IE8+)或haslayout(IE6/IE7)
    • float: left/right
    • position: absolute/fixed
    • overflow: hidden/scroll(IE7+)
    • display: inline-block/table-cell(IE8+)
    • width/height/zoom:1/...(IE6/IE7)
  • 脚底插入 clear: both

    1
    2
    .clearfix:after { content: ''; display: table; clear: both;}
    .clearfix { *zoom: 1; }

    ==.clearfix 应用在包含浮动子元素的父级元素上==

  1. 特性
  • 元素block块状化(display: block;
  • 破坏性造成的紧密排列特性
  1. 浮动与流体布局
  • 文字环绕衍生 - 单侧固定
1
2
width + float
padding-left/margin-left

4.2 display: absolute(绝对定位)

独立的绝对定位可以摆脱 overflow 的限制,无论是滚动还是隐藏。

4.2.1 定位的行为表现

  • 脱离文档流
  • 去浮动
  • 位置跟随