样式代码的学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #a1{ width:100px; height:30px; color:#C03; text-decoration:none; color:#000} #b1{ width:300px; height:300px; background-color:#03F; text-align:center; vertical-align:middle; line-height:300px; } #c1{ width:104px; height:40px; background-color:#00F; color:#FFF; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;} #wai{ width:300px; height:300px; background-color:#06F;} #nei{ float:left; width:300px; height:300px; margin:20px 30px 20px 30px; padding:40px 0px 0px 10px;} #li{ width:100px; height:100px; background-color:#F66;} *{ margin:opx auto; padding:opx;} </style> </head> <body> <div style="width:200px; height:200px; background-color:#F00; background-image:url(%E5%9B%BE%E7%89%87/20151735511316.jpg); background-repeat:no-repeat; background-position:left; background-size:600px 600px" >测试内容 </div> <div style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:16px; font-weight:bold; font-style:italic; color:#309; text-decoration:underline;">百度胡椒粉</div> <br/> <a id="a1" href="http://www.baidu.com">嘚瑟</a> <div id="b1">搜狗</div> <br/> <div id="c1">百度一下</div> <p style=" text-indent:31px; text-height:50px;">那就看房屋内即可妇女节而渴望能放假客服呢我姐夫呢我就开放你家恩我看你飞机而开发能解开我即可访问空间分房间诶我靠你放假渴望能分解诶我靠你放假渴望能分解啃饭金额为库房内即可为女方家我肯讲课费老玩家福利卡文件反馈了飞机客立方可为 </p> <div id="wai"> <div id="nei"> <div id="li"> </div> </div> </div> </body> </html>
一 控制大小
<div style="width:..px(在样式里加单位，属性里不用)
二 背景
backgound-color
-imge
-repeat
-postion
-size
三 控制字体
font-size:像素控制大小，常用字体大小分为：1. 12px 2. 14px (网页常用大小) 3. 16px
-weight: bold 加粗
-style：italic 倾斜
color:
text-decoration:underlin
e(下划线) overline(上划线) line-through(删除线)
对齐方式跟衡高配合使用
首行缩进
<p style="text-indent =...px; text-height:...px文本高度
内边距加了会变大，减去高度宽度的PX成比例
*{margin:opx auto; padding :pox}所有元素内外清掉并居中
