CSS入门速记手册--未完待续

Satimant
311 阅读34分钟

我将所学到的CSS知识整理成笔记和思维导图，以便未来增删改查。这些知识来自字节青训营的前端课程、B站前端入门课程、MDN文档、《CSS权威指南 第三版》，不可避免的带有我个人的理解和偏见，若有任何不精准或错漏之处，完全归责于我自己，欢迎大家不吝指正。

CSS入门速记手册

第一篇 CSS基础

第一章 CSS简介

第一节 浏览器的工作流程简介

  1. 获取HTML文档
  2. 解析HTML文档为DOM树和CCSOM树
  3. DOM和CSSOM结合起来生成渲染树——它记录了哪些CSS规则应用于哪些DOM节点
  4. 布局渲染树，确定每个DOM节点在屏幕的坐标
  5. 遍历渲染树，绘制每一个节点

第二节 CSS的定义和作用

  1. 定义：CSS是层叠样式表的简称，是一种样式表语言，通常我们需要学到第三章 层叠、优先级和继承之后才能有比较清晰的理解。

  2. 作用：CSS的作用是描述HTML或XML文档的呈现——即元素应该如何被渲染。

第三节 CSS的使用方法

   注：这里应当关注CSS如何被引入HTML，选择器、css样式等我们会在后面学习

  1. 内联样式
    1. 在HTML入门速记手册：2.1.4 全局属性中我们介绍过style，它是所有元素都具有的全局属性，作用是给当前元素设置一个内联CSS样式，多个样式之间用分号;隔开。
    2. 示例 
      <!-- 给div设置背景色为pink，字体颜色为红色 -->
<div style="background-color:pink;color:red">
    我是div
</div>
      div.png
  2. 内部样式

    1. 将css样式写到<style>标签内，这种方式需要指定一个选择器(后续章节详细介绍)来选定一个或多个元素，然后再给它们设置样式，样式之间用分号;分隔

    2. 示例

      <!-- CSS部分 -->
<style>
    /* 给文档中的所有div元素设置背景色为粉红色，字体颜色为红色 */
    div {
        background-color: pink;
        color: red;
    }
    /* 给文档中的所有p元素设置字体颜色为蓝色 */
    p {
        color: blue;
    }
</style>

<!-- HTML部分 -->
<div>我的div</div>
<p>我是p标签</p>

      css2.png

  3. 外部样式

    1. 这种样式的写法和内部样式一样，只不过它们被放入一个.css文件中，而且无需<style>标签包裹起来，它们需要通过<link>标签引入。这种方式符合Web标准——结构、表现、行为分离。

    2. 示例

      <!-- a.css文件内容，假定a.css和当前HTML文档放在同一目录 -->
div {
    background-color: pink;
    color: red;
}
p {
    color: blue;
}

<!-- HTML部分，将当前目录下的a.css文件引入当前文档 -->
<link href="stylesheet" rel="./a.css">

<div>我的div</div>
<p>我是p标签</p>

      css2.png

第四节 CSS注释

  1. 语法：/* 注释内容 */，它是一个多行注释
  2. 要点：CSS注释只能写到<style>标签内，或者.css文件内

