CSS 基础──样式篇

《前端小课──用好HTML》的读书笔记。

使用css三种方式

  1. 外部引入：通过 link 的方式引用 CSS 样式

    <head>
	<link rel="stylesheet" href="style.css">
</head>

  2. 内部引入，在 HTML 中的 head 位置添加 style 标签

    <head>
  <style>
    .title {
      color: red;
      font-size: 18px;
    }
  </style>
</head>

  3. 内联样式

    <p style="color: red; font-size: 18px;">内容</p>

块级标签和 inline 标签

  • 块级标签独占一行；
  • inline 标签会「累加」，如同打字一样，一个字一个字往后拼接，单行显示不全会折行显示；
    • white-space 属性作用就是告诉浏览器遇到「空格」该如何处理，这里的空格不是单纯意义上的空格。
      • normal
      • nowrap

overflow 属性

  • 控制对于超出可视区域的内容如何处理
  • overflow-x ， overflow-y
/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条（默认值） */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

清除标签默认边距

/*清除标签默认边距*/
* {
    margin: 0;
    padding: 0;
}

CSS中的选择器

Untitled

注意：写 CSS 代码的时候，即使某个属性写错，浏览器也不会报错，只会忽略无法识别的 CSS 样式。

  • 标签选择器： 如 p ， li 等

  • class 选择器：如 .first

  • ID 选择器： #firstid

  • 通用选择器： * ，作用于所有的标签

  • 属性选择器：根据属性来匹配HTML元素

    /* 匹配所有使用属性 "lefe" 的元素 */
[lefe] {
    color: green;
}

/*匹配所有使用属性为 "lefe"，且值为 liquid 的元素*/
[lefe="liquid"] {
    background-color: goldenrod;
}

/*匹配所有使用属性为 "lefe"，且值包含 spicy 的元素*/
[lefe~="spicy"] {
    color: red;
}

  • 类似于“正则表达式”的属性选择器，比如： [attr^=val] 匹配以 val 开头的元素， [attr$=val] ,匹配以 val 结尾的元素， [attr*=val] 匹配包含 val 的字符串的元素

  • 伪选择器（pseudo-selectors）：它包含伪类（pseudo-classes）和伪元素（pseudo-elements）。这类选择器不是真正意义上的选择器，它作为选择器的一部分，起到选择器匹配元素的限定条件。

    /* 匹配超链接样式 */
a {
    color: blue;
    font-weight: bold;
}

/* 访问后的状态 */
a:visited {
    color: yellow;
}

/* 鼠标悬停、点击、聚焦时的样式 */
a:hover,
a:active,
a:focus {
    color: darkred;
    text-decoration: none;
}

    • 伪元素（pseudo-elements）选择器，它以“ :: ” 为标识符

      p::first-letter{
  font-weight: bold;
}
p::first-line{
  font-size: 3em;
}

      /* Selects any <p> that is the first element
   among its siblings 
	 p:first-child 选择的是孩子节点中第一个元素是 p 的元素
*/
p:first-child {
  color: lime;
}

  • 组合选择器（Combinators）: 这种选择器可以作用于多个 HTML 元素，有多种组合方式

    • A B {} : A 元素的所有后代元素 B 都会起作用。
    • A > B {} : A 元素的直接子节点会起作用，也就是只适用于 A 节点的第一层所有的子节点。
    • A + B {} : 匹配 A 的下一个兄弟节点，AB具有相同的父节点，并且 B 紧跟在 A 的后面；
    • A ~ B {} : B是 A 之后的任意一个（所有）兄弟节点。
    • A, B {}：A 和 B 元素具有同一规则的 CSS 样式，不同元素使用逗号隔开。

伪选择器

  1. 伪类选择器：作用是选中某个元素中符合某些条件的元素。作用于现有元素，相当于给现有元素添加某些属性。使用单个冒号 :

    :first-child
:not
:nth-child()
:only-child()
:root()
:disabled

  2. 伪元素选择器：作用就是给现有元素添加某些新的内容，就好比给某个元素添加了一个新的标签，使用2个冒号 ::

    ::first-letter 表示对首字母进行操作
::first-line 对首行内容进行操作
::before 给已知元素的前面拼接新的内容
::after 给已知元素的后面拼接新的内容

@规则

@规则在CSS中用于传递元数据、条件信息或其他描述性信息。它们以at符号（@）开头，后跟一个标识符来说明它是什么类型的规则，然后是某种类型的语法块，以分号（；）结尾。由标识符定义的每种类型的 at 规则都有其自己的内部语法和语义。

@charset and @import (metadata)
@media or @document (条件，嵌套申明)
@font-face (描述信息)

下面这个 CSS 只适用于屏幕超过 800px 的设备：

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

