CSS Note

CSS Note

Falling_Sakura Fixed
  2024-04-03 20:52:55 2024-04-03 20:52:55 Created   2024-06-22 20:59:57 2024-06-22 20:59:57 Updated    4.4k Words  20 Mins  

Basic

特殊关键字

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

选择器

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

1
2
3
4
5
6
.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

导入字体。

1
2
3
4
@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 样例：

1
2
3
4
5
6
7
8
9
10
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;
}

image.png

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

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

1
2
3
.box {
	box-sizing: border-box;
}

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

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

1
2
3
4
5
6
7
8
9
html {
  box-sizing: border-box;
}

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

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 同时添加多个属性值，也可拆分来写。

1
2
3
4
5
6
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。

  • 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%);

image.png

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：父元素的字体底端

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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-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：元素在主轴方向的初始大小。

Grid

网格布局。

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

BFC

Block Format Context
块格式化上下文

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

如何开启？

  1. 根元素 <html>
  2. 浮动元素（float 不为 none）
  3. 绝对定位元素（position 为 absolute 或 fixed）
  4. 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
  5. overflow 值不为 visible 的块元素
  6. contain 值为 layout, content, paint 的元素
  7. 多列容器

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

Animation

keyframes
关键帧动画

1
2
3
4
5
@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])
  • Title: CSS Note
  • Author: Falling_Sakura
  • Created at : 2024-04-03 20:52:55
  • Updated at : 2024-06-22 20:59:57
  • Link: https://vercel.fallingsakura.top/d51d3626.html
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
CSS Note
  1. 1. Basic
    1. 1.1. 特殊关键字
    2. 1.2. 选择器
      1. 1.2.1. 根选择器
    3. 1.3. 类
    4. 1.4. 表单元素
    5. 1.5. Var
    6. 1.6. Color
    7. 1.7. Font
    8. 1.8. Margin
    9. 1.9. Padding
    10. 1.10. Border
    11. 1.11. Opacity
    12. 1.12. Outline
    13. 1.13. Shadow
      1. 1.13.1. Box
      2. 1.13.2. Text
    14. 1.14. Text-decoration
    15. 1.15. Float
    16. 1.16. Clear
    17. 1.17. Overflow
    18. 1.18. Background
    19. 1.19. Display
    20. 1.20. Position
    21. 1.21. 渐变
    22. 1.22. Z-index
    23. 1.23. Pseudo
      1. 1.23.1. Pseudo-classes
      2. 1.23.2. Pseudo-elements
    24. 1.24. Text-align
    25. 1.25. Vertical-align
    26. 1.26. Transform
      1. 1.26.1. Translate
      2. 1.26.2. Rotate
      3. 1.26.3. Scale
      4. 1.26.4. Skew
    27. 1.27. Transition
    28. 1.28. Gap
    29. 1.29. Filter
    30. 1.30. Backdrop-filter
    31. 1.31. Pointer-events
    32. 1.32. Cursor
    33. 1.33. List-style
    34. 1.34. Pagination
    35. 1.35. Dropdown
    36. 1.36. Navigation
  2. 2. Layout
    1. 2.1. 普通文档流
    2. 2.2. 语义标签
    3. 2.3. Flex
    4. 2.4. Grid
    5. 2.5. BFC
  3. 3. Animation