第五节 CSS书写规范

  1. 一行只写一个样式
  2. 每个样式都以分号;结尾
  3. 选择器与{之间空一格
  4. 样式与值之间的:后面空一格
  5. 建议按层级进行缩进——提高可读性，为未来学习CSS预处理打下基础 
    <style>
    /* 导航栏 */
    .nav {
        width: 100%;
        height: 50px;
        }
        .nav > div {
            float: left;
            height: 100%;
        }
        
        /*  导航栏左部分 */
        .nav .left {
            width: 20%;
            background-color: pink;
        }
        
        /*  导航栏右部分 */
        .nav .right {
            width: 80%;
            background-color: #bfc;
        }
</style>

<div class="nav">
    <div class="left">
        left
    </div>
    
    <div class="right">
        right
    </div>
</div>
    gs.png

第二章 CSS选择器

第一节 简介

选择器是用来选择HTML中的元素、元素的状态或元素的某一部分的符号，它非常强大和灵活。

第二节 简单选择器

选择器名称符号作用示例
通配选择器*选定任意类型(tag)的html元素。它的性能最低，不推荐使用，详情见MDN：通配选择器* {color: red}
标签选择器标签名选定某个类型的标签或元素a {color: red}
类选择器.className选取class属性项含有className的所有元素。属性项见
HTML入门速记手册：2.1.3 标签的属性。它实际上与属性选择器[class~=className]等价(下节讲解)，区别在于优先级不同(后续讲解)。		.foo {color: red}
ID选择器#idName选定一个id属性值为idName的元素。通常，一个元素的id属性值在页面中是唯一的，如果它不是唯一的，那么ID选择器只会选取第一个匹配到的元素。#username {color: red}

第三节 HTML属性选择器(包括标准属性和自定义属性)

语法作用示例
[attr]选定具有attr属性的元素[d] {}
选择具有属性d的元素
[attr="v"]选定attr属性值等于字符串"v"的元素[d="ab"] {}
选定d属性值等于"ab"的元素
[attr^="v"]选定attr属性值以字符串"v"开头的元素[d^="ab"] {}
选定d属性值以字符串"ab"开头的元素
[attr$="v"]选定attr属性值以字符串"v"结尾的元素[d$="ab"] {}
选定d属性值以字符串"ab"结尾的元素
[attr~="v"]选定attr属性具有属性项"v"的元素，属性项见
HTML入门速记手册：2.1.3 标签的属性		[d~="ab"] {}
选定d属性具有属性项"ab"的元素
[attr|="v"]选定匹attr属性值等于字符串"v"或者以字符串"v-"开头的元素[d|="ab"] {}
选定d属性值等于"ab"或以字符串"ab-"开头的元素
[attr*="v"]选定attr属性值含有字符串"v"的元素[d*="ab"] {}
选择d属性值含有字符串"ab"的元素
<style>
    /* a标签默认字体颜色为红色 */
    a {
        color: red;
    }
    /* 匹配href属性以"#"开头的元素。匹配到第1、3个元素 */
    [href^="#"] {
        background-color: yellow;
    }
    /* 匹配href属性值包含"example"的元素。匹配到第2、4个元素 */
    [href*="example"] {
        background-color: silver;
    }
    /* 匹配href属性包含属性项"test"的元素。匹配到第2个元素 */
    [href~="test"] {
        color: blue;
    }
    /* 匹配href属性以".org"结尾的a元素。匹配到第3个元素 */
    [href$=".org"] {
        color: #bfc;
    }
    /* 匹配href属性值等于"ab"，或以"ab-"开头的a元素。匹配到第4个元素 */
    [href|="ab"] {
        color: pink;
    }
</style>

<ul>
    <li><a href="#internal">Internal link</a></li>
    <li><a href="http://example.com test">Example link</a></li>
    <li><a href="#InSensitive.org">Insensitive internal link</a></li>
    <li><a href="ab-http://example">Example org link</a></li>
</ul>

属性选择器.png

第四节 关系选择器(子代、后代、兄弟)

名称符号语法作用示例
子代选择器>父 > 子选则父亲的直接子代元素#div > [ab] {}
选定id属性值等于"div"的所有具有ab属性的直接子元素
后代选择器空格祖先 后代选定祖先的后代(包括子代)#div [ab] {}
选定id属性值等于"div"的所有具有ab属性的后代元素
相领兄弟选择器+兄 + 弟选定紧跟在兄之后的一个弟弟。兄弟是紧挨着的，兄在前，弟弟紧跟在后面#div + [ab] {}
选定紧跟在id属性值等于"div"的元素后面的元素，并且这个元素具有ab属性
通用兄弟选择器~兄 ~ 第选定兄后面的所有弟弟。弟元素不需要紧跟在兄元素后面，只要在后面即可。#div [ab] {}
选定id属性值等于"div"的元素的后面的具有ab属性的元素
```html
<div class="nav">
    <div class="left">
        <div class="title"> </div>
        <div class="imgbox"> 
            <img src="./image/t1.png">
        </div>
        
        <div class="info"> </div>
    </div>
    
    <div class="right">
    </div>
</div>

<!--

.nav                        
|-- .left                      
|-- -- .title                     
|-- -- .imgbox                    
|-- -- -- img                        
|-- -- .info                     
|-- .right                     

.nav > div     ：选取.left和.right
.nav div       : 选取.left、.title、.imgbox、.info、right
.title + div   : 选取.imgbox
.title ~ div   : 选取.imgbox、.info
-->
```

第五节 伪类选择器

  1. 作用：伪类用于选取元素(包括伪元素)的状态，或特定部分的元素。
  2. 语法：选择器:伪类 {}。如果省略选择器，则默认为*，即所有元素。伪类应与选择器组合在一起使用，这样既可提升性能，又可提升可读性，像这种将多个选择器紧挨着写在一起叫做选择器组合，它表示与关系，即这些元素需要同时匹配多个选择器，见第七节 并列和组合。例如.box[attr] {}，它表示选取包含class属性项box并且具有属性attr的元素。
  3. 常见的伪类
    伪类名作用示例备注
    link元素访问前的状态，链接伪类。通常用于a标签，表示点击前的样式。a:link {}
    设置a标签点击前的样式    		详见第三章：LVFHA
    visited元素访问后的状态，链接伪类。通常用于a标签，表示点击后的样式。出于隐私原因，能通过它修改的样式有限a:visited {}
    设置a标签点击之后的样式    		详见第三章：LVFHA
    hover鼠标移入元素时的状态，动态伪类。它可以用于任何元素(包括伪元素)a:hover {}
    设置a标签鼠标移入时的样式    		详见第三章：LVFHA
    active元素被激活时(如鼠标按下和松开这段时间)的状态，它可用于任何元素，动态伪类。当用鼠标交互时，它代表的是用户按下和松开按键之间的这段时间。a:active {}
    设置a标签点击时(鼠标按下和松开之间)的样式    		详见第三章：LVFHA
    focus1. 它是动态伪类。只有部分元素可以拥有焦点状态，常见的是是a标签和表单元素input、button、select、textarea等
    2. 通常使用tab键和点击元素来令元素拥有焦点状态。
    3. 当这些元素被激活时(active)，它至少拥有:active:hover:focus三种状态。    		input:focus {}详见第三章：LVFHA
    first-child兄弟元素中的第一个元素.foo:first-child {}
    选中一组兄弟元素中的第一个元素，并且这个元素具有class属性项foo    		IE9支持
    last-child兄弟元素中的最后一个元素[d]:last-child {}
    选中一组兄弟元素的最后一个元素，并且这个元素具有属性d    		IE7支持
    first-of-type兄弟元素中相同类型的第一个元素a:first-of-type {}
    选中兄弟元素中类型为a的第一个元素    		IE9支持
    last-of-type兄弟元素中相同类型的最后一个元素a:last-of-type {}
    选择兄弟元素中类型为a的最后一个元素    		IE9支持
    nth-child(an+b)兄弟元素中满足an+b的元素，a、b为用户指定的整数，n不能修改，它的值是0和正整数a:nth-child(2n+1)
    选中兄弟元素中的奇数个元素集合，并且它是a标签    		IE9支持
    nth-of-type(an+b)兄弟元素中相同类型的满足an+b的元素。an+b的解释见上a:nth-of-type(2n)
    选中兄弟元素中类型为a标签的偶数个元素集合    		IE9支持
    nth-last-child(an+b)兄弟元素中从后往前匹配满足an+b的元素
    它是nth-child的反向版本    		a:nth-last-child(2n) {}IE9支持
    nth-last-of-type(an+b)兄弟元素相同类型的元素从后往前匹配满足an+b的元素
    它是nth-of-type的反向版本    		a:nth-last-of-type(an+b)IE9支持
    only-child选取只有一个子元素的子元素。还可以写成:first-child:last-child、:first-of-type(1):last-of-type(1)，区别在于优先级不同a:only-child {}IE9支持
    only-of-type选取兄弟元素中某个类型只有一个元素的元素div :only-of-type {}IE9支持
    not(选择器)选取选择器之外的元素。它不能嵌套使用，建议使用基本选择器。:not(.box) {}选取没有class属性项box的元素IE9支持
    empty选取没有子元素的元素。子元素包括元素节点或文本（包括空格），如<i> </i>是包含子元素的div:empty {}IE9支持

第六节 伪元素选择器

  1. 作用：伪元素通常用来选取元素的特定部分。

  2. 语法：选择器::伪元素 {}。任何时候，伪元素都需要写在最后面。按照规范，伪元素应使用2个冒号::，不过旧版的W3C并未做区分，因此绝大多数浏览器都支持使用:和::来表示伪元素。

  3. 常见的伪元素

    伪元素名作用示例备注
    before创建一个虚拟元素，作为已选元素的第一个子元素
    1. 这个元素默认的行内元素inline
    2. 它需要配合CSS属性content属性来给这个元素添加内容，通常是一个文本字符串、字体图标或可替换元素资源如图片(url(资源路径))
    3. 不要给表单元素(不包括form)、替换元素(如img、video、audio)设置before    		a::after {}IE9
    after创建一个虚拟元素，作为已选元素的最后一个子元素
    其他同after    		同上IE9
    first-letter选取块元素(包括行内块)的第一个字母a::first-letter {}IE9。能给它设置的属性有限，如字体、背景、颜色、边框内外边距等，详见MDN ::first-letter
    first-line选取块元素(包含行内块)的第一行.foo:first-line {}IE9。能给它设置的属性有限，如字体、背景、颜色等，详见MDN ::first-line

第七节 并集、交集选择器

  1. 并集选择器
    1. 多组选择器可以用逗号,将它们连接起来，这样它们都应用同一套CSS规则。常用于共有的CSS属性书写，它可以简化代码量。
    2. 示例 
      /* .left、.right具有相同的属性：float*/
.nav .left {
    float: left;
    width: 20%;
}
.nav .right {
    float: left;
    width: 80%;
}

/* 相同属性 */
.nav .left,
.nav .right {
    float: left;   
}
.nav .left {
    width: 20%;
}
.nav .right {
    width: 80%;
}
  2. 交集选择器

    1. 选择器可以紧挨着写在一起，它表示与关系(交集)——即同时匹配多个选择器，除伪元素需要写在最后面之外，其他选择器位置不限。例如div.box#username[login]:first-child::first-line {}表示选取同时满足以下条件的元素的第一行(::first-line)：

      1. 元素类型为div
      2. class属性项包含box
      3. id属性值等于username
      4. 具有属性login
      5. 它是父元素的第一个子元素(:first-child)

    2. 示例

      /* 所有的div元素设置颜色为粉红：它会匹配到3个元素 */
div {
    color: pink;
}
/* 所有具有class属性项box的div元素设置为蓝色：它会匹配到第2和第3个元素 */
div.box {
    color: blue;
}
/* 所有具有class属性项box同时包含id属性项box的元素设置为红色：它会匹配到第3个元素 */
.box[id~="box"] {
    color: red;
}

<!-- HTML部分-->
<div> div </div>
<div class="box"> div2 </div>
<div class="box" id="b2 box"> div3 </div>

      组合.png

第八节 选择器练习网站

点击打开：CSS餐厅

第三章 层叠与继承

第一节 CSS声明的来源

  1. 用户代理样式：它是所有浏览器都自带的一个基本样式表，它用来给网页的元素设置默认的最基础的样式，例如：

    <span>正常文本</span>
<em>我是斜体</em>                  <!-- 具有用户代理样式：em { font-style: italic; } -->
<del>我是删除线</del>              <!-- 具有用户代理样式：del { text-decoration: line-through; } -->

    用户代理样式.png


    如上图，按F12开启开发者工具，点击em元素，我们可以看到em有一个用户代理样式(em { font-style: italic; })，正是因为这个用户代理样式，才使得em元素显示为斜体；del显示下划线也是因为它具有用户代理样式(del { text-decoration: line-through;)。span没有这类样式，所以它的文本是正常显示的。
    不同浏览器的用户代理样式存在差异，为了使页面样式标准和统一，通常我们会使用一个作者样式来覆盖掉用户代理样式——作者样式比用户代理样式具有更高的优先级。这个样式表通常被称为CSS重置样式表。

  2. 作者样式：网页创作者(网页开发人员)所定义的样式，通常是指内联样式、内部样式和外部样式，在浏览器的开发者工具中还可以添加临时的调试样式(inspector-stylesheet)，它也属于作者样式。

  3. 用户样式：浏览器的用户所定义的样式。它是一个.css文件，需要通过以某种方式引入。以IE浏览器为例，点击菜单栏的工具、internet选项，在常规选项卡中点击辅助功能，在用户样式表中选取一个.css文件作为用户样式引入。

第二节 重要声明

  1. !important作用于某个具体的样式，表示它是重要声明的CSS样式。
  2. 它需要写在具体样式属性值的最后面： 
    .foo {
    font-size: 18px !important;   /* 重要声明的CSS样式 */
    color: red;                   /* 普通css样式 */ 
}
  3. 用户代理样式、作者样式、用户样式都可以使用!important进行修饰。

第三节 层叠

1. 层叠的含义

我们发现，用户代理样式、作者样式和用户样式的作用范围是重叠的，那么当样式发生冲突时，哪个样式会生效呢？
合并来自多个源的属性值的算法称之为层叠，它解决了两个问题：同源样式的优先级问题、不同源样式的优先级问题。

1. 不同源样式的优先级

  1. 不同源样式根据样式来源来确定优先级，简单的说，优先级高的样式会生效：

    样式来源优先级
    用户代理样式1(最低)
    用户样式2
    作者样式：内联样式、内部样式、外部样式、调试样式3
    CSS动画4
    !important作者样式5
    !important用户样式6
    !important用户代理样式7
    CSS过渡8(最高)

  2. 通俗理解：通常情况下，作者样式(3)比用户样式(2)拥有更高的优先级，这是开发人员期望看到的，但是用户拥有最终的选择权，可以通过!important用户样式(6)覆盖掉任何想要覆盖的作者样式(3、5)；用户代理样式(1)通常只提供最基础的样式，所以优先级低于用户样式(2)和作者样式(3)，当某个用户代理样式(7)需要使用!important声明时，那么浏览器肯定不希望它被作者样式(3、5)和用户样式(2、6)所覆盖，所以它的优先级要比作者样式和用户样式高。

  3. 不同源样式优先级示例

    层叠.png

2. 同源样式的优先级

  1. 同源样式的优先级是根据选择器的权重计算得到的：

    1. 当选择器优先级不同时，优先级高的样式生效；
    2. 当选择器优先级相同时：
      1. 就近原则：最近(后)声明的样式优先
      2. 如果它们以不同方式引入(内部样式<style>、<link>)，靠后引入的样式生效
      3. 如果它们出现在相同的内部样式<style>或.css文件内，靠后出现的样式生效
    3. 同源的!important样式冲突时，靠后引入和靠后出现的样式生效，这也是修改!important样式的唯一方式。

  2. 选择器的权重

    项目权重位置示例使用说明
    内联样式1000千位<i style="color:red">斜体</i>谨慎使用。它的优先级很高，并且不符合W3C推荐的结构、表现分离。
    ID选择器100百位#nav {}少量使用
    类选择器、属性选择器、伪类选择器(除伪类:not()外)10十位.nav {}
    标签选择器、伪元素选择器1个位a {}
    通配选择器*、关系选择器(空格、>、+、~)、伪类:not()00* {}权重为0的优先级高于继承样式
    使用*和not()时需考虑继承性

  3. 选择器优先级的计算

    1. 将选择器的权重相加即可得到该样式的优先级，同一位置的权重相加不会进位，即：不会无论多少个的类选择器组合在一起都不会超过一个ID选择器的权重。
    2. 示例 
      <style>
    div:first-letter {}                          /*优先级 0002 */
    .box > li::first-line {}                     /*优先级 0012 */
    li > a[href*="en-US"] > .inline-warning {}   /*优先级 0022 */
    span#box.nav[title] {}                       /*优先级 0121 */
    * {}                                         /*优先级 0000 */
    .box .lf > span {                            /*优先级 0021 */
        font-size:16px;                          /*优先级 0021 */
        color:red!important;                     /* 
                                                   重要作者声明：它的优先级高于普通样式
                                                 */
    }
</style> 

<!-- HTML -->
<span style="color:red;">                        /*优先级 1000 */

第四节 继承

1. 继承简介

继承是一种规则，它允许元素的样式可以应用于它的后代。

2. 默认可继承样式
样式类简介
字体相关font-字体相关的属性。如字体组合font、字体族font-family、字体粗细font-weight、字体尺寸font-size、字体风格font-style等
文本相关text-文本相关的属性。如文本缩进text-indent、文本水平对齐text-align、行高line-height、字体颜色color、词间距word-spacing、字符间距letter-spacing、文本书写方向direction、文本大小写text-transform等
通用可继承样式元素可见性visibility、鼠标样式属性cursor
表格相关暂略
列表相关暂略
页面相关暂略
声音相关暂略
3. 默认不可继承样式
样式类简介
dispaly框类型
文本相关垂直文本对齐vertical-align、文本装饰text-decoration、文本阴影text-shadow、空白符处理white-space
盒子模型宽width、高height、内边距padding、边框border、外边距margin
背景相关背景组合background、背景色background-color、背景图片background-image、背景是否重复background-repeat、背景位置background-position
定位浮动float、清除浮动clear、定位position、定位top、定位bottom、定位left、定位right、最小宽min-width、最小高min-height、最大宽max-width、最大高max-height、溢出容器处理overflow、z轴z-index、clip
生成内容content
轮廓样式outline、outline-style、outline-width、outline-color
页面暂略
声音暂略
4. 控制继承
属性值含义兼容性
inherit该样式继承父元素的样式，任何样式(包括不可继承样式)都可以通过这个属性继承IE8支持
initial该样式使用样式的初始值——不是用户代理样式的默认值IE不支持
unset如果该样式是可以从父元素继承的可继承样式，那么就使用父元素的继承样式属性值
否则使用该样式的初始值		IE不支持
/* MDN例子 */
body {
    color: green;
}
          
.my-class-1 a {
    /* 继承父元素的样式 */
    color: inherit;
}
          
.my-class-2 a {
    /* 继承用户代理的默认值 */
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}

<ul>
    <li>Default <a href="#">link</a> color</li>
    <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
    <li class="my-class-2">Reset the <a href="#">link</a> color</li>
    <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

控制继承.png

第一个link的颜色作者样式没有指定，所以继承用户代理样式中<a>标签的默认颜色值。
第二个link的颜色继承父元素<li>的颜色green。
第三个link的颜色继承样式color的默认值——黑色F000。
第四个link的颜色继承父元素<li>的颜色green。

MDN：层叠与继承

5. 继承样式的权重

继承样式没有权重，它的优先级比所有的选择器都要低，注意没有权重与权重为0是不一样的：

* {                                /* 选择器权重0000 */
    color: pink;
}

div {                             /* 选择器权重0001 */
    color: blue;
}


<div>
    我是div                       <!-- div{} > *{}，故为blue-->
    <p> 我是p </p>                <!-- *{}   > 继承样式，故为pink -->
</div>

继承.png

第五节 LVFHA

情况必定具有的状态可能具有状态
访问前:link
访问后:visited
获得焦点时:focus、:link/:visited:hover、:active
鼠标移入时:hover、:link/:visited:focus
正在点击时:active:hover、:link/visited:focus
  1. 因为所有链接必须要么是未访问的(:link)，要么是已经访问的(:visited)，所以:link、:visited必须位于:focus、:hover、:active的前面，只有这样才不会覆盖:focus、:hover、:active样式。至于:link、:visited谁在前谁在后都没有关系，不过CSS2推荐LV的顺序。
  2. 我们期望元素获取焦点时(:focus)，不会覆盖掉:hover、:active，那么:focus应在它们的前面。
  3. 我们期望正在点击时(:active)样式不会被:hover或:focus所覆盖，那么:acitve应放在它们的最后面。
  4. 这几个选择器还可以组合在一起使用，表示更为确切的状态。例如： 
    :link {}
:visited {}
:hover:link {}             /* 鼠标移入未访问的元素时 */
:hover:visited {}          /* 鼠标移入访问过的元素时 */
:acitve:link {}            /* 正在点击未访问的元素时 */
:active:visited {}         /* 正在点击访问过的元素时 */
  5. FHA示例 lvfha.gif

第四章 值和单位

1. 颜色值

单位说明取值范围示例：红色
代表颜色的单词不常用CSS2.1定义了17个颜色单词red
rgb(红, 绿, 蓝)不常用0-255，整数rgb(255, 0, 0)
#红红绿绿蓝蓝最常见和常用000000-FFFFFF#FF0000

颜色.png

2. 长度单位

单位类别取值范围使用说明备注
cm、mm、pt等绝对长度整数或小数基本不会使用
px相对单位整数或小数像素单位，和屏幕分辨率相关，最常用和常见值为0时后面可以省略单位
em相对单位整数或小数1. 如果它用于font-size属性中，则相对于父元素的font-size的倍数大小
2. 否则，则相对于当前元素的font-size的倍数大小		同时
font-size参考父元素，其他属性参考自身
rem相对单位整数或小数相对于根元素html的font-size的倍数大小，PC端较为常用同上

3. URL

语法：url(资源路径)

常见用途示例
引入外部的样式表文件@import url(css文件路径)
引入外部的图片文件background: url(图片路径)
引入外部的字体文件@font-face {font-family:"myfont";src: url("x.woff")}

4. 角度值和弧度值(变形、旋转)

单位说明取值范围示例
deg角度推荐0~360，整数或小数如直角90° 等于 90deg
rad弧度
A rad = A/180*π		[0, 6.28(360°)]如直角90° 等于 1.57rad
=90/180*π = 1.57

5. 时间值(过渡、动画)

单位说明取值范围
s秒，整数或小数[0, 正无穷大]
ms毫秒，整数[0, 正无穷大]

6. 频率值(声音和语音)

单位说明取值范围
hz赫兹，整数或小数[0, 正无穷大]
mhz兆赫兹[0, 正无穷大]

7. 特殊的关键字

关键字名含义
none运用于部分样式中，表示无或没有
normal运用于部分样式中，表示该样式的正常值或默认值

第二篇 CSS样式

第一章 字体相关样式

1、font-family

  1. 简介

    项目简介
    作用指定一个优先级从高到低的字体列表，以便从中选取合适的字体
    继承性是
    应用于所有元素
    初始值由用户代理样式指定
    语法font-family: 字体名或字体族名, ... 如果字体名存在空格，需要用""括起来

  2. 常用字体和字体族

    名字含义特征其他
    serif衬线字体族笔画结尾有衬线通用字体族，代表一类字体
    sans-serif非衬线字体族笔画结尾平滑通用字体族，代表一类字体
    monospace等宽字体族每个字的宽度相等通用字体族，代表一类字体
    fantasy艺术字体族具有特殊艺术效果通用字体族，代表一类字体
    Mircosoft YeHei微软雅黑字体-常见中文字体，常见于windows操作系统
    Heiti SC黑体-中文字体
    "\5B8B\4F53"宋体-中文字体
    Hiragion Sans GB苹果丽黑字体-中文字体。常见于苹果的IOS、Mac OS
    tahomatahoma字体它是一种无衬线字体，中英文混排时不会出现对不齐的情况操作系统默认字体
    arialarial字体它是一种无衬线字体，这种字体可以确保会被正常打印确保正常打印

  3. 京东的字体族写法

    body {
    family: "Microsoft YaHei", "Heiti SC", tahoma, arial,
            "Hiragino Sans GB", "\5B8B\4F53",sans-serif;
}
/*！
 *   中文字体优先级从高到低：微软雅黑、黑体、苹果丽黑、宋体
 *   英文字体优先级从高到低：tahoma、arial、sans-serif
 */

2、font-weight

  1. 简介

    项目简介
    作用设置字体的粗细
    继承性是
    应用于所有元素
    初始值normal(正常粗细)
    语法font-weight: 100-900的整百整数 或 代表粗细的单词

  2. 常用取值

    单词取值数值取值说明
    normal400正常粗细
    bold700加粗
    bolder不定相对父元素的font-weight更粗
    lighter不定相对父元素的font-weight更细

  3. 相对值：bolder、lighter

    1. bolder和lighter表示相对继承的font-weight值更粗或更细，通常是给子代元素设置，表示它相对于父元素的font-wieght更粗或更细。

    2. 继承值和bolder、lighter

      继承的值bolderlighter
      100-300400100
      400-500700100
      600-700900400
      800-900900700

      border:
      100-300: 400
      400-500: 700
      600-900: 900

      lighter:
      100-500: 100
      600-700: 400
      800-900: 700

  4. 备注

    1. 一些字体只提供bold、normal两种值
    2. 整百整数并没有固定的加粗度，它采用一种叫做回退机制(MDN：font-weight)的算法来确定粗细度，如上例，100-500: normal， 600-900: bold

  5. 示例

    .f700 {
    font-weight: 700;
    }
    .f700 span {
        font-weight: bolder;
    }

.f400 {
    font-weight: 400;
    }
    .f400 span {
        font-weight: lighter;
    }
    

<div class="f700">
    <span>test-700-border = 900</span><br>
    test-700
</div>
<div class="f400">
    test-400<br>
    <span>test-400-lighter = 100</span>
</div>

    font-weight.png

3、font-size

  1. 作用：设置字体的EM Square大小

    项目简介
    作用设置字体的EM Square大小
    继承性是
    应用于所有元素
    初始值medium
    语法font-size: 值

  2. 常见取值

    值说明备注
    small、medium、large等相对默认字体EM Square大小几乎不使用
    larger、smaller相对父元素字体EM Square的大小几乎不使用
    px像素大小常用
    %相对于父元素font-size的百分比
    em相对于父元素font-size的倍数常用
    rem相对于根元素<html>的font-size倍数常用

  3. 详解

    1. 在使用fontForge等软件设计一个字体时，每一个字符都会放在EM Square(或UPM)中，可以将EM Square看成字体容器的模板：
      1. 在OpenType字体(微软和Adobe合作开发的字体格式，后缀名为otf，是TrueType的超集)中，EM Square高度通常是1000的相对单位
      2. 在TrueType字体(苹果和微软合作开发的字体格式，后缀名为ttf)中，EM Square约定高度是值为2的幂相对单位，通常是1024和2048
    2. EM Square中定义了5条度量线来控制字符的位置
      1. Baseline：  基线，所有字母放置的水平线。它是文本中一条稳定的轴线，是校准文本与图片、文本与文本的一条重要的参考线。在字体设计软件中，基线的值被设置为0，其他度量线的值都是相对基线来计算的
      2. X-Height： 小写线，具体是指小写字母x的高度，除去上延和下延部分
      3. Cap Height：  大写线，具体是指直线型大写字母(如B、E)从基线到字母顶部的高度
      4. Ascender：  升部线(或上高)，某些小写字母（例如h、l）会有一个升部（也叫上延），高度超出x-height，这是升部的对齐线
      5. Descender：  降部线(或下深)，某些小写字母（例如p、y）会有一个降部（也叫下延），沿基线往下延长的部分，这是降部的对齐线 EM框.png
    3. 字体高度、容器高度
      1. EM Square只是定义了一个字体容器的模板，字体设计师还必须指定字体的其他信息：
        1. 上高：windows操作系统叫做Win 上高，macos操作系统叫做HHead上高
        2. 下深：windows操作系统叫做Win 下深，macos操作系统叫做HHead下深，HHead下深通常是一个负值，表示从基线(位置0)向下移动多少单位
        3. 行间距：即HHead line gap，它是预留在centent-area上下的空间
        4. 大写线：即Capital Height
        5. 小写线：即X Height
      2. 字体高度：即content-area，即css属性background应用区域，即JavaScript属性offsetHeight获取到的高度：
        1. 谷歌：font-size/EM Square*(上高+下深)
        2. IE9：font-size/EM Square*(上高+下深+行间距)
        3. IE8：font-size/EM Square*(上高+下深)
      3. 字体撑开容器的高度
        1. 谷歌：font-size/EM Square*(上高+下深+行间距)
        2. IE9：font-size/EM Square*(上高+下深+行间距)
        3. IE8：font-size/EM Square*(上高+下深)
      4. 示例：Arial字体，font-size:100px
        1. 使用fontForge获取字体信息 arial-5.png
        2. 根据字体信息画图 arial-3.png
        3. 验证(谷歌浏览器)
          1. 字体高=100/2048*(1854+434)=111.71约等于112px
          2. 容器高=100/2048*(1854+434+67)=114.99约等于115px font-size6.png

  4. font-size总结

    1. font-size设置的是EM Square高度，不是字体的高度，也不是字体撑开容器的高度

    2. 没有CSS属性可以直接设置字体的高度，只能通过EM Square间接的影响字体大小

4、font-style

  1. 简介

    项目简介
    作用指定字体风格(斜体或倾斜)
    继承性是
    应用于所有元素
    初始值normal(正常文本)
    语法font-style: 值

  2. 取值：

    值说明备注
    normal正常文本非斜体或倾斜
    italic斜体。基本来说斜体是一种单独的字体风格，对每一个字的结构都有一些改动。
    最常见的取值，它可以保证最优的斜体版本    		如果没有italic版本，选用oblique版本替代
    oblique倾斜。正常字体的倾斜版。如果没有oblique版本，选用italic版本替代

5、font-variant

  1. 简介

    项目简介
    作用字体变形，一种特殊的小型大写字母文本
    继承性是
    应用于所有元素
    初始值normal(正常)
    语法font-variant: 值

  2. 常用取值

    值说明备注
    normal正常
    small-caps小型大写字母文本大写字母会变得更大
    小写字母会变成一个小型大写字母

  3. 示例

    div {
    font-variant: small-caps;
}
span {
    font-variant: normal;
}

<div>
    The Uses of <span> font-veriant </span> On the Web
</div>

    font-variant.png

6、font

  1. 简介

    项目简介
    作用可以将上述的五个字体相关的属性和文本属性行高(line-height)简写在一起
    继承性是
    应用于所有元素
    初始值无
    语法font: [font-style/][font-weight/][font-fariant] font-size[/line-height] font-family

  2. 组合规律

    1. font-style、font-weight、font-variant任意顺序，如果某个属性值为normal，则可以省略不写
    2. 组合的最后必须是font-size、font-family，必须具备这两个属性，也必须以这样的顺序书写
    3. 如果有行高，则行高需要写在font-size后面，并用/与之分隔

  3. 示例

    h2 {
    /* 字体风格 字体变形 字体大小 字体族*/
    font: italic small-caps 30px "微软雅黑", sans-serif;
}
h2 {
    /* 字体粗细 字体风格 字体变形 字体大小/行高 字体族*/
    font: bold italic small-caps 200%/1.2 "微软雅黑", sans-serif;
}

7、@font-face规则

1. 自定义字体

  1. 使用方法

    /* 声明 */
@font-face {
    font-family: "自定义字体名";
    src: url("x.eot");   /* IE9、10、11 */
    src: url("x.eot?#iefix") format("embedded-opentype"), /* IE6-IE8*/
         url("x.woff") format("woff"),  
         url("x.ttf") format("truetype"), 
         url("x.svg#myfont") format("svg"); /* Safari和Safari iOS */
}
.myicon {
    font-family: "自定义字体名";
}

<i class='myicon'>&#33;</i>

  2. 字体兼容性

    字体名兼容性
    woff2013年的浏览器支持(欧朋Mini不支持)
    ttf、otf比woff兼容性更高(欧朋Mini不支持)
    eotIE浏览器支持
    svg苹果浏览器支持

  3. 示例

    @font-face {
        font-family: "zkfont";
        src: url(./fonts/站酷渔阳体.ttf);
    }
.zkfont {
    font-family: "zkfont";
}

<span>正常字体</span>
<span class="zkfont">测试字体-站酷渔阳体</span>

    自定义字体.png

2. 字体图标

  1. 简介：Web中的图片大部分是标量的，放大后会出现失真现象，图片作为替换元素，无法对它本身设置样式。字体图标是把图标做成矢量的字体，这种图标缩放不会失真，而且可以设置颜色、背景色等各种样式。

  2. font-awesome引入方法

    /* 引入本地的font-awesome文件，需要下载 */
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<style>
    span {
        color: red;
    }
</style>

<div>
    <span class="fa fa-bell"></span>
    Font awesome
</div>

    字体图标.png
    详细的使用方法见Font Awesome

  3. font-awesome源码(font-awesome.min.css)

    /*!
 * 自定义字体：FontAwesome 
 * 为了兼容所有浏览器，提供了5种格式的字体文件：eot、woff、woff2、ttf、svg
 */
@font-face {
    font-family: 'FontAwesome';  
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');  /* IE9及其以上 */
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),    /* IE6-IE8 */
        url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
        url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
        url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
        url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); /* Safari、Safari ios */
    font-weight: normal;
    font-style: normal;
}
/* fa类：行内块容器，给这个类添加自定义字体：FontAwesome */ 
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 图标类示例：给before添加一个字符编码，这个字符编码对应字体文件中一个具体的字体图标 */
.fa-bell:before {
  content: "\f0f3";
}
/* 其他图标略 */

    <!--  使用方法：
 - 1. 引入css文件
 - 2. 给元素设置fa类和具体的图标类(如fa-bell)，这两个类是必须添加的
 -    图标被设置在元素的虚拟的子元素before上，它会继承font-family、font-size等属性
 -->
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<span class="fa fa-bell"></span>

