一小时内学习CSS-包含20部分内容的免费互动课程-CSDN博客

CSS (Cascading Style Sheet) is one of the three cornerstones of the web, along with HTML and JavaScript. It’s what brings life to websites through colours, styling, positioning and much more. Thus, knowing CSS is hugely valuable in today’s labour market!

CSS(层叠样式表)是HTML和JavaScript的三大基石之一。这就是通过颜色，样式，位置等为网站带来活力的原因。因此，了解CSS在当今的劳动力市场中具有巨大的价值！

So I’m happy to announce that we’ve just launched a free CSS course on Scrimba. It’s created by our brilliant instructor Eric Tirado, who also did our popular intro to HTML course.

因此，我很高兴地宣布，我们刚刚在Scrimba上启动了免费CSS课程。它是由我们出色的讲师Eric Tirado创建的，他也做了我们流行的HTML课程入门。

In less than an hour, Eric will take you from zero to proficient in CSS!

在不到一个小时的时间内，Eric将带您从零开始精通CSS！

Let’s have a look at how the course is laid out.

让我们看一下课程的布局。

第1部分：简介 (Part 1: Introduction)

In the introductory video, Eric will give you an overview of what the course looks like, what the pre-requisites are, plus an overview of the topics he touches throughout the course. He also gives you a brief introduction about himself so you get familiar with him before jumping off.

在介绍性视频中，埃里克(Eric)将为您提供课程概况，前提条件的概述，以及他在整个课程中涉及的主题的概述。他还向您简要介绍了自己，以便您在下车之前熟悉他。

第2部分：CSS文档和级联 (Part 2: CSS Documents & The Cascade)

We then jump directly into the first formal lesson of the course. In this one, we will be looking into the ways we can include CSS in our HTML pages and how to start applying basic stylings on our elements.

然后，我们直接跳到该课程的第一堂正式课程。在这一篇中，我们将研究在HTML页面中包含CSS的方式，以及如何开始在元素上应用基本样式。

第3部分：CSS选择器，属性和值 (Part 3: CSS Selectors, Properties, & Values)

In the second lesson, Eric talks about some of the CSS vocabulary which sets you up to better understand concepts he goes through in later lectures. You’ll learn what HTML elements are, what CSS selectors are, and how you can apply properties and assign values to them.

在第二课中，Eric讨论了一些CSS词汇，使您可以更好地理解他在以后的讲座中经历的概念。您将了解什么是HTML元素，什么是CSS选择器，以及如何应用属性并为其分配值。

CSS词汇 (CSS Vocabulary)

So, for example, this is an h1 element. It has some default styling which appears when you render it in the browser. If we want to change some styling, we can use CSS:

因此，例如，这是一个h1元素。当您在浏览器中渲染它时，它具有一些默认样式。如果要更改某些样式，可以使用CSS：

h1 {  
   color: 'red';  
}

The selector for our h1 element is simply the name of the element itself, and then we assign it the property of color with the value of red. In the same way, we can select elements using Classes and IDs as well, which is discussed in later videos.

h1元素的选择器只是元素本身的名称，然后为它分配color的属性和red的值。同样，我们也可以使用类和ID选择元素，这将在后面的视频中进行讨论。

第4部分：类和ID (Part 4: Classes and IDs)

This part of the course discusses how to use classes and IDs in CSS to select HTML elements and apply different styling on them. It also discusses in detail the difference between Class and ID, and how and when we assign them on HTML elements

本课程的这一部分将讨论如何在CSS中使用类和ID来选择HTML元素，并对它们应用不同的样式。它还详细讨论了Class和ID之间的区别，以及如何以及何时在HTML元素上分配它们

Look at the following code for an example:

查看以下代码作为示例：

<h1 class='heading'>This is the heading tag</h1>

<p class='paragraph'>This is a paragraph tag</p>

The above snippet consists of an h1 (heading) and a p (paragraph) tag. We have given h1 element the class of heading and our p element the ID of paragraph.

