从头再来博客

by ZAYDEK

由ZAYDEK

瓷砖... (TIL…)

免费课程：从头开始构建博客吗？ (Free Course: Build A Blog From Scratch ?‍?)

可能比想象的要容易 (It might be easier than imagined)

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.

在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查一下-谢谢！ 现在，回到我们的常规计划编程。

If you’re like me, you’re interested in the web and its overwhelming reach, but you’re also inundated with the mess of information that is learning HTML and CSS. The thing is, these languages are unlike other domains, like Word Processors and Programming Languages. The web is another world, and it’s not the prettiest thing around.

如果您像我一样，则对网络及其庞大的覆盖范围感兴趣，但同时也被学习HTML和CSS的信息混乱所淹没。 事实是，这些语言与其他领域不同，例如字处理器和编程语言。 网络是另一个世界，它并不是最漂亮的东西。

Having learned me some web, I’m here to give a gentle push of encouragement, because, with a little guidance, these domains can be a lot easier than you imagine. Continue reading, and we’ll build a beautiful blog from scratch. We’ll also learn some CSS Grid, Flexbox, and Responsive Design.

学会了一些网络知识后，我在这里提供一点鼓励，因为在一些指导下 ，这些域名可能比您想象的要容易得多。 继续阅读，我们将从头开始构建一个漂亮的博客。 我们还将学习一些CSS Grid ， Flexbox和响应式设计。

The goal is to do for you that which I have done for myself; learn HTML and CSS from first-principles.

目标是为您做我为自己所做的； 首先学习HTML和CSS。

我还在Scrimba上教授了免费HTML / CSS课程，在该课程中，我教如何从头开始构建漂亮的博客。 点击这里报名！ ？ (I also taught a free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from *scratch*. Click here to enroll! ?)

Scrimba.com是一个交互式前端平台，在该平台上，网站被记录为事件，而不是视频，并且可以被编辑！ ？ (Scrimba.com is an interactive front-end platform where websites are recorded as events — not videos — and can be edited! ?)

那么HTML是从哪里来的呢？ (So where does HTML come from?)

HTML is a descendent of the first meta or markup language: GML. Millennial readers are now working out that GML stands for Generalized Markup Language, but that’s not all it stands for. It was Charles Goldfarb, Edward Mosher, and Raymond Lorie who created what we now know as a meta or markup language at IBM. And in 1996, Charles Goldfarb wrote:

HTML是第一种元或标记语言 ：GML的后代。 千禧一代的读者现在正在研究GML代表通用标记语言，但这并不是它的全部。 是Charles G oldfarb，Edward M osher和Raymond L orie创建了我们现在称为元的东西 或标记语言 在IBM。 1996年，查尔斯·戈德法布( Charles Goldfarb) 写道 ：

“I gave GML its present name so that our initials would always prove where it had originated. One of the ugly truths of technology transfer is that developers tend to be grateful for research work when first received, and virtually oblivious to it by the end of a lengthy development cycle…”

“我给GML取了它的现名，以便我们的名字缩写可以始终证明它的起源。 技术转让的一个丑陋事实是，开发人员在初次接受研究工作时便会心存感激，而在漫长的开发周期结束时却几乎忘却了这项工作……”

— Charles Goldfarb, in 1996

-查尔斯·戈德法布(Charles Goldfarb)， 1996年

GML later became Standardized, thus becoming SGML. Then, Tim Berners-Lee who worked at CERN borrowed the ML from SGML (no, not machine learning, or whatever the hipsters call it) to create HTML, where HT stands for HyperText.

GML后来成为小号 tandardized，从而成为SGML。 然后，蒂姆·伯纳斯-李在谁CERN曾借用了ML从SGML(不，不是机器学习，或任何时髦称呼它)来创建HTML，其中HT表示H yper T外部。

Whoa, cool word. And as I understand, it has roots from an interactive authoring environment called HyperCard, from Bill Atkinson who worked at Apple. For a deeper exploration, I submit the following videos:

哇，很酷的字眼。 据我了解，它的根源是在苹果公司工作的比尔·阿特金森(Bill Atkinson)的交互式创作环境HyperCard。 为了进行更深入的探索，我提交了以下视频：

So—let’s recap. HTML didn’t just take over the world. In fact, there was a whole world before HTML. WUT? I know, I’m trembling in shock—but I hadn’t been born—so, there kind of wasn’t a world.

因此，让我们回顾一下。 HTML 不仅占领了整个世界。 实际上，HTML之前存在着一个世界。 UT？ 我知道，我震惊得发抖-但我还没有出生-因此，那里不是一个世界。

And, HTML owes a lot to its predecessors. As do we all to our parents. Nonetheless, it’s how we make code from text. Now, in four one-minute lessons, I’ll teach the basics of HTML, CSS, and Responsive Design.

而且，HTML得益于它的前辈。 就像我们所有人对父母一样。 但是，这是我们从文本中编写代码的方式。 现在，在四个为时一分钟的课程中，我将讲授HTML，CSS和响应式设计的基础知识。

HTML和CSS在4分钟内 (HTML and CSS in 4 minutes)

第一分钟：网站可以更好地理解为网络树 (First minute: A website can be better understood as a webtree)

<html>    <head></head>    <body></body></html>

All websites begin their lives as such. However—and this is terrible—there’s no content. Nevertheless, we start here because we need to first understand what is a website. Think of it as a tree—an upside-down tree*—a webtree. The html element is the root, whereas head and body are the first branches of our webtree:

