css 七天快速入门_学习编码第4天CSS入门1

css 七天快速入门

Hey everyone, it’s Monday and that means I’ve been working my shifts and been to the gym after so this post is coming in a bit later than usual, however I’ve been keen to get back into the coding all day so let’s jump in and learn something new! I added some extra information to the last post at the bottom to finish off those lessons and start new here tonight. Thanks to FreeCodeCamp for these free classes. Got your tea ready?

大家好，今天是星期一，这意味着我一直在努力上班，之后又去了体育馆，所以这篇帖子比往常晚了一点，但是我一直渴望整天回到编码中，所以让我们跳一下在这里学习新的东西！ 我在底部的最后一个帖子中添加了一些额外的信息，以完成这些课程并在今晚从这里开始。 感谢FreeCodeCamp的这些免费 类。 准备好茶了吗？

—

-

级联样式表，也称为CSS (Cascading Style Sheets, also known as CSS)

CSS is a programming language that tells the browser how to display the HTML code in the console that we have typed into the editor. CSS is case-sensitive, so be extra cautious when writing code. A few examples from FreeCodeCamp of what you can control in CSS are:

CSS是一种编程语言，它告诉浏览器如何在我们输入编辑器的控制台中显示HTML代码。 CSS区分大小写，因此在编写代码时要格外小心。 FreeCodeCamp中一些可以在CSS中控制的示例：

• colour
  颜色
• fonts
  的字体
• positioning
  定位
• spacing
  间距
• sizing
  浆纱
• decorations
  装饰物
• transitions
  过渡

应用CSS样式的三种方法 (Three ways to apply CSS styling)

According to FreeCodeCamp, using the HTML style attribute in the meta data of the HTML code which is nested in the head tags, you can directly input CSS rules there. You can also apply inline styles into the HTML elements using the style attribute, and thirdly you can write up the CSS rules on an external style sheet and reference that file in the HTML document. It’s considered best practise to use the third option and keep the two languages separate for readability and reusability of that code.

根据FreeCodeCamp的说法 ，使用嵌套在head标记中HTML代码的元数据中HTML 样式属性，您可以在那里直接输入CSS规则。 您还可以使用style属性将内联样式应用于HTML元素，然后，您可以在外部样式表上编写CSS规则，并在HTML文档中引用该文件。 最好的做法是使用第三个选项，并将两种语言分开以提高代码的可读性和可重用性。

CSS如何与HTML一起使用 (How CSS works with HTML)

The DOM (Document Object Model) is an application programming interface (or API) which treats HTML like a tree structure, with each branch of that tree (a node) as an object representing different parts of said document. CSS can then use a selector to manipulate the HTML in the DOM and influence it’s appearance to the user. With me so far?

DOM(文档对象模型)是一种应用程序编程接口(或API)，它将HTML像树结构一样对待，该树的每个分支(节点)都作为对象，表示所述文档的不同部分。 然后，CSS可以使用选择器来操作DOM中HTML并影响其对用户的外观。 到目前为止和我在一起？

更改文字颜色 (Change the Colour of Text)

Okay let’s try something basic basic. We’re going to type some code which would influence the colour of text which is otherwise black in the browser. This is done by changing the HTML style attribute and adding a color property (American spelling for “colour”). Here’s the code:

好吧，让我们尝试一些基本的东西。 我们将输入一些会影响文本颜色的代码，否则该文本在浏览器中为黑色。 这是通过更改HTML 样式属性并添加color属性(美国拼写为“ colour”)来完成的。 这是代码：

<h2 style=”color:red;”>Website Name</h2>

<h2 style =” color：red;”>网站名称</ h2>

This will display the header (h2) title in red.

这将以红色显示标题( h2 )标题。

Note that the inline style declaration ends with a semi-colon “;”.

请注意 ， 内联 样式 声明以分号“;”结尾。

使用CSS选择器为元素设置样式 (Using CSS Selectors to style Elements)

Instead of creating an individual code as above to change the colour of the h2 we’re going to create a CSS selector within a style block, which will nest the declaration inside within two curly brackets ({ and }). This will then minipulate all h2 elements that follow. Looks like this:

