freeCodeCamp Certified Full Stack Developer Curriculum freeCodeCamp 认证全栈开发工程师课程
Courses 课程目录
HTML
CSS
JavaScript
……
This document focuses on Chapter 2: CSS.
本文档聚焦于第二部分，CSS。
CSS 篇
Computer Basic 计算机基础
Understanding Computer, Internet and Developer Tooling Basics 理解计算机、互联网和开发者工具基础
Motherboard: holds all of the memory, connectors, and hard drives that are needed to run the computer. It serves as the main circuit board for the computer.
主板：包含运行计算机所需的全部内存、连接器和硬盘。它是计算机的主要电路板。
Central Processing Unit(CPU): a processor that is responsible for executing instructions and performing calculations.
中央处理器（CPU）：负责执行指令和进行计算的处理器。
Random Access Memory(RAM): a temporary storage location for the computer’s CPU.
随机存取存储器（RAM）：计算机 CPU 的临时存储位置。
Hard Disk Drive(HDD): a permanent storage location that is used to store data even when the computer is turned off.
硬盘驱动器（HDD）：一种永久性存储位置，即使在计算机关闭时也能用于存储数据。
Solid State Drive(SSD): non-volatile flash memory and can be used in place of a hard drive.
固态驱动器（SSD）：非易失性闪存，可替代硬盘使用。
Power Supply Unit(PSU): responsible for converting the electricity from the wall outlet into a form that the computer can use.
电源供应单元（PSU）：负责将墙壁插座的电力转换为计算机可使用的形式。
Graphics Processing Unit(GPU): responsible for rendering visuals on the computer screen.
图形处理单元（GPU）：负责在计算机屏幕上渲染视觉效果。
Different Types of Internet Service Providers: An Internet Service Provider (ISP) is a company that provides access to the internet. There are different types of ISPs, including dial-up, DSL, cable, fiber-optic, and satellite.
不同类型的互联网服务提供商：互联网服务提供商（ISP）是一家提供互联网接入的公司。有不同类型的 ISP，包括拨号、DSL、有线电视、光纤和卫星。
Safe Ways to Sign Into Your Computer: Examples of safe ways to sign into your computer include using a strong password, enabling two-factor authentication, and using a password manager.
安全登录计算机的方法：安全登录计算机的方法包括使用强密码、启用双因素认证和使用密码管理器。
Integrated Development Environment (IDE): a tool that helps developers write, test and debug code in an efficient manner.
集成开发环境（IDE）：一种帮助开发者以高效方式编写、测试和调试代码的工具。
Code Editor: a tool that developers use to write and debug code.
代码编辑器：开发者用来编写和调试代码的工具。
Git: a popular version control system that allows developers to track changes in their code and collaborate with others.
Git：一个流行的版本控制系统，允许开发者跟踪代码更改并与他人协作。
Cloud-based Hosting Services for repositories: A repository is a storage location for project files and version history. Popular cloud-based hosting services for repositories include GitHub, GitLab, and Bitbucket.
用于存储库的云托管服务：存储库是项目文件和版本历史记录的存储位置。流行的云托管服务包括 GitHub、GitLab 和 Bitbucket。
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, File Systems and Media Formats 处理文件、文件系统和媒体格式
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.
根目录：文件系统中的顶级目录。目录是文件夹的另一种说法。
Markdown: a markup language commonly used for documentation and README files. A README file is a file that contains information about a project, such as how to install and use it.
Markdown：一种常用于文档和 README 文件的标记语言。 README 文件包含有关项目的信息，例如如何安装和使用它。
index.html: represents the default page that is displayed when a user visits a website. index.html : 表示用户访问网站时显示的默认页面。
Create, Move, and Delete files and folders using Explorer/Finder: Explorer is the file manager in Windows, and Finder is the file manager in macOS. You can use these tools to create, move, and delete files and folders.
使用 Explorer/Finder 创建、移动和删除文件和文件夹：Explorer 是 Windows 中的文件管理器，Finder 是 macOS 中的文件管理器。您可以使用这些工具来创建、移动和删除文件和文件夹。
Searching for files and folders: You can use the search functionality in Explorer or Finder to find files and folders on your computer.
搜索文件和文件夹：您可以使用 Explorer 或 Finder 中的搜索功能来查找计算机上的文件和文件夹。
HTML, CSS and JS File Types: .html file extension is used for HTML files, .css for CSS files, and .js for JavaScript files.
HTML、CSS 和 JS 文件类型： .html 扩展名用于 HTML 文件， .css 用于 CSS 文件， .js 用于 JavaScript 文件。
Common Image and Graphic Formats: JPEG and PNG are common image file formats. GIF is another common image file format that supports animation. SVG is a file format for vector graphics.
常见图像和图形格式： JPEG 和 PNG 是常见的图像文件格式。 GIF 是另一种支持动画的常见图像文件格式。 SVG 是矢量图形的文件格式。
Common Audio and Video Formats: The MP3 format is commonly used for audio files. The MP4 format is commonly used for video files. The MOV format was developed by Apple and is commonly used for video files.
常见音频和视频格式： MP3 格式通常用于音频文件。 MP4 格式通常用于视频文件。 MOV 格式由苹果公司开发，通常用于视频文件。
Common Font Formats: The TTF format is commonly used for TrueType fonts. The WOFF format is commonly used for web fonts. The successor to WOFF is WOFF2, which provides better compression.
常见字体格式： TTF 格式通常用于 TrueType 字体。 WOFF 格式通常用于网络字体。WOFF 的继任者是 WOFF2 ，它提供了更好的压缩。
ZIP: a file format that is used to compress files and folders.
ZIP：一种用于压缩文件和文件夹的文件格式。
Browsing the Web Effectively 高效浏览网页
What is a Web browser?: a software application that allows users to access and view websites on the internet.
什么是网络浏览器：一种允许用户访问和查看互联网上网站的软件应用程序。
What is a Search Engine: a tool that allows users to search for information on the internet. Examples include Google, Bing, and Yahoo.
什么是搜索引擎：一种允许用户在互联网上搜索信息的工具。例如 Google、Bing 和 Yahoo。
Common web browsers: A few examples of common web browsers include Google Chrome, Mozilla Firefox, and Microsoft Edge.
常见的网络浏览器：一些常见的网络浏览器包括 Google Chrome、Mozilla Firefox 和 Microsoft Edge。
Common Search Strategies: You can use site: followed by the URL of a website to search for content on that website. You can use filetype: followed by a file extension to search for files of that type. You can prefix a search term with a minus sign to exclude results containing that term. You can prefix a search term with a plus sign to include results containing that term.
常见搜索策略：您可以使用 site: 后跟一个网站的 URL 来搜索该网站上的内容。您可以使用 filetype: 后跟一个文件扩展名来搜索该类型的文件。您可以在搜索词前加上减号来排除包含该词的结果。您可以在搜索词前加上加号来包含包含该词的结果。
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 。这允许浏览器根据其内容、父元素和显示类型来确定元素的宽度。
min-width Property: This property specifies the minimum width for an element. min-width 属性：此属性指定元素的最小宽度。
max-width Property: This property specifies the maximum width for an element. max-width 属性：此属性指定元素的最大宽度。
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 ，这意味着它将根据内部内容进行调整。
min-height Property: This property specifies the minimum height for an element. min-height 属性：此属性指定元素的最小高度。
max-height Property: This property specifies the maximum height for an element. max-height 属性：此属性指定元素的最大高度。
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 属性：此属性用于在元素内部应用空间，即在内容和边框之间。
margin Shorthand: You can specify 1–4 values to set the margin 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. margin 简写：您可以指定 1-4 个值来设置边距的各个方向。一个值应用于所有四个方向；两个值设置 top 和 bottom ，然后 right 和 left ；三个值设置 top ，水平（ right 和 left ），然后 bottom ；四个值设置 top ， right ， bottom ， left 。
padding 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 简写：您可以指定 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 函数，并将值设置为有效的图像位置。
Spacing list items using margin 使用 margin 分隔列表项
Apart from line-height, margins can also be used in CSS to enhance the spacing and readability of list items.
除了 line-height ，CSS 中还可以使用边距来增强列表项的间距和可读性。
Margins create space outside each li element, allowing control over the gap between list items.
边距在 li 元素外部创建空间，允许控制列表项之间的间隙。
margin-bottom is used to create space below each list item. For example, margin-bottom: 10px; will create a 10-pixel gap below each list item. margin-bottom 用于在每个列表项下方创建空间。例如， margin-bottom: 10px; 将在每个列表项下方创建 10 像素的间隙。
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-top Property: This property is used to set the styles for the top border of an element. border-top: 3px solid blue; sets a 3-pixel-wide solid blue border on the top side of the element. border-top 属性：此属性用于设置元素顶部边框的样式。 border-top: 3px solid blue; 在元素的顶部设置一个 3 像素宽的实心蓝色边框。
border-right Property: This property is used to set the styles for the right border of an element. border-right: 2px solid red; sets a 2-pixel-wide solid red border on the right side of the element. border-right 属性：此属性用于设置元素右侧边框的样式。 border-right: 2px solid red; 在元素的右侧设置一个 2 像素宽的实心红色边框。
border-bottom Property: This property is used to set the styles for the bottom border of an element. border-bottom: 1px dashed green; sets a 1-pixel-wide dashed green border on the bottom side of the element. border-bottom 属性：此属性用于设置元素底部边框的样式。 border-bottom: 1px dashed green; 在元素的底部设置一个 1 像素宽的虚线绿色边框。
border-left Property: This property is used to set the styles for the left border of an element. border-left: 4px dotted orange; sets a 4-pixel-wide dotted orange border on the left side of the element. border-left 属性：此属性用于设置元素左边界框的样式。 border-left: 4px dotted orange; 在元素的左侧设置一个 4 像素宽的虚线橙色边框。
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 设计术语
Layout: This is how visual elements are arranged on a page or screen to communicate a message. These elements may include text, images, and white space.
布局：这是指页面或屏幕上视觉元素的排列方式，用于传达信息。这些元素可能包括文本、图像和空白区域。
Alignment: This is how the elements are placed in relation to one another. Using alignment correctly is helpful for making the design look clean and organized.
对齐：这是指元素之间相互放置的方式。正确使用对齐有助于使设计看起来整洁有序。
Composition: This is the act of arranging elements to create a harmonious design. It determines how elements like images, text, and shapes relate to each other and contribute to the design in an artistic way.
构图：这是指通过排列元素来创造和谐的设计。它决定了图像、文本和形状等元素如何相互关联，并以艺术的方式为设计做出贡献。
Balance: This is how visual weight is distributed within a composition. Designers aim to create an equilibrium through symmetrical or asymmetrical arrangements.
平衡：这是指在构图中视觉重量的分布方式。设计师通过对称或非对称的排列来创造平衡感。
Scale: This refers to comparing the dimensions or size of one element to that of another.
比例：这是指将一个元素的尺寸或大小与另一个元素进行比较。
Hierarchy: This establishes the order of importance of the elements in a design. It’s about making sure that the most important information is noticed first.
层级：这是指确定设计中各元素的重要性顺序。关键在于确保最重要的信息最先被注意到。
Contrast: This is the process of creating clear distinctions between the elements. You can do this through variations in color, size, shape, texture, or any other visual characteristic. Strong contrast is also helpful for improving readability.
对比：这是指在元素之间创造清晰的区分。可以通过颜色、大小、形状、纹理或其他任何视觉特征的变化来实现。强烈的对比也有助于提高可读性。
White Space (negative space): This is the empty space in a design. It’s the area surrounding the elements.
空白区域（负空间）：这是设计中的空白区域。它是元素周围的区域。
UI (User Interface): UI includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons.
UI（用户界面）：UI 包括用户可以在屏幕上看到的视觉和交互元素，例如图标、图像、文本、菜单、链接和按钮。
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.
设计简报：这是一份概述项目目标、目标和要求的文档。它是指导设计过程并确保最终产品满足客户需求的路线图。
Vector Based Design: This involves creating digital art using mathematical formulas to define lines, shapes, and colors.
矢量设计：这涉及使用数学公式来创建数字艺术，定义线条、形状和颜色。
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。
Good Visual Hierarchy in Design: A strong visual hierarchy can provide a clear path for the eye to follow, ensuring that the information you convey is consumed in the order that you intend.
设计中的良好视觉层次：强大的视觉层次可以为眼睛提供清晰的路径，确保您传达的信息按照您预期的顺序被接收。
Responsive Images: Responsive images are images that scale to fit the size of the screen they are being viewed on. This is important because it ensures that your images look good on all devices, from desktops to mobile phones.
响应式图片：响应式图片是指能够根据所查看屏幕的大小进行缩放的图片。这很重要，因为它确保了您的图片在所有设备上（从台式机到手机）都能看起来很好。
Progressive Enhancement: This is a design approach that ensures all users, regardless of browser or device, can access the essential content and functionality of an application.
渐进增强：这是一种设计方法，确保所有用户，无论使用何种浏览器或设备，都能访问应用程序的基本内容和功能。
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 设计模式，允许用户在不注册的情况下浏览和与应用程序交互。
Design Best Practices 设计最佳实践
Dark Mode: This is a special feature on web applications where you can change the default light color scheme to a dark color scheme. You should use desaturated colors in dark mode. Desaturated colors are colors that are less intense and have a lower saturation level.
暗黑模式：这是网络应用程序上的一项特殊功能，您可以将默认的浅色配色方案更改为深色配色方案。您应该在暗黑模式下使用去饱和色。去饱和色是指饱和度较低、强度较弱的色彩。
Breadcrumbs: This is a navigation aid that shows the user where they are in the site’s hierarchy. It is best to place breadcrumbs at the top of the page so users can easily find it. Also, you want to make sure the breadcrumbs are large enough to be easily read, but not so large that they take up too much space on the page.
面包屑导航：这是一种导航辅助工具，显示用户在网站层级结构中的位置。最好将面包屑导航放置在页面顶部，以便用户轻松找到。此外，要确保面包屑导航足够大，易于阅读，但又不会占用过多页面空间。
Card Component: Your card component should be simple in design, not visually cluttered or display too much information. For media, make sure to choose high-quality images and videos to enhance the user experience.
卡片组件：您的卡片组件设计应简洁，避免视觉杂乱或显示过多信息。对于媒体内容，请确保选择高质量的图片和视频，以提升用户体验。
Infinite Scroll: This is a design pattern that loads more content as the user scrolls down the page. You should consider using a load more button because it gives a user control over when they want to see more content. You can also add a back button so users have the ability to go back to the previous page without having to scroll all the way back up.
无限滚动：这是一种设计模式，当用户向下滚动页面时加载更多内容。您可以考虑使用“加载更多”按钮，因为它让用户能够控制何时查看更多内容。您还可以添加一个“返回”按钮，使用户能够返回到上一页，而无需滚动回顶部。
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 元素时，你会获得许多内置的功能和可访问性优势。
Progress Indication for Form Registration: This is a way to show users how far they are in a process. It can be used in forms, registration, and setup processes. Your design should be simple, easy to find, and make it possible to go back to previous steps.
表单注册进度指示：这是一种向用户展示他们在一个流程中进展到哪一步的方式。它可用于表单、注册和设置过程。你的设计应简洁、易于查找，并允许用户返回到上一步。
Shopping Cart: Carts are a place for user to see what item they have already selected on an e-commerce platform. Your carts should always be visible to the user, use a common icon like a cart, bag or basket, and have a clear call-to-action button for users to proceed to checkout.
购物车：购物车是用户在电子商务平台上查看已选择商品的地方。你的购物车应始终对用户可见，使用常见的图标（如购物车、手提包或篮子），并有一个清晰的行动号召按钮，让用户可以继续结账。
Common Design Tools 常用设计工具
Figma: This cloud-based tool specializes in User Interface and User Experience (UI / UX) design. It enables design and development teams to collaborate from anywhere, offering built-in features including Vector-based design, automatic layout, a commenting and feedback system and more.重试 错误原因
Sketch: This is a popular design tool used for its intuitive interface and simplicity, making it ideal for developers who want to quickly create prototypes. It’s also widely used by designers for tasks like creating UIs, icons, and web layouts.
Sketch：这是一款流行的设计工具，因其直观的界面和简洁性而备受青睐，非常适合想要快速创建原型的开发者。它也广泛被设计师用于创建 UI、图标和网页布局等任务。
Adobe XD: This is a vector-based design and prototyping tool for UI/UX design, known for its seamless integration with other Adobe apps like Photoshop, Illustrator, and After Effects.
Adobe XD：这是一款基于矢量的 UI/UX 设计和原型制作工具，以其与其他 Adobe 应用程序（如 Photoshop、Illustrator 和 After Effects）的无缝集成而闻名。
Canva: This tool allows you to create a wide range of visual content, including posters, cover photos, presentations, short videos, and more. Its user-friendly and simple design makes it ideal for beginners.
Canva：这款工具允许您创建各种视觉内容，包括海报、封面照片、演示文稿、短视频等。其用户友好且简洁的设计使其成为初学者的理想选择。
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() 函数，您可以直接在样式表中执行计算，以动态确定属性值。这意味着您可以根据视口大小或其他元素计算尺寸，从而创建灵活且响应式的用户界面。