所有网站都以此为起点。 但是，这很可怕，没有内容。 尽管如此，我们还是从这里开始，因为我们需要首先了解什么是网站。 可以将其视为一棵树-倒置树*-网络树 。 html元素是根，而head和body是我们网络树的第一个分支 ：

html <- root   /  \head  body <- branches

The head element (or tag—same thing) is for metadata, or information about our website. The body element, on the other hand, is for our website’s content. And because CSS is our website’s style, it goes in the head element, whereas content, like paragraphs, cat videos (≧∇≦), and so on, go in the body element.

head元素(或标记-相同)用于元数据或有关我们网站的信息。 另一方面， body元素用于我们网站的内容。 而且因为CSS是我们网站的样式，所以它放在head元素中，而内容(如段落，猫视频(≥∇≦)等)放在body元素中。

第二分钟：元素或标签有多个外观 (Second minute: elements, or tags, have multiple appearances)

<element><element>value</element><element attribute="value">value</element>

1. The first element is a self-closing element, where we communicate something to the browser, but it doesn’t also have a value. An example of this is the <br> element, which inserts a line-break.

   第一个元素是自闭合元素 ，我们在其中与浏览器进行通信，但是它没有值。 这方面的一个例子是< BR>元素，它插入一个换行。

2. The second element is a common element, where we communicate avalue as belonging to some element. For example <p>hello, world!</p> is the value “hello, world!” as belonging to the paragraph element.

   第二元件是一种常见的元件 ，在这里我们进行通信的 值属于某个元素。 例如<p>hello, worl d！</ p>的值为“ hello，world！”。 属于段落元素。

3. Last, we have an element with an attribute. And an attribute is what is sounds like—dammit, it’s an attribute! It gives an element more context or meaning. Attributes can have multiple values, and elements can have multiple attributes. Attribute-ception.

   最后，我们有一个带有attribute的元素 。 属性就是听起来像的- 该死，这是一个属性 ！ 它为元素提供了更多的上下文或含义。 属性可以具有多个值，元素可以具有多个属性。 属性接受。

<element attribute="value" attribute="value value">value</element>

Now—I need to mention—we don’t create the names of our HTML elements. We borrow them from a list of some 100+ elements that are predefined. Of course, this makes some things easier, and some things much, much harder, such as memorization!

现在，我需要提一下，我们不创建HTML元素的名称。 我们从预定义的约100多个元素列表中借用它们。 当然，这使某些事情变得容易，而有些事情则变得更加困难，例如背诵！

第三分钟：HTML和CSS的通信方式 (Third minute: How HTML and CSS communicate)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <style>

selector { property: value; }

</style>    </head>    <body>        <element>value</element>    </body></html>

The !DOCTYPE html specifies we are writing HTML5—as supposed to all the other versions of HTML we want to avoid. And given the self-closing element meta with the attribute charset and value UTF-8, our text is encoded in Unicode. UTF-8 stands for Unicode Transformation Format… 8. Now we can write in ????! Once, dad decided to text in just emoji.

!DOCTYPE html指定我们正在编写HTML5，就像我们要避免的所有其他HTML版本一样 。 给定具有属性 charset和值 UTF-8的自动关闭元素 meta ，我们的文本将以Unicode编码。 UTF-8代表ünicode 牛逼 ransformation˚FORMAT ... 8。 现在我们可以写了吗？ 一次，父亲决定只用emo ji发短信。

¯\_(ツ)_/¯

¯\ _(ツ)_ /¯

We also added a style element which is one of the available entry points for CSS. Where the selector selects an element and applies a property to it with a corresponding value. We will explore this and more in the next minute.

我们还添加了一个style元素，它是CSS可用的入口点之一。 selector 选择一个元素并对其应用一个具有相应value的property的地方。 我们将在下一分钟内对此进行探索。

Again—I need to mention—we don’t create the names of our CSS properties. We borrow them from a list of some hundreds of properties that are predefined. Of course, this makes some things easier, and some things much, much harder, such as ____________!

同样，我需要提及-我们不创建CSS属性的名称。 我们从预定义的数百个属性列表中借用它们。 当然，这会使某些事情变得容易，而有些事情则变得更加困难，例如____________！

第四分钟：你好，世界！ (Fourth minute: hello, world!)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <style>

p { color: green; }

@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }

</style>    </head>    <body>        <p>hello, world!</p>    </body></html>

No longer is our website terrible! What we have is “hello, world!” in green text, and if our website’s width were resized to 8.5 inches or less, it would read in blue, and at 5 inches or less, red. Here, we used media queries to override CSS in some circumstance, like our website’s width.

我们的网站不再可怕！ 我们拥有的是“你好，世界！” 如果网站的宽度调整为8.5英寸或更小，则显示为蓝色，如果显示的宽度为5英寸或更小，则显示为红色。 在这里，我们在某些情况下使用媒体查询来覆盖CSS，例如我们网站的宽度。

什么是CSS重置和调试器？ (What is a CSS Reset and Debugger?)

We use a reset to ensure our design is consistent, and a debugger to expose inconsistencies.

我们使用重置来确保我们的设计是一致的，并使用调试器来暴露不一致的地方。

We need our reset, because browsers are opinionated and set some CSS properties for us that we want to unset. Popular CSS Resets exist, but we’ll make our own. And we need our debugger for maintaining our website’s design with ease.