与其像上面那样创建单个代码来更改h2的颜色，我们不如在样式块内创建CSS 选择器 ，该选择器会将声明嵌套在两个大括号( {和})内。 然后，这将最小化随后的ll h2个元素。 看起来像这样：

<style>
  h2 {
    color: red;
  }
</style>

To me, this is saying “For all h2 code that comes next, turn all colours red”. Wherever you then type in h2 tags thereafter, this CSS selector will minipulate the colour of the h2 also. This is more useful as it saves time typing the style element (mentioned previous to this section) each time you make a h2 tag in this example. Remember the curly brackets and the semicolon. If you type the code without the semi-colon it will remain idle until you add it. Then the code will identify the color property and the red value will be implemented.

对我来说，这是说“对于接下来出现的所有h2代码，请将所有颜色变为红色”。 此后，无论您在何处键入h2标签，此CSS选择器都会最小化h2的颜色。 在此示例中，每次创建h2标签时，它节省了键入样式元素(本节前面提到的时间)的时间，因此更为有用。 记住花括号和分号。 如果键入的代码不带分号，它将保持空闲状态，直到您添加它为止。 然后代码将识别color属性和red值 将被实施。

使用CSS类为元素设置样式 (Using a CSS Class to Style an Element)

Classes are reusable styles that can be added to HTML elements. A CSS class declaration would begin with a full stop (.) (e.g. “.blue-text”) whereas an HTML elements’ class [attr=type] does not begin with one (e.g. “<h2 class=”blue-text”>Website Name</h2>”). Here is an breakdown of a class declaration with an HTML selector “p” at the beginning where the CSS class selector would also be stated in it’s place:

类是可重用的样式，可以添加到HTML元素中。 CSS类声明将以句号(。)开头(例如“ .blue-text”)，而HTML元素的类[attr = type]则不以句号开头(例如“ <h2 class =” blue-text” >网站名称</ h2>”)。 以下是带有HTML选择器“ p ”的类声明的细目，开始时也将在其中声明CSS类选择器：

Hacker Noon. Hacker Noon 。

When you create the h2 in the style element and name the CSS selector as “.blue-text”, you have to then apply the “blue-text” in the HTML element for which header you would want to turn blue and link the two together, thus changing the text colour to blue for that specific header, in this example. Here’s the CSS selector code:

当您在样式元素中创建h2并将CSS选择器命名为“ .blue-text”时，您必须在HTML元素中应用“ blue-text”，您想要将其标题转换为蓝色并链接两者在此示例中，将特定标题的文本颜色更改为蓝色。 这是CSS选择器代码：

<style>

<样式>

.blue-text {

.blue-text {

color: blue;

颜色：蓝色；

}

}

</style>

</ style>

And then later on we apply it to this example of a header code:

然后，我们将其应用于标题代码示例：

<h2 class=”blue-text”This is a header</h2>

<h2 class =“ blue-text”这是标题</ h2>

This specific header will now be coloured blue.

现在，此特定标题将变为蓝色。

使用CSS类设置多个元素的样式 (Style multiple Elements with a CSS Class)

With this, the CSS class is set up and can be reused throughout the code for whatever you want to affect, simply add the linking code class=“blue-text” to join the CSS class to whatever line of text you would like to affect. For example:

这样，就可以建立CSS类，并且可以在整个代码中将其重用于任何您想要影响的内容，只需添加链接代码class =“ blue-text”，即可将CSS类加入到您想要影响的任何文本行中。 例如：

<p class=“blue-text”>Click here to view more </p>

<p class =“ blue-text”>单击此处查看更多</ p>

—

-

Aaaaaaaand let’s call it a day there. Thanks everyone for learning along the way with me. I really enjoyed this post and looking at the very basics of CSS. Looking forward to making more of this tomorrow. See you then!

好吧，我们在那里称呼它。 感谢大家与我一起学习。 我非常喜欢这篇文章，并了解CSS的基础知识。 期待明天更多。 回头见！

翻译自: https://medium.com/swlh/learning-to-code-day-4-introduction-to-css-part-1-fa5680e9b065

css 七天快速入门