Web基本教程~05.CSS屬性
上一期
背景屬性在上一期
字體屬性
CSS 字體屬性定義字體，加粗，大小，文字樣式
color 規定文本的顏色
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div{ color:red;}
</style>
</head>
<body>
<div>
hello
</div>
</body>
</html>
font-size 設定文本的大小
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
p {font-size:66px;}
</style>
</head>
<body>
<p>
hello
</p>
</body>
</html>
font-weight 設定文本的粗細
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div {
font-weight:666;
}
</style>
</head>
<body>
<div>
normal 默認值,定義標準的字符<br/>
bold 定義粗體字符<br/>
bolder 定義更粗的字符<br/>
lighter 定義更細的字符
</div>
</body>
</html>
font-style 指定文本的字體樣式
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div {
font-style: italic;
}
</style>
</head>
<body>
<div>
normal 默認值,定義標準的字體樣式<br/>
italic 斜體字體樣式
</div>
</body>
</html>
font-family 屬性指定一個元素的字體
font-family 可以把多個字體名稱作為一個"回退"系統來保存，如果瀏覽器不支持第一 個字體，則會嘗試下一個，
文本屬性
text-align
指定元素文本的水平對齊方式
left : 把文本排列在左邊
right : 把文本排列在右邊
center : 把文本排列在中間
text-decoration
text-decoration 屬性規定添加到文本的修飾，下劃線、上劃線、洗掉線等，
none : 默認,定義標準的文本
underline : 定義文本下的一條線
overline : 定義文本上的一條線
line-through : 定義穿過文本下的一條線
text-transform
none : 默認,定義標準的文本
capitalize : 文本中的每個單詞以大寫字母開頭
uppercase : 僅有大寫字母
lowercase : 僅有小寫字母
text-indent
text-indent 屬性規定文本塊中首行文本的縮進
p{
text-indent:50px;
}
串列屬性
list-style-type
list-style-type 屬性設定串列項標記的型別
ul.a {
list-style-type: circle;
}
list-style-image
list-style-image 屬性使用影像來替換串列項的標記，
ul {
list-style-image: url('sqpurple.gif');
}
list-style-position
list-style-position 屬性指示如何相對于物件的內容繪制串列項標記，inside在里,outside在外
ul {
list-style-position: inside;
}
list-style 簡寫屬性在一個宣告中設定所有的串列屬性
可以設定的屬性（按順序）： list-style-type, list-style-position, list-style-image. 可以不設定其中的某個值，比如 "list-style:circle inside;" 也是允許的，未設定的屬性 會使用其默認值，
ul {
list-style: none;
}
表格屬性
表格邊框
指定 CSS 表格邊框，使用 border 屬性，
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
table, th,tr,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<th>
<td>姓名</td>
<td>年齡</td>
</th>
<tr>
<td>alvin</td>
<td>19</td>
</tr>
</table>
</body>
</html>
表格寬度和高度
Width 和 height 屬性定義表格的寬度和高度， 下面的例子是設定 100％的寬度，50 像素的 th 元素的高度的表格，
table { width:100%; }
th { height:50px; }
表格文字對齊
表格中的文本對齊和垂直對齊屬性， text-align 屬性設定水平對齊方式，向左，右，或中心，
td { text-align:right; }
垂直對齊屬性設定垂直對齊，比如頂部，底部或中間
td { height:50px; vertical-align:bottom; }
表格填充
如果在表的內容中控制空格之間的邊框，應使用 td 和 th 元素的填充屬性
td { padding:15px; }
表格顏色
下面的例子指定邊框的顏色，和 th 元素的文本和背景顏色
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
tableLayout 屬性
tableLayout 屬性用來顯示表格單元格、行、列的演算法規則，
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局，在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距， 而與單元格的內容無關， 通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格，
在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的， 此演算法有時會較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內容
automatic 默認，列寬度由單元格內容設定，
fixed 列寬，由表格寬度
inherit 規定應該從父元素繼承 table-layout屬性的值
border-spacing 屬性
border-spacing 屬性設定相鄰單元格的邊框間的距離（僅用于"邊框分離"模式）， 如果定義一個 length 引數，那么定義的是水平和垂直間距， 如果定義兩個 length 引數，那么第一個設定水平間距，而第二個設定垂直間距，
其他屬性
letter-spacing
letter-spacing 屬性增加或減少字符間的空白（字符間距）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245691.html
標籤：其他
下一篇：C++物件大小，你真的知道嗎？