我们需要重置，因为浏览器固执己见，并为我们设置了一些我们要取消设置的 CSS属性。 存在流行CSS重置，但我们会自己做。 我们需要调试器来轻松维护我们的网站设计。

We can make a folder named styles to house our reset and debugger:

我们可以创建一个名为styles的文件夹来存放我们的重置和调试器：

styles/       reset.css       debug.css

And to link our new CSS files to our index.html, we add link elements:

并将我们的新CSS文件链接到index.html ，我们添加了link元素：

…        <meta charset="UTF-8">        <link rel=”stylesheet” href=”styles/reset.css”>        <link rel=”stylesheet” href=”styles/debug.css”>        <style>        …

我们CSS重置 (Our CSS Reset)

Of the properties we want to unset, here’s a shortlist:

在我们要取消设置的属性中，有一个简短列表：

:root { font: 20px/1.2 sans-serif; }

body, body * {    margin:          unset;    box-sizing:      unset;    padding:         unset;    font-size:       unset;    color:           unset;    text-decoration: unset;}

Ignore line 1. for now—let’s start with body, body * { … } where we select the body and all of the body’s elements with an *. The asterisk means select all children. Remember our webtree?

忽略行1.现在，让我们开始与body, body * { … }在这里我们选择的body和所有的body的与元素* 。 星号表示选择所有孩子 。 还记得我们的网络树吗？

html   /  \head  body <- selected / \    \…   …    p <- selected

body, body * { … } is selecting the body and—a , denotes and—p because it’s one of body’s children. This is known as the parent-child relationship, where body is the parent and p is the child. And we tell those elements to unset common properties. The properties I’ve chosen are just a shortlist. Here’s an example of one of the most famous CSS Resets:

body, body * { … }是选择body和- ,表示和- p ，因为它是一个body的孩子。 这称为父子关系，其中body是父级， p是子级。 然后，我们告诉这些元素unset通用属性。 我选择的属性只是一个候选列表。 这是最著名CSS重置之一的示例：

/* http://meyerweb.com/eric/tools/css/reset/   v2.0 | 20110126   License: none (public domain)*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}

Yikes! Back to our reset. At the top we have :root { font: 20px/1.2 sans-serif; }. What’s :root? Remember our webtree? It’s the root, in other words, the html element. This pseudo-element belongs to a special class of elements known as psuedo-classes, which can be used to better organize and understand our CSS.

kes！ 返回我们的重置。 在顶部，我们有:root { font: 20px/1.2 sans-serif; } :root { font: 20px/1.2 sans-serif; } 。 什么是:root ？ 还记得我们的网络树 吗？ 它的根 ，换句话说， 在 html元素。 这个伪元素属于一类特殊的被称为元素的伪类 ，它可以用来更好地组织和了解我们CSS。

WAAAIT! Don’t we need an * to select all children elements, so their font properties are set? Well—great question—some properties, such as text properties inherit from their parents, and font does. So instead we can set font once in :root, which propagates to all its children. Property-ception.

哇！ 我们是否不需要*来选择所有子元素，所以设置了它们的font属性？ 好吧，这是一个大问题，某些属性(例如文本属性)是从其父级继承而font则继承。 因此，我们可以在:root设置一次font ，该font会传播到其所有子级。 财产接收。

我们CSS调试器 (Our CSS Debugger)

A debugger emphasizes the content and border of elements:

调试器强调元素的内容和边界：

body * {    color:                 hsla(000, 100%, 100%, 0.88) !important;    background:            hsla(210, 100%,  50%, 0.33) !important;    outline: 0.25rem solid hsla(000, 100%, 100%, 0.50) !important;}

Behold! In just three lines, our debugger. This clever technique overrides three common properties: color, background, and outline. Our colors are made up of hsla() values, which is short for hue, saturation, luminance, and alpha. To enable our debugger, we link the file.

看哪！ 在短短的三行 ，我们的调试器。 这项巧妙的技术可以覆盖三个常见属性： color ， background和outline 。 我们的颜色是由的hsla()的值，这是短用于h UE，S aturation， 升 uminance 和 lpha。 要启用调试器，我们链接文件。

Should we want to disable our debugger, we can mistype the filename so as to hide it from our computer’s filesystem, e.g.:

如果我们想禁用调试器，我们可以键入错误的文件名，以便将其从计算机的文件系统中隐藏起来，例如：

<link rel=”stylesheet” href=”styles/-debug.css”>

Or just delete the line. ٩(^ᴗ^)۶

或者只是删除该行。 ٩(^ᴗ^)۶

Our debugger uses hilarious !important values so as to state that under no conditions can these properties be overridden. Remember media queries?

我们的调试器使用搞笑的!important值，以便声明在任何情况下都不能覆盖这些属性。 还记得媒体查询吗？

p { color: green !important; }

@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }

Had we specified that our p color is !important, our media queries would be inert, due to their lesser importance.

如果我们指定p颜色为!important ，由于它们的重要性较小，我们的媒体查询将是惰性的。

认识CSS网格和Flexbox (Meet CSS Grid and Flexbox)

I would argue that before CSS Grid and Flexbox, designing for the web was a hero’s journey.

我认为在CSS Grid和Flexbox之前，为网络设计是英雄的旅程。

The thing is, web design used to be a juggling-act of hacks where we trick the browser into rendering our designs. This is becoming less true with time. I’m not religious, but thank God!—or, thank browser engineers!—wherefore now we can lean on CSS Grid and Flexbox to kickstart our design.

事实是，网页设计曾经是黑客的一个杂耍动作，我们欺骗浏览器来渲染我们的设计。 随着时间的流逝，这变得越来越不正确。 我不信教，但感谢上帝！ —或者， 感谢浏览器工程师！ -因此，现在我们可以依靠CSS Grid和Flexbox来启动我们的设计。

If you’re not aware, CSS Grid and Flexbox are newer technologies baked into modern browsers that take the hero’s journey out of web design. And CSS Grid and Flexbox are friends — we’ll use them together to both create a grid and flex elements in our grid.

如果您不知道，CSS Grid和Flexbox是进入现代浏览器的较新技术，它们使英雄摆脱了网页设计的旅程。 CSS Grid和Flexbox是朋友–我们将它们一起用于创建网格和在网格中弯曲元素。

我们的第一个网格：HTML (Our first grid: HTML)

…    <body>        <article>            <p>ARTICLE</p>        </article>

<article>            <p>ARTICLE</p>        </article>    </body>    …

Remember our webtree?

还记得我们的网络树吗？

body      /  \article  article    /      \   p        p

We’re making a blog, so each post can be thought of as an article. And our articles contain a p of ARTICLE which is another clever trick we can use. Using the name of the element as the value of the element to help us understand where and what things are. Value-ception.

我们正在制作博客，因此每个帖子都可以被视为article 。 而且我们的article包含p ARTICLE ，这是我们可以使用的另一种巧妙技巧。 使用元素名称作为元素的值可以帮助我们了解事物的位置和内容。 价值观念。

我们的第一个网格：CSS (Our first grid: CSS)

…    <style>

article {    display: grid;    grid-template-columns: 1fr minmax(0, 8.5in) 1fr;

height: 11in; /* temp fix */}