8、color

  1. 简介

    项目简介
    作用指定元素的文本颜色
    继承性是
    应用于所有元素。包括伪元素:first-line、:first-letter
    初始值无
    语法color: 值

  2. 值

    单位说明取值范围示例：红色
    代表颜色的单词不常用CSS2.1定义了17个颜色单词red
    rgb(红, 绿, 蓝)不常用0-255，整数rgb(255, 0, 0)
    #红红绿绿蓝蓝最常见和常用000000-FFFFFF#FF0000

9、text-transform

  1. 简介

    项目简介
    作用设置元素中文本的大小写
    继承性是
    应用于所有元素。包括伪元素:first-line、:first-letter
    初始值无
    语法text-transform: 值

  2. 值

    值说明备注
    none正常文本
    capitalize首字母大写每个单词的首字母大写
    uppercase大写所有英文转换为大写
    lowercase小写所有英文转换为小写

10、letter-spacing

  1. 简介
    项目简介
    作用设置元素文本字符之间的间距
    继承性是
    应用于所有元素。包括伪元素:first-line、:first-letter
    初始值normal(默认间距)
    语法letter-spacing: 值
  2. 值
    值说明备注
    none默认间距
    pxpx单位可为负
    em相对于当前元素的font-size大小可为负
    rem相对于根元素font-size大小可为负

