学习编码第8天CSS入门5

Hello everyone, I hope you’re having a great Friday, got your tea with you and ready to go. Let’s jump straight back into CSS. Yesterday was all about Padding and Margins, and today were going to look at different lengths within the code and several different ranking overriding factors.

大家好，我希望您度过了一个愉快的星期五，随身携带好茶并准备出发。 让我们直接跳回CSS。 昨天是关于填充和边距的全部内容，而今天将要研究代码中的不同长度和几个不同的排名替代因素。

Hey, what did the editor say to the console? Gimmie a <br>!

嘿，编辑对控制台说了什么？ 吉米一个<br>！

I’ll see myself out.

我会看看自己的。

—

-

绝对单位与相对单位 (Absolute Units vs. Relative Units)

Absolute Units are tied to physical units of lengths such as millimetres (mm) or inches (in) or pixels (px). They are approximate to the actual length of the computer screen but resolutions may vary.

绝对单位与长度如毫米( mm )或英寸( in )或像素( px )的物理单位有关。 它们近似于计算机屏幕的实际长度，但分辨率可能有所不同。

Relative Units are relative to another length value. The relative lengths rem and em are based on the size of an element’s font. Here is a breakdown of the em measurement from Tutorial Republic:

相对单位相对于另一个长度值。 rem和em的相对长度基于元素字体的大小。 这是Tutorial Republic中 em度量的细分：

A measurement of 1em is equal to the computed value of the font-size property of the element on which it is used. It may be used for vertical or horizontal measurement.

1em的度量等于使用该元素的元素的font-size属性的计算值。 它可以用于垂直或水平测量。

For example, if font-size of the element set to 16px and line-height set to 2.5em then the calculated value of line-height in pixel is 2.5 x 16px = 40px.

例如，如果元素的font-size设置为16px， line-height设置为2.5em，则以像素为单位的line-height的计算值为2.5 x 16px = 40px 。

The exception occurs when em is specified in the value of font-size property itself, in that case it refers to the font size of the parent element.

当在font-size属性本身的值中指定em时，会发生异常，在这种情况下，它引用父元素的字体大小。

So, when we specify a font size in em, 1em is equal to the inherited font-size. As such, font-size: 1.2em; makes the text 1.2 times larger than the parent element's text.

因此，当我们在em指定字体大小时，1em等于继承的font-size 。 因此， font-size: 1.2em; 使文本比父元素的文本大1.2倍。

It’s early days yet, and there are lots of ways to define the units of length in CSS, here is a breakdown of the many length names and whether they are Absolute or Relative:

现在还很早，有很多方法可以在CSS中定义长度单位， 这是许多长度名称以及它们是绝对还是相对的细分：

样式化HTML正文元素 (Styling an HTML Body Element)

Let’s take a break from lengths for now and focus on the body element of HTML, which appears in the style block, remember?

现在让我们稍作休息，重点关注样式栏中显示HTML 主体元素，还记得吗？

We can style the body element, and all child elements nested inside the body element (the parent element) will inherit these styles. For example, if we set the background-color of the body to black, make all element text colours green, and change all fonts of the child elements to monospace, it looks like this in the editor:

我们可以设置body元素的样式，并且嵌套在body元素(父元素)中的所有子元素都将继承这些样式。 例如，如果我们将主体的背景色设置为black ，将所有元素文本的颜色设置为绿色 ，并将所有子元素的字体更改为monospace ，则在编辑器中如下所示：

<style>

<样式>

body {

身体 {

background-color: black;

背景颜色：黑色；

color:green;

颜色：绿色；

font-family: monospace;

字体家族：等宽字体；

}

}

</style>

</ style>

<h1>Hello World!</h1>

<h1> Hello World！</ h1>

Because the header (h1) is a child element of it’s parent, the body, it will inherit the features stated in the body element and the outcome will be like this:

由于标头( h1)是其父元素body的子元素，因此它将继承 body元素中声明的功能，其结果将如下所示：

优先确定相互冲突的样式 (Prioritising Styles that conflict with each other)

We can go one step further and prioritise one style over another in an element. If you create a CSS class declaration in the style which defines a colour for an element, it will override the body element’s CSS class declaration (“color:green;”):

我们可以更进一步，在元素中将一种样式优先于另一种样式。 如果您以定义元素颜色的样式创建CSS类声明 ，它将覆盖主体元素CSS类声明(“ color：green;”)：

<style>

<样式>

.pink-text {

.pink-text {

color: pink;

颜色：粉红色；

}

}

</style>

</ style>

This will override the “color:green” CSS class declaration originally stated in the body and give this result:

这将覆盖主体中最初声明的“ color：green” CSS类声明，并给出以下结果：

One step further, if we want to override the current CSS selector (“pink-text”) you simply add a *second* CSS class declaration and place it after the first in the style block. The ordering of those classes in the style block are important as the second CSS class declaration will take priority and overwrite the attributes of the first, because it is read second and therefore the most up-to-date command:

如果要覆盖当前的CSS选择器( “粉红色文本”)，请更进一步 您只需添加* second * CSS类声明并将其放在样式块中的第一个之后。 这些类在样式块中的排序很重要，因为第二个CSS类声明将优先处理并覆盖第一个CSS类的属性，因为它是第二个读取的，因此是最新的命令：

<style>

<样式>

