Basic

特殊关键字

如 inherit initial unset 这三个属性值，在任何属性中均可用。

选择器

我们可以通过添加 class 或者 id 的方式来选择特定的元素为它添加特定的样式。

.class {
	/* .class to choose a class */
}
#id {
	/* #id to choose an id */
}

根选择器

:root

在 HTML 文件中通常是 <html> 元素，具有全局性和高优先级。

适合定义 CSS 变量。

为什么不使用 * 来定义变量呢？

性能问题：通配选择器会匹配文档中的每一个元素，可能会影响性能，尤其是在大型文档中。
优先级较低：通配选择器的优先级较低，定义在其中的变量可能会被其他样式覆盖。
语义不明确：使用 * 来定义全局变量不够直观，无法清楚表达这些变量是全局的，可能会导致混淆。

类

一个元素可以有多个类名，在引号内用空格隔开。

这时我们想选择既是这个元素同时还有这个类名，那么可以这样写：

1
2
3

body.class {

}

注意这里两者之间没有空格。

当两者间有空格时，代表 .class 是 body 的后代中的一个类。

表单元素

值得一提的是，表单元素的默认样式会覆盖掉默认继承的样式，需要设置为 inherit。

Var

CSS 变量。

变量使用 -- 开头，并通过 var() 函数调用。

可以添加默认值，当该变量未定义时，便可以使用默认值。

1
2
3

