css的基本操作之背景样式
字体的复合样式
<!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{ width: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{ width:100px; height:100px; border:1px solid deepskyblue; } .div4{ width: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>