article * { grid-column: 2 / 3; }

</style>    …

Enter CSS Grid. First, we selected the article, and applied three properties: display defines the element as a grid, grid-template-columns templates columns, and height simulates each article as having one page’s height. However, height is glue-code and will be deleted.

输入CSS网格。 首先，我们选择了文章，并应用了三个属性： display将元素定义为网格， grid-template-columns模板列， height每篇article模拟为具有一页的高度。 但是， height是胶粘代码， 将被删除。

Let’s focus on the two most important lines:

让我们关注两个最重要的行：

article   { grid-template-columns: 1fr minmax(0, 8.5in) 1fr; }article * { grid-column: 2 / 3; }

Or, in other times:

或者，在其他时间：

Thou Shalt Have Three Columns,

你要三列

Whose Center Column Shall Shelter Thy Children.

谁的中心专栏应庇护您的孩子。

First, had we set grid-template-columns to 1fr 1fr 1fr, where fr is short for fraction-unit, our three columns would be divided in thirds. Yet our center column has a minmax width, meaning it’s responsive. At or less than 8.5in, our center column renders at 100% width, and our left and rightmost columns disappear, as there’s no remainder.

首先，如果将grid-template-columns为1fr 1fr 1fr ，其中fr是fr action-unit的缩写，那么我们的三列将分为三分之二 。 但是我们的中心列具有minmax宽度，这意味着它具有响应能力 。 在8.5in或小于8.5in ，我们的中心列以100%宽度渲染，而我们的最左边和最右边的列消失了，因为没有剩余。

Sidebar: note that responsive design is not limited to media queries. This is an example of where our design is implicitly responsive, as opposed to explicitly responsive. This is the best kind of responsive design, because it’s not hard-coded. And this is one of the reasons CSS Grid and Flexbox are so powerful.

补充工具栏：请注意，响应式设计不仅限于媒体查询。 这是我们的设计隐式响应而不是显式响应的示例。 这是最好的响应式设计，因为它不是硬编码的。 这就是CSS Grid和Flexbox如此强大的原因之一。

Second, to communicate that article’s children belong to the center column, or start at the second column and end at the third, we set grid-column to 2 / 3. Note the subtle difference between grid-template-column and grid-column, to either template columns or span columns.

其次，为了传达article的子项属于中心列，或者从第二列开始并在第三列 结束 ，我们将grid-column设置为2 / 3 。 注意grid-template-column和grid-column在模板列或跨度列之间的细微差别。

CSS Grid is great—and it is—but now we’ll lean on Flexbox to center our ARTICLE text. What we’re about to do is create a Utility Class, and it’s another paradigm for writing CSS. Here, we use the fact that elements can have attributes to inline style to the p element:

CSS Grid确实很棒，但是现在，我们将依靠Flexbox将我们的ARTICLE文本居中。 我们要做的是创建一个Utility Class ，这是编写CSS的另一个范例。 在这里，我们使用一个事实，即元素可以具有将属性内联到p元素的样式：

<p class=”debug-center”>ARTICLE</p>

CSS in HTML?!

HTML中CSS？

(╯°□°)╯︵ ┻━┻

(╯°□°)╯︵┻━┻

Here’s what’s going on: elements have a class attribute. And we can use this attribute to not just write CSS to elements, but to a kind of element or class of element. This means we can reuse classes across multiple elements, regardless of their likeness. Alas—nothing’s changed—we need to also create a .debug-center class somewhere in our CSS. How about our debugger:

