CSS樣式更改——列表、表格和輪廓

點擊上方「IT共享之家」，進行關注

回復「資料」可獲贈Python學習福利

前言

上篇文章主要介紹了CSS樣式更改篇中的字體設置Font&邊框Border設置，這篇文章分享列表、表格和輪廓，一起來看看吧。

1.列表List1).列表的類型

<ul style='list-style-type:square'><li></li></ul>none      無標記disc      實心圓circle    空心圓square    實心方塊decimal   數字none      無
2).列表的圖像
<ul><li style='list-style-image:url(1.png)'></li></ul>
3).列表的位置
<ul><li style='list-style-position:inside'></li></ul>inside 列表項目標記放置在文本以內outside 列表項目標記放置在文本以外
這三者屬性可以放在list-style中統一設置。

2.表格Table1).摺疊表格邊框
table  {  border-collapse:collapse  }separate 邊框會被分開collapse 邊框合併為一個單一的邊框
2).表格文本對齊
設置水平對齊方式，比如左對齊、右對齊或者居中td  {  text-align:right  }設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊td  {  vertical-align:bottom  }
3).單元格邊框間距
table  {  border-spacing:10px 50px  }可以使用像素，不允許負值。如果定義一個length 參數，那麼定義的是水平和垂直間距如果定義兩個length 參數，那麼第一個設置水平間距，而第二個設置垂直間距
4).表格標題的位置
caption  {  caption-side:bottom  }top     表格標題定位在表格之上bottom  表格標題定位在表格之下
5).顯示表格中的空單元格
table  {  empty-cells:hide  }hide 不在空單元格周圍繪製邊框show 在空單元格周圍繪製邊框
6).設置表格布局算法
table  {  table-layout:fixed;  }automatic 列寬度由單元格內容設定fixed     列寬由表格寬度和列寬度設定
3.輪廓 Outline1).設置輪廓顏色2).設置輪廓樣式
div  {  outline-style:dotted  }和邊框的風格是一樣的
3).設置輪廓寬度
div  {  outline-width:1px  }
參考文檔：W3C官方文檔（CSS篇）
二、總結
這篇文章主要介紹了CSS樣式更改篇中的列表、表格和輪廓，希望讓大家對CSS選擇器有個簡單的認識和了解。
看完本文有收穫？請轉發分享給更多的人
IT共享之家
入群請在微信後臺回復【入群】
------------------- End -------------------
往期精彩文章推薦：