freeCodeCamp Certified Full Stack Developer Curriculum freeCodeCamp 认证全栈开发工程师课程
Courses 课程目录
HTML
CSS
JavaScript
……
This note focuses on the second part, CSS, and removes the knowledge points I already understand.
本笔记聚焦于第二部分，CSS，并移除了本人已经了解的知识点。
CSS 篇
Computer Basic 计算机基础
Understanding Computer, Internet and Developer Tooling Basics 理解计算机、互联网和开发者工具基础
Package Managers: tools that help developers simplify the process of adding, updating, and removing libraries and project dependencies. Examples include npm, pip, and Maven.
包管理器：帮助开发者简化添加、更新和删除库及项目依赖关系的工具。例如 npm、pip 和 Maven。
Testing Libraries and Frameworks: Testing is done in software to ensure that the code works as expected. Examples of testing libraries and frameworks include Jest, PHPUnit, and JUnit.
测试库和框架：在软件中进行测试以确保代码按预期工作。测试库和框架的例子包括 Jest、PHPUnit 和 JUnit。
Working With Files 处理文件
Best practices for naming files: You will want to name your files in a way that is easy to understand and maintain. For example, about-us.html is a more descriptive name than page1.html.
命名文件的最佳实践：您应该以易于理解和维护的方式命名您的文件。例如， about-us.html 是比 page1.html 更描述性的名称。
root directory: top-level directory in a file system. Directory is another name for a folder.
根目录：文件系统中的顶级目录。目录是文件夹的另一种说法。
index.html: represents the default page that is displayed when a user visits a website. index.html : 表示用户访问网站时显示的默认页面。
Basic CSS 基础 CSS
CSS Basics CSS 基础
What is CSS?: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.
什么是 CSS：层叠样式表（CSS）是一种用于将样式应用于 HTML 元素的标记语言。CSS 用于颜色、背景图像、布局等。
Basic Anatomy of a CSS Rule: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors.
CSS 规则的基本结构：一个 CSS 规则由两个主要部分组成：选择器和声明块。选择器是 CSS 中用于识别和定位特定 HTML 元素进行样式设置的模式。声明块为给定的选择器或多个选择器应用一组样式。
Here is the general syntax of a CSS rule:
以下是 CSS 规则的一般语法：
1 2 3
selector { property: value; }
meta name="viewport" Element: This meta element gives the browser instructions on how to control the page’s dimensions and scaling on different devices, particularly on mobile phones and tablets. meta name="viewport" 元素：此 meta 元素向浏览器提供关于如何控制页面在不同设备上的尺寸和缩放的说明，特别是在手机和平板电脑上。
Default Browser Styles: Each HTML element will have default browser styles applied to them. This usually includes items like default margins and paddings.
默认浏览器样式：每个 HTML 元素都会应用默认的浏览器样式。这通常包括默认的边距和填充等项。
Inline, Internal, and External CSS 内联、内部和外部 CSS
Inline CSS: These styles are written directly within an HTML element using the style attribute. Most of the time you will not be using inline CSS due to separation of concerns.
内联 CSS：这些样式直接使用 style 属性写在 HTML 元素内部。由于关注点分离，大多数情况下你不会使用内联 CSS。
Here is an example of inline CSS:
这里是一个内联 CSS 的例子：
1
<pstyle="color: red;">This is a red paragraph.</p>
Internal CSS: These styles are written within the <style> tags inside the head section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.
内部 CSS：这些样式写在 HTML 文档的 <style> 部分内的 head 标签中。这适用于创建简短的代码示例，但你通常不需要使用内部 CSS。
External CSS: These styles are written in a separate CSS file and linked to the HTML document using the link element in the head section. For most projects, you will use an external CSS file over internal or inline CSS.
外部 CSS：这些样式写在单独的 CSS 文件中，并通过 link 元素在 head 部分链接到 HTML 文档。对于大多数项目，你会使用外部 CSS 文件而不是内部或内联 CSS。
Working With the width and height Properties 使用 width 和 height 属性
width Property: This property specifies the width of an element. If you do not specify a width, then the default is set to auto. This lets the browser determine the element’s width based on its content, parent, and display type. width 属性：此属性指定元素的宽度。如果您未指定宽度，则默认设置为 auto 。这允许浏览器根据其内容、父元素和显示类型来确定元素的宽度。
height Property: This property specifies the height of an element. Similarly, the height is auto by default, which means it will adjust to the content inside. height 属性：此属性指定元素的高度。同样，高度默认为 auto ，这意味着它将根据内部内容进行调整。
Different Types of CSS Combinators 不同类型的 CSS 组合器
Descendant Combinator: This combinator is used to target elements that are descendants of a specified parent element. The following example will target all li items inside ul elements.
后代组合器：此组合器用于选择指定父元素的后代元素。以下示例将选择所有位于 ul 元素内的 li 项。
Child Combinator (>): This combinator is used to select elements that are direct children of a specified parent element. The following example will target all p elements that are direct children of the container class.
子代组合器（ > ）：此组合器用于选择指定父元素的所有直接子元素。以下示例将针对所有作为 container 类直接子元素的 p 元素。
1 2 3 4 5 6 7
<divclass="container"> <p>This will get styled.</p>
<div> <p>This will not get styled.</p> </div> </div>
1 2 3 4
.container > p { background-color: black; color: white; }
Next-sibling Combinator (+): This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the h2 element.
相邻兄弟组合器（ + ）：此组合器选择紧跟在指定兄弟元素之后的元素。以下示例将选择紧跟在 h2 元素之后的段落元素。
1 2 3
<h2>I am a sub heading</h2>
<p>This paragraph element will get a red background.</p>
1 2 3
h2 + p { background-color: red; }
Subsequent-sibling Combinator (~): This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the ul element and shares the same parent.
后续兄弟组合器（ ~ ）：此组合器选择指定元素之后的所有兄弟元素。以下示例将仅样式化第二个段落元素，因为它唯一是 ul 元素的兄弟元素，并且共享相同的父元素。
1 2 3 4 5 6 7 8 9 10
<divclass="container"> <p>This will not get styled.</p> <ul> <li>Example item one</li> <li>Example item two</li> <li>Example item three</li> </ul> <p>This will get styled.</p> </div> <p>This will not get styled.</p>
1 2 3
ul ~ p { background-color: green; }
Inline, Block, and Inline-Block Level Elements 行内、块级和行内块级元素
Inline Level Elements: Inline elements only take up as much width as they need and do not start on a new line. These elements flow within the content, allowing text and other inline elements to appear alongside them. Common inline elements are span, anchor, and img elements.
行内元素：行内元素只占用所需的宽度，并且不会另起一行。这些元素在内容中流动，允许文本和其他行内元素与它们并排显示。常见的行内元素有 span 、 anchor 和 img 元素。
Block Level Elements: Block-level elements start on a new line and take up the full width available to them by default, stretching across the width of their container. Some common block-level elements are div, paragraph, and section elements.
块级元素：块级元素会另起一行，并且默认占用所有可用的宽度，横跨其容器的宽度。一些常见的块级元素有 div 、 paragraph 和 section 元素。
Inline-Block Level Elements: You can set an element to inline-block by using the display property. These elements behave like inline elements but can have a width and height set like block-level elements.
行内块级元素：你可以通过使用 inline-block 属性将元素设置为 display 。这些元素的行为类似于行内元素，但可以像块级元素一样设置 width 和 height 。
Margin and Padding 外边距和内边距
margin Property: This property is used to apply space outside the element, between the element’s border and the surrounding elements. margin 属性：此属性用于在元素外部应用空间，即在元素边框和周围元素之间。
padding Property: This property is used to apply space inside the element, between the content and its border. padding 属性：此属性用于在元素内部应用空间，即在内容和边框之间。
padding and margin Shorthand: You can specify 1–4 values to set the padding sides. One value applies to all four sides; two values set top and bottom, then right and left; three values set top, horizontal (right and left), then bottom; four values set top, right, bottom, left. padding与margin 简写：您可以指定 1-4 个值来设置填充的各个方向。一个值应用于所有四个方向；两个值设置 top 和 bottom ，然后 right 和 left ；三个值设置 top ，水平（ right 和 left ），然后 bottom ；四个值设置 top ， right ， bottom ， left 。
CSS Specificity CSS 特异性
Inline CSS Specificity: Inline CSS has the highest specificity because it is applied directly to the element. It overrides any internal or external CSS. The specificity value for inline styles is (1, 0, 0, 0).
内联 CSS 特异性：内联 CSS 具有最高的特异性，因为它直接应用于元素。它可以覆盖任何内部或外部 CSS。内联样式的特异性值为（1, 0, 0, 0）。
Internal CSS Specificity: Internal CSS is defined within a style element in the head section of the HTML document. It has lower specificity than inline styles but can override external styles.
内部 CSS 特异性：内部 CSS 定义在 HTML 文档的 style 部分的 head 元素中。它的特异性低于内联样式，但可以覆盖外部样式。
External CSS Specificity: External CSS is linked via a link element in the head section and is written in separate .css files. It has the lowest specificity but provides the best maintainability for larger projects.
外部 CSS 特异性：外部 CSS 通过 link 元素在 head 部分链接，并写在单独的 .css 文件中。它具有最低的特异性，但为大型项目提供了最佳的维护性。
Universal Selector (*): a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0).
通用选择器（ * ）：一种特殊的 CSS 选择器，匹配文档中的任何元素。它通常用于将样式应用于页面上的所有元素，这对于跨不同浏览器重置或规范化样式非常有用。通用选择器具有所有选择器中最低的特异性值。它对特异性值的所有部分贡献 0（0, 0, 0, 0）。
Type Selectors: These selectors target elements based on their tag name. Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1).
类型选择器：这些选择器根据元素的标签名来定位元素。与其它选择器相比，类型选择器的特异度相对较低。类型选择器的特异度值为（0，0，0，1）。
Class Selectors: These selectors are defined by a period (.) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.
类选择器：这些选择器由一个点（ . ）后跟类名定义。类选择器的特异度值为（0，0，1，0）。这意味着类选择器可以覆盖类型选择器，但它们可以被 ID 选择器和内联样式覆盖。
ID Selectors: ID selectors are defined by a hash symbol (#) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).
ID 选择器：ID 选择器由一个井号（ # ）后跟 ID 名定义。ID 选择器具有非常高的特异度，高于类型选择器和类选择器，但低于内联样式。ID 选择器的特异度值为（0，1，0，0）。
!important keyword: used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using !important because it can make your CSS harder to maintain and debug. !important 关键字：用于给样式规则赋予最高优先级，允许它覆盖任何其他针对同一属性的声明。使用时，它会强制浏览器应用指定的样式，而不管其他选择器的特异度如何。使用 !important 时需要谨慎，因为它会使你的 CSS 更难维护和调试。
Cascade Algorithm: An algorithm used to decide which CSS rules to apply when there are multiple styles targeting the same element. It ensures that the most appropriate styles are used, based on a set of well-defined rules.
级联算法：一种用于在多个样式同时针对同一元素时决定应用哪些 CSS 规则的算法。它基于一套明确定义的规则，确保使用最合适的样式。
CSS Inheritance: The process by which styles are passed down from parent elements to their children. Inheritance allows you to define styles at a higher level in the document tree and have them apply to multiple elements without explicitly specifying them for each element.
CSS 继承：样式从父元素传递到其子元素的过程。继承允许你在文档树的较高层级定义样式，并让它们应用于多个元素，而无需为每个元素显式指定样式。
Styling Lists 列表样式
line-height Property: This property is used to create space between lines of text. The accepted line-height values include the keyword normal, numbers, percentages and length units like the em unit. line-height 属性：此属性用于在文本行之间创建空间。接受的 line-height 值包括关键字 normal 、数字、百分比和长度单位，如 em 单位。
list-style-type Property: This property is used to specify the marker for a list item. Acceptable values can include a circle, disc, or decimal. list-style-type 属性：此属性用于指定列表项的标记。可接受的值可以包括圆圈、圆点或小数。
list-style-position Property: This property is used to set the position for the list marker. The only two acceptable values are inside and outside. list-style-position 属性：此属性用于设置列表标记的位置。仅有的两个可接受的值是内部和外部。
list-style-image Property: This property is used to use an image for the list item marker. A common use case is to use the url function with a value set to a valid image location. list-style-image 属性：此属性用于为列表项标记使用图像。常见用例是使用 url 函数，并将值设置为有效的图像位置。
Styling Links 链接样式
pseudo-class: This is a keyword added to a selector that allows you to select elements based on a particular state. Common states would include the :hover, :visited and :focus states. pseudo-class ：这是一个添加到选择器的关键字，允许您根据特定状态选择元素。常见状态包括 :hover 、 :visited 和 :focus 状态。
:link pseudo-class: This pseudo-class is used to style links that have not be visited by the user. :link pseudo-class ：这是一个伪类，用于样式化用户尚未访问过的链接。
:visited pseudo-class: This pseudo-class is used to style links where a user has already visited. :visited pseudo-class : 这伪类用于样式化用户已经访问过的链接。
:hover pseudo-class: This pseudo-class is used to style an elements where a user is actively hovering over them. :hover pseudo-class : 这伪类用于样式化用户正在悬停的元素。
:focus pseudo-class: This pseudo-class is used to style an element when it receives focus. Examples would include input or select elements where the clicks or tabs on the element to focus it. :focus pseudo-class : 这伪类用于样式化当元素获得焦点时的样式。例如 input 或 select 元素，用户通过点击或选项卡聚焦到该元素。
:active pseudo-class: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button. :active pseudo-class : 这伪类用于样式化用户激活的元素。一个常见的例子是用户点击按钮。
Working with Backgrounds and Borders 使用背景和边框
background-size Property: This property is used to set the background size for an element. Some common values include cover for the background image to cover the entire element and contain for the background image to fit within the element. background-size 属性：此属性用于设置元素的背景大小。一些常用值包括 cover 使背景图像覆盖整个元素和 contain 使背景图像适应元素内。
background-repeat Property: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for background-repeat is repeat meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the no-repeat property. background-repeat 属性：此属性用于确定背景图像沿水平和垂直轴如何重复。 background-repeat 的默认值为 repeat ，这意味着图像将沿水平和垂直方向重复。您也可以通过使用 no-repeat 属性指定不重复。
background-position Property: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword values like top, bottom, left, right, and center. background-position 属性：此属性用于指定背景图像的位置。可以设置为特定长度、百分比或关键字值，如 top 、 bottom 、 left 、 right 和 center 。
background-attachment Property: This property is used to specify whether the background image should scroll with the content or remain fixed in place. The main values are scroll (default), where the background image scrolls with the content, and fixed, where the background image stays in the same position on the screen. background-attachment 属性：此属性用于指定背景图像是否随内容滚动或保持固定位置。主要值包括 scroll （默认值），其中背景图像随内容滚动，以及 fixed ，其中背景图像在屏幕上的位置保持不变。
background-image Property: This property is used to set the background image of an element. You can set multiple background images at the same time and use either the url, radial-gradient or linear-gradient functions as values. background-image 属性：此属性用于设置元素的背景图像。您可以同时设置多个背景图像，并使用 url 、 radial-gradient 或 linear-gradient 函数作为值。
background Property: This is the shorthand property for setting all background properties in one declaration. Here is an example of setting the background image and setting it to not repeat: background: no-repeat url("example-url-goes-here"); background 属性：这是用于在一个声明中设置所有背景属性的简写属性。以下是一个设置背景图像并使其不重复的示例： background: no-repeat url("example-url-goes-here");
Good Contrast for Background and Foreground Colors: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
背景和前景色的良好对比度：确保背景和前景色具有良好对比度以使文本可读非常重要。网络内容无障碍指南（WCAG）建议普通文本的最小对比度为 4.5:1，大文本为 3:1。
Borders 边框
border Property: This is the shorthand property for setting the width, style, and color of an element’s border. border: 1px solid black; sets a 1-pixel-wide solid black border. border 属性：这是用于设置元素边框宽度、样式和颜色的简写属性。 border: 1px solid black; 在元素上设置一个 1 像素宽的实线黑色边框。
border-radius Property: This property is used to create rounded corners for an element’s border. border-radius 属性：此属性用于为元素的边框创建圆角。
border-style Property: This property is used to set the style of an element’s border. Some accepted values include solid, dashed, dotted, and double. border-style 属性：此属性用于设置元素边框的样式。一些接受的值包括 solid 、 dashed 、 dotted 和 double 。
Gradients 渐变
linear-gradient() Function: This CSS function is used to create a transition between multiple colors along a straight line. linear-gradient() 函数：此 CSS 函数用于在直线上创建多种颜色之间的过渡。
radial-gradient() Function: This CSS function creates an image that radiates from a particular point, like a circle or an ellipse, and gradually transitions between multiple colors. radial-gradient() 函数：此 CSS 函数创建一个从特定点向外辐射的图像，例如圆形或椭圆形，并逐渐在多种颜色之间过渡。
Design 设计
Design Terminology 设计术语
UX (User Experience): UX is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable.
UX（用户体验）：UX 是关于用户在使用产品或服务时的感受。具有良好设计的用户体验的应用程序是直观的、易于使用的、高效的、可访问的，并且令人愉悦。
Design Brief: This is a document that outlines the objectives, goals, and requirements of a project. It is a roadmap that guides the design process and ensures that the final product meets the needs of the client.
设计简报：这是一份概述项目目标、目标和要求的文档。它是指导设计过程并确保最终产品满足客户需求的路线图。
Prototyping: This refers to the process of creating an interactive model of a product or user interface.
原型设计：这指的是创建产品或用户界面的交互式模型的过程。
UI Design Fundamentals UI 设计基础
Good Contrast for Background and Foreground Colors: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
背景和前景色的良好对比度：确保背景和前景色具有良好对比度以使文本可读非常重要。网络内容无障碍指南（WCAG）建议普通文本的最小对比度为 4.5:1，大文本为 3:1。
User-centered Design: This is an approach that prioritizes the end user, from their needs to their preferences and limitations. The goal of user-centered design is to craft a web page that is intuitive, efficient to use, and pleasing for your users to interact with.
以用户为中心的设计：这是一种将最终用户放在首位的设计方法，包括他们的需求、偏好和限制。以用户为中心的设计的目标是创建一个直观、易于使用且让用户乐于交互的网页。
User Research: This is the systematic study of the people who use your product. The goal is to measure user needs, behaviors, and pain points.
用户研究：这是对使用您产品的用户进行的系统研究。其目标是衡量用户的需求、行为和痛点。
Exit Interviews: This is a survey you can give to users when they cancel their accounts. It can help you understand why users are leaving and what you can do to reduce churn.
退出访谈：这是您在用户取消账户时可以提供给用户的调查问卷。它可以帮助您了解用户离开的原因以及您可以采取哪些措施来降低用户流失率。
User Testing: This refers to the practice of capturing data from users as they interface with your application.
用户测试：这指的是在用户与您的应用程序交互时捕获数据的行为。
A/B Testing: This is the process of shipping a new feature to a randomly selected subset of your user base. You can then leverage analytics data to determine if the feature is beneficial.
A/B 测试：这是将新功能发送到您用户群中随机选定子集的过程。然后，您可以利用分析数据来确定该功能是否有益。
User Requirements: This refers to the stories or rubric that your application needs to follow. User requirements might be defined by user research or industry standards. They can even be defined by stakeholder input.
用户需求：这指的是您的应用程序需要遵循的故事或标准。用户需求可能由用户研究或行业标准定义。它们甚至可以由利益相关者的输入定义。
Progressive Disclosure: This is a design pattern used to only show users relevant content based on their current activity and hide the rest. This is done to reduce cognitive load and make the user experience more intuitive.
渐进式披露：这是一种设计模式，仅根据用户当前活动显示相关内容，其余内容则隐藏。这是为了减轻认知负担，使用户体验更直观。
Deferred/Lazy Registration: This is a UI design pattern that allows users to browse and interact with your application without having to register.
延迟/懒加载注册：这是一种 UI 设计模式，允许用户在不注册的情况下浏览和与应用程序交互。
Modal Dialog: This is a type of pop-up that will display on top of existing page content. Usually the background content will have a dim color overlay in order to help the user better focus on the modal content. Also, it is always a good idea to allow the user to click outside of the modal to close it. When you use the HTML dialog element, you will get a lot of the functionality and accessibility benefits built in.
模态对话框：这是一种会在现有页面内容上方显示的弹出窗口。通常，背景内容会使用暗色遮罩层，以帮助用户更好地专注于模态内容。此外，允许用户点击模态外部来关闭它是一个好主意。当你使用 HTML dialog 元素时，你会获得许多内置的功能和可访问性优势。
Absolute and Relative Units 相对单位和绝对单位
Absolute Units 绝对单位
px (Pixels): This absolute unit is a fixed-size unit of measurement in CSS. It is the most common absolute unit and provides precise control over dimensions. 1px is always equal to 1/96th of an inch. px (像素): 这是一种固定大小的 CSS 测量单位。它是最常见的绝对单位，提供对尺寸的精确控制。 1px 始终等于 1/96 英寸。
in (Inch): This absolute unit is equal to 96px. in (英寸): 这是一个绝对单位，等于 96 像素。
cm (Centimeters): This absolute unit is equal to 25.2/64 of an inch. cm (厘米): 这是一个绝对单位，等于 1 英寸的 25.2/64。
mm (Millimeters): This absolute unit is equal to 1/10th of a centimeter. mm (毫米): 这是一个绝对单位，等于 1 厘米的 1/10。
q (Quarter-Millimeters): This absolute unit is equal to 1/40th of a centimeter. q (四分之一毫米): 这是一个绝对单位，等于 1 厘米的 1/40。
pc (Picas): This absolute unit is equal to 1/6th of an inch. pc (派卡): 这是一个绝对单位，等于 1 英寸的 1/6。
pt (Points): This absolute unit is equal to 1/72th of an inch. pt (点): 这个绝对单位等于一英寸的 1/72。
Relative Units 相对单位
Percentages: These relative units allow you to define sizes, dimensions, and other properties as a proportion of their parent element. For example, if you set width: 50%; on an element, it will occupy half the width of its parent container.
百分比：这些相对单位允许你将大小、尺寸和其他属性定义为相对于其父元素的百分比。例如，如果你在一个元素上设置 width: 50%; ，它将占据其父容器宽度的一半。
em Unit: These units are relative to the font size of the element. If you are using ems for the font-size property, the size of the text will be relative to the font size of the parent element. em 单位：这些单位相对于元素的字体大小。如果你使用 ems 为 font-size 属性，文本的大小将相对于父元素的字体大小。
rem Unit: These units are relative to the font size of the root element, which is the html element. rem 单位：这些单位相对于根元素的字体大小，根元素是 html 元素。
vh Unit: vh stands for "viewport height" and 1vh is equal to 1% of the viewport’s height. vh 单位： vh 代表 "viewport height" ， 1vh 等于视口高度 1%。
vw Unit: vw stands for "viewport width" and 1vw is equal to 1% of the viewport’s width. vw 单位： vw 代表 "viewport width" ， 1vw 等于视口宽度 1%。
calc Function calc 函数
calc() Function: With the calc() function, you can perform calculations directly within your stylesheets to determine property values dynamically. This means that you can create flexible and responsive user interfaces by calculating dimensions based on the viewport size or other elements. calc() 函数：使用 calc() 函数，您可以直接在样式表中执行计算，以动态确定属性值。这意味着您可以根据视口大小或其他元素计算尺寸，从而创建灵活且响应式的用户界面。
Pseudo Classes and Elements 伪类和伪元素
User Action Pseudo-classes 用户操作伪类
Pseudo-classes Definition: These are special CSS keywords that allow you to select an element based on its specific state or position. 伪类定义 ：这些是特殊的 CSS 关键字，允许您根据特定状态或位置选择元素。
User Action Pseudo-classes: These are special keywords that allow you to change the appearance of elements based on user interactions, improving the overall user experience. 用户操作伪类 ：这些是特殊关键字，可帮助您根据用户交互来更改元素的外观，从而提升整体用户体验。
:active Pseudo-class: This pseudo-class lets you select the active state of an element, like clicking on a button. :active 伪类 ：此伪类允许您选择元素的活动状态，例如单击按钮。
:hover Pseudo-class: This pseudo-class defines the hover state of an element. :hover 伪类 ：此伪类定义了元素的光标悬停状态。
:focus Pseudo-class: This pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input. :focus 伪类 ：当元素获得焦点时，该伪类会应用样式，通常通过键盘导航或用户点击表单输入框。
:focus-within Pseudo-class: This pseudo-class is used to apply styles to an element when it or any of its descendants have focus. :focus-within 伪类 ：此伪类用于将样式应用到元素及其任何子元素处于焦点状态时。
Input Pseudo-classes 输入伪类
Input Pseudo-classes: These pseudo-classes are used to target HTML input elements based on the state they are in before and after user interaction. 输入伪类 ：这些伪类用于根据用户交互前后状态来定位 HTML input 元素。
:enabled Pseudo-class: This pseudo-class is used to target form buttons or other elements that are currently enabled. :enabled 伪类 ：此伪类用于针对当前启用的表单按钮或其他元素。
:disabled Pseudo-class: This pseudo-class lets you style an interactive element in disabled mode. :disabled 伪类 ：此伪类允许您在禁用模式下对交互式元素进行样式设置。
:checked Pseudo-class: This pseudo-class is used to indicate to the user that it is checked. :checked 伪类 ：此伪类用于指示用户已选中。
:valid Pseudo-class: This pseudo-class targets the input fields that meet the validation criteria. :valid 伪类 ：此伪类针对满足验证标准的输入字段。
:invalid Pseudo-class: This pseudo-class targets the input fields that do not meet the validation criteria. :invalid 伪类 ：此伪类针对不符合验证标准的输入字段。
:in-range and :out-of-range Pseudo-classes: These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints. :in-range 和 :out-of-range 假类 ：这些假类根据元素的值是否在指定的范围约束内或外，来应用样式。
:required Pseudo-class: This pseudo-class targets input elements that have the required attribute. It signals to the user that they must fill out the field to submit the form. :required 伪类 ：此伪类针对具有 required 属性的元素。它向用户发出信号，表明他们必须填写该字段才能提交表单。
:optional Pseudo-class: This pseudo-class applies styles to input elements that are not required and can be left empty. :optional 伪类 ：此伪类应用于不需要的输入元素，并且可以留空。
:autofill Pseudo-class: This pseudo-class applies styles to input fields that the browser automatically fills with saved data. :autofill 伪类 ：此伪类应用于浏览器自动填充保存数据的输入字段的样式。
Location Pseudo-classes 位置伪类
Location Pseudo-classes: These pseudo-classes are used for styling links and elements that are targeted within the current document. 伪类 ：这些伪类用于为当前文档中的链接和目标元素进行样式设置。
:any-link Pseudo-class: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it’s visited or not. :any-link 伪类 ：这个伪类是 :link 和 :visited 伪类的组合。因此，它可以匹配任何带有 href 属性的锚元素，无论是否被访问过。
:link Pseudo-class: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them. :link 伪类 ：此伪类允许您针对网页上的所有未访问的链接进行定位。您可以使用它在用户点击链接之前对链接进行不同的样式设置。
:local-link Pseudo-class: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones. :local-link 伪类 ：此伪类针对指向同一文档的链接。当您想要区分内部链接和外部链接时，此伪类可能非常有用。
:visited Pseudo-class: This pseudo-class targets a link the user has visited. :visited 伪类 ：此伪类针对用户已访问过的链接。
:target Pseudo-class: This pseudo-class is used to apply styles to an element that is the target of a URL fragment. :target 伪类 ：此伪类用于将样式应用于 URL 片段的目标元素。
Tree-structural Pseudo-classes 树结构伪类
Tree-structural Pseudo-classes: These pseudo-classes allow you to target and style elements based on their position within the document tree. 树结构伪类 ：这些伪类允许您根据文档树中的元素位置来定位和样式化它们。
:root Pseudo-class: This pseudo-class is usually the root html element. It helps you target the highest level in the document so you can apply a common style to the entire document. :root 伪类 ：这个伪类通常为根元素 html。它可以帮助您定位文档中的最高级别，以便您可以将通用样式应用到整个文档。
:empty Pseudo-class: Empty elements, that is, elements with no children other than white space, are also included in the document tree. That’s why there’s an :empty pseudo-class to target empty elements. :empty 伪类 ：空元素，即除了空白之外没有子元素的元素，也包含在文档树中。这就是为什么有 :empty 伪类来针对空元素。
:nth-child(n) Pseudo-class: This pseudo-class allows you to select elements based on their position within a parent. :nth-child(n) 伪类 ：此伪类允许您根据父级元素中的位置选择元素。
:nth-last-child(n) Pseudo-class: This pseudo-class enables you to select elements by counting from the end. 代码：：:nth-last-child(n) 伪类 ：此伪类允许您从末尾开始计数来选择元素。
:first-child Pseudo-class: This pseudo-class selects the first element in a parent element or the document. :first-child 伪类 ：此伪类选择父元素或文档中的第一个元素。
:last-child Pseudo-class: This pseudo-class selects the last element in a parent element or the document. :last-child 伪类 ：此伪类选择父元素或文档中的最后一个元素。
:only-child Pseudo-class: This pseudo-class selects the only element in a parent element or the document. :only-child 伪类 ：此伪类选择父元素或文档中的唯一元素。
:first-of-type Pseudo-class: This pseudo-class selects the first occurrence of a specific element type within its parent. :first-of-type 伪类 ：此伪类选择其父级中特定元素类型的第一次出现。
:last-of-type Pseudo-class: This pseudo-class selects the last occurrence of a specific element type within its parent. :last-of-type 伪类 ：此伪类选择其父级中特定元素类型的最后一个出现。
:nth-of-type(n) Pseudo-class: This pseudo-class allows you to select a specific element within its parent based on its position among siblings of the same type. :nth-of-type(n) 伪类 ：此伪类允许您根据同一类型的兄弟姐妹中其位置来选择其父元素内的特定元素。
:only-of-type Pseudo-class: This pseudo-class selects an element if it’s the only one of its type within its parent. :only-of-type 伪类 ：此伪类选择其父级中唯一属于其类型的元素。
Functional Pseudo-classes 功能伪类
Functional Pseudo-classes: Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, :hover, :focus), functional pseudo-classes accept arguments. 功能伪类 ：功能伪类允许您根据更复杂的条件或关系来选择元素。与常规伪类不同，常规伪类是针对状态（例如 :hover、:focus）的目标元素，而功能伪类接受参数。
:is() Pseudo-class: This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list. :is() 伪类 ：此伪类接受一个选择器列表（例如 ol、ul），并选择一个匹配列表中一个选择器的元素。
1 2 3 4
<pclass="example">This text will change color.</p> <p>This text will not change color.</p> <p>This text will not change color.</p> <pclass="this-works-too">This text will change color.</p>
1 2 3
p:is(.example, .this-works-too) { color: red; }
:where() Pseudo-class: This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list. The difference between :is and :where is that the latter will have a specificity of 0. :where() 伪类 ：此伪类接受一个选择器列表（例如 ol、ul），并选择一个匹配列表中某个选择器的元素。与 :is 和 :where 的区别在于后者具有 0 的特异性。
1 2 3 4
:where(h1, h2, h3) { margin: 0; padding: 0; }
:has() Pseudo-class: This pseudo-class is often dubbed the "parent" selector because it allows you to style elements that contain child elements specified in the selector list. :has() 伪类 ：这个伪类通常被称为“父级”选择器，因为它允许你为包含在选择器列表中子元素的元素进行样式设置。
1 2 3
article:has(h2) { border: 2px solid hotpink; }
:not() Pseudo-class: This pseudo-class is used to select elements that do not match the provided selector. :not() 伪类 ：此伪类用于选择不匹配给定选择器的元素。
1 2 3
p:not(.example) { color: blue; }
Pseudo-elements 伪元素
::before Pseudo-element: This pseudo-element uses the content property to insert cosmetic content like icons just before the element. ::before 伪元素 ：此伪元素使用 content 属性在元素之前插入装饰性内容，例如图标。
::after Pseudo-element: This pseudo-element uses the content property to insert cosmetic content like icons just after the element. ::after 伪元素 ：此伪元素使用 content 属性在元素之后插入装饰性内容，例如图标。
::first-letter Pseudo-element: This pseudo-element targets the first letter of an element’s content, allowing you to style it. ::first-letter 伪元素 ：此伪元素针对元素内容的第一个字母，因此您可以对其进行样式设置。
::marker Pseudo-element: This pseudo-element lets you select the marker (bullet or numbering) of list items for styling. ::marker 伪元素 ：此伪元素允许您选择列表项的标记（星号或编号）进行样式设置。
Colors 颜色
Different Ways to Work with Colors in CSS 在 CSS 中使用颜色的不同方式
Named Colors: These colors are predefined color names recognized by browsers. Examples include blue, darkred, lightgreen. 命名颜色 ：这些颜色是浏览器所识别的预定义颜色名称。示例包括 blue、darkred、lightgreen。
rgb() Function: RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. the rgb() function allows you to define colors using the RGB color model. rgb() 函数 ：RGB 是红、绿、蓝的缩写，是光的三种基本颜色。这三种颜色以不同的强度组合在一起，可以创造出多种颜色。rgb() 函数允许您使用 RGB 颜色模型来定义颜色。
1 2 3
p { color: rgb(255, 0, 0); }
rgba() Function: This function adds a fourth value, alpha, that controls the transparency of the color. If not provided, the alpha value defaults to 1. rgba() 函数 ：此函数添加了第四个值，即 alpha，用于控制颜色的透明度。如果未提供，alpha 值将默认为 1。
1 2 3
div { background-color: rgba(0, 0, 255, 0.5); }
hsl() Function: HSL stands for Hue, Saturation, and Lightness — three key components that define a color. hsl() 函数 ：HSL 是 hue、saturation 和 lightness 的缩写，这三种关键成分定义了颜色。
1 2 3
p { color: hsl(120, 100%, 50%); }
hsla() Function: This function adds a fourth value, alpha, that controls the opacity of the color. hsla() 函數 ：此函數新增了第 4 個值，即 alpha，可控制顏色的不透明度。
1 2 3
div { background-color: hsla(0, 100%, 50%, 0.5); }
Hexadecimal: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The “hex” refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F. 十六进制 ：十六进制（缩写为十六进制代码）是一种六字符的字符串，用于在 RGB 颜色模型中表示颜色。"十六进制"指的是十进制的 16 进位系统，该系统使用 0 到 9 以及 A 到 F 的字母。
1 2 3 4 5 6 7
h1 { color: #FF5733; /* A reddish-orange color */ }
p { background-color: #4CAF50; /* A shade of green */ }
Linear and Radial Gradients 线性和径向渐变
Linear Gradients: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line using keywords like to top, to right, to bottom right, or angles like 45deg. You can use any valid CSS color and as many color stops as you would like. 线性渐变 ：这些渐变在直线上逐渐混合颜色。您可以使用关键字（如“顶部”、“右侧”、“底部右侧”）或角度（如“45 度”）来控制线条的方向。您可以使用任何有效的 CSS 颜色，以及任意多的色阶。
Using appearance: none for Inputs 使用 appearance: none 为输入
appearance: none: Browsers apply default styling to a lot of elements. The appearance: none CSS property gives you complete control over the styling, but comes with some caveats. When building custom styles for input elements, you will need to make sure focus and error indicators are still present. appearance: none ：浏览器对许多元素应用默认样式。 appearance: none CSS 属性让您可以完全控制样式，但也存在一些限制。在为输入元素构建自定义样式时，您需要确保聚焦和错误指示器仍然存在。
Box Model and Flexbox 盒模型与 Flexbox
CSS Overflow Property CSS 溢出属性
Definition: Overflow refers to the way elements handle content that exceeds, or “overflows”, the size of the containing element. Overflow is two-dimensional.
定义：溢出是指元素处理超出或"溢出"包含元素尺寸的内容的方式。溢出是二维的。
overflow-x: The x-axis determines horizontal overflow. overflow-x : x 轴决定水平溢出。
overflow-y: the y-axis determines vertical overflow. overflow-y : y 轴决定垂直溢出。
overflow: Shorthand property for overflow-x and overflow-y. If given one value, both overflows will use it. If given two values, the overflow-x will use the first, and the overflow-y will use the second. overflow : overflow-x 和 overflow-y 的简写属性。如果给定一个值，两个溢出都会使用它。如果给定两个值， overflow-x 将使用第一个， overflow-y 将使用第二个。
CSS Transform Property CSS 变换属性
Definition: This property enables you to apply various transformations to elements, such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space.
定义：此属性使您能够对元素应用各种变换，例如旋转、缩放、倾斜或在 2D 或 3D 空间中移动它们。
translate() Function: This function is used to move an element from its current position. translate() 功能：此函数用于将元素从当前位置移动。
scale() Function: This function allows you to change the size of an element. scale() 功能：这个功能允许你改变元素的大小。
rotate() Function: This function allows you to rotate an element. rotate() 功能：这个功能允许你旋转元素。
skew() Function: This function allows you to skew an element. skew() 功能：这个功能允许你倾斜元素。
Transforms and Accessibility: If you’re using transform to hide or reveal content, make sure that the content is still accessible to screen readers and keyboard navigation. Hidden content should be truly hidden, such as by using display: none or visibility: hidden, rather than simply being visually moved off-screen.
变换与可访问性：如果你使用变换来隐藏或显示内容，请确保内容仍然对屏幕阅读器和键盘导航是可访问的。隐藏的内容应该是真正隐藏的，例如使用 display: none 或 visibility: hidden ，而不是仅仅通过视觉将其移出屏幕。
The Box Model 盒模型
Definition: In the CSS box model, every element is surrounded by a box. This box consists of four components: the content area, padding, border, margin.
定义：在 CSS 盒模型中，每个元素都被一个盒子所包围。这个盒子由四个部分组成：内容区域、 padding 、 border 、 margin 。
Content Area: The content area is the innermost part of the box. It’s the space that contains the actual content of an element, like text or images.
内容区域：内容区域是盒子的最内部部分。它是包含元素实际内容的空间，比如文本或图像。
Margin Collapse 外边距塌陷
Definition: This behavior occurs when the vertical margins of adjacent elements overlap, resulting in a single margin equal to the larger of the two. This behavior applies only to vertical margins (top and bottom), not horizontal margins (left and right).
定义：当相邻元素的水平外边距重叠时，会发生这种行为，结果是一个等于两个中较大的外边距。这种行为仅适用于水平外边距（上和下），不适用于水平外边距（左和右）。
The content-box and border-box Property Values content-box 和 border-box 属性值
box-sizing Property: This property is used to determine how the final width and height are calculated for an HTML element. box-sizing 属性：此属性用于确定 HTML 元素的最终 width 和 height 如何计算。
content-box Value: In the content-box model, the width and height that you set for an element determine the dimensions of the content area but they don’t include the padding, border, or margin. content-box 值：在 content-box 模型中，你为元素设置的 width 和 height 决定了内容区域的尺寸，但它们不包括 padding 、 border 或 margin 。
border-box Value: With border-box, the width and height of an element include the content area, the padding, and the border, but they don’t include the margin. border-box 值：使用 border-box 时，元素的 width 和 height 包括内容区域、 padding 和 border ，但不包括 margin 。
CSS Reset CSS 重置
Definition: A CSS reset is a stylesheet that removes all or some of the default formatting that web browsers apply to HTML elements. Third party options for CSS resets include sanitize.css and normalize.css.
定义：CSS 重置是一个样式表，用于移除或部分移除网页浏览器应用于 HTML 元素的默认格式。第三方 CSS 重置选项包括 sanitize.css 和 normalize.css 。
CSS Filter Property CSS 滤镜
Definition: This property can be used to create various effects such as blurring, color shifting, and contrast adjustment.
定义：此属性可用于创建模糊、颜色偏移和对比度调整等多种效果。
blur() Function: This function applies a Gaussian blur to the element. The amount is defined in pixels and represents the radius of the blur. blur() 函数：此函数对元素应用高斯模糊。模糊程度以像素定义，表示模糊半径。
brightness() Function: This function adjusts the brightness of the element. A value of 0% will make the element completely black, while values over 100% will increase the brightness. brightness() 函数：此函数调整元素的亮度。0%的值会使元素完全变黑，而超过 100%的值会增加亮度。
contrast() Function: This function adjusts the contrast of the element. A value of 0% will make the element completely grey, 100% will make the element appear normally, and values greater than 100% will increase the contrast. contrast() 函数：此函数调整元素的对比度。0%的值会使元素完全变灰，100%会使元素正常显示，而超过 100%的值会增加对比度。
grayscale() Function: This function converts the element to grayscale. The amount is defined as a percentage, where 100% is completely grayscale and 0% leaves the image unchanged. grayscale() 函数：此函数将元素转换为灰度。模糊程度以百分比定义，100%是完全灰度，0%则保持图像不变。
sepia() Function: This function applies a sepia tone to the element. Like grayscale, it uses a percentage value. sepia() 函数：此函数将棕褐色调应用于元素。与灰度类似，它使用百分比值。
hue-rotate() Function: This function applies a hue rotation to the element. The value is defined in degrees and represents a rotation around the color circle. hue-rotate() 函数：此函数将色相旋转应用于元素。该值以度数表示，代表围绕色相环的旋转。
Introduction to CSS Flexbox and Flex Model CSS Flexbox 和 Flex 模型的介绍
Definition: CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container.
定义：CSS Flexbox 是一种一维布局模型，允许您在容器内按行和列排列元素。
Flex Model: This model defines how flex items are arranged within a flex container. Every flex container has two axes: the main axis and the cross axis.
Flex 模型：该模型定义了 Flex 项目在 Flex 容器内的排列方式。每个 Flex 容器有两个轴：主轴和交叉轴。
The flex-direction Property flex-direction 属性
Definition: This property sets the direction of the main axis. The default value of flex-direction is row, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
定义：此属性设置主轴的方向。 flex-direction 的默认值为 row ，将所有 flex 项目放在同一行上，按照您浏览器的默认语言方向（从左到右或从右到左）。
flex-direction: row-reverse;: This reverses the items in the row. flex-direction: row-reverse; ：这将反转行中的项目。
flex-direction: column;: This will align the flex items vertically instead of horizontally. flex-direction: column; ：这将使 flex 项目垂直排列而不是水平排列。
flex-direction: column-reverse;: This reverses the order of the flex items vertically. flex-direction: column-reverse; : 这个属性会垂直反转 flex 项的顺序。
The flex-wrap Property flex-wrap 属性
Definition: This property determines how flex items are wrapped within a flex container to fit the available space. flex-wrap can take three possible values: nowrap, wrap, and wrap-reverse.
定义：此属性决定弹性项在弹性容器内如何包装以适应可用空间。 flex-wrap 可以取三个可能的值： nowrap 、 wrap 和 wrap-reverse 。
flex-wrap: nowrap;: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container’s width. flex-wrap: nowrap; ：这是默认值。即使弹性项的宽度超过容器的宽度，也不会将它们包装到新行上。
flex-wrap: wrap;: This property will wrap the items when they exceed the width of their container. flex-wrap: wrap; ：当弹性项超出其容器的宽度时，此属性将包装它们。
flex-wrap: wrap-reverse;: This property will wrap flex items in reverse order. flex-wrap: wrap-reverse; ：此属性将反向包装弹性项。
flex-flow Property: This property is a shorthand property for flex-direction and flex-wrap. flex-flow 属性：此属性是 flex-direction 和 flex-wrap 的简写属性。
The justify-content Property justify-content 属性
Definition: This property aligns the child elements along the main axis of the flex container.
定义：此属性沿着弹性容器的主轴对齐子元素。
justify-content: flex-start;: In this case, the flex items will be aligned to the start of the main axis. This could be horizontal or vertical. justify-content: flex-start; ：在这种情况下，弹性项将沿主轴的起始位置对齐。这可以是水平或垂直的。
justify-content: flex-end;: In this case, the flex items are aligned to the end of the main axis, horizontally or vertically. justify-content: flex-end; ：在这种情况下，弹性项将沿主轴的结束位置对齐，可以是水平或垂直的。
justify-content: center;: This centers the flex items along the main axis. justify-content: center; ：这将弹性项沿主轴居中对齐。
justify-content: space-between;: This will distribute the elements evenly along the main axis. justify-content: space-between; : 这将沿主轴均匀分布元素。
justify-content: space-around;: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item. justify-content: space-around; : 这将沿主轴均匀分布 flex 项目，并在第一个项目之前和最后一个项目之后添加空间。
justify-content: space-evenly;: This will distribute the items evenly along the main axis. justify-content: space-evenly; : 这将沿主轴均匀分布项目。
The align-items Property align-items 属性
Definition: This property is used to distribute items along the cross axis. Remember that the cross axis is perpendicular to the main axis.
定义：此属性用于沿交叉轴分布项目。请记住，交叉轴是垂直于主轴的。
align-items: center;: This is used to center the items along the cross axis. align-items: center; ：此属性用于沿交叉轴居中项目。
align-items: flex-start;: This aligns the items to the start of the cross axis. align-items: flex-start; : 这将项目对齐到交叉轴的起始位置。
align-items: stretch;: This is used to stretch the flex items along the cross axis. align-items: stretch; : 这用于沿交叉轴拉伸弹性项目。
CSS Typography CSS排版
Introduction to Typography 排版入门
Cap Height: This is the height of uppercase letters, measured from the baseline to the top.
大写字母高度：这是大写字母的高度，从基线到顶部测量。
X-height: This is the average height of lowercase letters, excluding ascenders and descenders.
x 高度：这是小写字母的平均高度，不包括上伸部和下伸部。
Ascenders: These are the parts of lowercase letters that extend above the x-height, such as the tops of the letters ‘h’, ‘b’, ‘d’, and ‘f’.
Ascenders：这些是小写字母中延伸到 x 高度以上的部分，例如字母 ‘h’、‘b’、‘d’ 和 ‘f’ 的顶部。
Descenders: These are the parts of lowercase letters that extend below the baseline, such as the tails of ‘y’, ‘g’, ‘p’, and ‘q’.
Descenders：这些是小写字母中延伸到基线以下的部分，例如字母 ‘y’、‘g’、‘p’ 和 ‘q’ 的尾部。
Kerning: This is how space is adjusted between specific pairs of characters to improve their readability and aesthetics. For example, reducing the space between the letters A and V.
Kerning：这是调整特定字符对之间间距的方式，以提高其可读性和美观度。例如，减少字母 A 和 V 之间的间距。
Tracking: This is how space is adjusted between all characters in a block of text. It’s essentially the distance between the characters. It affects how dense and open the text will be.
Tracking：这是调整文本块中所有字符之间间距的方式。它本质上是字符之间的距离。它会影响文本的密集度和开放感。
Leading: This is the vertical space between lines of text. It’s measured from the baseline of one line to the baseline of the next line.
Leading: 这是文本行之间的垂直间距。它从一行的基线测量到下一行的基线。
Web Safe Fonts 网页安全字体
Definition: These fonts are a subset of fonts that are very likely to be installed on a computer or device. When the browser has to render a font, it tries to find the font file on the user’s system. But if the font is not found, it will usually fall back to a default system font.
定义：这些字体是极有可能已安装在计算机或设备上的字体子集。当浏览器需要渲染字体时，它会尝试在用户的系统上查找字体文件。但如果找不到该字体，通常会回退到默认的系统字体。
At-rules and the @font-face At-rule
Definition: At-rules are statements that provide instructions to the browser. You can use them to define various aspects of the stylesheet, such as media queries, keyframes, font faces, and more.
定义：At-rules 是向浏览器提供指令的语句。您可以使用它们来定义样式的各个方面，例如媒体查询、关键帧、字体面等。
@font-face: This allows you to define a custom font by specifying the font file, format, and other important properties, like weight and style. For the @font-face at-rule to be valid, you also need to specify the src property. This property contains references to the font resources. @font-face ：这允许您通过指定字体文件、格式以及其他重要属性（如字重和样式）来定义自定义字体。要使 @font-face at-rule 有效，您还需要指定 src 属性。该属性包含对字体资源的引用。
Font Formats: For each font resource, you can also specify the format. This is optional. It’s a hint for the browser on the font format. If the format is omitted, the resource will be downloaded and the format will be detected after it’s downloaded. If the format is invalid, the resource will not be downloaded. Possible font formats include collection, embedded-opentype, opentype, svg, truetype, woff, and woff2.
字体格式：对于每个字体资源，您也可以指定格式。这是可选的。它是浏览器关于字体格式的提示。如果省略格式，资源将被下载，并在下载后检测格式。如果格式无效，资源将不会被下载。可能的字体格式包括 collection 、 embedded-opentype 、 opentype 、 svg 、 truetype 、 woff 和 woff2 。
woff and woff2: woff stands for “Web Open Font Format.” It’s a widely used font format developed by Mozilla in collaboration with Type Supply, LettError, and other organizations. The difference between woff and woff2 is the algorithm used to compress the data. woff 和 woff2 ： woff 代表“Web 开放字体格式”。它是一种广泛使用的字体格式，由 Mozilla 与 Type Supply、LettError 及其他组织合作开发。 woff 和 woff2 之间的区别在于用于压缩数据的算法。
OpenType: This is a format for scalable computer fonts developed by Microsoft and Adobe that allows users to access additional features in a font. It’s widely used across major operating systems.
OpenType：这是一种由微软和 Adobe 开发的可缩放计算机字体格式，允许用户访问字体中的附加功能。它在主流操作系统中被广泛使用。
tech(): This is used to specify the technology of the font resource. This is optional. tech() ：用于指定字体资源的技术类型。这是可选的。
Definition: An external font is a font file that is not included directly within your project files. They’re usually hosted on a separate server. To include these external fonts inside your project, you can use a link element or @import statement inside your CSS.
定义：外部字体是指不直接包含在项目文件中的字体文件。它们通常托管在单独的服务器上。要在项目中包含这些外部字体，您可以在 CSS 中使用 link 元素或 @import 语句。
Google Fonts: This is a Google service that offers a collection of fonts, many of which are designed specifically for web development.
Google Fonts：这是一项谷歌提供的服务，提供大量字体集合，其中许多字体专为网页开发而设计。
Here is an example using the link element:
以下是一个使用 link 元素的示例：
Font Squirrel: This is another popular resource that you can use for adding custom external fonts to your projects.
Font Squirrel：这是另一个流行的资源，可用于为项目添加自定义外部字体。
text-shadow Property 属性
Definition: This property is used to apply shadows to text. You need to specify the X and Y offset, which represent the horizontal and vertical distance of the shadow from the text, respectively. These values are required. Positive values of the X offset and Y offset will move the shadow right and down, respectively, while negative values will move the shadow left and up.
定义：此属性用于为文本添加阴影。您需要指定 X 和 Y 偏移量，它们分别代表阴影相对于文本的水平和垂直距离。这些值是必需的。X 偏移量和 Y 偏移量的正值将使阴影分别向右和向下移动，而负值将使阴影分别向左和向上移动。
Applying Multiple Text Shadows: The text can have more than one shadow. The shadows will be applied in layers, from front to back, with the first shadow at the top.
应用多个文本阴影：文本可以拥有多个阴影。这些阴影将按层应用，从前往后，第一个阴影位于最顶层。
Accessibility 无障碍
Color Contrast Tools 颜色对比度工具
WebAIM’s Color Contrast Checker: This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards.
WebAIM 的颜色对比度检查器：这款在线工具允许您输入设计的前景色和背景色，并立即查看它们是否符合 Web 内容无障碍指南 (WCAG) 标准。
TPGi Colour Contrast Analyzer: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tool also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.
TPGi 颜色对比度分析器：这是一款免费的颜色对比度检查器，可帮助您检查网站和应用程序是否符合 Web 内容无障碍指南 (WCAG) 标准。该工具还配备了色盲模拟器功能，让您能够查看网站或应用程序在有色觉障碍人士眼中的呈现效果。
Accessibility Tree 无障碍树
Accessibility tree is a structure used by assistive technologies, such as screen readers, to interpret and interact with the content on a webpage.
无障碍树是一种由辅助技术（如屏幕阅读器）使用的结构，用于解释和与网页内容进行交互。
Best Practices with CSS and Accessibility 最佳实践：CSS 与无障碍性
display: none;: Using display: none; means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility. display: none; ：使用 display: none; 意味着屏幕阅读器和其他辅助技术将无法访问此内容，因为它未包含在无障碍树中。因此，仅当您希望从视觉呈现和无障碍性两方面完全移除内容时，才应使用此方法。
visibility: hidden;: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree. visibility: hidden; ：此属性和值在视觉上隐藏内容，但仍将其保留在文档流中，这意味着它仍会占据页面上的空间。这些元素也将不再被屏幕阅读器读取，因为它们已从无障碍树中移除。
.sr-only CSS class: This is a common technique used to visually hide content while keeping it accessible to screen readers. .sr-only CSS 类：这是一种常用技术，用于在视觉上隐藏内容，同时保持其对屏幕阅读器的可访问性。
scroll-behavior: smooth;: This property and value enables a smooth scrolling behavior. scroll-behavior: smooth; : 此属性和值可实现平滑滚动行为。
prefers-reduced-motion feature: This is a media feature that can be used to detect the user’s animation preference. prefers-reduced-motion feature: 这是一个媒体特性，可用于检测用户的动画偏好。
Hiding Content with HTML Attributes 使用 HTML 属性隐藏内容
aria-hidden attribute: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content. aria-hidden 属性：用于向使用辅助技术（如屏幕阅读器）的用户隐藏元素。例如，这可以用来隐藏不提供任何有意义内容的装饰性图像。
hidden attribute: This attribute is supported by most modern browsers and hides content both visually and from the accessibility tree. It can be easily toggled with JavaScript. hidden 属性：此属性受大多数现代浏览器支持，可同时在视觉上和从无障碍树中隐藏内容。它可以通过 JavaScript 轻松切换。
Accessibility Issue of the placeholder Attribute placeholder 属性的无障碍问题
Using placeholder text is not great for accessibility. Too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
使用占位符文本对无障碍性不利。用户常常会将占位符文本与实际的输入值混淆——他们认为输入框中已经存在值。
CSS Positioning CSS 定位
Working With Floats 使用浮动
Definition: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, the text will wrap around that floated content. 定义 ：浮动用于将元素从其页面上的正常流中移除，并将其定位在容器的左侧或右侧。当这种情况发生时，文本将围绕该浮动内容进行环绕。
1 2
float: left; float: right;
Clearing Floats: The clear property is used to determine if an element needs to be moved below the floated content. When you have multiple floated elements stacked next to each other, there could be issues with overlap and collapsing in the layouts. So a clearfix hack was created to fix this issue. 清除浮动 ：clear 属性用于确定是否需要将元素移动到浮动内容下方。当多个浮动元素彼此相邻堆叠时，布局中可能会出现重叠和塌陷问题。因此，人们创建了 clearfix 修复技巧来解决此问题。
Static, Relative and Absolute Positioning 静态、相对和绝对定位
Static Positioning: This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another. 静态定位 ：这是文档的正常流。元素从上到下、从左到右依次排列。
Relative Positioning: This allows you to use the top, left, right and bottom properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page. 相对定位 ：允许使用 top、left、right 和 bottom 属性在正常文档流中定位元素。也可以使用相对定位使元素与页面上的其他元素重叠。
Absolute Positioning: This allows you to take an element out of the normal document flow, making it behave independently from other elements. 绝对定位 ：这允许您将元素从正常文档流中取出，使其独立于其他元素运行。
Fixed and Sticky Positioning 固定定位与粘性定位
Fixed Positioning: When an element is positioned with position: fixed, it is removed from the normal document flow and placed relative to the viewport, meaning it stays in the same position even when the user scrolls. This is often used for elements like headers or navigation bars that need to remain visible at all times. 固定定位 ：当元素使用 position: fixed 进行定位时，它会从正常的文档流中移除，并相对于视口进行放置，这意味着即使用户滚动页面，它也会保持在相同的位置。这通常用于需要始终可见的元素，如页眉或导航栏。
Sticky Positioning: This type of positioning will act as a hybrid between relative and fixed positioning. Initially, the element behaves as though it’s positioned relatively, staying within the flow of the document. However, once the user scrolls the element past a certain point, it “sticks” to the viewport (usually the top) and behaves as though it is fixed. This is great for creating elements like sticky navigation bars, which only become fixed once the user scrolls to a certain position. 粘性定位 ：这种定位方式将相对定位和固定定位的特性相结合。初始状态下，元素表现得如同相对定位，保持在文档流中。然而，当用户滚动使元素超过某个特定点时，它会“粘附”到视口（通常是顶部），并表现得如同固定定位。这对于创建诸如粘性导航栏等元素非常有用，它们仅在用户滚动到特定位置时才变为固定状态。
Working With the z-index Property 使用 z-index 属性
Definition: The z-index property in CSS is used to control the vertical stacking order of positioned elements that overlap on the page. 定义 ：CSS 中的 z-index 属性用于控制页面上重叠的定位元素的垂直堆叠顺序。
Attribute Selectors 属性选择器
Working with Different Attribute Selectors and Links 使用不同的属性选择器和链接
Definition: The attribute selector allows you to target HTML elements based on their attributes like the href or title attributes. 定义 ：attribute 选择器允许您根据 HTML 元素的属性（如 href 或 title 属性）来定位它们。
title Attribute: This attribute provides additional information about an element.
lang Attribute: This attribute is used in HTML to specify the language of the content within an element. You might want to style elements differently based on the language they are written in, especially on a multilingual website. lang 属性 ：此属性用于 HTML 中，用于指定元素内内容的语言。您可能希望根据元素所使用的语言对其进行不同的样式设置，尤其是在多语言网站上。
data-lang Attribute: Custom data attributes like the data-lang attribute are commonly used to store additional information in elements, such as specifying the language used within a specific section of text. Here is how you can style elements based on the data-lang attribute: data-lang 属性 ：像 data-lang 这样的自定义数据属性通常用于在元素中存储附加信息，例如指定文本特定部分使用的语言。以下是基于 data-lang 属性为元素设置样式的示例：
type Attribute: When working with ordered lists in HTML, the type attribute allows you to specify the style of numbering used, such as numerical, alphabetical, or Roman numerals. type 属性 ：在 HTML 中处理有序列表时，type 属性允许您指定所使用的编号样式，例如数字、字母或罗马数字。
Media Queries 媒体查询
Definition: This allows developers to apply different styles based on the characteristics of the device, primarily the viewport width. 定义 ：这允许开发者根据设备的特性（主要是视口宽度）应用不同的样式。
Definition: Media breakpoints are specific points in a website’s design where the layout and content adjust to accommodate different screen sizes. There are some general breakpoints that you can use to target phones, tablets and desktop screens. But it is not wise to try to chase down every single possible screen size for different devices. 定义 ：媒体断点是网站设计中的特定点，在这些点上，布局和内容会进行调整以适应不同的屏幕尺寸。有一些通用的断点可用于针对手机、平板电脑和桌面屏幕。但试图为不同设备的每一种可能的屏幕尺寸都进行适配是不明智的。
Grid
CSS Grid Basics CSS Grid 基础
Definition: CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the display property to grid. 定义 ：CSS Grid 是一种二维布局系统，用于在网页中创建复杂布局。网格包含行和列，行与列之间存在间隙。要定义网格布局，需将 display 属性设置为 grid。
1 2 3
.container { display: grid; }
The fr (Fractional) Unit: This unit represents a fraction of the space within the grid container. You can use the fr unit to create flexible grids. fr（分数）单位 ：该单位表示网格容器内空间的一部分。您可以使用 fr 单位来创建灵活的网格。
Creating Gaps Between Tracks: There are three ways to create gaps between tracks in CSS grid. You can use the column-gap property to create gaps between columns. You can use the row-gap property to create gaps between rows. Or you can use the gap shorthand property to create gaps between both rows and columns. 在轨道之间创建间隙 ：在 CSS 网格中，有三种方式可以在轨道之间创建间隙。您可以使用 column-gap 属性在列之间创建间隙。您可以使用 row-gap 属性在行之间创建间隙。或者，您可以使用 gap 简写属性同时在行和列之间创建间隙。
grid-template-columns: This is used to set lines names and sizing for the grid track columns. grid-template-columns：此属性用于设置网格轨道列的线条名称和尺寸。
place-items: This is used to align items for both block and inline directions. place-items: 此属性用于在块方向和行内方向上对齐项目。
align-items: This is used to set the alignment for the items in a grid container. align-items：用于设置网格容器中项目的对齐方式。
repeat() Function: This function is used to repeat sections in the track listing. Instead of writing grid-template-columns: 1fr 1fr 1fr; you can use the repeat() function instead. repeat() 函数 ：此函数用于在轨道列表中重复部分。您可以使用 repeat() 函数代替编写 grid-template-columns: 1fr 1fr 1fr; 。
Explicit Grid: You can specify the number of lines or tracks using the grid-template-columns or grid-template-rows properties. 显式网格 ：您可以使用 grid-template-columns 或 grid-template-rows 属性来指定线条或轨道的数量。
Implicit Grid: When items are placed outside of the grid, then rows and columns are automatically created for those outside elements. 隐式网格 ：当项目被放置在网格之外时，会自动为这些外部元素创建行和列。
minmax() Function: This function is used to set the minimum and maximum sizes for a track. minmax() 函数 ：此函数用于设置轨道的最小和最大尺寸。
Line-based Placement: All grids have lines. To specify where the item begins on a line, you can use the grid-column-start and grid-row-start properties. To specify where the item ends on the line, you can use the grid-column-end and grid-row-end properties. You can also choose to use the grid-column or grid-row shorthand properties instead. 基于线的放置 ：所有网格都有线条。要指定项目在某条线上的起始位置，您可以使用 grid-column-start 和 grid-row-start 属性。要指定项目在某条线上的结束位置，您可以使用 grid-column-end 和 grid-row-end 属性。您也可以选择使用 grid-column 或 grid-row 简写属性作为替代。
Here is an example of using the grid-column property to make an element stretch across all columns.
以下是使用 grid-column 属性使元素跨越所有列的示例。
1 2 3
.element { grid-column: 1 / -1; }
grid-template-areas: The property is used to provide a name for the items you are going to position on the grid. grid-template-areas：该属性用于为您将在网格上定位的项目提供名称。
