技術標籤：CSScsscss3

CSS的HTML樣式

• 1、控制元件背景
• 2、顏色
• 3、尺寸
• 4、文字
• 5、盒模型
• 6、定位
• 7、多列屬性
• ***==我們下期再見==***

注：表格框內為CSS屬性

1、控制元件背景

  控制元件大，圖片小，圖片會重複多次鋪滿控制元件；控制元件小，圖片大，控制元件只會顯示圖片一部分割槽域。預設情況下，背景圖片不會縮放，需要用CSS實現縮放。

//例：
.style{
	background-color: #e0e0e0;
}
//
.style-1{
	width: 600px;
	height: 400px;
	background-image: url(../img/img-1.jpg);
	background-repeat: repeat-x;
}
//
.style-1{
	width: 100px;
	height: 100px;
	background-image
 
: url(../img/img-2.jpg);
	background-size: 400px 400px;
	background-position: 250px -80px;
}

2、顏色

  CSS支援RGB和RGBA兩種顏色標準，每種顏色的範圍都是0~255。RGB是由紅、綠、藍三種顏色混合而成，由6位16進位制數字組成，每兩位數字代表一種顏色，顏色數值越大，說明顏色越淺，反之越深；RGBA比RGB多了一個透明度，不透明度取值為0-1【透明->不透明】。
  當使用整數時，最大值為255 ，百分比是 100% 。如果你設定的值大於 255 或 100% 時瀏覽器將會強制將顏色值設為 255 或 100%

常用顏色表

例：
.style-1{
	background-color: rgb(255,0,0);
}
//
.style-1{
	background-color: rgba(255,0,0,0.5);
}

3、尺寸

//例：
.style-1{
	width: 600px;
	height: 400px;
}

4、文字

5、盒模型

  文件樹中的元素都產生矩形的框（Box），這些框影響了元素內容之間的距離、元素內容的位置、背景圖片的位置等等，瀏覽器根據視覺格式化模型來將這些框佈局成訪問者看到的樣子，瀏覽器內顯示的元素都可以看作是一個裝了東西的矩形的盒子，這些矩形的盒子巢狀、疊加或者並列在一起，形成了頁面，如下圖所示為盒子模型。

//例：設定元件居中顯示
.style-1{
	margin: 0px auto 0px auto;
	width: 300px;
}

6、定位

7、多列屬性

我們下期再見

下期連結:link