样式属性第三弹
<div style="width:400px; height:400px; background-image:url(../../%E8%AF%BE%E7%A8%8B%E8%80%81%E5%B8%88%E5%AE%9E%E4%BE%8B/10.10%E6%A0%B7%E5%BC%8F%E8%A1%A8/QQ%E5%9B%BE%E7%89%8720161030131800.png);"></div>
上面代码：设置背景图，
背景图这种情况是默认平铺的。在后面再加入
background-repeat:no-repeat;
显示
，这是不平铺，平铺：repeat、不平铺no-repeat、横向平铺repeat-x、纵向平铺repeat-y。
<div style="width:100px; height:100px; background-color:#3C9;"></div>
上面代码：背景色，显示
，但是背景图高于背景色。
<div style="width:100px; height:100px; background-color:#0C0; background-position:center;background-image:url(../../%E8%AF%BE%E7%A8%8B%E8%80%81%E5%B8%88%E5%AE%9E%E4%BE%8B/10.10%E6%A0%B7%E5%BC%8F%E8%A1%A8/QQ%E5%9B%BE%E7%89%8720161030131800.png); background-repeat:no-repeat;"></div>
上面代码：背景图中插入图片是居中的，但repeat必须是no-repeat，显示
，放到上下左右，只需在 background-position后面输入right、top、botton、left就可。
E%E7%89%8720161030131800.png); background-repeat:repeat-y;"></div> <div style="width:100px; height:100px; background-color:#0C0; background-position:;background-image:url(../%E5%9B%BE%E7%89%87/150358666450342800_a580xH.jpg); background-repeat:no-repeat; background-size:80px 80px;"></div>
这个是可以改变插入的图片的大小，
。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式表</title>
<style type="text/css">
#d2{ text-decoration:overline;}
</style>
</head>
<body>
<p id="d2">小孩坏坏</p>
</body>
这个是给文字加入了一条上划线，用的是text-decoration:overline;、
如果加下划线，就在text-decoration后面加underline，删除线就在后面加line-through、而去掉下划线就加none。
#d1{ font-size:16px;
color:#C00;
font-family:宋体;
font-weight:bold;
font-style:italic;}
</style>
</head>
<body>
<div id="d1">你好</div>
上面代码：在样式中改变文字的大小、颜色、字体。显示：
。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式表</title>
<style type="text/css">
a{
width:200px;
height:200px;
background-color:#C30;
text-decoration:none;}
</style>
</head>
<body>
<a href="QQ图片20161030131800.png">超链接</a>
上面代码表示给超链接取消了下划线，加了背景色。显示
。
<p style="text-indent:32px;">
这个是写一段话前面的首行缩进前两个字的代码。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式表</title>
<style type="text/css">
*{ margin:0 auto; padding:0;}
</style>
</head>
这个代码代表所有的内容居中，边距和间距都为0，margin是边距，padding是间距。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式表</title>
<style type="text/css">
*{ margin:0 auto; padding:0;}
</style>
</head>
<body>
<div style="width:600px; height:500px; background-color:#000; padding-top:100px">
<div style="width:400px; height:300px; background-color:#F00; padding-top:100px">
<div style="width:200px; height:100px; background-color:#FFF; padding-top:100px"></div>
</div>
</div>
代码显示：
。
