CSS学习笔记

1 选择器

1-1 元素选择器

  • 文档的元素就是最基本的选择器,比如: bodyph1

    1
    2
    body {font-size:100%;}
    p {text-align: center}

1-2 类选择器

  • 需要使用class配合使用

    1
    2
    3
    4
    5
    6
    .txt {
    text-align: center;
    color: aquamarine;
    }

    <p class="txt">这里使用了class="txt"</p>
  • 也可以配合元素选择器指定响应范围

    1
    2
    3
    4
    5
    6
    7
    // 指定了段落中的 class="txt" 才会变成红色
    p.txt {
    color: red;
    }

    <p class="txt">这里的文字会变成红色</p>
    <div class="txt">这里的文字不会变成红色</div>
  • 多个类选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .txt {
    color: red;
    }

    .txt2 {
    font-style: italic;
    }

    // class 值可以是一个列表,使用空格隔开
    <p class="txt txt2">这里的文字斜体,红色</p>
  • 多个类选择器相连,元素中需要同时包含这些类名

    1
    2
    3
    4
    5
    .txt.txt2 {
    color: red;
    }
    <p class="txt txt2">这里的文字是红色的</p>
    <p class="txt txt3">这里的文字 不 是红色的</p>
  • 多个类选择器中具有相同属性,以选择器的定义顺序,使用后定义的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .txt {
    color: red;
    }

    .txt2 {
    color: green;
    }

    // 无论 txt txt2 位置如何替换,该段落中的文字显示一直为绿色
    <p class="txt txt2">这里使用了class="txt txt2"</p>

    但如果类选择器定义的顺序换了,则会影响段落中文字的变换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .txt2 {
    color: green;
    }

    .txt {
    color: red;
    }

    // 虽然 txt 在前,但最终显示的红色,以选择器定义的顺序为准
    <p class="txt txt2">这里使用了class="txt txt2"</p>

1-3 ID 选择器

  • 使用#定义,需要配合id使用

    1
    2
    3
    4
    5
    #red {
    color: red;
    }

    <div id="red">这里的文字是红色的</div>
  • 注意点

    • ID在同一个HTML文档中,只能出现一次
    • IDclass不同,没有值列表

1-4 属性选择器

  • 选择具有某个/某些属性的元素[attribute]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 匹配一个属性
    [data] {color: red}
    <span data="enen">这里是红色的</span>

    // 同时匹配多个属性
    [href][title] {color: green}
    <a href="#">这里是默认的颜色</a>
    <a href="#" title="enen">这里是绿色的</a>
    <p href="#" title="enen">这里也是绿色的</p>

    // 再加一个限制,只有链接才会变绿色
    a[href][title] {color: green}
    <a href="#" title="enen">这里是绿色的</a>
    <p href="#" title="enen">这里不会变成绿色</p>
  • 指定属性和值[attribute=value]

    1
    2
    3
    4
    5
    6
    [href="https://qsyx.top"] {
    color: red;
    }

    <a href="https://qsyx.top">这里会变成红色</a>
    <a href="https://google.com">这里不会变成红色</a>
  • 值中包含指定词汇[attribute~=value]

    1
    2
    3
    4
    5
    6
    7
        [data~="a"] {
    color: red;
    }

    <p data="a b">包含 a 这里会变成红色</p>
    <p data="a c">包含 a 这里会变成红色</p>
    <p data="d e">不包含 a 这里不会变成红色</p>
  • 以指定值开头的属性值的元素 [attribute|=value]value必须是一个单词

    1
    2
    3
    4
    5
    6
    7
    8
    9
        [data~="a"] {
    color: red;
    }

    <p lang="en">lang="en" 红色</p>
    <p lang="en-zh">lang="en-zh" 红色</p>
    <p lang="en_zh">lang="en_zh" 默认黑色</p>
    <p lang="enZH">lang="enZH" 默认黑色</p>
    <p lang="zh">lang="zh" 默认黑色</p>
  • 匹配指定值开头的属性值的元素 [attribute^=value]

    1
    2
    3
    4
    5
    6
    7
    8
    9
        [data^="a"] {
    color: red;
    }

    <p lang="en">lang="en" 红色</p>
    <p lang="en-zh">lang="en-zh" 红色</p>
    <p lang="en_zh">lang="en_zh" 红色</p>
    <p lang="enZH">lang="enZH" 红色</p>
    <p lang="zh">lang="zh" 默认黑色</p>
  • 匹配属性值以指定值结尾的每个元素[attribute$=value]

  • 匹配属性值中包含指定值的每个元素[attribute*=value]