.pink-text {

.pink-text {

color: pink;

颜色：粉红色；

}

}

.blue-text {

.blue-text {

color: blue;

颜色：蓝色；

}

}

</style>

</ style>

This will produce this result:

这将产生以下结果：

We see here that “.pink-text” is the first CSS selector to be declared, then the second CSS selector “.blue-text” is declared. HTML will take the second selector as priority and even when you write the class types in reverse order in the element you want to style, the ordering of them won’t matter as the classes have already been set out earlier inside the style block. Remember, the construction of the class attributes in the element you want to affect would be class=“class1 class2”:

我们在这里看到“ .pink-text ”是要声明的第一个CSS选择器，然后是第二个CSS选择器“ .blue-text ”。 HTML将把第二个选择器作为优先级，即使在您要样式化的元素中以相反顺序编写类类型时，它们的顺序也将无关紧要，因为这些类早已在样式块中进行了设置。 记住，要影响的元素中 class属性的构造应为class =“ class1 class2” ：

<h1 class=“blue-text pink-text”>Hello World!</h1>

<h1 class =“ blue-text pink-text”>世界您好！</ h1>

用ID属性覆盖所有类属性 (Override All Class Attributes with ID Attributes)

In the land of class, the id rule. *Cue dramatic music.*

在class之地 ， id规则。 * 播放戏剧性音乐。*

The browser reads the code in order and we know now that it will choose the last class as priority, but the id class declaration can override all these classes. Remember in the style block, the id selector begins with a hashtag. Then the id attribute in the element you want to style (which appears as id=“type”) links to that id class declaration in the style and overrides all other classes.

浏览器按顺序读取代码，我们现在知道它将选择最后一个类作为优先级，但是id类声明可以覆盖所有这些类。 请记住，在样式块中， id选择器以井号开头。 然后，要设置样式的元素中的id属性(显示为id =“ type” )链接到该样式中的id类声明，并覆盖所有其他类。

Let’s add this id class declaration to the already existing code in the style which has two CSS classes (the .pink-text and the .blue-text) to turn the font orange:

让我们以具有两个CSS类( 。pink-text和。blue-text )的样式将该id类声明添加到已经存在的代码中，以将字体变为橙色：

#orange-text {

＃orange-text {

color:orange;

颜色为橙色;

}

}

Next lets add the id attribute in the element:

接下来让我们在元素中添加id属性：

<h1 id=”orange-text”

<h1 id =“橙色文字”

class=”pink-text blue-text”>Hello World!</h1>

class =“ pink-text blue-text”>世界您好！</ h1>

And here’s the result:

结果如下：

Hey Presto! We did it guys.

嗨，普雷斯托！ 我们做到了。

用内联样式覆盖类声明 (Override Class Declarations with Inline Styles)

Remember the inline styles? They are written in the element as [attr=type] and appear as style=“colour: white” for example. Let’s make one that overrides all class and id declarations:

还记得内联样式吗？ 它们在元素中写为[attr = type]，并显示为style =“ color：white” 。 让我们做一个覆盖所有类和id声明的代码：

<h1

<h1

style=”color: white”

样式=“颜色：白色”

id=”orange-text” class=”pink-text blue-text”>Hello World!</h1>

id =“橙色文本” class =“粉红色文本”> Hello World！</ h1>

See it there? On line 2? Here’s what the outcome will be now:

在那看到吗？ 在第2行？ 现在是这样的结果：

使用重要覆盖所有内容 (Override Everything using Important)

But wait! There’s one more! Let’s bring out the big finale, the one keyword to rule them all. And it’s called !important.

可是等等！ 还有一个！ 让我们带出大结局，一个关键词来统治所有人。 它叫做！important 。

If you make mistakes and want to be absolutely sure you are using the correct CSS, then use this keyword.

如果您犯了错误并且想要绝对确定您使用的是正确CSS，请使用此关键字。

Note: This will be helpful to you in many other occasions using the CSS libraries in other fields.

注意 ：在许多其他情况下，使用其他字段中CSS库将对您有帮助。

Remember that .pink-text class declaration that was buried under the others? Let’s bring it back to life amid all the other existing class and id declarations using the !important keyword:

还记得埋在其他代码下的.pink文本类声明吗？ 让我们使用！important关键字在所有其他现有的类和id声明中重新实现它：

.pink-text {

.pink-text {

color: pink !important;

颜色：粉红色！重要；

}

}

And then we’re back to this:

然后我们回到这个：

—

-

Aaaaaaand let’s call it a day there. This was probably the longest post so thanks for keeping up and I hope it was clearer and more precise than yesterday’s red and yellow squares fandango.

Aaaaaaand让我们在这里称呼。 这可能是最长的帖子，因此感谢您的关注。我希望它比昨天的红色和黄色正方形fandango更清晰，更准确。

Oh man, anyone else getting a real buzz out of learning this stuff? I’m absolutely loving it. The podcasts I listen to are making alot more sense now too. I might try to dip my toe back into the Coding Blocks waters again. See you!

哦，伙计，还有其他人从学习这些东西中得到真正的嗡嗡声吗？ 我绝对喜欢它。 我现在收听的播客也变得更加有意义。 我可能会尝试将脚趾再次浸入编码块水域。 再见！

翻译自: https://medium.com/swlh/learning-to-code-day-8-introduction-to-css-part-5-b93c3a476249