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 继承：样式从父元素传递到其子元素的过程。继承允许你在文档树的较高层级定义样式，并让它们应用于多个元素，而无需为每个元素显式指定样式。