1-5 后代选择器

  • 比如我们打算把h1中的span都加上strong,这样h2或者p中的span不会收到影响

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    h1 span {
    color: red;
    }

    <h1>
    <em>em 不会变红</em>
    <span>span 变红</span>
    </h1>
    <h2>
    <em>em 不会变红</em>
    <span>span 不会变红</span>
    </h2>
  • 也可以通过类选择器加强选择

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    div.import span {
    color: red;
    }

    // 仅有包含了 import 的 div 中的 span 才会匹配成功
    <div class="import">
    <em>em 不会变红</em>
    <span>span 变红</span>
    </div>
    <div>
    <em>em 不会变红</em>
    <span>span 不会变红</span>
    </div>
  • 以上例子中,无论divspan隔了多远,都会作用到。如果想缩小范围,请用子元素选择器

    1
    2
    3
    4
    5
    div span {
    color: red;
    }

    <p><p><p><p><span>span 变红</span></p></p></p></p>

1-6 子元素选择器

  • 子元素使用子结合符>,子结合符两边可以包含空格

  • 子元素可以是类选择器子选择器元素选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    div > span {
    color: red;
    }
    div > #hi {
    color: green;
    }
    div > .hi {
    color: blue;
    }

    <div>
    <span>span 1 变红</span>
    <p><span>span 2 不变红</span></p>
    <span>span 1 变红</span>
    <p id="hi">可以是 ID 选择器</p>
    <p class="hi">可以是 类 选择器</p>
    </div>

1-7 相邻兄弟选择器

  • 使用+~表示兄弟选择器,但有些区别

  • +是相邻,紧挨着的

    1
    2
    3
    4
    5
    6
    7
    8
    h1 + p {
    color: red;
    }

    <h1>h1 + p 同一个父元素 body,不会变化,它紧挨着的兄弟才会受影响</h1>
    <p>h1 + p 同一个父元素 body,红色</p>
    <p>h1 + p 同一个父元素 body,但非相邻,不是红色</p>
    <h1><p>非同一个父元素,不是红色</p></h1>
  • ~相邻的所有指定元素

    1
    2
    3
    4
    5
    6
    7
    h1 ~ p {
    color: red;
    }

    <h1>h1 + p 同一个父元素 body,不会变化,它的兄弟们才会受影响</h1>
    <p>h1 + p 同一个父元素 body,红色</p>
    <p>h1 + p 同一个父元素 body,红色</p>
  • 一定是相邻的,以上示例中,如果h1p中间隔了div,则匹配失败

