背景的属性:
Background-color:背景颜色 例如:background-color:#ff0000;background-color:red;
Background-image:背景图片 例如:background-image:url(图片的路径)
Background-repeat:背景图片是否平铺
取值:no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺 repeat横向和纵向都平铺 (默认)
Background-attachment:背景附件,背景是否随着上方的内容一起滚动
取值 :fixed 背景固定 scroll 滚动
例如:background-attachment:fixed;
Background-position:背景图片的展开方式 例如:background-position:水平 垂直;
英文 :水平 left center right 垂直 top center bottom
数值 :正值 负值
例如 background-position:left top;
例如:background-positon:0 0; background-position:10px 20px;
可以简写:Background:背景颜色 背景图片 背景图片是否平铺 (附件通常仅用body标签) 水平 垂直;
注意:只有水平和垂直不能颠倒,其他的属性值可以顺序颠倒
如:<!—设置主体标签, 背景图片 ,纵向平铺 水平居中 垂直距离顶端20px-->
列表:
去掉列表前面的项目符号:list-style-type:none; 可以简写为 list-style:none;
用小图代替列表前面的符号:list-style-image:url(图片的地址)
边框(html标签就可以加边框线):
之前rules=”all” 表格<table>的属性 合并表格的边框线。
Css样式如何实现:合并表格的边框线框:Border-collapse:collapse;
上边框:
1.Border-top-color:颜色值;上边框的颜色
2.Border-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
3.Border-top-width:粗细;例如border-top-width:2px;
简写为:Border-top:粗细 线型 颜色;
下、左、右边框以此类推。
内填充(内边距)padding:
盒子模型
内容区:width 和height
边框 border
内容和边框之间的距离
1.Padding-top:数值;内容和上边框之间的距离
2.Padding-right:数值;内容和右边框之间的距离
3.Padding-bottom:数值;内容和下边框之间的距离
4.Padding-left:数值;内容和左边框之间的距离
简写形式:
Padding:10px 20px 30px 40px; 上边框距离10px 右 20px 下边框 30px 左 40px
Padding:10px 20px 30px; 上10px 左右 20px 下 30px
Padding:10px 30px; 上下10px 左右 30px
Padding:10px; 上右下左都是10px
外填充(外边距)margin:
简写为:
Margin:10px 20px 30px 40px; 上边框以外的10px 右是20px 下30px 左40px
Margin:10px 20px 30px; 上边框以外的10px 左右是20px 下是30px
Margin:10px 20px; 上下为10px 左右为20px
Margin:10px; 上右下左都是10px
网站布局的一个思想:
网站的结构就是两部分(横向和纵向) :
如果是纵向排列的,就是正常的文档流,设置内容器的宽度和高度,设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以。
如果是横向排列,我们就要使用浮动。
浮动:
float:left;
float:right;
浮动的特点:
设置浮动的元素,不占空间。
设置浮动的元素层级高于普通元素。
设置浮动之后,无论之前是否是块元素,设置浮动之后一定是块元素 。
如果在一行中的元素想横向排列,都设置浮动就可以。
通常情况下div里面还有div (外面的div父盒子,)盒子里面还有盒子。
如何让盒子在页面水平居中:
Margin: xx auto;
1.例如:margin: 0 auto;
2.Margin-left:auto; margin-right:auto;
vertical-align 属性:
设置元素的垂直对齐方式。
如:
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="../i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="../i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
效果如下: