初学者css常见问题_5分钟内学习CSS-初学者教程

最新推荐文章于 2022-04-05 21:04:15 发布

cumi7754

最新推荐文章于 2022-04-05 21:04:15 发布

阅读量270

点赞数

文章标签： css java python 编程语言 html

原文链接：https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/

版权

初学者css常见问题

关于网络设计语言的快速教程。 (A quick tutorial on the design language of the web.)

CSS (Cascading Style Sheets) is what makes web pages look good and presentable. It’s an essential part of modern web development and a must-have skill for any web designer and developer.

CSS(级联样式表)是使网页看起来不错且易于呈现的要素。它是现代Web开发的重要组成部分，并且是任何Web设计人员和开发人员必须具备的技能。

In this article, I’ll give you a quick introduction to help you get started with CSS.

在本文中，我将为您提供快速入门，以帮助您开始使用CSS。

We’ve also launched a free full-length CSS course on Scrimba. Click here to check it out.

我们还在Scrimba上推出了免费的全长CSS课程。 点击这里查看。

I’m assuming that you have a basic understanding of HTML, but other than that there are no prerequisites for this tutorial.

我假设您对HTML有基本的了解，但除此之外，本教程没有任何先决条件。

入门 (Getting Started)

Let’s start with learning how we can include CSS in our projects. There are typically three ways we do that.

让我们开始学习如何在项目中包含CSS。我们通常采用三种方式。

1.内联CSS (1. Inline CSS)

First off, we can include CSS directly in our HTML elements. For this, we make use of the style attribute and then we provide properties to it.

首先，我们可以将CSS直接包含在HTML元素中。为此，我们使用style属性，然后为其提供属性。

<h1 style="color: blue"> Hello world! </h1>

Here we’re giving it the property of color, and setting the value to blue, which results in the following:

在这里，我们赋予它color的属性，并将其值设置为blue ，结果如下：

We can also set multiple properties inside the style tag if we wanted. However, I don’t want to continue down this path, as things start to get messy if our HTML is cluttered with lots of CSS inside it.

如果需要，我们还可以在style标签内设置多个属性。但是，我不想继续走这条路，因为如果我们HTML里面杂乱了很多CSS，事情就会变得一团糟。

This is why the second method to include CSS was introduced.

这就是为什么引入第二种包含CSS的方法的原因。

2.内部CSS (2. Internal CSS)

The other way to include CSS is using the style element in the head section of the HTML document. This is called internal styling.

包含CSS的另一种方法是使用HTML文档head的style元素。这称为内部样式。

<head>  
    <style>  
        h1 {  
            color: blue;  
        }  
    </style>  
</head>

In the style element, we can give the styling to our HTML elements by selecting the element(s) and provide styling attributes. Just like we applied thecolorproperty to the h1 element above.

在style元素中，我们可以通过选择元素来为HTML元素赋予样式，并提供样式属性。就像我们将color属性应用于上面的h1元素一样。

3.外部CSS (3. External CSS)

The third and most recommended way to include CSS is using an external stylesheet. We create a stylesheet with a .css extension and include its link in the HTML document, like this:

包含CSS的第三种也是最推荐的方法是使用外部样式表。我们创建一个扩展名为.css的样式表，并将其链接包含在HTML文档中，如下所示：

<head>  
    <link rel="stylesheet" href="style.css">  
</head>

In the code above, we have included the link of style.css file using the link element. We then write all of our CSS in a separate stylesheet called style.css so that it’s easily manageable.

在上面的代码中，我们使用link元素包括了style.css文件的link 。然后，我们将所有CSS编写在一个名为style.css的单独样式表中，以便易于管理。

h1 {  
   color: blue;  
}

This stylesheet can also be imported into other HTML files, so this is great for reusability.

该样式表也可以导入到其他HTML文件中，因此非常适合重用。

CSS选择器 (CSS Selectors)

As we discussed earlier, CSS is a design language which is used to style HTML elements. And in order to style elements, you first have to select them. You’ve already seen a glimpse of how this works, but let’s dive a bit deeper into CSS selectors, and look at three different ways you can select HTML elements.

