CSS文字屬性
長度單位:
· px:像素,相當于設備(顯示器)的長度單位。相對單位
· em:文字長度的幾倍甥捺,默認1em=16px。相對定位
· { in(英寸)镀层,cm(厘米)皿曲,mm(毫米),pt(點數(shù))吴侦,pc(印刷單位)}屋休。絕對定位
rgb控制顏色:
· 百分比:color:rgb(100%,100%,100%);
· 0-255:color:rgb(0-255,0-255,0-255);
·16進制:color:#00ff00;
rgba控制透明度
· 百分比:color:rgba(100%,100%,100%,0-1);
· 0-255:color:rgb(0-255,0-255,0-255,0-1);
字體
·設置字體 font-family:字體;多個字體用逗號隔開
p{
font-family: Arial, "Times New Roman";
}
·字體大小 font-size: px;(em 默認字體的幾倍);
p{
font-size: 12px;
}
·文字傾斜 font-style: normal正常 / oblique偏斜體 / italic斜體
p{
font-style: italic备韧;
}
·字體加粗 font-weight: normal正常 / bold比正常字體粗 / bolder比blod字體粗 / lighter比正常字體細劫樟;100 ~ 900 共有9個層次,數(shù)字越大越粗织堂。
p{
font-weight: bold叠艳;
}
·文字顏色 color:red;
p{
color:red;
}
·背景顏色 background:red;
p{
background:red;
}
·單詞間距 word-spacing:-1px;
p{
word-spacing:-1px;
}
·字母間距 letter-spacing:10px;
p{
letter-spacing:10px;
}
·段落首行縮進 text-indent: 數(shù)值px/2em(兩個字的間距)
p{
text-indent: 2em;
}
·文字裝飾 text-decoration: none;正常顯示 / underline;加下線 / line-through;刪除線 / overline;加頂線
p{
text-decoration:underline;
}
·英文字母大小寫轉換 text-transform: capitalize;首字母大寫 / uppercase;全部大寫 / lowercase;全部小寫
p{
text-transform: capitalize;
}
·垂直對齊 vertical-align:top頂部 / bottom底部 / middle居中;在目前瀏覽器中只能對表格單元格中的對象進行豎直方向的對齊設置易阳,而對于一般的塊級元素附较,例如div等,不起作用潦俺。
td{
vertical-align:top;
}
·文字垂直對齊居中 line-height:height相同拒课;
p{
height:30px;
line-height:30px;
}
·文字的水平對齊 text-align: left左對齊,默認 / right右對齊 / center居中對齊 / justify兩端對齊
p{
text-align:center;
}
CSS背景與列表屬性
·背景圖像 background-image:url(路徑);背景圖像所在的元素一定要設置寬和高
div{
background-image:url(img/1.jpg);
}
·背景重復 background-repeat: repeat平鋪排滿,默認 / /repeat-x水平方向平鋪 / repeat-y垂直方向平鋪 / no-repeat不平鋪
div{
background-repeat: no-repeat事示;
}
·背景圖片位置 background-position: 水平方向 垂直方向捕发;
水平方向:left center right ;
垂直方向:top center bottom很魂;
可以用數(shù)字;
div{
// background-position: right top;
background-position: right 20px;
}
·背景圖片復合屬性 background: 路徑 平鋪方式 位置信息扎酷;
div{
background:url(img/1.jpg) no-repeat left 200px;
}
·背景圖片位置固定 background-attachment: scroll滾動 / fixed固定不變;
div{
background-attachment: scroll;
}
·ul列表樣式list-style-type:none沒有樣式/disc實心圓/circle空心圓square正方形遏匆;
ul{
list-style-type:none;
}
·ol列表樣式list-style-type:decimal1,2,3…/ upper-alphaA,B,C.../lower-alpha a,b,c.../upper-roman I,II,III,IV.../lower-roman i,ii,iii,iv,v.../none不顯示
ol{
list-style-type:none;
}
·列表項目標記的位置list-style-position:inside/outside;
inside 列表項目標記放置在文本以內法挨,且環(huán)繞文本根據(jù)標記對齊。
outside 默認值幅聘。保持標記位于文本的左側凡纳。列表項目標記放置在文本以外,且環(huán)繞文本不根據(jù)標記對齊帝蒿。
ul{
list-style-position: inside;
}
·列表項目標記的圖像list-style-image:url(路徑)/none沒有;
ul{
list-style-image:url(img/1.jpg)
}
·邊框
border-width:(粗線)
border-color:(顏色)
border-style:solid實線 / dashed虛線 / dotted點線 (線型)
border-left, (左邊框)
border-right,(右邊框)
border-top,(上邊框)
border-bottom,(下邊框)
border-right-color (右邊框顏色)
div{
// border: 1px solid red;
border-right-color:1px solid red;
}
·設置寬高
width: 百分比/像素(px)
height:百分比/像素(px)
div{
width:100px;
height:100px;
border: 1px solid red;
}
·圖片與文字的對齊方式
橫向對齊 text-align: left/ right/ center
圖片的水平對齊通常不能直接通過設置圖片的text-align屬性荐糜,而是通過設置其父元素的該屬性值來實現(xiàn)的。
縱向對齊 vertical-align: top/ bottom/middle
在默認情況下葛超,行內的圖像在最下端暴氏,將與同行的文字的基線對齊。
圖像的上或者下端將不在按照默認的方式與基線對齊
div{
text-align: right;
}
img{
vertical-align: middle;
}