1.宽高
100px; 宽
height:100px; 高
2.背景
background-color: #fff; 背景色
background-image: url(./img.jpg); 背景图(默认平铺)
background-repeat: repeat-x/no-repeat; 背景图平铺
backgroung: #fff url(img.jpg) no-repeat; 颜色 背景图 平铺
background-size: auto/cover; 背景图尺寸
background-attachment: scroll/fixed; 随滚动条动 固定(背景窗口内)
background-position: bottom right/10px 10px; 背景图定位 上下 左右
<head> <style> div{ width:350px; height:260px; background:#888 url(./image/VNlogo.jpg) no-repeat; background-attachment:fixed; background-position: 50px 50px; } </style> </head> <body> <div></div> </body>
3.文本
color:red; 文本颜色
text-align:left/center/right; 水平对齐
font-size:12px; 字体大小 通用
line-height:50px; 行高 50px 垂直居中
font-family:'微软雅黑' 字体 通用
font:14px/20px '微软雅黑' 字体大小 行高 字体
text-decoration:underline/overline/linethrough/none; 划线
font-weight:normal/bold; 加粗
font-style:normal/italic; 倾斜
text-indent:40px; 缩进(标签内部继承)
text-transform:uppercase/lowercase/capitalize; 大写 小写 首字母大写
text-shadow:10px 10px 10px red; 水平 垂直 模糊 颜色 文字阴影
letter-spacing:-1px; 字符间距
<head>
<meta charset="utf-8">
<style> div{ color:red; text-align:center; font:20px/50px '微软雅黑';} </style> </head> <body> <div>哈哈哈哈哈哈哈哈哈哈<br>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</div> </body>
4.列表
list-style-type:circle/square/none; 无序列表 标记
list-style-type:upper-roman/lower-alpha; 有序列表 大写罗马 小写英文
list-style-image:url('./a.jpg'); 列表标记图
list-style:square url("sqpurple.gif"); 形状 图片
<head> <meta charset="utf-8"> <style> div li{ list-style-type:square; } </style> </head> <body> <div> <ul> <li>哈哈</li> <li>嘿嘿</li> <li>呼呼</li> <li>呵呵</li> </ul> </div> </body>