<!DOCTYPE html><head><title></title><styletype="text/css">/*class选择器*/.lv{color:red;}/*<!--元素选择器-->*/div{color: blue;}/*<!--id选择器-->*/#lvye{color: coral;}/*<!--子元素选择器-->*/#father2 #p1{color:red;}/*<!--相邻选择器-->*/#lv+div{color:black;}/*<!--群组选择器-->*/h3,div,span{color:pink;}/*<!--字体属性-->*/#p3{font-family:宋体;}#p4{font-family:微软雅黑;}/*<!--字体大小-->*/#p5{font-size:small;}#p6{font-size:medium;}#p7{font-size:large;}#p8{font-size:10px;}#p9{font-size: 15px;}#p10{font-size:20px;}/*<!--字体粗细-->*/#p11{font-weight:lighter;}#p12{font-weight:normal;}#p13{font-weight:bold;}#p14{font-weight:bolder;}/*<!--字体斜体样式-->*/#p15{font-style:normal;}#p16{font-style:italic;}#p17{font-style:oblique;}/*定义下划线之类的*/#p18{text-decoration:underline;}#p19{text-decoration:line-through;}#p20{text-decoration:overline;}/*转换英文的大小写*/#p21{text-transform:uppercase;}#p22{text-transform:lowercase;}#p23{text-transform:capitalize;}/*段落缩进2个*/#p24{font-size:14px;text-indent:28px;}/*对齐方式*/#p25{text-align:left;}#p26{text-align:center;}#p27{text-align:right;}/*行高*/#p28{line-height:14px;}/*字间距*/#p29{letter-spacing: 14px;}/*边框*/#p30{border-color: purple;border-width: 15px;border-style: inset;}/*背景颜色*/#p31{background-color: rebeccapurple ;}/*背景图片*/#p32{background-image:url(http://www.lvyestudy.com/App_images/lessonList/collection.png);width: 150px;height: 100px;}/*超链接的效果*/a{text-decoration:none;font-size:18px;}a:link{color:black}a:visited{color: purple;}a:hover{color: pink;text-decoration:underline;}a:active{color:red;}/*鼠标样式*/#div_default{cursor:default;}#div_pointer{cursor:pointer;}#p33{display:inline-block;}/*将块元素转换为inline-block元素*/</style></head><body><hr/><h3>元素选择器</h3><div>元素选择器</div><!--class选择器--><pclass="lv">class选择器</p><divid="lvye">id选择器</div><spanclass="lv">class选择器</span><hr/><divid="father2"><pid="p1">子元素1</p><pid="p2">子元素2</p><span>子元素span</span></div><hr/><!--相邻选择器--><divid="lv"><p>子元素</p></div><div>子元素相邻的元素</div><!----><hr/><pid="p3">字体为宋体</p><pid="p4">字体为微软雅黑</p><hr/><pid="p5">字体大小为“small(小)”</p><pid="p6">字体大小为“medium(正常)”</p><pid="p7">字体大小为“large(大)”</p><pid="p8">字体大小为10px</p><pid="p9">字体大小为15px</p><pid="p10">字体大小为20px</p><hr/><pid="p11">字体粗细为:lighter</p><pid="p12">字体粗细为:normal(正常字体) </p><pid="p13">字体粗细为:bold</p><pid="p14">字体粗细为:bolder </p><hr/><pid="p15">字体样式为normal</p><pid="p16">字体样式为italic </p><pid="p17">字体样式为oblique</p><hr/><pid="p18">这是“下划线”效果</p><pid="p19">这是“删除线”效果</p><pid="p20">这是“顶划线”效果</p><hr/><pid="p21">大写:Rome was't built in a day.</p><pid="p22">小写:Rome was't built in a day.</p><pid="p23">仅首字母大写: Rome was't built in a day.</p><hr/><pid="p24">首行缩进的段落</p><hr/><pid="p25"><strong>左对齐</strong>:好好学习,天天向上。</p><pid="p26"><strong>居中对齐</strong>:好好学习,天天向上。</p><pid="p27"><strong>右对齐</strong>:好好学习,天天向上。</p><hr/><pid="p28">行高测试</p><hr/><pid="p29">Rome was't built in a day.罗马不是一天建成的。</p><hr/><hr/><divid="p30"><p>测试一下边框</p></div><hr><divid="p31"><p>测试一下背景颜色</p></div><hr><divid="p32"><p>背景图片测试</p></div><hr><ahref="https:://www.baidu.com">百度一下,会变样子</a><hr><divid="div_default">鼠标默认样式</div><divid="div_pointer">鼠标手状样式</div><hr><pid="p33">盒子模型</p></body></html>