1-8 伪类

  • 锚伪类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* 未访问过的链接 */
    a:link {
    color: red;
    }
    /* 已访问过的链接 */
    a:visited {
    color: blueviolet;
    }
    /* 鼠标移动到链接上 */
    a:hover {
    color: green;
    font-size: 2rem;
    }
    /* 选定的链接 */
    a:active {
    background-color: greenyellow;
    }

    <a href="#">锚伪类</a>
    • CSS定义中,a:hover 必须被置于 a:linka:visited 之后,才是有效的
    • CSS定义中,a:active 必须被置于 a:hover 之后,才是有效的
  • first-child伪类,标记在哪个元素就是哪个元素,而不是其的第一个子元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 匹配第一个p
    p:first-child {
    color: red;
    }

    <p>
    hi 1-1 红色
    <span>1-1 span 红色</span>
    <p>hi 1-2 非红色</p>
    <span>1-1 span 非红色</span>
    </p>
    <p>hi 2-1 非红色</p>

    // 所有p中的第一个span
    <p><span>1 红色</span> <span> 2 非红色</span></p>
    <p><span>1 红色</span> <span> 2 非红色</span></p>
  • lang伪类为不同的语言定义特殊的规则

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    q:lang(python) {
    quotes: "'" "'";
    }
    q:lang(cpp) {
    quotes: '"' '"';
    }

    <p><q lang="python">python</q></p>
    <p><q lang="cpp">c++</q></p>

    // 输出:
    // 'python'
    // "c++"
  • focus伪类在元素获得焦点时向元素添加样式,ie堪忧

    1
    2
    3
    4
    5
    6
    input:focus {
    background: green;
    }

    // 点击输入框,获得焦点时背景呈现绿色
    <input type="text" />

1-9 伪元素

  • first-line用于向文本的首行设置特殊样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    p::first-line {
    color: red;
    }

    <p>
    hi first line <br />
    second line
    </p>

    // `first-line`只能用于块级元素
    // 以下属性可以应用于`first-line`
    > font
    > color
    > background
    > word-spacing
    > letter-spacing
    > text-decoration
    > vertical-align
    > text-transform
    > line-height
    > clear
  • first-letter用于向文本的首字母设置特殊样式,中文首字

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    p::first-letter {
    color: red;
    font-size: xx-large;
    }

    <p>hi first line second line</p>

    // `first-letter`只能用于块级元素
    // 以下属性可以应用于`first-letter`
    > font
    > color
    > background
    > margin
    > padding
    > border
    > text-decoration
    > vertical-align (仅当 float 为 none 时)
    > text-transform
    > line-height
    > float
    > clear
  • :before, :after元素的内容之前/后插入新内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 在列表中插入红色的 |
    li {
    display: inline;
    }
    li:not(:last-child)::after {
    content: '|';
    color: red;
    }

    <ul>
    <li>C++</li>
    <li>Python</li>
    <li>PHP</li>
    </ul>

2 样式

