要点：




一、颜色属性


demo.html

<!doctypehtml><html><head><title>CSS的颜色属性的四种方式</title><metacharset="utf-8"><styletype="text/css">body{color:red}.c1{color:#ff6600}.c2{color:rgb(0,0,255)/*红(R)、绿(G)、蓝(B)每个的取值范围0~255*/}.c3{color:rgba(0,100,0,0.4)/*RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的(色彩空间)透明度(0-1)*/}</style></head><body><p>这是第一种方式</p><pclass="c1">这是第二种方式</p><pclass="c2">这是第三种方式</p><pclass="c3">这是第四种方式</p></body></html>


二、字体属性


demo.html

<!doctypehtml><html><head><title>CSS的字体属性</title><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="style.css"></head><body><pclass="c1">字体大小20px</p><pclass="c2">楷体</p><pclass="c3">加粗</p><pclass="c4">斜体</p></body></html>


style.css

p.c1{font-size:50px}p.c2{font-family:KaiTi,SimSun/*可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个*/}p.c3{font-weight:bold/*font-weight字体加粗,normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)*//*另外一种方式：100、200、300~900，400=normal，而700=bold，只能整百*/}p.c4{font-style:italic/*normal:标准italic:斜体oblique:倾斜inherit：继承*/}


三、背景属性



四、文本属性


五、边框属性


（1）边框风格：



（2）边框宽度：



（3）边框颜色：



（4）组合方式（简写方式如上图）


demo.html

<html><head><title>CSS常见属性(边框属性)</title><metacharset="utf-8"><styletype="text/css">div{width:70px;height:70px;float:left;margin-right:20px;background-color:rgb(250,128,10);}.div1{border:solid2pxgreen;}}.div2{border-style:dashed;border-width:4px;border-color:blue;}.div3{border-top-style:solid;border-bottom-style:dashed;border-left-style:dotted;border-right-style:double;border-top-width:thin;border-bottom-width:2px;border-color:redgreenblueyellow;}.div4{width:40px;height:40px;border-width:20px;border-style:ridge;}</style></head><body><divclass="div1"></div><divclass="div2"></div><divclass="div3"></div><divclass="div4"></div></body></html>


六、列表属性



demo.html

<html><head><title>CSS常见属性(列表属性)</title><metacharset="utf-8"><styletype="text/css">ul.ul1{/*当图片list-style-p_w_picpath和标记类型list-style-type同时存在时，一图片为先，图片不存在则使用list-style-type*/list-style-type:square;list-style-position:inside;list-style-p_w_picpath:url(p_w_picpaths/arr.gif);}ul.ul2{list-style:discoutsideurl('p_w_picpaths/arr.png')}</style></head><body><ulclass="ul1"><li>无序列表1</li><li>无序列表2</li><ulclass="ul2"><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li><li>无序列表4</li></ul><li>无序列表3</li><li>无序列表4</li></ul></body></html>