这是怎么回事：元素具有class属性。 而且我们可以使用此属性不仅将CSS写入元素，而且还可以写入一种元素或元素类。 这意味着我们可以跨多个元素重用类，而不管它们的相似之处。 las，没有任何变化，我们还需要在CSS中的某个地方创建一个.debug-center类。 我们的调试器怎么样：

…

.debug-center {    display:         flex;    justify-content: center;    align-items:     center;}

Note we use a . prefix to differentiate classes from elements.

请注意，我们使用. 前缀以区分类和元素。

Now, wherever an element is attributed with our debug-center class, its text will center. First, we set display to flex making whichever element a Flexbox-element as opposed to a CSS Grid-element. Then we set justify-content to center to center horizontally and align-items to center to center vertically. Aaagh!

现在，无论元素在我们的debug-center类中归属于何处，其文本都将居中。 首先，我们将display设置为flex ，以使Flexbox元素与CSS Grid元素相对应。 然后，我们将justify-content设置justify-content center以水平居中， align-items为center以垂直居中。 啊！

Imagine this: we use Grid to layout our website’s design, and Flexbox to flex the elements in our grid to some desired position.

想象一下：我们使用Grid来布局网站的设计，使用Flexbox来将网格中的元素弯曲到某个所需的位置。

迭代我们的网格 (Iterating our grid)

We have a problem: without .debug-center ARTICLE hugs the left and right walls. What we need are vertical and horizontal gutters so that our content can breathe. Aaah. Otherwise reading would become frustrating and would lead to a poor user experience. ヾ( •́д•̀ ;)ﾉ

我们有一个问题：如果没有.debug-center ARTICLE拥抱左右墙壁。 我们需要的是垂直和水平排水沟，以便我们的内容可以呼吸。 啊啊 否则，阅读会令人沮丧，并会导致不良的用户体验。 ヾ(•́д•̀;)ﾉ

For vertical padding:

对于垂直填充：

article {    padding: 0.5in 0;    …}

And for horizontal padding, we could use padding, and either would work:

对于水平填充，我们可以使用填充，两种方法都可以：

padding: 0.5in 0.5in;padding: 0.5in;

However, we want our gutters to be responsive, so we’ll use CSS Grid:

但是，我们希望自己的装订线能够响应，因此我们将使用CSS Grid：

article {    …    grid-template-columns: 1fr 0.5in [start] 7.5in [end] 0.5in 1fr}

Here, we did three things: 1. we defined our horizontal gutters to be 0.5in (these will become responsive—I promise!). 2. our content-column went from 8.5in to 7.5in, the sum still being 8.5in , and 3. made up identifiers start and end to name the start and end of our content-column.

在这里，我们做了三件事：1.我们将水平装订线定义为0.5in (我将保证它们会变得灵敏！)。 2.我们的内容列从8.5in增加到7.5in ，总和仍为 8.5in ，并且3.组成标识符start和end来命名内容列的开始和结尾。

When we added new columns, we needed to also update article *:

当我们添加新列时，我们还需要更新article * ：

article * { grid-column: 3 / 4; }

But counting columns isn’t ideal. Instead—let’s use our made-up identifiers:

但是对列进行计数并不理想。 相反，让我们使用我们的伪造标识符：

article * { grid-column: start / end; }

We updated our grid without breaking the flow of content, so long as we continue to use the start and end identifiers we made up. ⊂◉‿◉つ

我们 只要我们继续使用我们组成的start和end标识符，就可以在不中断内容流的情况下更新网格。 ⊂◉‿◉つ

Last—as promised—we need our gutters to be responsive. minmax() for one reason or another doesn’t work here, so we’ll use media queries:

最后-如所承诺的-我们需要我们的排水沟做出响应。 minmax()由于某种原因在这里不起作用，因此我们将使用媒体查询：

@media (max-width: 8.5in) {    article {        grid-template-columns: 1fr 5% [start] 90% [end] 5% 1fr;    }}

Now at or less than 8.5in, article will use % instead of in to divide our columns, and the left and rightmost columns will disappear because—again—there’s no remainder. Despite all this, we could’ve set padding to 0.5in 5% to achieve the same effect, so what gives? Read on!

现在 等于或小于 8.5in ， article将使用%而不是in来划分我们的列，并且最左边和最右边的列将消失，因为-再也没有剩余。 尽管如此，我们还是可以将padding设置为0.5in 5%以达到相同的效果，那0.5in 5%什么用呢？ 继续阅读！

再次迭代我们的网格 (Iterating our grid, again)

To understand our grid, let’s use images to span columns, from 100% to 8.5in to 7.5in on desktop, and from 100% to 90% on mobile. However, for the last image, the one on the left at the bottom, we need to add even few more columns to our grid. AF)UBQWF*VBQPWIFB, am I right?

要了解我们的网格，让我们使用图像来跨列，台式机从100%到8.5in到7.5in ，移动版从100%到90% 。 但是，对于最后一个图像，即底部左侧的图像，我们需要向网格中添加更多的列 。 AF)UBQWF * VBQPWIFB，对吗？

Don’t be intimidated—CSS grid is awesome. Let’s add two more columns:

不要害怕-CSS网格很棒。 我们再添加两列：

article {    …    grid-template-columns:        1fr 0.5in [start] 1.25in 5in 1.25in [end] 0.5in 1fr;}

@media (max-width: 8.5in) {    article {        grid-template-columns:            1fr 5% [start] 15% 60% 15%[end] 5% 1fr;    }}

We broke up our content-column into three columns: 1.25in 5in 1.25in . We also added proportional percents for our media query: 15% 60% 15%. The plan is for text to span our original 7.5in content-column, and for small images to span our new 5in column.

我们将内容列分为三列： 1.25in 5in 1.25in 。 我们还为媒体查询添加了比例百分比： 15% 60% 15% 。 该计划的目的是使文本跨越我们原来的7.5in内容列，使小图像跨越我们新的5in列。

To add images, we use the img element and its src—source—attribute:

要添加图像，我们使用img元素及其src源)属性：

…        <article>            <img class="size-4" src="data:images/cosmos.jpg">            <img class="size-3" src="data:images/cosmos.jpg">            <img class="size-2" src="data:images/cosmos.jpg">            <img class="size-1" src="data:images/cosmos.jpg">        </article>        …

These are local, that is, they’re on our computer. And were they remote, that is, on a server:

这些是本地的，也就是说，它们在我们的计算机上。 它们是否位于远程服务器上：

<img src="https://website.com/images/cosmos.jpg">

Note that each img has one of four classes: size-*. And because we’ll want more than images, like videos, to span our website’s grid, it’s preferred we use classes so we can reuse the CSS. These size-* classes are also Utility Classes, so changing which size we want is simple.

请注意，每个img具有以下四个类别之一： size-* 。 而且，由于我们不仅希望像视频这样的图像来跨越我们网站的网格，因此我们更喜欢使用类，以便我们可以重用CSS。 这些size-*类也是实用程序类，因此更改所需大小非常简单。

Let’s make our size-* classes span different sets of columns:

让我们让我们的size-*类跨越不同的列集：

.size-1 { grid-column: 4 / 5; }.size-2 { grid-column: 3 / 6; }.size-3 { grid-column: 2 / 7; }.size-4 { grid-column: 1 / 8; }

What’s missing is that our imgs aren’t responsive. We need:

缺少的是我们的img没有响应。 我们需要：

img.size-1, img.size-2, img.size-3, img.size-4 { width: 100%; }

Because imgs render at their actual size, for example, a 400 × 400 image rendering at 400px, we needed to override that behavior with our own: width: 100%. Thus when an image is attributed with a size-* class, it can resize to whatever columns it’s spanning. Note we need not set height.

因为img是以其实际大小进行渲染的，例如400px的400×400图像渲染，所以我们需要使用我们自己的行为来覆盖该行为： width: 100% 。 因此，当图像使用size-*类指定属性时，它可以调整大小以适应其跨过的任何列。 注意我们不需要设置height 。

添加文字元素 (Adding text elements)

网站和内容链接 (Website and content links)

Now that we’re getting serious with our article, let’s make things formal:

现在我们对我们的article越来越认真，让我们将事情正式化：

…        <article id="the-cosmos"></article>        …

Now each article is linkable. Linkable? Well—websites are links:

现在，每个文章都是可链接的 。 可链接的 ？ 好吧，网站是链接 ：

https://website.com/index.html

And our website’s content, for example articles, can be linked to, too:

我们网站的内容(例如article )也可以链接到：

https://website.com/index.html#article

Here article is the value of an id attribute, analogous to linking a timestamp in a YouTube video (for example, this one). Better than suggesting “start at 4 minutes and 7 seconds” or “read from the second article,” we can link content in our website, like a timestamp in a video.

这里的article是id属性的值，类似于在YouTube视频中链接时间戳(例如this )。 与其建议“从4分7秒开始”或“从第二篇文章开始阅读”，不如建议我们在网站上链接内容，例如视频中的时间戳。

To link a website or content, we use the a element and href attribute:

要链接网站或内容，我们使用a元素和href属性：

…        <article id="the-cosmos">            <a href="#the-cosmos">The Cosmos</a>        </article>        …

The text “The Cosmos” now links the start of the article: #the-cosmos.

现在，文本“ The Cosmos”链接了文章的开头： #the-cosmos 。

This idea of linking (linking websites and content in websites) is one of the points of HTML. HyperCard mastered this, but instead of linking websites and content, was interested in ideas and associations. At the time, it was 1987 and HTML was first proposed in 1989. Watch a few seconds from the video I posted earlier—here I’ve linked a timestamp:

这种链接(链接网站和网站中的内容)的想法是HTML的要点之一。 HyperCard掌握了这一点，但与其链接网站和内容，不如对想法和关联感兴趣。 当时是1987年， HTML于1989年首次提出 。 观看我之前发布的视频中的几秒钟，这里已链接了一个时间戳：

文字元素 (Text elements)

Let’s add headings, a publication-date, strong and emphasized text, and links:

让我们添加标题，发布日期，强调的重点文字和链接：

<article id="the-cosmos">

<h1><a href="#the-cosmos">The Cosmos is all there is</a></h1>    <h2>Or ever was, or ever will be</h2>

<time datetime="03-09-2014">MAR. 9, 2014</time>    <p><em>A generation ago</em>, the astronomer <a href="https://en.wikipedia.org/wiki/carl_sagan">Carl Sagan</a> stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science. It's time to get going again. We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future. We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms.    </p>

<img class="size-4" src="data:images/cosmos.jpg">

<h3>COSMOS IS ALSO A STORY ABOUT US</h3>    <p>It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes. To make this journey, we'll need imagination. But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine. This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything. <strong>Accept these terms, and the cosmos is yours.</strong>    </p>

</article>