body {
  color: var(--undefined-color, #000);
}

Color

1	color: [color];

color 可以是色名，可以是 rgb，可以是 rgba，可以是十六进制数。

Font

导入字体。

@font-face {
  src: url(../fonts/None.ttf);
  font-family: None;
}

url 填写字体文件的本地地址/云端地址。

导入后为它设定一个 font-family（好听的名字），

然后就可以调用它了。

Margin

外边距。

1	margin: [length\|percentage\|auto]

值有四个，顺序为上右下左，当某位置没有时将按照它对位的间距同步。

如只有两个值时，第一个代表上下外边距，第二个代表左右外边距。

下图为经典盒模型。

Padding

内边距。

即内容到 border 之间的空间。

Border

边框，其外是 margin 其内是 padding。

1	border: [width] [style] [color];

具体的长度单位可以见CSS 的值与单位 - 学习 Web 开发 | MDN (mozilla.org)

style

none：去除
hidden：隐藏，不占用空间，但在表单中可能有特殊行为
dotted：圆点
dashed：虚线
solid：实线
double：双实线
groove：雕刻
ridge：浮雕
inset：陷入
outset：突出

颜色就不必多说了。

border-radius 属性可以改 border 的圆角大小。

MDN 样例：

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

需要注意的是，border 是有体积的，并且会随着缩放而变化，所以如果要计算宽度需要格外注意。

所以如果想固定盒子的实际大小的话，可以使用替代盒模型。

1
2
3

.box {
	box-sizing: border-box;
}

这样盒子的实际大小完全由 width 和 height 来决定，减去 padding 和 border 即为 content 的大小。

如果想全局都使用此模型，可以这样写：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

渐变边框：

1	border-image: <source> <slice> / <width> / <outset> <repeat>;

比较推荐的做法是盒子嵌套一下，外面整上 padding 模拟边框。

Opacity

透明度，该元素及其后代元素的透明度都会受到影响，若不想后代元素受到影响，可以通过 background-color 来调整背景透明度。

Outline

与 Border 类似，但是不占用空间，属性值为大小、颜色、样式，顺序不重要。

outline-offset 用来设置元素边缘与 outline 之间的间隙。

Shadow

Box

1	box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

第一个参数为可选项，加上 inset 即为内阴影，不写时默认为外阴影。

Text

1	text-shadow: [x-offset] [y-offset] [blur-radius] [color];

与 box-shadow 类似。

shadow 可以重叠，用 , 隔开即可。

Text-decoration

1	text-decoration: [underline/overline/line-through] [color] [style] [thickness]

示例：

1	text-decoration: underline #ff7d31 solid 3px;

Float

使一个元素浮动在容器的某个位置，行内元素可以环绕它。

1	float: left/right/none/inline-start/inline-end;

Clear

可用于清除浮动。

Overflow

处理溢出的元素。

visible：内容不被裁剪。
hidden：裁剪使其适应溢出，不支持滚动。
clip：裁剪，代码层面不支持滚动。
- overflow-clip-margin：裁剪范围。
scroll：总显示滚动条
auto：若不溢出则不显示滚动条，否则显示。

Background

改变你的网页背景

可以通过 background 同时添加多个属性值，也可拆分来写。

background-image: url();
background-color: rgb();
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;

background-repeat

repeat-x/repeat-y：可以控制横向还是纵向重复，也可以使用双值分别为不同的重复样式。
repeat：重复填充背景，溢出部分将裁剪。
space：不会裁剪，第一个和最后一个图像会贴合边缘，使空白均匀。
round：通过拉伸图像使得重复填充
no-repeat：不重复。

background-position

关键字：center/top/left/bottom/right

指定为对应边界中间位置。

也可以采用两个值分别对应 x/y 坐标。

background-size

length：可以是一个值也可以是两个值。
percentage：可以设置相对于内容和内边距的百分比。
auto：自动缩放。
cover：使背景覆盖。
contain：使包含背景。

Display

设置元素的外部显示类型。

block：块级元素。
inline：内联元素，无法应用宽度/高度属性。
inline-block：内联元素，但可以应用宽度/高度属性。
none：清除该元素。
contents：只显示子代元素，不显示本身。
flex：弹性盒模型。
grid：网格模型。

此处与 visibility: hidden 区分，后者只会使元素不可见，但依旧占据空间。

Position

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

而上面那四个位置属性可以简写为 inset，四个参数分别代表 top，right，bottom，left。

而 absolute 元素没有设置大小，如果四个位置都有属性，那么就会相对最近非 static 祖先设置大小。

static：指定元素为默认布局，无法通过其它元素改变位置。
relative：相对于默认布局的位置偏移。
absolute：不会为该元素预留空间，相对于最近的非 static 祖先的位置。
fixed：不会为该元素预留空间，相对于屏幕视口的位置。
sticky：到达特定位置为 fixed 否则为 relative。比如设置 top: 50px，当该元素到达距离视口上端 50px 后，相对视口不动，直到 containing block 脱离视口。

渐变

1	linear-gradient([angle\|to <side-or corner], <color-stop-list>)

第一个参数可以是 angle，即 [number]deg，顺时针为正值，或者 to 加方向，如 top、right 等，代表渐变的方向。

而 color-stop 可以有多个，可以只有色值，也可以色值+长度或者百分比，代表该颜色渐变的范围/长度，可以是单值也可以是双值，单值代表从什么地方开始，双值代表从什么地方开始和结束，前一个颜色比后一个颜色优先级更高，即不存在后对前覆盖。

示例：

1
2
3

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

Z-index

z-index 属性用于控制元素在 Z 轴（即垂直于屏幕的轴）上的叠放顺序。当元素重叠时，z-index 值较大的元素会覆盖 z-index 值较小的元素。

类似于图层的概念。

Pseudo

伪类和伪元素。

Pseudo-classes

:hover：鼠标悬浮
:active：点击时
:visited：点击后
:not()：某行为的反行为

Pseudo-elements

::first-letter：第一个字符
::first-line：第一行
::selection：所选择的文本
::before
::after
::marker

Text-align

设置行内元素的水平对齐方式。

start
end
left
right
center：居中
justify：向两侧对齐，对最后一行无效

Vertical-align

设置行内元素的垂直对齐方式。

baseline
top
middle
bottom
sub：下标
super：上标
text-top：父元素的字体顶端
text-bottom：父元素的字体底端

ScrollBar

1
2
3

::-webkit-scrollbar {
	...
}

Transform

各个操作间用空格隔开。

Translate

位移。

1	transform: translate([x-offset], [y-offset]);

translate()
translateX()
translateY()

Rotate

旋转。

默认为 rotateZ

1 2	transform: rotateX(90deg); /* 沿着 X 轴旋转 90° */

rotateX()：上下翻
rotateY()：左右翻
rotateZ()：旋转

Scale

缩放。

scale()
scaleX()
scaleY()

Skew

倾斜（扭曲）。

skewX()
skewY()
skew()

Transition

过渡效果。

1	transition: [property] [duration] [timing-function] [delay];

property

可省略，将应用到所有可过渡的属性上。

width
height
transform
color

timing-function

ease
linear
ease-in
ease-out
cubic-bezier()

Gap

控制 flex 和 grid 布局中元素的间距。

当只有一个值时，同时应用于行间距和列间距。

当有两个值时，第一个值用于行间距，第二个值用于列间距。

Filter

hue-rotate(deg)

色相扭曲函数。

blur(px)

高斯模糊。

brightness(%)

亮度。

contrast(%)

对比度。

grayscale(%)

灰度。

invert(%)

反转颜色。

opacity(%)

透明度。

saturate(%)

饱和度。

Backdrop-filter

与 filter 类似，但只影响它后面的背景，不影响本身元素。

Pointer-events

pointer-events 属性用于控制元素如何响应鼠标事件。

none
auto

Cursor

cursor 属性用于指定当鼠标悬停在元素上时应显示的光标样式。通过设置不同的光标样式，可以为用户提供视觉反馈，表示不同的交互状态。

default：默认光标（通常是箭头）。
pointer：手形光标，通常用于表示链接。
text：文本输入光标，通常用于可编辑的文本区域。
move：移动光标，表示元素可以被拖动。
not-allowed：表示某个操作被禁止的光标。
crosshair：十字光标。
help：帮助光标，通常用于表示有更多信息可用。
wait：等待光标，表示操作正在进行中。
自定义光标：可以使用 URL 指定一个自定义光标图像。

List-style

list-style 属性是一个简写属性，用于同时设置列表项标记的类型、位置和图像。

list-style-type

none：无标记。
disc：实心圆（默认值）。
circle：空心圆。
square：实心方块。
decimal：数字（1, 2, 3, …）。
decimal-leading-zero：前导零数字（01, 02, 03, …）。
lower-roman：小写罗马数字（i, ii, iii, …）。
upper-roman：大写罗马数字（I, II, III, …）。
lower-alpha：小写字母（a, b, c, …）。
upper-alpha：大写字母（A, B, C, …）。

Pagination

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/index07.css">
  <title>Pagination</title>
</head>
<body>
  <h1>Hello</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores pariatur repellat illum, reprehenderit quidem ab expedita, dicta debitis animi velit laborum molestias. Qui assumenda porro praesentium. Corporis molestiae necessitatibus incidunt.</p>
  <ul id="fruit">
    <li id="apple">apple</li>
    <li id="orange">orange</li>
    <li id="banana">banana</li>
  </ul>
  <h1>This is page #1</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptatum nesciunt, facilis commodi id fuga iusto. Delectus, quis labore assumenda enim, aspernatur eaque accusantium eum ullam, recusandae quaerat vel veniam?</p>


  <div class="pagination">
    <!-- 向左向右只能手动为每一页填写它对应的上一页和下一页 -->
    <a href="">&lt;</a>
    <a href="index07.html" class="active">1</a>
    <a href="index00.html">2</a>
    <a href="index01.html">3</a>
    <a href="index02.html">4</a>
    <a href="index03.html">5</a>
    <a href="index04.html">6</a>
    <a href="index05.html">7</a>
    <a href="index06.html">8</a>
    <a href="">&gt;</a>
  </div>
</body>
</html>

h1::first-letter {
  font-size: 2em;
  font-style: italic;
}
p::first-line {
  background-color: rgb(233, 233, 106);
}
p::selection {
  color: white;
  background-color: grey;
}
/* #fruit li::before {
  content: "✅";
} */
#apple::after {
  content: "🍎";
}
#orange::after {
  content: "🍊";
}
#banana::after {
  content: "🍌";
}
#fruit li::marker {
  content: "√";
  color: green;
  font-size: 1.5em;
}

