Css屬性
1.字體
font：復合屬性，設置或檢索對象中的文本特性
font-style：設置字體樣式
font-size：設置字體大小
font-weight：設置字體粗細
font-family：設置文本字體的名稱
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p{ font: italic bold 30px fantasy; } </style> </head> <body> <p>hello css</p> </body> </html>
2.文本
color：文本顏色
text-align：文本水平對齊方式
vertical-align：垂直對齊方式
line-height：行高
text-transform：設置文本大小寫
text-indent：文本縮進
例子：首行縮進2個單位
html代碼如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <p>文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試文本顏色測試</p> </body> </html> css代碼如下 body{ color: red; } p{ width: 300px; background-color: aqua; text-align: center; height: 200px; text-indent: 2em; }
Text-transform例子：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <p id="ca">this is my web</p> <p id="up">this is my web</p> <p id="low">This Is My Web</p> </body> </html> css代碼如下 body{ color: red; } #ca{ text-transform: capitalize; } #up{ text-transform: uppercase; } #low{ text-transform: lowercase; }
line-height 單行文本垂直居中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <div>垂直居中</div> </body> </html> div{ width: 200px; height: 300px; background-color: blue; font-size: 20px; line-height: 300px; }
3.文本裝飾
text-decoration：復合屬性，檢索或設置對象中的文本的裝飾
text-decoration-line：文本裝飾線條的位置
text-decoration-color：文本裝飾線條的顏色
text-decoration-style：文本裝飾線條的顏色
text-shadow：陰影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <p>文本裝飾線條</p> </body> </html> p{ text-decoration-line: underline; text-decoration-color: blue; text-decoration-style: dashed; text-shadow: 5px 5px 1px red; }
4.列表
css列表允許放置，改變列表標誌，或者將圖像作為列表項標誌
只適用於類型為列表的元素，ul，ol
list-style：復合屬性，設置列表相關內容
list-style-image：列表項圖像
list-style-position：列表標誌位置
list-style-type：列表類型
disc：實心圓
circle：空心圓
square：實心方塊
decimal：阿拉伯數字
lower-roman：小寫羅馬數字
upper-roman：大寫羅馬數字
lower-alpha：小寫英文字母
upper-alpha：大寫英文字母
none：不使用項目符號
armenian：傳統亞美尼亞數字
cjk-ideographic：淺白的表意數字
georgian：傳統的喬治數字
註：只有當<list-style-image>屬性為none或者指定圖像不可用時，<list-style-type>才起作用。
ul li{ list-style-type: decimal; }
list-style-image的例子：
ul li{ list-style-image: url("pic/timg1.jpg"); margin-left: 100px; }
list-sytle-position的例子：
ul li{ width: 200px; margin-left: 200px; list-style-position: inside; }
5.表格
1.css表格
css表格屬性可以幫助我們極大的改善表格的外觀
2.表格邊框
3.折疊邊框
4.表格寬高
5.表格文本對齊
6.表格內行距
7.表格顏色
例子：
table{ /*合並相鄰邊框*/ border-collapse: collapse; border-color: pink; } td{ width: 200px; height: 50px; /*padding-left: 20px;*/ text-align: center; } tr{ background-color: aqua; }
Css屬性