CSS的樣式屬性
阿新 • • 發佈：2019-02-14
CSS的目的就是為了給html元素新增樣式，同時將這些樣式宣告獨立在一個.css檔案中，實現內容和樣式的分離。
CSS的樣式主要有：
- 背景屬性
- 字型屬性
- 文字屬性
- 邊框屬性
- 列表屬性
- 表格屬性
字型屬性
<!DOCTYPE html>
<html>
<!--
CSS 字型屬性
屬性 描述
font 簡寫屬性。作用是把所有針對字型的屬性設定在一個宣告中。
font-family 設定字體系列。
font-size 設定字型的尺寸。
font-size-adjust 當首選字型不可用時，對替換字型進行智慧縮放。
font-stretch 對字型進行水平拉伸。
font-style 設定字型風格。
font-variant 以小型大寫字型或者正常字型顯示文字。
font-weight 設定字型的粗細。
--> 背景屬性
<!DOCTYPE html>
<html>
<!--
CSS背景屬性
屬性 描述
background 簡寫屬性，作用是將背景屬性設定在一個宣告中。
background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動。
background-color 設定元素的背景顏色。
background-image 把影象設定為背景。
background-position 設定背景影象的起始位置。
background-repeat 設定背景影象是否及如何重複。
-->
<head>
<meta charset="UTF-8">
<title>背景屬性</title>
<style type="text/css">
body {
color: FF9600;
font-family: "楷體";
font-size: 20pt;
background-image: url(img/backgroundimage.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
</style>
</head>
<body>
范仲淹·蘇幕遮 <br/> 碧雲天，黃葉地。秋色連波，波上寒煙翠。 山映斜陽天接水。芳草無情，更在斜陽外。<br /> 黯鄉魂，追旅思。夜夜除非，好夢留人睡。 明月樓高休獨倚。酒入愁腸，化作相思淚。<br /> 范仲淹·漁家傲
<br /> 塞下秋來風景異。衡陽雁去無留意。四面邊聲連角起。千嶂裡。長煙落日孤城閉。
<br /> 濁酒一杯家萬里。燕然未勒歸無計。羌管悠悠霜滿地。人不寐。將軍白髮征夫淚
<br />
</body>
</html>文字屬性
<!DOCTYPE html>
<html>
<!--
CSS 文字屬性
屬性 描述
color 設定文字顏色
direction 設定文字方向。
line-height 設定行高。
letter-spacing 設定字元間距。
text-align 對齊元素中的文字。
text-decoration 向文字新增修飾。
text-indent 縮排元素中文字的首行。
text-shadow 設定文字陰影。
text-transform 控制元素中的字母。
unicode-bidi 設定文字方向。
white-space 設定元素中空白的處理方式。
word-spacing 設定字間距。
-->
<head>
<meta charset="UTF-8">
<title>文字屬性</title>
<style type="text/css">
#div1 {
text-indent: 30px;
text-align: left;
line-height: 25px;
letter-spacing: 5px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="div1">
天天將降大任於是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍心，曾益其所不能
</div>
</body>
</html>邊框屬性
<!DOCTYPE html>
<html>
<!--
CSS 邊框屬性
屬性 描述
border 簡寫屬性，用於把針對四個邊的屬性設定在一個宣告。
border-style 用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
border-width 簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
border-color 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
border-bottom 簡寫屬性，用於把下邊框的所有屬性設定到一個宣告中。
border-bottom-color 設定元素的下邊框的顏色。
border-bottom-style 設定元素的下邊框的樣式。
border-bottom-width 設定元素的下邊框的寬度。
border-left 簡寫屬性，用於把左邊框的所有屬性設定到一個宣告中。
border-left-color 設定元素的左邊框的顏色。
border-left-style 設定元素的左邊框的樣式。
border-left-width 設定元素的左邊框的寬度。
border-right 簡寫屬性，用於把右邊框的所有屬性設定到一個宣告中。
border-right-color 設定元素的右邊框的顏色。
border-right-style 設定元素的右邊框的樣式。
border-right-width 設定元素的右邊框的寬度。
border-top 簡寫屬性，用於把上邊框的所有屬性設定到一個宣告中。
border-top-color 設定元素的上邊框的顏色。
border-top-style 設定元素的上邊框的樣式。
border-top-width 設定元素的上邊框的寬度。
-->
<head>
<meta charset="UTF-8">
<title>邊框屬性</title>
<style type="text/css">
div.b1 {
border: 2px solid #FF9600;
}
div.b2 {
border: 4px red;
}
</style>
</head>
<body>
<div class="b1" style="position: absolute;background-color: #33CCFF;width: 250px;height: 100px;display: inline;">
<div class="b2" style="position: relative;top: 10px; left: 10px; width: 100px; height: 100px; background-color: #FFCC00;">
春曉<br /> 春眠不覺曉
<br /> 處處聞啼鳥
<br /> 夜來風雨聲
<br /> 花落知多少
</div>
</div>
</body>
</html>列表屬性
<!DOCTYPE html>
<html>
<!--
CSS 列表屬性(list)
屬性 描述
list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個宣告中。
list-style-image 將圖象設定為列表項標誌。
list-style-position 設定列表中列表項標誌的位置。
list-style-type 設定列表項標誌的型別。
-->
<head>
<meta charset="UTF-8">
<title>列表屬性</title>
</head>
<body>
<ol style="list-style-type: disc; list-style-position: outside;">
<li>列表內容1</li>
<li>列表內容2</li>
<li>列表內容3</li>
</ol>
</body>
</html>表格屬性
<!DOCTYPE html>
<html>
<!--
CSS表格屬性
border-collapse 設定是否把表格邊框合併為單一的邊框。
border-spacing 設定分隔單元格邊框的距離。
caption-side 設定表格標題的位置。
empty-cells 設定是否顯示錶格中的空單元格。
table-layout 設定顯示單元、行和列的演算法。
-->
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>