.pagination {
  text-align: center;

}
.pagination a{
  color: black;
  text-decoration: none;
  padding: 8px 15px;
  display: inline-block;
}
.pagination a.active {
  background-color: rgb(124, 255, 124);
  font-weight: bold;
  border-radius: 5px;
}
.pagination a:hover:not(.active) {
  background: rgba(128, 128, 128, 0.561);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown</title>
  <link rel="stylesheet" href="../css/index08.css">
</head>
<body>
  <div class="dropdown">
    <button>Food</button>
    <div class="content">
      <a href="#">Apple</a>
      <a href="#">Orange</a>
      <a href="#">Banana</a>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A corrupti sed consequatur. Eius consectetur sunt error, aliquid nihil ipsum a ut explicabo placeat perspiciatis quisquam in maxime eaque, quos facilis?</p>
</body>
</html>

.dropdown {
  display: inline-block;
}
.dropdown button {
  background-color: hsl(0, 0%, 80%);
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
.dropdown a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px 15px;
}
.dropdown .content {
  display: none;
  position: absolute;
  background-color: hsl(0, 0%, 95%);
  min-width: 100px;
  box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.77);
}
.dropdown:hover .content {
  display: block;
}
.dropdown:hover button {
  background-color: rgba(0, 128, 0, 0.487);
}
.dropdown a:hover {
  background-color: rgba(172, 255, 47, 0.598);
}
p {
  margin-top: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation</title>
  <link rel="stylesheet" href="../css/index09.css">
</head>
<body>
  <h1>Falling Sakura</h1>

  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h3>This is the Home page</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus aliquid at provident ad, quidem consequuntur expedita a necessitatibus. Dolor aut praesentium laudantium voluptate laborum delectus illum, perferendis tempore ut? Repellendus!</p>
  </main>
</body>
</html>

h1 {
  text-align: center;
}
.navbar ul {
  list-style-type: none;
  /* 去除圆点 */
  background-color: hsla(0, 0%, 50%, 0.356);
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 15px;
  display: block;
  text-align: center;
}
.navbar a:hover {
  background-color: hsla(0, 0%, 50%, 0.556)
}
.navbar li {
  float: left;
}
body {
  background-color: rgba(80, 243, 80, 0.428);
  margin: 0px;
}
main {
  margin: 20px;
}

Layout

普通文档流

所有元素按照先后位置从上到下布局。

行内元素占满一行后换行，块级元素被渲染为一个单独的行。

这是所有元素的默认定位。

语义标签

header
nav
main
- section
- aside
- artible
footer

Flex

弹性盒模型。

flex-direction：
- 将会改变主轴和交叉轴的方向，默认 row 是水平方向上是主轴，竖直方向上是交叉轴。
- row/row-reverse/column/column-reverse
flex-wrap：
- no-wrap：所有子元素显示在一行。
- wrap：自动换行排列。
- wrap-reverse
justify-content：
- flex-start：左对齐。
- flex-end：右对齐。
- center：沿主轴居中。
- space-between：间隙平分。
- space-around：每个子元素周围都有相同的间隙，即子元素之间的间隙为子元素到边框的间隙的二倍。
- space-evenly：子元素之间和边框到子元素之间的间隙相同。
align-items：
- flex-start：上对齐。
- flex-end：下对齐。
- center：沿交叉轴居中。
- stretch：若元素未设置高度，将占满高度。
- baseline：基于元素的第一行文字的基线对齐。
align-self：控制单独子元素的对齐方式。
flex
- flex-grow：元素的放大比例，默认为 0
- flex-shrink：元素的缩小比例，默认为 1
- flex-basis：元素在主轴方向的初始大小。

为什么没有 justify-items 属性，什么时候可以使用 align-content ？

因为 flex 布局在主轴方向上就是一个块啊，它在主轴方向上没有多个 item 所以它其实就是沿着交叉轴方向的一个一维的直线（默认 flex-wrap 属性值为 nowrap，那它实际上就是一个点，只有当它有多行内容时 align-content 才有意义。

align-content 和 justify-content 是控制多行内容的对齐方式。

注意，当你将 flex-wrap 设置为 wrap 后，即使容器内的元素不足以换行，但还是会被识别为“多行内容”，此时 align-content 会生效。

align-items 和 justify-items 是控制单行内容的对齐方式。

Grid

网格布局。

grid-template-rows：行轨道的尺寸。
grid-template-columns：列分别的宽度，可以是固定的宽度，也可以用 fr 表示浮动宽度（特有单位），可以使用重复函数节省编码时间：repeat(3, 1fr) 。
column-gap：列间距。
row-gap：行间距。
gap：间距。
grid-template-areas：排列元素。
- 示例：
- 然后给子元素分别设置 grid-area 为 header/content/sidebar/footer 即可。
align-items：交叉轴方向上对齐。
justify-items：主轴方向上对齐。

BFC

Block Format Context
块格式化上下文

可以看作是元素的一个属性，当它拥有这个属性时，可以看作是独立的一个容器，容器里的元素不会影响到外面的元素，它计算高度时会把浮动元素的高度也计算进来，且浮动元素与 BFC 元素区域不会叠加。

如何开启？

根元素 <html>
浮动元素（float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
display 值为 inline-block, table-cell, table-caption, table, table-row, table-row-group, table-header-group, table-footer-group, inline-table, flow-root, flex, inline-flex, grid, inline-grid, inline-block
overflow 值不为 visible 的块元素
contain 值为 layout, content, paint 的元素
多列容器

可以避免间距重叠，清除浮动带来的父元素高度塌陷（父元素是由子元素所撑开的，当子元素浮动后脱离文档流父元素便没有高度），避免浮动覆盖。

Animation

keyframes
关键帧动画

@keyframes [name] {
	[percentage] {
		[animation];
	}
}

from 与 0% 等价，to 与 100% 等价。

代表关键帧动画中的一个节点。

然后进行一些操作就可以了。

给元素应用动画：

animation-name：名字
animation-duration：持续时间
animation-iteration-count：迭代次数
animation-direction：动画时间方向
- normal
- reverse
- alternate
- alternate-reverse
animation-play-state：播放状态
- paused
- running
animation-timing-function：时间函数曲线可以通过 F12 调节对应曲线得到相应参数
- ease-in-out(default)
- linear
- steps([number])

Falling Blog

CSS Note