@media 语法

@media mediaType and|not|only (media feture) {
  // css
}

border

  • 简写属性，包含 border-width, border-style, border-color。
  • border-width：表示边框的宽度，可以分别设置上下左右边框为不同的宽度，比如 border-bottom-width；
  • border-style: 表示边框的样式，可以分别设置上下左右边框为不同的样式，比如 border-bottom-style，可以取下面几种值：node、hidden、dotted、dashed、solid 等；
  • border-color：表示边框的颜色，可以分别设置上下左右边框为不同的颜色。

一些文字属性

font-size: 文字大小；

font-weight：字重，字体粗细，可以这样理解吧；

color：字体颜色；

text-align：字体对齐方式；

text-decoration: 文字修饰，比如下划线，删除线；

letter-spacing: 文字间距；

line-height: 行高；

font-style:  文字样式，比如斜体；

盒子模型

两种盒子类型

  1. 块级盒子（block）
    • 尽可能扩大可利用的空间
    • 独占一行，也就说一个块级元素占一行
    • 可以使用 width 和 height 属性
    • 使用 padding、margin 和 border 会影响其它元素的位置
  2. 行内盒子（inline）
    • 不会单行显示，除非一行没有足够多的空间，它会一个接一个地排列；
    • width 和 height 属性不起作用，如果给 span 标签设置 width 或 height 时，发现无效；
    • padding、margin 和 border 会起作用，但不会影响其它元素。

通过 display 修改盒子的显示方式

.title {
    display: inline;
}

盒模型

Untitled 1

  • margin（外边距）：它表示盒子之间的距离，可以通过 margin-top、margin-bottom、margin-left、margin-right 来控制各个方向的边距，它们可以为负值；
  • border（边框）：表示盒子的边框；
  • padding（内边距）：表示与内容之间的距离；
  • content（内容）：表示内容的大小；

模式

  1. 标准的盒子模型

    对于这种盒子模式，给它设置的 width 和 height 是 content 的宽高，当给盒子添加 padding 和 border 的时候，会增加盒子的整体大小。「外边距不会计入盒子的大小，它只是表示外部的边距」。

  2. 诡异盒子模型（The alternative CSS box model）

    对于这种盒子模式，给它设置的 width 和 height 是盒子的宽高，也就是说内容 content 的宽需要减去 border 和 padding 的宽。

谷歌浏览器默认的是标准的盒模型，可以通过：

box-sizing: border-box;

来修改盒模型为诡异盒模型。

display

  1. display：inline

  2. display：block

  3. display：inline-block

    这种布局方式结合了 inline 和 block 这两种元素的特性，它与块级元素不同的是：元素不会单独占用一行；相同的是：可以使用 width 和 height，可以通过 padding、margin 和 border 来控制元素的显示位置。

    说白了就是除了不会单独占一行，其余的与块级元素一致。

  4. display：none 隐藏元素

  5. display：flex 一维

  6. display：grid 二维

