Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目錄
- 一、CSS列表樣式
- （一）設計列表項前標志類型
- （二）設計列表項前標志位置
- （三）設計列表項圖片
- （四）設計整體列表屬性
- 二、CSS表格樣式
- （一）設計表格大小
- （二）設計表格邊框
- （三）奇偶選擇器
- （四）表格文字對齊
- （五）表格內容與邊框間距
- 結語
一、CSS列表樣式
在之前的HTML標簽中介紹了列表的創建，第二章 HTML語言 第六節 區域標簽、列表標簽，可以對有序列表、無序列表進行進一步的CSS樣式設計，如下：
list-style-image用于對每個列表項設置圖片；
list-style-type用于設計列表項前標志的類型；
list-style-position用于設計列表項前標志位置；
list-style用于設計整個列表的屬性；
（一）設計列表項前標志類型
list-style-type用于設計每個列表項前標志的類型，常用的有：后跟disc表示實心圓，后跟circle表示空心圓，后跟square表示實心方塊，后跟decimal表示數字等等。
例如，下列代碼中，設置有序列表前標志為實心方塊表示，無序列表前標志為數字表示：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h2>文章欄目</h2><ol><li>計算機網絡</li><li>數據庫原理與應用</li><li>C++</li></ol><ul><li>JAVA</li><li>C#</li></ul></body></html>運行結果如下：
（二）設計列表項前標志位置
list-style-position用于設計列表項前標志位置，后跟inside或outside表示標志在文本以內和標志在文本以外。
例如，下列代碼中，設置有序列表和無序列表前標志在文本以內和標志在文本以外：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h2>文章欄目</h2><ol><li>計算機網絡</li><li>數據庫原理與應用</li><li>C++</li></ol><ul><li>JAVA</li><li>C#</li></ul></body></html>運行結果如下：
（三）設計列表項圖片
list-style-image用于設計每個列表項圖片，后跟url（""），表示列表項標志圖片的相對路徑。
例如，下列代碼中，設置列表項圖片為“箭頭”，圖片文件位于image文件夾中：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h2>文章欄目</h2><ol><li>計算機網絡</li><li>數據庫原理與應用</li><li>C++</li></ol><ul><li>JAVA</li><li>C#</li></ul></body></html>運行結果如下，可以看到我們設置的列表項標志圖片：
（四）設計整體列表屬性
通過list-style用于設計整個列表的屬性，表示為list-style : 標志類型 標志位置 圖像url;。
例如，下列代碼中，直接設計整體列表屬性：
css文件代碼：
二、CSS表格樣式
在之前的HTML標簽中也介紹了表格的創建，第二章 HTML語言 第七節 表格標簽，可以對表格進行進一步的CSS樣式設計，如下：
width、height設計表格大小（寬和高）；
border設計表格邊框；
:nth-child(odd/even)設計表格每奇數格和偶數格的樣式。
（一）設計表格大小
通過width屬性和height屬性對表格的寬和高設計，以像素px作單位。
例如，下列代碼中，設置表格寬為300px、高為150px：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><table border="1"><tr><td>計算機</td><td>數據庫</td><td>C++</td><td>C</td></tr><tr><td>C#</td><td>JavaScript</td><td>Java</td><td>Python</td></tr></table></body></html>運行結果如下：
（二）設計表格邊框
通過border屬性，后跟像素大小 實體 顏色，且可以通過使用 border-collapse屬性只顯示表格的單個外邊框，即這時表格邊框和單元格邊框合并成一個外邊框。
例如，下列代碼中，指定表格只有一個外邊框，且邊框大小為1px、實體solid、紅色邊框：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><table border="1"><tr><th>1</th><td>計算機</td><td>數據庫</td><td>C++</td><td>C</td></tr><tr><th>2</th><td>C#</td><td>JavaScript</td><td>Java</td><td>Python</td></tr></table></body></html>運行結果如下，可以看到單元格邊框和外邊框合并：
（三）奇偶選擇器
通過:nth-child(odd/even)奇偶選擇器對表格中每奇數格和偶數格進行設計，其屬性前面接html標簽，odd表示奇數格，even表示偶數格。
例如，下列代碼中，指定表格只有一個外邊框，且邊框大小為300px和150px，按奇偶數不同的顏色表示：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td>計算機</td><td>數據庫</td><td>C++</td></tr><tr><td>C#</td><td>JavaScript</td><td>Java</td></tr><tr><td>單片機</td><td>電子技術</td><td>電路基礎</td></tr><tr><td>C語言</td><td>Python</td><td>php</td></tr></table></body></html>運行結果如下，表格中每格以奇偶數顯示不同的顏色：
（四）表格文字對齊
通過 text-align屬性對表格中的文字設置水平對齊方式，可以為左（left）、右（right）、中間（center）；
通過vertical-align屬性對表格中的文字設置垂直對齊方式，可以為頂部（top）、底部（bottom）、中間（middle）。
例如，下列代碼中，指定表格只有一個外邊框，邊框大小為300px和150px，且文字水平居中對齊：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td>計算機</td><td>數據庫</td><td>C++</td></tr><tr><td>C#</td><td>JavaScript</td><td>Java</td></tr><tr><td>單片機</td><td>電子技術</td><td>電路基礎</td></tr><tr><td>C語言</td><td>Python</td><td>php</td></tr></table></body></html>運行結果如下，文字是居中對齊的：
（五）表格內容與邊框間距
通過padding屬性設計表格內容與邊框間距，后跟像素值px。
例如，下列代碼中，指定表格只有一個外邊框，邊框大小為300px和150px，且表格的表頭和單元格的內容與邊框間距為10px：
css文件代碼：
html文件代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td>計算機</td><td>數據庫</td><td>C++</td></tr><tr><td>C#</td><td>JavaScript</td><td>Java</td></tr><tr><td>單片機</td><td>電子技術</td><td>電路基礎</td></tr><tr><td>C語言</td><td>Python</td><td>php</td></tr></table></body></html>運行結果如下，可以看出表格中表頭和各個單元格與邊框的距離：
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第三章 CSS语言
- 下一篇： Web前端开发笔记——第三章 CSS语言