常用css布局样式属性

    科技2025-08-18  14

    样式属性

    写一个简单的小例子熟悉一下常用属性,娱乐一下,仅供大家参考

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用属性</title> <style> div{ /* background: url(images/logo.png):设置元素的背景图片设置背景图片, no-repeat,拉伸当前的显示的这个图片*/ background: url("img/pic.png") no-repeat; /* 设置元素(标签)的宽度 */ width: 450px; /* 设置元素(标签)的宽度 */ height: 450px; /* 设置标签的四周边框是10像素宽的红色实线 */ border: 10px red solid; /* 设置浮动,分为左浮动和右浮动 */ float: left; } .p{ /* color 设置文字的颜色 */ color:saddlebrown; /* font-size 设置文字的大小 */ font-size: 50px; /* font-family 设置文字的字体 */ font-family: 'Times New Roman', Times, serif; /* font-weight 设置文字是否加粗 */ font-weight: bolder; /* line-height 设置文字的行高,line-height:24px:表示文字高度加上文字上下间距是24px,即每一行占有的高度是24px */ line-height: 10px; } /* span标签可以给文本中的一小段内容设置样式 */ span{ color: sandybrown; font-size: 80px; } </style> </head> <body> <p class="p"><span></span>啥?</p> <div>瞅你咋地</div> </body> </html>

    执行结果:

    Processed: 0.010, SQL: 8