使用图片

  1. 设置背景图

    		background-color: antiquewhite;
    background-image: url('./logo_suyan.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    • background-postion: 表示背景图的起始位置；
      • background-postion： top | left | bottom | right，在某个边缘的位置，另一个维度为 50%。比如 top，背景图的起始位置为顶部，在X轴方向为 50%，居中显示；
      • background-postion：center，居中背景图；
      • background-postion：25% 75%，设置基于背景区域的开始位置，可以为负值；
      • background-postion-x：背景在 x 轴上的位置；
      • background-postion-y：背景在 y 轴上的位置；
    • background-repeat: 背景的重复方式， no-repat 不重复， repeat 重复， repat-x X轴上重复，还有其它关键字。
    • background-size: 背景图的大小；

  2. img 标签

    行内（inline）元素

    <img class="logo" src="./images/1.png" alt="图片">

    .logo {
		/* 表示设置图片的宽度，如果只设置宽度，那么 img 标签的高度会根据图片的大小进行等比缩放。
       只设置高度也是同样的道理。
       如果即设置了高度又设置了宽度，那么图片的高度和宽度即为设置的宽高。 */
    width: 30px;
    /* 指定行内元素的垂直对齐方式 */
    vertical-align: middle;
}

显示多行文字

text-overflow 和 -webkit-line-clamp

.singal-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.two-line {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

text-overflow：只对块级元素起作用，表示对超出指定区域的内容该如何显示

  • ellipsis：以 … 省略号显示
  • clip截断显示

-webkit-box：webkit 的 CSS 扩展属性

CSS权重

Untitled 2

  • *：通用选择器，权重最低，就是 0，第 1 张图就是此意；
  • div、li>ul、body：元素选择器，有几个值权重值就是几。li>ul 是两个元素，> 号不会干扰权重计算；第 2、3、4张图能看懂了吧，就是元素选择器，1个元素选择器就是 0-0-1，12个元素选择器就是 0-0-12；
  • .myClass, [type=chekbox], :only-of-type : 类、属性、伪类选择器。第 5 张图，一个类选择器，权重值表示为 0-1-0；5-15张图能看懂了吧；
  • #myDiv：id选择器，一条鲨鱼，权重比较高，权重值为 1-0-0；`
  • style：权重值更高，权重值为 1-0-0-0；
  • !important: 无敌，我是老大，告诉浏览器必须使用我定义的属性；

Untitled 3

  • g：直接在元素中使用属性，权重最高，可以看做 1-0-0-0；
  • z：id选择器，权重次子，可以看做 0-1-0-0；
  • y：类、伪类、属性选择器，权重低，可以看做 0-0-1-0；
  • x：元素、伪元素选择器，权重最低，可以看做 0-0-0-1；

动画

主要有两种方式

  • animation：CSS动画，可设置不同帧的动效；
  • transition：这种属于过渡动画，也就是说在修改某些 CSS 属性的时候，属性会有一个渐变的过程。
  1. animation
  • animation-name: 动画的名字，这个是通过 @keyframes 定义的名字。 @keyframes 指定某一帧的动画如何变化，可通过 % 来控制各个阶段的属性值
  • animation-duration：动画的持续时间；
  • animation-delay：动画开始时的延迟时间；
  • animation-iteration-count：动画循环次数；
  • animation-direction：动画的方向，比如 alternate 表示先正向后逆序，nomal 正向，reverse 逆序；
  • animation-timing-function：动画的时间曲线，它的值有 ease、ease-in、ease-out、ease-in-out、linear；
  • animation-fill-mode：动画执行后的填充模式，它的值有 forwards、backwards、none、both；
        .move-box-animation {
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* 名字，为 @keyframes 的名字 */
            animation-name: move;
            /*  动画的时间 */
            animation-duration: 5s;
            /* 动画执行函数 */
            animation-timing-function: ease-in-out;
            /* 动画延迟时间 */
            animation-delay: 1s;
            /* 动画重复次数 */
            animation-iteration-count: 10;
            /* 动画的方向，先正向后逆向 */
            animation-direction: alternate;
            /* 动画执行后的填充模式 */
            animation-fill-mode: backwards;
            /* 动画的运行状态 */
            animation-play-state: running;
        }

        @keyframes move {
            0% {
                left: 0;
                top: 0;
            }

            25% {
                left: 100px;
                top: 0;
            }

            50% {
                left: 100px;
                top: 100px;
            }

            75% {
                left: 0;
                top: 100px;
            }

            100% {
                left: 0;
                top: 0;
            }
        }
  1. transition
  • 过渡动画，修改某些属性的时候不会立刻生效，它会以动画的形式逐渐过渡到要设置的值
  • transition-property: 指需要使用过渡动画的属性，这里设置了背景色，高度和宽度。也可以通过关键字 all 设置所有的属性；
  • transition-duration: 动画持续的时间，可以单独控制某个属性的时间， transition-duration：1.8s, 1.0s, 1.0s 表示修改 background-color 需要 1.8s, 修改 height 需要 1.0s,  修改 width 需要 1.0s;
  • transition-delay：动画开始时需要延迟多长时间才开始执行；
  • transition-timing-function：表示动画执行时的时间函数，不同函数走过的曲线不一样；
.move-transition {
    /* transition-property: all; */
    transition-property: background-color, height, width;
    transition-duration: 1.8s, 1.0s, 1.0s;
    transition-delay: 0.1s;
    transition-timing-function: linear;
}

长度单位

  1. 相对单位：相对单位指它的尺寸是相对于另外一个元素的尺寸。常用的是 em、rem、vh、vw、vmin、vmax。
    • em: 它是相对于「自身或父元素」的 font-size 来计算自身的尺寸
    • rem（font size of root element）: 这个单位是依据「根元素 html 标签」的 font-size 来计算最终的值，这个单位对移动端web开发十分实用，通过设置 html 的 font-size 来等比缩放元素的大小。
    • vw（viewport width），可视区域宽度，比如设置 50vw，相当于可视区域宽度的一半；
    • vh（viewport height），可视区域高度，比如设置 50vh，相当于可视区域高度的一半；
    • vmax: vw 和 vh 中最大的；
    • vmin: vw 和 vh 中最小的；
  2. 绝对单位
    • 像素 px， cm等
  3. 时间单位
    • s
    • ms

易复用、易维护、结构清晰的 CSS

less，sass

GitHub repo: qiwihui/blog

Follow me: @qiwihui

Site: QIWIHUI

View on GitHub