Make a Website UNIT 2

Introduction

Web pages are created using HTML and CSS.

• HTML is used to write a web page's content.
• CSS is used to define the design and layout of the page.

The HTML to the right never changes. The same HTML file is styled three different ways by using three different CSS files. All the visual differences in color, font, and where elements are arranged on the page are a result of CSS.

介紹

使用HTML和CSS創建網頁。

HTML是用來編寫網頁的內容。

CSS被用來定義網頁的設計和佈局。

在右圖中，HTML語法皆是固定。相同的HTML文件是通過使用三種不同的CSS語法呈現三種不同的方式的風格。在顏色，字體中所有視覺上的差異，並且其中元件被佈置在頁面上是CSS語法所造成的結果。

A web page is a collection of HTML elements. CSS is used to control the appearance of an HTML element.

The code to the right specifies that h1 elements be colored red. This code is called a CSS rule.

Click the eyeball to see the web page.

網頁是HTML元素的集合。CSS被用來控制HTML元素的外觀。

代碼在正確的指定H1元件被著色為紅色。這段代碼被稱為CSS規則。

單擊眼球看網頁。

Try it out

In the CSS rule to the right, change the color from red to yellow.

h1 {

  color: yellow;

}

CSS Rules

CSS uses rules to style HTML elements. Here's how CSS rules work:

1. A CSS rule starts with a selector. A selector specifies which HTML elements to style. Here theh1 CSS selector selects all h1 HTML elements on the page.
2. Inside the braces { }, a property and its valuedefine what aspect of the h1 elements to style. Setting the color property to red changes the color of the h1 element to red.

Together, a selector and its property-value pairs are called a CSS rule.

CSS規則

CSS使用規則樣式的HTML元素。這裡顯示CSS規則是如何工作的：

CSS規則以一個選擇。選擇器指定了HTML元素的風格。在這裡，the h1 CSS選擇器選擇頁面上的所有H1的HTML元素。

裡面的大括號{}，屬性及屬性的內容定義了H1元素的風格。

顏色屬性設置為紅色改變h1元素的顏色為紅色。

總之，選擇器和它的屬性值配對被稱為CSS規則。

Class Attribute

HTML elements can be CSS selectors, but they're not the only selectors available. Another available selector is the class selector.

To see how it works, let's first look at the HTML to the right. HTML elements can carry a classattribute.

HTML元素可以是CSS選擇器，但它們不是唯一可用的選擇。另一個可用的選擇是類選擇。

看看它是如何工作的，讓我們先來看看HTML的權利。 HTML元素可以攜帶一個類屬性。

Class Selector

The class can be targeted from CSS by using a dot (.), as seen in the CSS to the right.

CLASS 可以從CSS的通過使用一個 .  被對照，如右邊的CSS語法。

Click the > to learn more.

按>閱讀更多

The .header selector applies a blue text color only to the elements nested inside<div class="header">..</div>.

In this way, classes are useful to specifically target groups of HTML elements.

Click the eyeball to see the web page. The text inside<div class="header">..</div> is blue. Since the text Hello world is outside the div, it remains unstyled.

.header 選擇了藍色的文本顏色只適用於嵌套

<DIV CLASS =“header”>元素.. </ DIV>。

以這種方式，類是用在的特定的HTML元素組。

單擊眼球看網頁。在<DIV CLASS =“header”>...</ div>這個文本是藍色的。

由於Hello world ，是在div之外，所以無樣式。