Make a Website UNIT2-3
Review
CSS uses rules to define the design of an HTML element.
Here's an HTML element labeled with the CSS properties that control different aspects of its appearance. When you want to style an HTML element, imagine there is a box around it and apply these properties to style it.
We've already looked at three properties to control the appearance of an HTML element's text. The next few cards will cover five more properties that affect the space surrounding the text.
評論
CSS使用規則來定義HTML元素的設計。
這裡的標有控制其外觀的不同方面的CSS屬性的HTML元素。當你想樣式的HTML元素，想像在它周圍有一個框，並應用這些屬性的風格吧。
我們已經看了三個屬性來控制一個HTML元素的文本的外觀。接下來的幾個卡將覆蓋五個屬性影響周圍的文本的空間。
background-color
The
background-color property sets the color for the background of an HTML element.
背景顏色
背景色屬性設置為一個HTML元素的背景顏色。
Try it out
Change the
background-color to the hex number #0099cc.
試試看
更改背景顏色的十六進制數字＃0099CC。
.jumbotron {
background-color: #0099cc;
}
background-image
Instead of a solid color, the
background-imageproperty sets an image as the background of an HTML element.
背景圖
取而代之的是純色，背景圖像屬性設置圖像作為一個HTML元素的背景。
Try it out
Change the
background-image to url('https://goo.gl/ODpi3y').
試試看
更改背景圖片URL（'https://goo.gl/ODpi3y“）。
.jumbotron {
background-image: url('https://goo.gl/ODpi3y');
}
border
The
border property sets the width, style, and color of an element's border
邊界
邊框屬性設置元素邊框的寬度，樣式和顏色
Try it out
Set the
border to 3px solid #cc0000. This changes the border width to 3px, the border style to solid, and the border color to #cc0000.
試試看
設置邊框的3px固體＃CC0000。這改變邊框寬度的3px，邊框樣式，以紮實，邊框顏色為＃CC0000。
.jumbotron h1 {
border:3px solid #cc0000 ;
}
padding
The
padding property creates space between the content and border of an element. This whitespace is useful in order to improve readability and organization of the page.
填充
padding屬性創建一個元素的內容與邊框之間的空間。這個空白是為了提高可讀性頁面和組織有用的。
Try it out
Increase the
padding to 23px.
試試看
增加填充到23px。
.jumbotron h1 {
padding: 23px;
border: 3px solid #ffffff;
}
padding
The
padding property sets the padding on all sides. It's possible to set the padding on each side.
The properties
padding-top, padding-bottom,padding-left, and padding-right are available to set the padding on each side of an HTML element.
填充
padding屬性設置在各方面的空白。它們也可以設置在填充在每一側。
可用於設置填充上的HTML元素的每一側的性能填充頂，填充底，填充左，和padding-權利。
Try it out
Set
padding-top to 10px. Set padding-bottom to 23px.
試試看
設置填充機頂為10px。設置填充，底部23px。
.jumbotron h1 {
padding-top: 10px;
padding-bottom: 23px;
border: 3px solid #ffffff;
}
margin
The
margin property creates space for multiple HTML elements. The margin is a transparent area outside the border of an element.
餘量
保證金屬性創建多個HTML元素的空間。保證金是元素的境外透明區域。
Try it out
Increase the
margin to 14px.
試試看
增加利潤率14px的。
.jumbotron h1 {
margin: 14px;
border: 3px solid #ffffff;
}
margin
The
margin property sets the margin on all sides. It's possible to set the margin on each side.
The properties
margin-top, margin-bottom,margin-left, and margin-right are available to set the margin on each side of an HTML element.margin
margin屬性設置在各方向的空白。這是可能的設置每邊空白。
margin-top, margin-bottom,margin-left, and margin-right可用於設置頁邊距上的HTML元素的每一側的特性。Try it out
Set
margin-top to 10px. Set margin-left to 23px.
試試看
設置的margin-top為10px。設置margin-left為23px。
.jumbotron h1 {
margin-top: 10px;
margin-left: 23px;
border: 3px solid #ffffff;
}
margin
The properties
margin-left, and margin-rightare available to set the margin on either side of an HTML element. If one of these properties is set toauto, then it will take as much as possible.
To move the HTML element to the far left of the screen, use
margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.
To center an element, set margin-right: auto. The margin to the left and right will be equal and the element will be centered.
margin
屬性margin-left，margin-right可用於設置邊緣上的HTML元素的任一側。如果這些屬性中的一個被設置為auto，那麼它將被設為最大。
若要將HTML元素最左邊的屏幕上，使用margin-right: auto。這將最大限度地擴大空間有右側緣的量，元件推到最左邊。
要margin-right: auto。邊緣到左和右將等於和元件將居中。
Try it out
Below
margin-right: auto, add margin-left: auto in order to center the h1 element.
.jumbotron h1 {
margin-right: auto;
margin-left: auto
border: 3px solid #ffffff;
}
<head> and <link>
Here's an example of using CSS in a web page:
- The head element contains information that the web browser needs to display the page.
- The link element tells the browser where to find the CSS file used to style the page. The
relattribute tells the browser that the file being linked is a CSS file to style the page. Thehrefattribute gives the browser the path to the CSS file. - The body element contains the content of the page that shows up in the web browser.
<head>和<Link>
下面是在網頁中使用CSS的例子：
頭元素包含了Web瀏覽器需要顯示的頁面信息。
鏈接元素告訴瀏覽器在哪裡可以找到用於樣式化頁面的CSS文件。 rel屬性告訴瀏覽器是被鏈接文件是一個CSS文件，以個性化這個頁面。 href屬性給出瀏覽器的路徑，CSS文件。
主體元素包含顯示在網頁瀏覽器的網頁的內容。
Comments
Post a Comment