These are the opening lines to our personal astrophysicist’s — Neil deGrasse Tyson’s — 2014 Cosmos: A Spacetime Odyssey, a reimagining of Carl Sagan’s original 1980 Cosmos: A Personal Voyage. It’s sci-fi without the -fi. And it’s getting renewed in 2019!

这些是我们的个人天体物理学家—尼尔·德格拉斯·泰森(Neil deGrasse Tyson)— 2014年的《 宇宙：时空漫游》的开场白，这是对卡尔·萨根(Carl Sagan)最初的1980年《 宇宙：个人航行》的重新构想 。 没有-fi是科幻小说。 而且它将在2019年更新！

Above we introduced a few elements: h1, h2, h3, time, strong, and em.

上面我们介绍了一些元素： h1 ， h2 ， h3 ， time ， strong和em 。

1. h1–h6 elements are headlines.

   h1 – h6元素是h eadlines。

2. The time element timestamps our article. We can put whatever we want for the element value, because computers read the datetime attribute’s value, which should be machine-readable.

   该time元素的时间标记的文章。 我们可以将所需的任何值放入元素值，因为计算机读取datetime属性的值，该值应该是机器可读的 。

3. The strong element is for strong text and the em element is for emphasized text. Also, h* elements are strong.

   strong元素用于强文本，而em元素用于强调文本 。 同样， h*元素很强 。

Note that h* and p elements break from one line to the next, or block, whereas time, strong, and em elements don’t. This is because browsers set the h* and p element’s display to block, and the time, strong, and em element’s display to inline.

请注意， h*和p元素从一行中断到下一行或block ，而time ， strong和em则没有。 这是因为浏览器将h*和p元素的display为block ，将time ， strong和em元素的display为inline 。

Rems和Ems (Rems and ems)

When it’s not enough to block elements from one line to the next, we use line-breaks so it’s easier to differentiate elements from one another, not unlike padding or gutters. We could use br elements here, but it’s preferred we use extraneous CSS over extraneous HTML.

当不能将元素从一行移到下一行还不够时，我们使用换行符，这样可以更轻松地将元素彼此区分，这与填充或装订线不同。 我们可以在这里使用br元素，但最好使用多余CSS而不是多余HTML 。

Here’s how to push content two line-breaks, following h2 and p elements:

以下是在h2和p元素之后将内容推到两个换行符的方法：

h2, p { margin-bottom: 2.4rem; }

2.4rem?

2.4rem？

Remember our reset? We set font to 20px/1.2 sans-serif. I didn’t explain it at the time—and shame on me—but 2.4 is two-line breaks at 1.2 line-height, for example, single-spaced text. More readable text could be 1.5, and double-spaced text could be 2.

还记得我们的重置吗？ 我们将font设置为20px/1.2 sans-serif 。 当时我没有解释它，而让我感到羞耻，但是2.4是在1.2行高处的两行换行符，例如，单行距文本。 可读性更高的文本可以是1.5 ，而双倍行距的文本可以是2 。

*Ahem* What are rems?

* Ahem *什么是rems？

*Ahem ahem* And what are ems?

* Ahem ahem *什么是ems？

rem is root em and both are multipliers. 1rem is 20px and 1em is the parent’s font-size. Had we defined our line-breaks in ems, not rems, and set h2 and p to different font-sizes, their line-breaks would differ! Therefore, consistent line-breaks use rems and inconsistent ones use ems.

rem是root em ，两者都是乘数。 1rem是20px ， 1em是父母的font-size 。 如果我们在ems定义了换行符，而不是rems ，并且将h2和p设置为不同的font-size s，它们的换行符将有所不同！ 因此， 一致的换行符使用rem ， 不一致的换行符使用em 。

And this is a powerful idea—writing CSS such that the design is connected. Given this enlightenment, I feel it’s far more wise to think about CSS not in rules but relationships. Thus, if we make a change somewhere, we can make a change everywhere.

这是一个强大的想法-编写CSS以便将设计连接起来 。 有了这种启示，我觉得这是更明智的选择 至 在规则中而不是规则中考虑CSS 。 因此，如果我们在某处进行更改， 则可以在任何地方进行更改。

…make a change somewhere…

…在某处做出改变…

…make a change everywhere…

…到处都可以改变…

响应式响应设计 (Responsive responsive design)

What if we write CSS in rems and ems, and use media queries to change :root’s font-size? Then everything—and I mean everything—will resize proportionally. We can go even a step further and have multiple media queries for multiple widths:

如果我们在rem和em编写CSS并使用媒体查询来更改:root的font-size怎么办？ 然后，一切-我的意思是- 一切都会按比例调整大小。 我们甚至可以走得更远，可以针对多种宽度进行多种媒体查询：

@media (max-width: 8.5in) { :root { font-size: 18px; } }@media (max-width: 5.0in) { :root { font-size: 16px; } }

What’s amazing about this is that we are not just overriding a property, we are overriding the property for rems and ems. We can now write CSS that is not just responsive but responsive to our responsive design. This is perhaps the most important sentence in this entire post:

令人惊奇的是，我们不仅在压倒一切 一个属性，我们将为rem和em覆盖该属性。 现在，我们可以编写不仅具有响应能力而且对我们的响应设计响应CSS。 这可能是整个帖子中最重要的一句话：

We can write CSS that is not just responsive but responsive to our responsive design.

我们可以编写不仅响应式而且对响应式设计响应CSS。

