CSS Full Course - Includes Flexbox and CSS Grid Tutorials by Beau Carnes from freecodecamp.org

B站视频链接：https://www.bilibili.com/video/av54075594

 

Learn CSS in this complete tutorial course. Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML. This course will teach you everything you need to know to get started with CSS3, including flexbox and CSS grid. ⭐️Course Contents ⭐️ See pinned first comment for course contents. ⭐️Curriculum ⭐️ This course goes along with the CSS curriculum at www.freecodecamp.org. ?Basic CSS: https://learn.freecodecamp.org/respon... ?CSS Flexbox: https://learn.freecodecamp.org/respon... ?CSS Grid: https://learn.freecodecamp.org/respon... Additional CSS tutorials on freecodecamp.org not covered in this video: ?Applied Visual Design: https://learn.freecodecamp.org/respon... ?Applied Accessibility: https://learn.freecodecamp.org/respon... ?Responsive Web Design: https://learn.freecodecamp.org/respon... ⭐️Code ⭐️ These videos were recorded on scrimba.com. You can access the scrimba.com version of the videos, which gives access to the full code and allows live code editing. ?Basic CSS: https://scrimba.com/playlist/pPK9Cq ?CSS Grid: https://scrimba.com/playlist/pByETK ?CSS Flexbox: https://scrimba.com/playlist/pVaDAv ⭐️Learn More ⭐️ ?CSS Projects: https://www.youtube.com/watch?v=pmKyG... ?HTML full course video: https://youtu.be/pQN-pnXPaVg ?HTML curriculum on freeCodeCamp.org: https://learn.freecodecamp.org/respon... ?Javascript full course video: https://youtu.be/PkZNo7MFNFg ?Follow course creator Beau Carnes on Twitter: https://twitter.com/carnesbeau -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org And subscribe for new videos on technology every day: https://youtube.com/subscription_cent...

---

<link rel="stylesheet" type="text/css" href="demo_link.css" />

定义和用法

rel 属性规定当前文档与被链接文档/资源之间的关系。

只有当使用 href 属性时，才能使用 rel 属性。

来自 <https://www.w3school.com.cn/html5/att_link_rel.asp>

---

Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.

 

来自 <https://learn.freecodecamp.org/responsive-web-design/basic-css/specify-how-fonts-should-degrade>

---

Because of cascading, CSS variables are often defined in the :root element.

:root {

--penguin-belly: pink;

}

From <https://learn.freecodecamp.org/responsive-web-design/basic-css/cascading-css-variables/>

---

The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.

This is what the lines look like for a 3x3 grid:

 

To control the amount of columns an item will consume, you can use the grid-column property in conjunction with the line numbers you want the item to start and stop at.

Here's an example:

grid-column: 1 / 3;

This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.

 

From <https://learn.freecodecamp.org/responsive-web-design/css-grid/use-grid-column-to-control-spacing/>