2-1 背景

  • background-color: 背景色

  • background-image: 背景图像,body {background-image: url(http://xxcdn.xx.jpg)}

  • background-repeat: 背景重复,分别在repeat-xrepeat-y方向上重复, no-repeat则不允许在任何方向上平铺

  • background-position: 背景定位,可以使用关键字: topbottomleftrightcenter,不可超过两个关键字,默认为center。也可以使用百分比或者是具体的长度值,左上角为起始点

  • background-attachment: scroll 默认值,图片会随着页面滚动,fixed 背景图片不会一定

2-2 文本

  • text-indent: 缩进文本,p {text-indent: 1rem},缩进值也可以为负数,也可以使用百分比

  • text-align: leftrightcenterjustify,其中, justify是两端文本对齐

  • word-space: 改变字的间隔,默认值为normal0,可以为负数

  • letter-spacing: 改变字母间间隔

  • text-transform: 处理文本,uppercase 大写,lowercase 小写,capitalize 对每个单词的首字母大写

  • text-decoration: 文本装饰

    • underline: 下划线
    • overline: 顶端划线
    • line-through: 贯穿线
    • blink: 文本闪烁
  • white-space: 处理空白符

    • pre: 空白会被浏览器保留
    • nowrap: 文本不会换行,文本会在在同一行上继续,直到遇到
      标签为止
    • pre-wrap: 保留空白符序列,但是正常地进行换行
    • pre-line: 合并空白符序列,但是保留换行符

2-3 列表

  • list-style-type: 列表类型,常用类型如下

    • none: 无标记
    • disc: 默认,标记是实心圆
    • circle: 标记是空心圆
    • square: 标记是实心方块
    • decimal: 标记是数字
    • decimal-leading-zero: 0 开头的数字标记,(01, 02, 03 …)
    • lower-roman: 小写罗马数字(i, ii, iii, iv, v …)
    • upper-roman: 大写罗马数字(I, II, III, IV, V …)
    • lower-alpha: 小写英文字母(a, b, c, d, e …)
    • upper-alpha: 大写英文字母(A, B, C, D, E …)
  • list-type-image: 列表项图像,常用标志不够用,使用自定义图像,ul li {list-type-image: url(xxx.gif)}

2-4 表格

  • border-collapse: 设置是否把表格边框合并为单一的边框,separate 默认分离,collapse则合并

  • border-spacing: 设置分隔单元格边框的距离,一共两个参数: 水平垂直;如果就一个参数,则水平和垂直都是用该值

  • caption-side: 设置表格标题的位置,top 顶部,默认值;bottom 底部

  • empty-cells: 设置是否显示表格中的空单元格,show 显示,默认值; hide 不在空单元格周围绘制边框

  • table-layout: 设置显示单元、行和列的算法,automatic 宽度由单元格内容设定;fixed 由表格宽度和列宽度设定

2-5 轮廓

  • outline-color: 设置颜色

  • outline-style: 设置样式

    • none: 默认,无轮廓
    • dotted: 定义点状的轮廓
    • dashed: 定义虚线轮廓
    • solid: 定义实线轮廓
    • double: 定义双线轮廓,双线的宽度等同于 outline-width 的值
    • groove: 定义 3D 凹槽轮廓,此效果取决于 outline-color
    • ridge: 定义 3D 凸槽轮廓,此效果取决于 outline-color
    • inset: 定义 3D 凹边轮廓,此效果取决于 outline-color
    • outset: 定义 3D 凸边轮廓,此效果取决于 outline-color
  • outline-width: 设置宽度

  • outline: 可按顺序设置colorstylewidth

3 框模型

3-1 概述

  • 从内到外依次是: 元素(element) -> 内边距(padding) -> 边框(border) -> 外边框(margin)

  • 内边距,边框,外边距默认值都是0

  • widthheight是元素区域的宽度和高度,增加内边距和外边距不会影响这两个值

3-2 内边距

  • padding中,可以按照的顺序设置各边的内边框,各边的可以使用不同的单位或者百分比: p {padding: 1px 2rem 3ex 40%}

  • 如果就只有一个参数,则都使用该值

  • 也可以通过以下属性分别设置内边距

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
  • 百分比数值是基于父元素的width计算的,包括内边距也是基于父元素的width计算的

3-3 边框

  • 样式

    • 可能的值

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      none	定义无边框
      hidden 与 "none" 相同,不过应用于表时除外,对于表,hidden 用于解决边框冲突
      dotted 定义点状边框,在大多数浏览器中呈现为实线
      dashed 定义虚线,在大多数浏览器中呈现为实线
      solid 定义实线
      double 定义双线,双线的宽度等于 border-width 的值
      groove 定义 3D 凹槽边框,其效果取决于 border-color 的值
      ridge 定义 3D 垄状边框,其效果取决于 border-color 的值
      inset 定义 3D inset 边框,其效果取决于 border-color 的值
      outset 定义 3D outset 边框,其效果取决于 border-color 的值
      inherit 规定应该从父元素继承边框样式
    • border中,可以使用border-style按照的顺序设置各边框样式,#container {border-style: solid dotted dashed double}

    • 也可以通过以下属性分别设置边框样式

      • border-top-style
      • border-right-style
      • border-bottom-style
      • border-left-style
  • 宽度

    • 使用border-width按照的顺序设置各边框宽度
    • 可以指定长度值,或者使用三个关键字之一: thinmedium(默认),thick,但css并没有定义这三个关键字的具体宽度
    • 也可以分别设置边框宽度
      • border-top-width
      • border-right-width
      • border-bottom-width
      • border-left-width
  • 颜色

    • 使用border-color按照的顺序设置各边框颜色
    • 也可以分别设置边框颜色
      • border-top-color
      • border-right-color
      • border-bottom-color
      • border-left-color

3-4 外边距

  • 外边距margin与内边距padding相似

4 定位

4-1 概述

  • 一切皆为框, divh1p等都称之为块级元素,spanstrong为行内元素。可以使用display属性改变生成的框的内行,设置为block可以让行内元素,比如span表现的像块级元素一样

  • 有三种基本的定位机制: 普通流(默认),浮动,绝对定位

  • position包含 4 个不同的定位

    • static: 默认值,没有定位。元素做为文档流的一部分
    • relative: 相对定位,比如left:20,会向左边添加 20px
    • absolute: 绝对定位,比如top:20,距离父元素顶部 20px。元素从文档流完全删除
    • fixed: 绝对定位,相对于浏览器窗口

4-2 绝对定位

  • 设置为绝对定位的元素从文档流移除了,所占用的空间完全关闭,比如以下示例中,div 3会占用div 2的位置,div 2会遮住大部分div 3。也可以通过设置z-index来控制层次

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div {
    border-style: solid;
    width: 3rem;
    height: 3rem;
    color: white;
    }

    <div style="background-color: red">div 1</div>
    <div style="background-color: black; position: absolute; left: 1rem">div 2</div>
    <div style="background-color: lightgreen">div 3</div>

5 高级

5-1 对齐

  • 块元素是指占据全部可用宽度的元素,并且在其前后都会换行

  • 使用margin属性来水平居中对齐,可通过将左和右外边距设置为 “auto”,来对齐块元素,除非已经声明了 !DOCTYPE,否则使用 margin:autoIE8 以及更早的版本中是无效的。把左和右外边距设置为auto,规定的是均等地分配可用的外边距,结果就是居中的元素。以下代码可以发现元素居中了

    1
    2
    3
    4
    5
    6
    7
    8
    .test {
    margin: 0 auto;
    width: 70%;
    border-style: solid;
    border-color: red;
    }

    <div class="test">hi, I am here.</div>
  • 使用position属性进行左和右对齐,使用绝对定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .test {
    position: absolute;
    right: 0;
    width: 18.75rem;
    border-style: solid;
    border-color: red;
    }

    <div class="test">hi, I am here.</div>
  • 使用float属性进行左和右对齐,如float:leftfloat:right

5-2 尺寸

  • height 设置元素的高度
  • width 设置元素的宽度
  • line-height 设置行高
  • max-height 设置元素的最大高度
  • max-width 设置元素的最大宽度
  • min-height 设置元素的最小高度
  • min-width 设置元素的最小宽度

5-3 分类

  • clear,设置一个元素的侧面是否允许其他的浮动元素,

    • left 在左侧不允许浮动元素
    • right 在右侧不允许浮动元素
    • both 在左右两侧均不允许浮动元素
    • none 默认值。允许浮动元素出现在两侧
  • cursor,规定要显示的光标的类型(形状)

    • url 需使用的自定义光标的 URL,
    • default 默认光标(通常是一个箭头)
    • auto 默认。浏览器设置的光标
    • crosshair 光标呈现为十字线
    • pointer 光标呈现为指示链接的指针(一只手)
    • move 此光标指示某对象可被移动
    • e-resize 此光标指示矩形框的边缘可被向右(东)移动
    • ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)
    • nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)
    • n-resize 此光标指示矩形框的边缘可被向上(北)移动
    • se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)
    • sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)
    • s-resize 此光标指示矩形框的边缘可被向下移动(南)
    • w-resize 此光标指示矩形框的边缘可被向左移动(西)
    • text 此光标指示文本
    • wait 此光标指示程序正忙(通常是一只表或沙漏)
    • help 此光标指示可用的帮助(通常是一个问号或一个气球)