Make a Website UNIT2-2

Combining Selectors

It's possible to be even more specific by combining classes and element names.

Click the > to learn more.

This CSS selector selects any p element nested inside an HTML element with the class named header, and colors it blue.

In this way, a CSS rule targets specific HTML elements on the page and applies a style to them.

The next few cards will cover three common CSS properties available to style HTML elements.

Click the eyeball to see the web page. Only the text "Subtitle" is colored blue.

這是可能的是更具體的組合類和元素名稱。

點擊>了解更多信息。

這個CSS選擇器選擇嵌套命名類的頭一個HTML元素內的任何p元素和顏色是藍色。

以這種方式，一個CSS規則映射網頁上的特定的HTML元素和施加樣式給他們。

接下來的幾個卡將覆蓋現有樣式的HTML元素的三種常見的CSS屬性。

單擊眼球看網頁。只有文本“字幕”為藍色。

color

The color property sets the color of an HTML element's text.

We can use color names to change the text's color. But this only works for 140 colors.

Instead, we can use RGB values or hexadecimal numbers. They can represent millions of colors. RGB values and hex numbers express colors as different amounts of red, green and blue.

• RGB values range from 0 to 255, with255 being the brightest.
• Hex numbers vary from 00 to ff, with ffbeing the brightest.

顏色屬性設置一個HTML元素的文本的顏色。

我們可以用顏色名稱更改文本的顏色。但是，這僅適用於140色。

相反，我們可以使用RGB值或十六進制數字。他們可以代表數百萬種顏色。 RGB值和十六進制數表示顏色不同量的紅色，綠色和藍色。

RGB值的範圍從0到255，with255是最亮的。

十六進制數字各不相同，從00到FF，與ff最亮。

Try it out

Change the color from red to RGB value rgb(102,153,0).

.jumbotron h1 {

  color: rgb(102,153,0)

}

Try it out

Change the color from red to hex number #9933CC.

.jumbotron h1 {

  color: #9933CC;

}

font-family

The font-family property sets the font of an HTML element's text.

Three fonts commonly used with font-family are:

1. font-family: Arial, Helvetica, sans-serif;
2. font-family: "Times New Roman", Times, serif;
3. font-family: "Courier New", Courier, monospace;

Google Fonts is a free collection of over 600 more web fonts that you can use on your page.

在font-family屬性設置一個HTML元素的文本的字體。

三種字體，字體-群體常用的有：

字體-群體：Arial, Helvetica, sans-serif;

字體-群體："Times New Roman", Times, serif;

字體-群體："Courier New", Courier, monospace;

GOOGLE字體是一個免費的集合超過600，你就可以在網頁上使用更多的網絡字體。

Try it out

Change the font-family from Shift, sans-serif to 'Open Sans', sans-serif.

.jumbotron h1 {

  color: red;

  font-family: 'Open Sans', sans-serif;

}

font-size

The font-size property sets the size of an HTML element's text.

Text size can be measured in pixels, ems, or rems. We will use pixels here.

字體大小

字體大小屬性設置一個HTML元素的文本的大小。

文字大小可以用像素，EMS，或REMS進行測量。我們將用像素。

Try it out

Increase the font-size to 60px.

.jumbotron h1 {

  color: red;

  font-family: 'Shift', sans-serif;

  font-size: 60px;

}