重学前端

重学前端

HTML元信息类标签

# 标题标签
<title>标题</title>

# meta 标签是一组键值对，它是一种通用的元信息表示标签

# 应用名称
<meta name="application-name" content="txf-client">

# 字符编码
<meta charset="UTF-8" >

# http头信息
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

# 宽度为设备宽度、初始化缩放比为1、最小缩放比为1、最大缩放比为1、不允许用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

# 作者
<meta name="author" content="BestLove">

# 页面描述
<meta name="description" content="这个属性可能被用于搜索引擎或者其它场合">

# 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta
<meta name="generator" content="webpack">

# 页面关键字，对于 SEO 场景非常关键
<meta name="keywords" content="vue,hyperf,cms">

at-rule

由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束

@charset ： https://www.w3.org/TR/css-syntax-3/
@import ：https://www.w3.org/TR/css-cascade-4/
@media ：https://www.w3.org/TR/css3-conditional/
@page ： https://www.w3.org/TR/css-page-3/
@counter-style ：https://www.w3.org/TR/css-counter-styles-3
@keyframes ：https://www.w3.org/TR/css-animations-1/
@fontface ：https://www.w3.org/TR/css-fonts-3/
@supports ：https://www.w3.org/TR/css3-conditional/
@namespace ：https://www.w3.org/TR/css-namespaces-3/

函数

以双中划线开头的属性被当作变量，与之配合的则是 var 函数

:root {
  --main-color: #06c;
  --accent-color: #006;
}

#foo h1 {
  color: var(--main-color);
}

一些计算相关的函数

calc() max() min() clamp() toggle() attr()

# 计算宽度
section {
    float: left;
    margin: 1em; border: solid 1px;
    width: calc(100%/3 - 2*1em - 2*1px);
}

# 一个列表项的样式圆点和方点间隔出现
ul { 
    list-style-type: toggle(circle, square); 
}

CSS 属性值可能是以下类型

CSS 范围的关键字：initial，unset，inherit，任何属性都可以的关键字。

字符串：比如 content 属性。

URL：使用 url() 函数的 URL 值。

整数 / 实数：比如 flex 属性。

维度：单位的整数 / 实数，比如 width 属性。

百分比：大部分维度都支持。

颜色：比如 background-color 属性。

图片：比如 background-image 属性。

2D 位置：比如 background-position 属性。

函数：来自函数的值，比如 transform 属性。

CSS选择器

属性选择器

# 检查元素是否具有这个属性
[att=val]

# 精确匹配，检查一个元素属性的值是否是 val
[att=val]

# 检查一个元素的值是否是若干值之一
[att~=val1 val2 vale3]

# 开头匹配，检查一个元素的值是否是以 val 开头
[att|=val]

伪类选择器

• 伪类选择器是一系列由 CSS 规定好的选择器，它们以冒号开头。伪类选择器有普通型和函数型两种

:root 伪类表示树的根元素，在选择器是针对完整的 HTML 文档情况，我们一般用 HTML 标签即可选中根元素。但是随着 scoped css 和 shadow root 等场景出现，选择器可以针对某一子树来选择，这时候就很需要 root 伪类了

:empty 伪类表示没有子节点的元素，这里有个例外就是子节点为空白文本节点的情况

:nth-child 和 :nth-last-child 这是两个函数型的伪类，CSS 的 An+B 语法
:nth-child(even) 选中偶数节点
:nth-child(4n-1) 选中第3、第7、第11个这样符合4的倍数-1的数字
:nth-last-child 的区别仅仅是从后往前数
:first-child :last-child 分别表示第一个和最后一个元素
:only-child 按字面意思理解即可，选中唯一一个子元素

# 链接行为伪类选择器
:any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。
:link 表示未访问过的链接， 
:visited 表示已经访问过的链接。
:hover 表示鼠标悬停在上的元素。
:active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态。
:focus 表示焦点落在这个元素之上。
:target 用于选中浏览器 URL 的 hash 部分所指示的元素。

# 逻辑伪类选择器，这个伪类是个函数型伪类，它的作用时选中内部的简单选择器命中的元素
*|*:not(:hover)

复合选择器

“空格”：后代，表示选中所有符合条件的后代节点， 例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。

“>” ：子代，表示选中符合条件的子节点，例如“ .a>.b ”表示：选中所有“具有 class 为 a 的子节点中，class 为 b 的节点”。

“~” : 后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一个父元素，并出现在它之后的节点，例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中，class 为 b 的节点。

“+”：直接后继，表示选中符合条件的直接后继节点，直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。

“||”：列选择器，表示选中对应列中符合条件的单元格。

伪元素选择器

# 第一行
::first-line

# 第一个字母
::first-letter

# ::before 表示在元素内容之前插入一个虚拟的元素，::after 则表示在元素内容之后插入
# 这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效

<p class="special">I'm real element</p>
p.special::before {
    display: block;
    content: "pseudo! ";
}

选择器优先级

CSS 标准用一个三元组 (a, b, c) 来构成一个复杂选择器的优先级

• id 选择器的数目记为 a；
• 伪类选择器和 class 选择器的数目记为 b；
• 伪元素选择器和标签选择器数目记为 c；
• “*” 不影响优先级。

# base是一个足够大的正整数
specificity = base * base * a + base * b + c

# 行内属性的优先级永远高于 CSS 规则

# 在选择器前加上 !import 为最高优先级