Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS 基础──样式篇 #147

Open
qiwihui opened this issue Aug 16, 2021 · 0 comments
Open

CSS 基础──样式篇 #147

qiwihui opened this issue Aug 16, 2021 · 0 comments
Labels
技术 技术相关 读书笔记 读书笔记

Comments

@qiwihui
Copy link
Owner

qiwihui commented Aug 16, 2021 •
edited
Loading

《前端小课──用好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
@qiwihui qiwihui added 技术 技术相关 读书笔记 读书笔记 labels Aug 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
技术 技术相关 读书笔记 读书笔记
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@qiwihui