如果說HTML是網頁的骨架,那么CSS就是網頁的皮膚。它可以控制網頁中的各種樣式,使網頁變得更加美觀和易于閱讀。下面我們來簡單介紹一下CSS的所有屬性。
/* 字體屬性 */ /* 字體名稱 */ font-family: Arial, sans-serif; /* 字體大小 */ font-size: 16px; /* 字體樣式,比如斜體 */ font-style: italic; /* 字體粗細 */ font-weight: bold; /* 文字接近底線的位置,比如下劃線 */ text-decoration: underline; /* 內邊距和外邊距屬性 */ /* 內邊距 */ padding: 10px; /* 上下左右內邊距分別設置 */ padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; /* 外邊距 */ margin: 10px; /* 上下左右外邊距分別設置 */ margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; /* 邊框屬性 */ /* 邊框樣式 */ border-style: solid; /* 邊框寬度 */ border-width: 1px; /* 邊框顏色 */ border-color: #000; /* 寬度和高度 */ /* 寬度 */ width: 100px; /* 高度 */ height: 100px; /* 文字屬性 */ /* 文字顏色 */ color: #000; /* 文字對齊方式 */ text-align: center; /* 首行縮進 */ text-indent: 2em; /* 背景屬性 */ /* 背景顏色 */ background-color: #fff; /* 背景圖片 */ background-image: url('example.jpg'); /* 背景重復方式 */ background-repeat: repeat; /* 網格布局屬性 */ /* 表格樣式 */ border-collapse: collapse; /* 表格邊框 */ border: 1px solid #000; /* 表頭樣式 */ th { background-color: #eee; font-weight: bold; } /* 表格單元格樣式 */ td { border: 1px solid #000; padding: 5px; }
以上是CSS的所有屬性,當然還有更多細節需要學習。希望對大家有所幫助,也歡迎大家多多實踐和探究。祝大家學習愉快!
上一篇css樣式組成部分