1 顏色屬性
<div style="color:blueviolet">ppppp</div> <div style="color:#ffee33">ppppp</div> <div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div>
2 字體屬性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
3 背景屬性
border:1px solid red;
background-color: cornflowerblue; background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平鋪滿) background-position: right(左右距離) top（上下距離）（20px 20px）;(橫向：left center right)(縱向：top center bottom) 簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
eg：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; width: 18px; height: 20px; background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13"); background-position: 0 -100px; } </style> </head> <body> <span></span> </body> </html>
4.文本屬性
font-size: 10px;
text-align: center; 橫向排列
line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
text-indent: 150px; 首行縮進
letter-spacing: 10px; 字母間距
word-spacing: 20px; 單詞間距
text-transform: capitalize; 單詞首字母大寫
5.邊框屬性
border-style: solid; 邊框樣式實線 dashed是虛線
border-color: red; 邊框顏色
border-width: 20px; 邊框寬度
簡寫：border:邊框寬度 邊框顏色 邊框樣式，例如
border: 30px rebeccapurple solid;
border-left boder-right boder-top boder-bottom
6 列表屬性
ul,ol{ list-style: decimal-leading-zero; list-style: none; 除去列表樣式
list-style: circle; list-style: upper-alpha; list-style: disc; }
7 dispaly屬性
none 隱藏
block 塊元素
inline 內聯元素
inline-block 內聯元素具有塊元素屬性
8.eg：表格居中
#div1 { text-align: center; } #div2 { margin:50px auto; border: 5px red dashed; width: 500px; height: 500px; } </style> </head> <body> <!--action 定義表單數據提交地址--> <div id="div1"> <div id="div2"> <form action="http://127.0.0.1:8000/post_info" method="get" enctype="multipart/form-data"> <!--單行文本框--> <input type="text" name="username" placeholder="請輸入賬號"><br><br> <!--密碼框--> <input type="password" name="password" placeholder="請輸入密碼"><br><br> <!--單選框--> 性別：<label><input type="radio" name="sex" value="1">男</label> <label><input type="radio" name="sex" value="2">女</label> <!--多選框--> <br><br> 最喜歡的游戲： <label><input type="checkbox" name="fav" value="LOL">英雄聯盟</label> <label><input type="checkbox" name="fav" value="shoot">噴射戰士</label> <label><input type="checkbox" name="fav" value="zelder">塞爾達傳說</label> <label><input type="checkbox" name="fav" value="mario">馬里奧</label> <!--上傳圖片--> <br><br> <input type="file" name="pic"> <!--多行文本框--> <br><br> <textarea name="text" cols="30" rows="10"></textarea> <!--下拉列表--> <br><br> <select name="city"> <option value="gz">廣州</option> <option value="sz">深圳</option> <option value="zh">中山</option> </select> <!--提交表單--> <input type="submit" value="提交"> <!--重置表單--> <input type="reset" value="重置"> </form> </div> </div>
參考：https://www.cnblogs.com/yuanchenqi/articles/5977825.html