11、word-spacing

  1. 简介

    项目简介
    作用设置元素文本单词之间的间距，不支持中文
    继承性是
    应用于所有元素。包括伪元素:first-line、:first-letter
    初始值normal(默认间距)
    语法word-spacing: 值

  2. 值

    值说明备注
    none默认间距
    pxpx单位可为负
    em相对于当前元素font-size大小可为负
    rem相对于根元素font-size大小可为负

12、text-decoration-style

  1. 简介

    项目简介
    作用设置元素中文本修饰线的类型
    继承性否
    应用于所有元素
    初始值solid
    语法text-decoration-style: 值
    兼容性CSS3属性，IE浏览器不支持

  2. 值

    值说明备注
    none无装饰线非标准属性
    solid一条实线
    double一条双实线
    dotted一条点划线(使用.连接起来的划线)
    dashed一条虚线
    wavy一条波浪线

13、text-decoration-line

  1. 简介

    项目简介
    作用设置元素中文本修饰线的位置
    若不同位置都有文本修饰线则使用|将其隔开
    继承性否
    应用于所有元素
    初始值none
    语法text-decoration-line: 上方 | 中间 | 下方
    兼容性CSS3属性，IE浏览器不支持

  2. 值

    值说明备注
    none无文本修饰线效果
    overline文本上方有一条文本修饰线
    line-through文本中间有一条文本修饰线
    underline文本下方有一条文本修饰线

14、text-decoration-color

  1. 简介

    项目简介
    作用设置元素中文本修饰线的颜色
    继承性否
    应用于所有元素
    初始值none
    语法text-decoration-color: 颜色单位
    兼容性CSS3属性，IE浏览器不支持

15、text-decoration

  1. 简介

    项目简介
    作用CSS2：单值属性。值为位置或none，多个位置用空格隔开
    CSS3：复合属性。设置元素文本修饰线的位置、颜色、种类。
    继承性否
    应用于所有元素
    初始值-
    CSS3语法text-decoration: [位置1 位置2] [种类] [颜色]位置、种类、颜色没有先后顺序
    多个位置必须用空格分隔写在一块

  2. text-decoration属性延伸

    1. 祖先的text-decoration属性会延伸给后代(不是继承)，且后代无法通过text-decoration: none来删除祖先设置的text-decoration属性
    2. 我们可以通过这个特性来为每一条装饰线设置种类、颜色 
      <style>
    .top-line {
        text-decoration: overline;                                 /* IE浏览器：属性延伸写法1*/
        text-decoration: overline pink solid;
        }
        .middle-line {
            text-decoration: line-through;                         /* IE浏览器：属性延伸写法1*/
            text-decoration: line-through blue dotted; 
            }
            .bottom-line {
                text-decoration: underline;                        /* IE浏览器：属性延伸写法1*/
                text-decoration: overline line-through underline;  /* IE浏览器：写在一起。和属性延伸写法效果一样 */
                text-decoration: underline red wavy;
            }