This isn’t just cool, it’s how we ought to write CSS. Websites tend to be terrible, and I think it can be boiled down to this: when we write CSS, we should write in design systems and not silo code. When we use rems and ems in tandem to media queries, that is a design system and code is not siloed.

这不仅很酷，而且是我们应该编写CSS的方式。 网站通常很糟糕，我认为可以归结为这一点： 编写CSS时，我们应该在设计系统中编写而不是孤岛式代码 。 当我们将rem和em一起用于媒体查询时，这是一个设计系统，代码不会被孤立。

样式文字 (Styling text)

For the love of style, let’s add some:

为了热爱时尚，让我们添加一些：

h1   { font: 700 2.0rem/1.2 …; color: hsl(000, 000%, 33%); }h2   { font: 400 1.5rem/1.2 …; color: hsl(000, 000%, 33%); }time { font: 700 1.0rem/1.2 …; color: hsl(250, 100%, 83%); }h3   { font: 700 1.0rem/1.2 …; color: hsl(250, 100%, 67%); }p    { font: 400 1.0rem/1.5 …; color: hsl(000, 000%, 33%); }

Properties can have shorthands as we’ve seen before; padding: 0.5in, equivalent to padding: 0.5in 0.5in. And here, we use font to combine font-weight, font-size, and line-height. After font, we have color with hsl values, like hsla values in our debugger.

属性可以像我们之前看到的那样有简写形式。 padding: 0.5in ，等于padding: 0.5in 0.5in 。 在这里，我们使用font来组合font-weight ， font-size和line-height 。 之后font ，我们有color与hsl值，比如hsla在我们的调试值。

An unaddressed problem is our a element. In our reset, we unset color and text-decoration making links indiscriminate from text. We unset these properties because text-decoration: underline is too subtle. So here’s how we can give them a strong underline:

一个未解决的问题是我们a要素。 在我们的重置中，我们未设置color和text-decoration从而使链接不加区别于文本。 我们取消设置这些属性是因为text-decoration: underline太微妙了。 因此，这是我们如何给他们一个强有力的强调：

a { box-shadow: inset 0 -0.25em hsl(55, 100%, 75%); }

We invert box-shadow to create an underline that is inside the element. Had we set inset without a negative value, our underline would be an overline. We also use em so the underline scales with its font-size. This is an example of when we want inconsistent scaling, as supposed to our line-breaks.

我们反转box-shadow以在元素内部创建一个下划线。 如果我们将inset设置为不带负值，则下划线将是上划线。 我们还使用em因此下划线随font-size缩放。 这是我们想要换行时出现不一致缩放比例的示例。

There’s much more to box-shadow than this: click to learn more.

box-shadow的功能远不止于此： 单击以了解更多信息 。

最后一步：渐变 (Last step: gradients)

Wohoo! All we need is a cue for our readers as to where an article starts and ends. Without that, the ends of each article will feel like an endless continuation, which leads to a poor user-experience. So we need to give our readers a hint… (◔̯◔)

哇！ 我们需要的是为我们的读者在何处的一个线索 article开始和结束。 否则，每篇article的结尾都将感觉像是无休止的延续，这会导致糟糕的用户体验。 因此，我们需要给读者一些提示……(◔̯◔)

What I propose is simple: a gradient that extends from the top of each article to the bottom of its h2 element. And we can write our gradient in ems so that as our website resizes, so does our gradient:

我的建议很简单：从每篇article的顶部到其h2元素的底部延伸的渐变。 我们可以在em s中编写渐变，以便在调整网站大小时也可以渐变：

article {    …    background: linear-gradient(hsl(55, 100%, 96%), white 6.83em);}

Here we’ve defined a color-to-white gradient, and used 6.83em so our gradient doesn’t extend the entire article but ends at the equivalent of the bottom of our h2 element. However, the exact value depends.

在这里，我们定义了一个颜色到白色的渐变，并使用了6.83em这样渐变不会扩展整个article而是在与h2元素底部相等的位置结束。 但是，具体值取决于。

You can either do math to determine the size, for example 6.83em, but another technique is to set a size on the top-color, for example hsl(55, 100%, 96%) 6.83em. Once it’s equal to or greater than the bottom color’s size, it will appear as a line and not a gradient, making it intuitive what to change it to.

您可以通过数学运算来确定尺寸，例如6.83em ，但是另一种技术是在顶部颜色上设置尺寸，例如hsl(55, 100%, 96%) 6.83em 。 一旦它等于或大于底色的大小，它将显示为一条线而不是一个渐变，从而直观地将其更改为什么。

恭喜你 (Congratulations ?)

Congratulations! ٩(˘.˘)۶ You’ve stepped into a world in desperate need of better designers and engineers. And with CSS Grid, Flexbox, Responsive Design and browser-level debuggers, developing for the web has never been more accessible.

恭喜你！ ٩(˘.˘)۶您已步入一个迫切需要更好的设计师和工程师的世界。 借助CSS Grid，Flexbox，响应式设计和浏览器级调试器，针对Web的开发从未像现在这样容易。

别忘了在Scrimba上有免费的课程 ，我教如何从头开始创建相同的网站。 点击这里报名！ (Don’t forget there’s a free course on Scrimba where I teach how to make the same website from *scratch*. Click here to enroll!)

翻译自: https://www.freecodecamp.org/news/how-to-design-and-develop-a-beautiful-blog-from-scratch-a0cd1af46845/

从头再来博客