字体的复合样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景样式</title> <style>/*字体的复合样式font:style weight size(复合样式的必写项) family（复合样式的必写项）*/ #div2{ font:italic bolder 40px 宋体 ; }</style> </head> <body> <div id="div2">hello world</div> </body> </html>
背景图片的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景样式</title> <style> /*背景样式：背景图片*/ #div1{ 100%; height:5000px; border:1px solid skyblue; /*背景图片 默认是平铺状态*/ /*background-image:url("../html/D15FF716E537D2194F048FB13540A707.jpg ");*/ /*背景图片的是否平铺：默认是平铺repeat,不平铺为no-repeat*/ /*background-repeat:no-repeat;*/ /*背景图片的定位：position*/ /*background-position:200px 200px;*/ /*背景图片的大小控制：size*/ /*background-size:400px 400px;*/ /*背景图片的等比例缩放，这中情况图片是完全可见的，但是不一定铺满背景*/ /*background-size:contain;*/ /*背景图片铺满整个背景，这个时候图片可能是残缺的*/ /*background-size:cover;*/ /*复合样式 background:color image repeat position/size(如果写在/的前面，就是定位，如果写在/的后面，就是设置大小)*/ background:url("../html/D15FF716E537D2194F048FB13540A707.jpg ") no-repeat top/cover; } </style> </head> <body> <div id="div1"></div> </body> </html>
将多个块级标签变成一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景样式</title> <style> .div3{ 100px; height:100px; border:1px solid deepskyblue; } .div4{ 100px; height:100px; border:1px solid deepskyblue; } /*将多个块级标签变成一行*/ /*display:inline inline-block block*/ div{ display:inline; } </style> </head> <body> <div class="div3">hello world</div> <div class="div4">hello world</div> </body> </html>