About CSS

2007-04-03 02:13:47

　标签：CSS　　　[推送到技术圈]

基于web标准设计网站,与以往的设计方式不同.利用CSS布局来代替传统的表格布局.可以实现表现与内容的分离.让我们开发和维护更加的方便.还可以减少代码量.反正有诸多好处.

一. CSS对于一个DIV的控制.(盒模型)

一个DIV中,通常会有一个class来标识这个块,CSS就是通过这个Class来控制DIV.

主要的属性有下面几个:

<html>

<head>

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>

</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!

相关文章

文章评论