首页 > 代码库 > 9.9下午学习内容
9.9下午学习内容
---恢复内容开始---
样式表
一、大小
1.width 宽度
2.height 高度
<div style="width:200px; height:200px"></div> 样式和属性不同，数字后面要加上单位px或者%。
二、背景
1.背景色：background-color
<div style="width:200px; height:200px; background-color:#33C"></div>
2.背景图：background-image
<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg)"></div>
3. 背景图平铺方式：background-repeat
<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat"></div> 表示不平铺。
4.背景图片平铺位置：background-position
<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left bottom"></div> 表示背景图在左下角（也可以直接是left、right、bottom、center、top）平铺，
<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left 20px bottom 20px"></div> 表示背景图片距离左和下各20像素的距离平铺。
5.背景图是否随着页面的滚动而滚动：background-attachment
<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left 20px bottom 20px; background-attachment:fixed"></div> 表示背景图片固定住，不随页面滚动而滚动。将fixed换成scroll，背景图片会随着页面滚动而滚动。
6.背景图片大小： background-size
<div style="width:1000px; height:800px; background-color:#33C; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left 20px bottom 20px; background-attachment:fixed; background-size:200px 200px"></div> 表示背景图片的大小为200px × 200px ，auto表示自动的。
三、字体
1.字体样式 font-family，一般选用电脑常见字体，如微软雅黑和仿宋。<div style="font-family:微软雅黑">文字</div>
2.字体大小 font-size 一般在网页里面常用的比较小的字体是12px，正常阅读的文字的大小是14px，16px也可以用，但是一般阅读的类型的不要超过16px。
<div style="font-family:微软雅黑; font-size:18px">测试文字</div>
3.字体样式 font-style italic表示倾斜
<div style="font-family:微软雅黑; font-size:18px; font-style: italic">测试文字</div>
4.字体粗细 font-weight bold表示加粗
<div style="font-family:微软雅黑; font-size:18px; font-style: italic; font-weight:bold">测试文字</div>
5.装饰线 text-decoration underline表示下划线 overline表示上划线 line-through表示删除线 none表示没有，经常用来去掉超链接的下划线。
<div style="font-family:微软雅黑; font-size:18px; font-style: italic; font-weight:bold; text-decoration:underline">测试文字</div>
6.字体颜色 color
<div style="font-family:微软雅黑; font-size:18px; font-style: italic; font-weight:bold; text-decoration:underline; color:#F00">测试文字</div>
四、对齐方式
1.水平对齐方式 text-align
<div style="width:200px; height:200px; color:#FFF; text-align:center">测试文字</div>
2.垂直对齐方式 vertical-align 配合行高（line-height）使用。
3.行高 line-height
<div style="width:200px; height:200px; background-color:#F00; color:#FFF; text-align:center; vertical-align:middle; line-height:200px">测试文字</div>
4.缩进 text-indent 单位：像素
<div style="width:200px; height:200px; background-color:#F00; color:#FFF; text-align:center; vertical-align:middle; line-height:200px; text-indent:30px">测试文字</div>
五、边界与边框
1.外边距 margin 方向：上右下左 顺时针
<div style="width:300px; height:300px;
<div style="width:200px; height:200px; background-color:#CF9; margin:10px 0px 0px 10px; float:left"></div>
</div>
float为流向，在以后的布局中会学，在这不加上边距不起作用。
2.内边距 padding 方向：上右下左 顺时针
如果加了内边距，改元素会相应的变大。
3.边框 border border代表四个方向全有。
div style="width:200px; height:200px; border:1px solid #60F"></div>
1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
9.9下午学习内容