上面的代码片段由h1 (标题)和p (段落)标记组成。我们为h1元素指定了heading类别，为p元素提供了paragraph. ID paragraph.

In our CSS file, we select the heading class and give it the property of color. Later we select the paragraph ID and give it the properties of color and font size:

在我们CSS文件中，我们选择标题类并为其赋予color属性。稍后，我们选择段落ID，并为其指定颜色和字体大小的属性：

.heading {  
   color: blue  
}

#paragraph {  
   color: green;  
   font-size: 14px;  
}

第五部分：特异性 (Part 5: Specificity)

In part 5 of the course, you’ll learn about specificity, which means how a browser would know which styles and rules are most relevant for an element to apply.

在本课程的第5部分中，您将学习特异性，这意味着浏览器将如何知道哪种样式和规则与要应用的元素最相关。

<h1 class='heading'>This is the heading tag</h1>

For example, here we have an h1 tag with the class of heading applied to it.

例如，这里有一个h1标签，其中应用了标题类。

h1 {  
   color: blue;  
}

.heading {  
   color: green;  
}

Using CSS, we assign the colour of blue to h1 tag which will change the colour of every h1 . We also then assign the colour of green to class heading, so that every element with this class will have its colour overridden to green. So the h1 tag we defined above will appear as green.

使用CSS，我们将蓝色分配给h1标签，这将更改每个h1的颜色。然后，我们还将绿色分配给类heading ，以使具有该类的每个元素的颜色都将覆盖为绿色。因此，我们上面定义的h1标签将显示为绿色。

第6部分：宽度和高度 (Part 6: Width & Height)

In this lesson, you’ll learn how to apply width and height in order to control the formatting and flow of the page.

在本课程中，您将学习如何应用宽度和高度以控制页面的格式和流程。

Above is a slide from the lesson, which will give you an idea of how we can create sections and boxes using width and height to make our web page look properly formatted.

上面是本课的幻灯片，它将使您了解如何使用宽度和高度创建节和框，以使我们的网页具有正确的格式。

第7部分：长度单位 (Part 7: Length Units)

In CSS, we can use different units to measure the different sizes we pass in as properties of our HTML elements. This lesson discusses in detail what those different units are and how they differ in usage.

在CSS中，我们可以使用不同的单位来衡量作为HTML元素属性传递的不同大小。本课详细讨论了这些不同的单元是什么以及它们在用法上如何不同。

There are two types of length units:

长度单位有两种：

Absolute Units
绝对单位
Relative Units.
相对单位。

Absolute units are fixed length units, and a length which is expressed in any of them will appear as exactly that size. For example, cm, mm, in, 'px, and so on are absolute units.

绝对单位是固定长度的单位，用任何一个单位表示的长度都将恰好显示为该大小。例如， cm ， mm ， in ， 'px等都是绝对单位。

On the other hand, relative length units specify a length relative to another length property. For example, em, ex, rem, and so on are absolute units.

另一方面，相对长度单位指定相对于另一个长度属性的长度。例如， em ， ex ， rem等是绝对单位。

第八部分：颜色 (Part 8: Colors)

This lesson discusses in detail how we can use and apply colours to different HTML elements. It also discusses different ways we can declare the name of the colour in our CSS properties.

本课详细讨论了如何使用颜色并将其应用于不同HTML元素。它还讨论了在CSS属性中声明颜色名称的不同方法。

.heading1 {  
   color: orange;  
}

.heading2 {  
   color: #ff6347;  
}

.heading3 {  
   color: RGB(255, 99, 71);  
}

The example above has three classes declared with the same property of colour assigned to them. But the point to notice is how we have used different ways to assign the values of colours.

上面的示例有三个声明为具有相同颜色属性的类。但是需要注意的是，我们如何使用不同的方法来分配颜色值。

Class heading1 uses the name of the colour (orange) as its property. heading2 uses the hex value of the colour. And heading3 uses the RGB value of the colour.

类heading1使用颜色(橙色)的名称作为其属性。 heading2使用颜色的十六进制值。而heading3使用颜色的RGB值。

