CSS中的几个重要基本属性代码详解大全

 2013-07-10 22:00:10   评论   648次浏览

1、Margin 和 padding 属性代码

讲解:margin 是外边距标签,padding 是内边距标签。它们有一个共同点,就是都可以定义四个方向的位置:top、right、bottom、left。这里为什么先写 right,后写 left 呢?举个例子说明下吧。例:margin:1px 2px 3px 4px;这里的四个参数代表的意思分别是:外边距距离上面 1px,外边距距离右边 2px,外边距距离下面 3px,外边距距离左边 4px。

测试:padding:1px 2px 3px 0;

当然,也有些特殊情况,例:margin:3px 4px;这里只定义了两种参数,那这又是什么意思呢?其实原理是一样的,这里的 3px 代表的是外边距距离上面

和下面为 3px,4px 代表的是外边距距离右边和左边为 4px。这下子明白了吧!

测试:padding:0px 3px;

最后,还有一种特殊的情况,例:margin:0px。这下子大家可能又迷糊了,这又代表什么意思呢?不用急,对照上面两种情况想想,你一定可以发现,其实原理是一样的,这里的 0px 代表的是外边距距离上、右、下、左都为 0px。

测试:padding:10px;

下面介绍一种在后面用得比较多的一个相当重要的代码:margin:0 auto; 居中当然,margin 和 padding 的用法还不止这些,假如我们想只定义外边距距离上面的距离为 5px,那定义方法又如何呢?小编来告诉你:margin-top:5px;相同,如果我只想定义外边距距离下面的距离呢?这个相信学到这儿的你一定可以轻松解决了。

 

2、border 属性代码

 

讲解:border 是边框代码,可以用来定义边框的大小粗细、颜色之类的属性代码。例:border:1px solid #000000; 其中,1px 代表边框的粗细为 1px,一般我们做网站的时候是设为 0px 的;solid 代表边框为实线,(dashed 代表虚线,dotted 代表点线);#000000 代表边框的颜色。当然,我们也可以分开定义边框:

例:定义上边框为 1px,虚线,白色

答:border-top:1px dashed #ffffff;

测试:定义左边框为 5px,点线,黑色

 

3、background 属性代码

 

讲解:background 是背景属性代码,可以定义背景的颜色、图片、位置以及重复方式等等。这里主要讲解常用的四种属性代码:

background-color:#000000; 背景颜色

 

background-image:url() ; 背景图片

 

background-position: 背景位置

 

background-repeat 背景的重复方式

 

4、clear、color 和 direction 属性代码

 

讲解:clear 清除代码,color 颜色代码,direction 方向代码。

 

5、display:#属性代码

 

讲解:display 即显示方式隐藏代码,#可以设置成 hidden(隐藏)

 

6、float 属性代码

 

讲解:float 浮动代码,主要用到的两种方式为 left 和 right,这里的用法也是很有讲究的,用法不当,很有可能导致整个网站错位。

 

例:现在准备开发班班网,首页有一个框架,分为左中右三块,这里我要设置浮动,我们应该怎么设置呢?

 

答:这是我们在做网站经常遇到的一种情况,而这种答案也肯定是唯一的,

 

我们应该将左边的模块设置成:float:left,将中间的模块设置成:float:left,将右边的模块设置成:float:right。从这个例子我们可以发现,不管有多少个模块,我们都必须把前面的 N-1 个模块的浮动效果设置成 float:left,而将最后第 N 个模块的浮动效果设置成 float:right。

 

7、font 属性代码

 

讲解:在上面,我们已经接触到 font 代码里,这里将更深一步的讲解下 font代码。font-family:字体, 这里有个比较特殊的字体,Microsoft Yahei 微软雅黑,这个要记住哦。)font-size,定义字体的大小;font-weight:bold,定义字体粗细

 

(normal 为正常)

 

8、z-index 属性代码

 

讲解:z-index 代表元素的堆叠顺序,它的取值范围为:-999~999,取值的数字越大,越靠上,而且这个参数只有在 position:absolute(绝对位置)的情况下才能生效。

 

9、letter-sapcing:1px; 字符间距

 

line-height:22px; 行距

 

10、overflow:#属性代码

 

讲解:overflow:#代表超出对象指定的高度和宽度时候如何显示内容,#处常用的三种参数如下:hidden(隐藏)auto(自动)scroll(滚动)

 

11、text-align 属性代码

 

讲解:text-align 代表文字的对齐方式,常用的对齐方式有 left(左)right

 

(右)center(居中)。

 

text-decoration:underline; 文字的装饰

 

underline 下划线

 

align 水平对齐方式

 

vertical-align 垂直对齐方式

 

 

12、style 样式

 

inherit 继承

 

 

其实主要的属性代码也就这些,具体的我们在操作中要灵活使用,本文地址:http://www.jinshare.com/2013/07/biaoqian/

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: