顏色單位
RGB用法
.box{
width:200px;
height:200px;
background-color:rgb(255,0,255)
}
255是最大，0最小
.box{
width:200px;
height:200px;
background-color:rgb(100%,0%,100%)
}
100%百分百最大锐秦，跟255方式一樣
.box{
width:200px;
height:200px;
/*background-color:#ff0000;*/
background-color:#f00;
}
十六進(jìn)制寫(xiě)法,數(shù)字越小顏色越深,如果兩位都是一樣的可以簡(jiǎn)寫(xiě),不一樣的必須寫(xiě)完整
字體樣式
.p1{
color:red;
font-size:30px;
}
如果設(shè)置字體像素為30咪奖，那就是30px，如果沒(méi)有設(shè)置就默認(rèn)16px酱床。
.p1{
color:red;
font-size:30px;
font-family:arial;
}
英文字體是不包含中文字體的羊赵，瀏覽器就會(huì)默認(rèn)一個(gè)字體
.p1{
color:red;
font-size:30px;
font-family:華文彩云,arial,微軟雅黑;
}
設(shè)置多個(gè)樣式要用逗號(hào)分隔
先使用華文彩云字體，如果沒(méi)用到斤葱，就用arial慷垮，如果沒(méi)用到揖闸，就用微軟雅黑揍堕，如果還沒(méi)用到，瀏覽器會(huì)默認(rèn)一個(gè)字體
.p1{
color:red;
font-size:30px;
font-family:"Segoe Script";
}
因?yàn)樽煮w名稱(chēng)中間有空格汤纸，必須要用引號(hào)引起來(lái)
字體其它樣式
style
.p1{
color:red;
font-size:30px;
font-family:微軟雅黑;
font-style:italic;
}
italic 斜體的字體樣式
oblique 跟italic字體樣式差不多衩茸，只不過(guò)這個(gè)是傾斜的字體樣式
默認(rèn)normal瀏覽器的一個(gè)標(biāo)準(zhǔn)樣式
inherit 規(guī)定從父元素繼承字體樣式
weight
.p1{
color:red;
font-size:30px;
font-family:微軟雅黑;
font-style:italic;
font-weight:bold;
/*font-weight:400;*/
}
bold 定義粗體字符
bolder 定義更粗的字符
lighter 定義更細(xì)的字符
默認(rèn)normal瀏覽器標(biāo)準(zhǔn)的字符
也可以用數(shù)值定義 （100-900）
variant
.p1{
color:red;
font-size:30px;
font-family:arial;
font-style:italic;
font-variant:small-caps;
}
小型大寫(xiě)字母
字體樣式簡(jiǎn)寫(xiě)
.p1{
font:italic bold small-caps 30px '微軟雅黑';
}
不同的樣式要用空格隔開(kāi)
行間距
line-height
.p1{
width:200px;
height:200px;
line-height:200px;
}
要想設(shè)置垂直居中，height多高贮泞，行高就設(shè)置多高
text-transform
默認(rèn)文本樣式
p{
text-transform:none;
}
capitalize 文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭楞慈。
p{
text-transform:capitalize;
}
uppercase 定義僅有大寫(xiě)字母。
p{
text-transform:uppercase;
}
lowercase 定義無(wú)大寫(xiě)字母啃擦，僅有小寫(xiě)字母囊蓝。
p{
text-transform:lowercase;
}
text-decoration
默認(rèn)文本樣式
p{
text-decoration:none;
}
underline 定義文本下的一條線。
p{
text-decoration:underline
}
overline 定義文本上的一條線
p{
text-decoration:overline;
}
line-through 定義穿過(guò)文本下的一條線令蛉。
p{
text-decoration:line-through;
}
去除超鏈接的下劃線
a{
text-decoration:none;
}
letter-spacing用來(lái)設(shè)置字符之間的間距
p{
letter-spacing:10px
}
work-spacing用來(lái)設(shè)置單詞之間的間距
p{
work-spacing:10px
}
對(duì)齊文本
text-align
可選值
1.left : 左對(duì)齊
2.right: 右對(duì)齊
3.justify: 兩邊對(duì)齊
4.center: 居中對(duì)齊
p{
text-align:left;
}
在left處更換可選值right justify center
首航縮進(jìn)
text-indent
p{
text-indent:32px;
}
沒(méi)有設(shè)置字號(hào)聚霜，瀏覽器默認(rèn)16px;
如果我就想制作無(wú)論字號(hào)多大就縮進(jìn)兩個(gè)字的就要em單位
注：1em = 1font-size;
p{
text-indent:2em;
font-size:30px;
}