</style>

<div class="top-line">
    <div class="middle-line">
        <div class="bottom-line">
            text-decoration属性延伸
        </div>
    </div>
</div>

    text-decoration.png

16、text-shadow

  1. 简介

    项目简介
    作用设置文本中字符的阴影，多组阴影用,逗号隔开
    每组阴影由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成
    偏移量可以为负(x向上、y向左)，并且必须指定
    模糊半径不能为负
    继承性否
    应用于所有元素
    初始值颜色初始值为文本的颜色
    语法text-shadow: [颜色值] x偏移 y偏移 [颜色半径]
    兼容性IE9不支持

  2. 值

    1. 如果只需要模糊，将偏移量设置为0即可：text-shadow: 0 0 1px

    2. 颜色半径越大，阴影就越大越淡

    3. MDN示例

      <style>
    .white-with-blue-shadow {
        text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
        color: white;
        font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
    }
</style>

<p class="white-with-blue-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

      text-shadow.png

17、line-height

  1. 简介
    项目简介
    作用指定多行文字基线之间的距离
    继承性是
    应用于所有元素
    初始值normal
    语法line-height: 值

行高.png

  1. 值

    值说明
    数字值 = font-size * 数字
    如果这个值大于文字内容区center-area的值，那么多余的空间就会平均分配至center-area上下部分，背景色会侵入这部分空间
    如果这个值小于文字内容区center-area的值，那么它会导致父容器高度变小，这个值不要小于center-area

