初學者css常見問題_5分鐘內學習CSS-初學者教程

初學者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設計新手訓練營。