如前所述，CSS是一种用于对HTML元素进行样式设置的设计语言。并且为了样式化元素，您首先必须选择它们。您已经看到了它的工作原理，但是让我们更深入地研究CSS选择器，并探讨选择HTML元素的三种不同方式。

1.元素 (1. Element)

The first way to select an HTML element is by simply using the name, which is what we did above. Let’s see how it works:

选择HTML元素的第一种方法是简单地使用名称，这就是我们上面所做的。让我们看看它是如何工作的：

h1 {  
    font-size: 20px;  
}  
p {  
    color: green;  
}  
div {  
    margin: 10px;  
}

The example above is almost self-explanatory. We are selecting different elements like h1, p, div and giving them different style attributes. The font-size controls the size of the text, color sets the text color, and margin adds spacing around the element.

上面的示例几乎是不言自明的。我们正在选择h1 ， p ， div类的不同元素，并为其赋予不同的样式属性。 font-size控制文本的大小， color设置文本的颜色， margin增加元素周围的间距。

2.班级 (2. Class)

Another way of selecting HTML elements is by using the class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well.

选择HTML元素的另一种方法是使用class属性。在HTML中，我们可以为元素分配不同的类。每个元素可以具有多个类，并且每个类也可以应用于多个元素。

Let’s see it in action:

让我们来看看它的作用：

<div class='container'>  
    <h1> This is heading </h1>  
</div>

.container {  
    margin: 10px;  
}

In the code above, we have assigned the class of container to the div element. In the stylesheet, we select our class using .className format and giving it a 10px margin.

在上面的代码中，我们已将container类分配给div元素。在样式表中，我们使用.className格式选择类，并为其设置10px边距。

3. ID (3. ID)

Like classes, we can also use IDs to select HTML elements and apply styling to them. The only difference between class and ID is that one ID can be assigned to only one HTML element.

像类一样，我们也可以使用ID来选择HTML元素并将样式应用于它们。类和ID之间的唯一区别是，一个ID只能分配给一个HTML元素。

<div>  
    <p id='para1'> This is a paragraph </p>  
</div>

#para1 {  
    color: green;  
    font-size: 16px;  
}

The example above displays how we assign an ID to the paragraph element and later use the ID selector in the stylesheet to select the paragraph and apply the style to it.

上面的示例显示了我们如何为段落元素分配ID，然后如何在样式表中使用ID选择器来选择段落并将样式应用于该段落。

字体和颜色 (Fonts & Colors)

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

CSS实际上为我们提供了数百种选择，可以选择使用字体和颜色并使HTML元素看起来更漂亮。我们可以从两种字体家族名称中进行选择：

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

1.通用族：外观相似的一组字体族(例如“ Serif”或“ Monospace”)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

2.字体家族：特定的字体家族(例如“ Times New Roman”或“ Arial”)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

对于颜色，我们可以使用预定义的颜色名称或RGB，HEX，HSL，RGBA，HSLA值。

<div class='container'>  
    <h1 class='heading1'>  
        CSS is Coooooool!!!!  
    </h1>  
</div>

.container {  
    width: 500px;  
    height: 100px;  
    background-color: lightcyan;  
    text-align: center;  
}

.heading1 {  
    font-family: 'Courier New';  
    color: tomato;  
}

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

如您在上面的示例中看到的，我们有一个div元素，其类为container 。在此div内，有一个带有一些文本的h1标签。

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

在样式表中，我们选择容器类并设置其width ， height ， background-color和text-align 。

Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.

最后，我们选择.heading1类(将其应用于h1标签)，并为其赋予font-family和color属性。

结论 (Conclusion)

You might feel a bit overwhelmed by all this information, but don’t worry.

您可能会对所有这些信息感到不知所措，但是不用担心。

Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.

只要查看我们在Scrimba上免费CSS入门课程，您就可以在不到一个小时的时间内成为一名网页设计忍者。

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设计新手训练营。