第二章 文本

第一节 text-indent

  1. 作用：定义块元素的首行缩进量

    项目简介
    作用定义块元素的首行缩进量
    继承性是
    应用于块元素
    初始值0
    语法块元素 { text-indent: 值 }

  2. 常见取值

    值单位取值范围说明备注
    px正负数
    %正负数相对于块元素的宽度
    em正负数相对于当前元素的font-size倍数大小
    最常用    		缩进量为负可以让文本向左溢出块元素
    通常情况下，1em可以缩进1个中文字符或2个英文字符。

    text-indent.gif

第二节 white-space

  1. 作用：定义块元素的首行缩进量
    项目简介
  2. 值
    值说明备注
    normal多个空格处理为1个空格
    换行处理为1个空格
    一行装不下会自动换行
    nowrap空格、空行无效，
    pre保留空格、换行，按原样输出

第三章 列表

第四章 表格

第五章 鼠标

第六章 图片

第七章 背景

第八章 渐变

第十章 过渡

第十一章 动画

第十二章 变形

第三篇 CSS布局

第一章 文档流

第一节 盒子模型

第二节 inline、block、inlin-block

第三节 表格布局

第四节 弹性布局flex

第五节 网格布局grid

第二章 脱离文档流

第一节 浮点

第二节 绝对定位

avatar
文章
阅读
粉丝