第9部分：填充 (Part 9: Padding)

In CSS, padding is used to create spaces around an element’s content inside any defined borders. In CSS, you have the control to apply padding to all or any side of the elements. Lesson 9 of this course talks about padding and teaches you how you can apply it in different ways.

在CSS中，填充用于在任何定义的边界内的元素内容周围创建空格。在CSS中，您可以控制将填充应用于元素的所有或任何一侧。本课程的第9课讨论填充，并教您如何以不同方式应用它。

.container {  
   padding: 10px;  
   /* padding-left: 10px; */
   /*  padding-right: 10px; */ 
   /*  padding-top: 5px; */
   /*  padding-bottom: 5px; */ 
}

Like in the example above, we can either just use the property of padding, which will apply the spacing to all the sides, or alternatively, you can give padding to individual directions.

像上面的示例一样，我们可以只使用padding的属性，该属性将对所有侧面应用间距，或者可以为各个方向赋予padding。

第十部分：边界 (Part 10: Borders)

In this lesson, you will learn how you can apply borders around your content. You’ll also learn about the variations you can give to the borders using different styles and options available in CSS.

在本课程中，您将学习如何在内容周围应用边框。您还将了解使用CSS中可用的不同样式和选项可以给边框带来的变化。

Take the example of the box in the above picture and notice the borders around it with different colours and width.

以上图中的框为例，并注意其周围的边框具有不同的颜色和宽度。

第11部分：保证金 (Part 11: Margins)

Margins in CSS are like padding: they apply spacing around the element but they do it outside of any defined border. This lesson talks about using margins inside your CSS, and how you can apply the same margins in all directions or different margins in different directions.

CSS中的边距就像是填充：它们在元素周围应用间距，但它们在任何定义的边界之外进行间距。本课讨论如何在CSS中使用边距，以及如何在所有方向上应用相同的边距或在不同方向上应用不同的边距。

.container {  
   margin: 10px;  
   /* margin-left: 10px;  */
   /* margin-right: 10px;  */
   /* margin-top: 5px;  */
   /* margin-bottom: 5px;  */
}

第11部分：盒子模型 (Part 11: The Box Model)

The Box Model in CSS is a term we use when we describe design and layout. We can think of all the HTML elements as boxes where each box contains properties of margins, padding, borders, and so on.

CSS中的Box Model是我们在描述设计和布局时使用的术语。我们可以将所有HTML元素视为框，其中每个框都包含边距，填充，边框等属性。

The above illustration explains the conceptual model of the box. In this lesson, Eric will explain how we can use this concept to better design and arrange our elements.

上图说明了盒子的概念模型。在本课程中，埃里克(Eric)将解释我们如何使用此概念来更好地设计和布置元素。

第13部分：可见度 (Part 13: Visibility)

We can also update the visibility of any element in HTML using CSS. We can, for example, hide or display any element using the property of display. This lesson explains three different ways in which we can play with the visibility of elements.

我们还可以使用CSS更新HTML中任何元素的可见性。例如，我们可以使用display的属性隐藏或显示任何元素。本课说明了三种不同的方式来发挥元素的可见性。

.hidden {  
   display: none:  
}

One of the three ways to update visibility is using the display property. In the example above, we have set the display property to none so that any element which has the class of hidden won’t appear in the browser at all.

更新可见性的三种方法之一是使用display属性。在上面的示例中，我们将display属性设置为none，这样任何具有hidden类的元素都不会出现在浏览器中。

第14部分：字体 (Part 14: Fonts)

Fonts are one of the most important and useful features of CSS. We can play with different kinds of font styles and font families to make our text look good. Lesson 14 of this course is all about using fonts!

字体是CSS最重要和最有用的功能之一。我们可以使用各种字体样式和字体系列来使文本看起来不错。本课程的第14课全部关于使用字体！

In the image above, the text Hello World has the font-family of Black Han Sans’, arial, sans-serif and the font-size of 30px. In the same way, we can apply different properties to make our text look more appealing and beautiful.

在上图中，文本Hello World具有Black Han Sans', arial, sans-serif的font-family Black Han Sans', arial, sans-serif和30px的font-size 。同样，我们可以应用不同的属性来使我们的文本看起来更具吸引力和美观。

第15部分：元素流 (Part 15: Element Flow)

In this section of the course, you will be learning about the typical flow of elements on how they are rendered inside the browser. There are two types of HTML elements: Inline and Block elements

在本节课程中，您将学习有关元素如何在浏览器中呈现的典型流程。 HTML元素有两种类型：内联元素和块元素

Inline elements can not take the width and height properties. They will always be as big as their content. However, on block elements, you can set both width and height as you like

内联元素不能采用width和height属性。它们将始终与内容一样大。但是，在块元素上，您可以根据需要设置width和height

第16部分：浮动和清除 (Part 16: Float & Clear)

In the lesson, you’ll be learning about the float and clear properties. These are very useful if we want to control the position of HTML elements to float left or right of each other.

在本课中，您将学习float和clear属性。如果我们要控制HTML元素的位置以使其彼此左右浮动，这些功能将非常有用。

第17部分：浮动布局挑战 (Part 17: Float Layout Challenge)

Here comes the challenge of this course. In it, you’ll be encouraged to create the following layout using the float properties. Later in the screencast, Eric will teach you how to do it in case you faced any difficulties.

这是本课程的挑战。在其中，将鼓励您使用float属性创建以下布局。在随后的截屏视频中，埃里克(Eric)将教您如何操作，以防遇到任何困难。

第18部分：头寸属性 (Part 18: Position Property)

In this lesson, we’ll design a simple article page where we’re using the available positioning properties. We will be working with divs, text content, span, and footer.

在本课程中，我们将设计一个简单的文章页面，在其中使用可用的定位属性。我们将处理div，文本内容，跨度和页脚。

At the end of this lesson, you’ll be able to create a layout like this:

在本课程结束时，您将可以创建如下布局：

第19部分：伪类/元素 (Part 19: Pseudo Classes / Elements)

In the final lesson, we will learn about pseudo classes and elements. We use pseudo-classes to make some advanced level selections of our HTML elements. This is a very useful technique when we are dealing with complex web pages that have multiple elements and conditional stylings

在最后一课中，我们将学习伪类和元素。我们使用伪类对HTML元素进行一些高级选择。当我们处理具有多个元素和条件样式的复杂网页时，这是一种非常有用的技术

/* unvisited link */  
a:link {  
    color: aqua;  
}

/* visited link */  
a:visited {  
    color: orange;  
}

For example, in the above code snippet, we are applying different classes to the anchor tag using its state of whether it has been visited or not. There are thousands of use cases for using pseudo-classes, and this lesson will help you understand the basic concept of using them.

例如，在上面的代码片段中，我们使用锚标签是否被访问的状态将不同的类应用于锚标签。使用伪类有成千上万的用例，本课程将帮助您了解使用伪类的基本概念。

第20部分：下一步是什么？ (Part 20: What’s Next?)

In this last screencast of the course, Eric wraps up what you have learned throughout the course and gives you tips on continuing your learning journey.

在本课程的最后一个截屏视频中，Eric总结了您在整个课程中学到的内容，并为您提供了继续学习旅程的提示。

CSS is a vast topic, and they are many more features to learn apart from what was covered during this course!

CSS是一个广泛的主题，除了本课程介绍的内容之外，还有许多其他功能需要学习！

If you make it to the end, you can give yourself a pat on the back. You’ve taken a big step towards learning how to build and design websites, which is a hugely valuable skill.

如果到最后，您可以拍一下自己的背。您已经在学习如何构建和设计网站方面迈出了一大步，这是一项非常宝贵的技能。

So go ahead and take the free course today! Your future self will thank you for it :)

因此，今天就去参加免费课程吧！你未来的自我会为此而感激的:)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营。