本文深入讲解了CSS在网页布局中的应用技巧，包括盒模型、内联与块级元素的区别、定位方式的选择、Class与ID的合理运用及CSS的三大规则等核心概念。
基于web标准设计网站,与以往的设计方式不同.利用CSS布局来代替传统的表格布局.可以实现表现与内容的分离.让我们开发和维护更加的方便.还可以减少代码量.反正有诸多好处.
一. CSS对于一个DIV的控制.(盒模型)
一个DIV中,通常会有一个class来标识这个块,CSS就是通过这个Class来控制DIV.
主要的属性有下面几个:
<html>
<head>
<style type=”text/css”>
Body{margin:0;}
.test{
Width:30px;
Height:50px;
Margin:50px 50px 50px 50px à以顺时针方向来定义外边距.
Padding:30px à来定义内边距.也可以使用padding-left属性来只指定左边距.
Background:url color no-repeat(repeat-x/y) right botton(center)
|
à用来指定背景的属性.分别是背景的url路径.颜色(可以用缩写,比如#336699写成#369),是否重复显示(横/纵向),和显示位置.
Border:1px solid/dotted green; à指定边框粗细,样式(实线/虚线) 颜色
}
</style>
</head>
<body>
<div class = “test”>
……
</div>
</body>
</html>
二. 内联元素和块级元素.
在同一行里显示的是内联元素.自动换行的是块级元素.主要用于排版页面,需要根据不同的元素做出不同的处理.
三. 绝对定位和相对定位.
不采用任何绝对定位,使用相对定位(经验).
四. Class和id的区别
Id一个页面只能使用一次.Class可以多次引用.
Id是一个标签,用于区分不同的结构和内容.Class是一个样式.
Id是先找到结构和内容,再给它定义样式.Class是先定义好一种样式,然后再找结构和内容.可以复用的用class定义,不复用的用id定义.建议所有的样式都用Class.
五. CSS三大规则.
1.块级元素的横向排列要浮动(设置float属性为left或其他).
2.不需要浮动时使用clear:both(清除浮动float,恢复原来属性.)
3.所有非内容图片全部用背景(显示的时候不会把背景当图片显示完了内容才出来).
总结:
大体对CSS又有了一个深刻的理解,以前也了解过CSS,但是那是很肤浅的应用.更多的理解将会在实际项目中去体会到.UP!
扫一扫
2679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
