简单工具:sublime Firebug
浮动布局
可以使div并排布局
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
float: left;
}
#div2{
width: 100px;
height: 100px;
background: blue;
float: left;
}#div3{
width: 400px;
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div id="div1">左边</div>
<div id="div2">右边</div>
<div id="div3">普通</div>
效果图:
div1 和div2 漂浮到左边之后,接下来的div被div1和div2所覆盖,怎么解决这样的情况?
*在div3加入属性 clear:left、right、both 不许有漂浮块在上面
页面布局演练:往往我们会在整个页面中声明一个最大块的div
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
① lside和rside在main中漂浮时,main需要设置高度,否则footer不显示 注意:定义id不能用数字,否则没有效果
②当区域无法装下多个漂浮div时,会换到下一行中
注意:文件编码与charset声明的一致
盒子模型
外边距
:盒子与盒子之间的距离 margin ,margin-top,left,right,bottom
单独设置上下左右比较麻烦 ,可以在margin中统一设置,它会顺时针进行设置,没有的选择对边的值。
margin: 10px 20px;
边框
: border
三要素:宽,形状,颜色 border: 5px solid red; border-top,left,right,bottom
也可以单独设置边框的三要素
border-top-style:solid;
border-top-width:9px;
border-top-color: red;
CSS控制边框画三角形:
#triangle{
width: 0px;
height: 0px;
border-top: 50px solid white;
border-left: 50px solid white;
border-right: 50px solid white;
border-bottom: 50px solid yellow;
}
内边距
:(文字)内容到盒子边框的距离 padding 它和margin一样可以上下左右单独设置(共同设置)
当父div中有个子div,要使二者保持距离,是用父div的padding还是用子div的margin?
答:尽量用子div的margin,padding主要用在文字内容上,布局用margin (盒子与盒子用margin 盒子与文字用padding)
** paddding处的颜色就是背景色,因为background一直铺到border边框
**加入padding后盒子会变大,width和height设置的是文字部分的宽高,设置的padding、border和margin都是在这之外显示的
总结:一个div占的面积=width/height+padding+border+margin
应用
*利用margin使div页面自适应水平居中-----在最外面的div 设置 margin:0 auto;* margin重叠现象:相邻的普通元素,上下边距并非普通的相加,而是取其中较大的边距值,这种现象叫做margin重叠
而漂浮float的div之间是不重叠的,而是相加
*内联元素 in-line(行内元素): <span> 只在行内起作用,不换行,设置宽高是没有意义的,竖直方向上不可以设置margin和padding,水平方向上可以设置。
* span和div可以相互转化 display:block; display:inline; 属性是none的话,会隐藏。
CSS控制文本
p标签段落缩进:文本位置 下划线 字间距
text-indent: 20px;text-align: center;
text-decoration: underline;
letter-spacing: 5px;
对文字的控制:
font-style: italic; 斜体font-weight: bold;
font-size: 12px;
line-height: 3px; 行高
font-family: "SimHei";字体
使用一个font可以设定,需按照顺序
标题一般用微软雅黑(无衬线) sans-serif 正文用宋体(有衬线) serif
并且,你选择的字体,客户机可能没有,默认会是宋体。 这时,可以排列多个字体 逗号隔开
背景图片
可以background统一设置:background-image: url("1.png"); /* 倒入图片*/
background-repeat: no-repeat; /* 根据图片大小设置铺排*/
background-attachment : fixed 固定图片位置,滚动滚动条位置不变
background-position: top right; 还有bottom等等属性值
还可以用像素 精确控制 左上角是(0,0)点,控制div较小,可以只显示特定区域的图片
background-position: -150px -190px;
在我们设置路径时,到底是相对哪个文件的路径来找?
在我们采用样式表嵌入式的写法的时候,我们是以当前的index.html网页做相对文件,来设置引入图片的路径,所以设置图片路径的时候只要用
./ 来表示当前同级images文件夹下的图片;但是当我们采用外嵌式的写法,应当是以我们当前的index.css文件所在路径做为相对路径找起。
此时的图片应该为当前index.css文件的上一级css文件夹的同级images文件夹下的图片。
*选择器的优先级不用死记,根据工具(firebug)确定即可
*相同的元素,如li在不同的浏览器下,显示的效果稍有不同,可以通过css强制让所有元素的属性值都一样
*新闻的标题用h标签,段落用p标签
* img标签的使用<img src="" alt="" title="鼠标一上去,显示"> 图片是内联(正常的内联元素不能设置宽高)替换元素,替换元素是能设置宽和高的,可以将其转成块,去掉margin。
有序列表和无序列表
ul和ol的list-style-type一般都设置成none,一般设置背景图片
表格: table tr td
border-collapse : separate | collapse
超链接<a> title属性显示鼠标放上去的内容
<a href="http://www.baidu.com" target="_blank" title="请点击">百度,新窗口打开</a>
<a href="4.html #p1">p1锚点</a>
<a href="4.html #p2">p2锚点</a>
<a href="4.html# p3">p3锚点</a>
<a name="p1"></a> 或者使用id属性
<p >p1 </p>
<a name="p2"></a>
<p >p2</p>
<a name="p3"></a>
<p >p3</p>
伪类
css允许我们对a标签的4种状态设置各自的css特性,叫做cdd伪类a:link a:hover a:active(一般不会写) a:visited
字符实体看手册 如大于号,小于号,人民币符号
尺寸的表示:
①使用像素表示②用百分比表示
px表示文字大小,em是相对大小,指父元素中的1个倍的大小,默认理解为父元素的font-size就是1个em单位
利用行高将文字居中,
行高设置与导航栏(ul嵌li嵌a)的高度一样 line-height:37px;相对定位与绝对定位:
相对定位是指元素在其正常位置,偏移某些尺寸。position: relative;
绝对定位是指相对于父元素的top,left,right,bottom来定位
*但是, 用绝对定位时,父元素要求有position属性才行,否则将依据父的父,父的父......body,哪个祖先有position属性,
相对于哪个祖先,直到body。
父元素 position:relative; 它飘在父元素的上空,不占用位置,想让谁飘在上方,设置z-index,看谁飞的高显示谁
其他:
#nav a{font-size: 16px;
font-family: "楷体";
text-decoration: none;
color: red;
display: block;//将a标签改成块状元素,就可以设置宽和高了
width: 80px;
height: 20px;
text-align: center;//水平居中
line-height: 20px; //竖直居中
}
#nav a:hover{
color:green;
background: url("images/nav_on.gif"); //鼠标放上来时,只改变文字部分的样式,因为a标签是内联元素
}
div宽高:①像素表示②百分比表示:相对于父元素的宽高
字体大小:①像素表示②em表示:em是相对大小,父元素的font-size为1单位em
框架集:
<frameset>和<frame>