CSS屬性【文字屬性】or【列表屬性】
阿新 • • 發佈：2022-03-01
CSS屬性
1.文字屬性
- font-size 字型大小 單位是px，瀏覽器預設是16px，設計圖常用字號是12px
- font-family 字型 多個字型中間用逗號連線，先解析第一個字型，如果沒有解析第二個人字型
- color 字型顏色 color:red; color:rgb(255,0,0)取值在0~255之間 ;十六進位制color:#fffff
- font-weight 字型加粗
font-weight：bolder (更粗的) / bold (加粗) / normal (常規) /lighter(細的)
font-weight: 100-900; 100-500 不加粗 600-900 加粗
常用:100 細體 400 正常 700 加粗 900 更粗
- font-style 字型傾斜
font-style: italic(傾斜字)/ oblique (傾斜的文字)/ normal (常規顯示)
- text-align 文字水平對齊
text-align:left; 水平靠左
text-align:right; 水平靠右
text-align: center; 水平居中
text-align: justify; 水平2端對齊，但只對多行起作用；
- line-height 行高
line-height的資料=height的資料，可以實現單行文字垂直居中
- text-indent 首行縮排
text-indent可以取負值
text-indent屬性只對第一行起作用
.p{
text-indent:2em;
}
- letter-spacing 字間距
控制文字和文字之間的間距
- word-spacing 詞間距
控制英文單詞，詞與此之間的間距
- text-decoration 文字修飾
text-decoration: none沒有/underline 下劃線/overline 上劃線/ line-through刪除線
- font 文字簡寫
font是font-style font-weight font-size/ line-height font-family的簡寫。
font:italic 800 30px/80px "宋體"; 順序不能改變
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
font: italic bold 20px/1em 微軟雅黑;
}
</style>
</head>
<body>
<p>
大家好,Lorem ipsum dolor sit amet consectetur adipisicing elit.
Numquam dignissimos exercitationem iure laborum inventore
rerum sit expedita natus a ipsam, possimus deleniti cum unde
officia maiores debitis cumque. Rem, iure.
</p>
</body>
</html>
- text-transform 大小寫
text-transform 大小寫
capitalize 單詞首字母大寫
lowercase 所有單詞字母小寫
uppercase 所有單詞字母大寫
none 沒有
p{
/* text-transform: capitalize; */
/* text-transform: lowercase; */
text-transform: uppercase;
}
2. 列表屬性
- list-style-type 定義列表符合樣式
list-style-type:disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉符號)
- list-style-image 將圖片設定為列表符合樣式
list-style-image:url();
- list-style-position 設定列表項標記的放置位置
list-style-position:outside; 列表的外面 預設值
list-style-position:inside; 列表的裡面
- list-style 縮寫
list-style:none; 去除列表符號