查看文章
 
有用的css
2008年05月06日 星期二 17:09

<div style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;width:80%">这个属性,设置或检索是否使用一个省略标记,标示对象内文本的溢出。对应的脚本特性为请参阅设置或检索是否使用一个省略标记,标示对象内文本的溢出。拖动缩放IE窗口宽度小于文字长度,你会看到效果</div>

CSS各个参数
2008年05月01日 星期四 14:36

行高 line-height: 16px
宽度 (具体位置)-width: 16px
文字缩行 text-indent: 2px
文字字体 font-family: "华文彩云"
文字颜色 font-color: #ffffff
文字大小 font-size: 21px

文字排列 font-aligh:
left 左对齐
center 居中
right 右对齐
top 顶对齐
bottom 底对齐

边界 margin-top:(允许值:长度,百分比)(边界分为上,下,左,右)
补白 padding-top: (允许值:长度百分比)

顶空格填充, padding-top: 20px;,
底空格填充 padding-bottom: 5px;
左空格填充 padding-left: 100px;
右空格填充 padding-right: 55px

顶边框宽度 border-top-width: 3px
底边框宽度 border-bottom-width: 5px
左边框宽度 border-left-width: 1px
右边框宽度 border-right-width: 1px
边框上 border-top:(允许值,样式颜色,宽度,样式)
下 ………-bottom
左…
右…

边框样式 border-style: none
none(没有) | dotted(有点的) | dashed(虚线) | solid(固体) | double(两倍) | groove( 凹槽) | ridge(凸出) | inset(插入物) |tset(开头) ]


文字修饰 { text-decoration: none }
blink文字闪烁
none使得上述效果都不会发生

定位(左边和顶部) {position: absolute; left: 100px; top: 43px }(将标记的内容定位于左100px顶43px)(另外可以添加 width:130px 限制宽度为130)(或添加heigh: 130px)(允许值:长度,百分比)

标记的内容隐藏 p { visibility: hidden } (visible为看见hidden为隐藏inherit为可视性设置)

链接不显示下划线
A:link { text-decoration: none }

颜色 color: #

背景于文字之后 background-image: url( dfdf)
背景 background: url(dd.jpg)
背景不滚动 background-attachment: fixed

背景定位 background-position:
top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中(如果使用在另一关键字前面)或垂直居中(如果用在另一关键字后面)。

背景重复 background-repeat: (不重复)(缺省为重复)
背景长度 background-position: 70px (水平70) 10px (垂直10) ; background-repeat: repeat-y(垂直平铺)或 repeat-x (水平平铺)


背景不滚动
body{background:url('http://hiphotos.baidu.com/monyer/pic/item/d375e4cd9bf5b8510eb34568.jpg') no-repeat fixed center;
cursor:url('http://hiphotos.baidu.com/monyer/pic/item/7345d3c81000ec177e3e6f72.jpg');
SCROLLBAR-FACE-COLOR: #fe90b0;
SCROLLBAR-HIGHLIGHT-COLOR: #fec5d7;
SCROLLBAR-SHADOW-COLOR: #cc3366;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #cc3366;
SCROLLBAR-TRACK-COLOR: #ffb2cc;
SCROLLBAR-DARKSHADOW-COLOR: #cc3366;
SCROLLBAR-BASE-COLOR: #ffb1cb;

一、框填充属性

1、padding-bottom
padding-left
padding-top
padding-right

功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离。
数值:
长度 - 设置相对或绝对值。在数字后指定度量单位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。
百分比 - 以父元素的百分比设置边框。
说明:填充值不能使用负值,但可以是小数。
CSSyu/01/01.htm" target=_blank>例子

2、padding

功能:是个简写属性,用于设置上,下,左,右各个方向边框和内容元素的间距。
数值:同前。
说明:用单一值可以让毎边等距填充;如果用两个值,则第一个值用于上下填充,第二个值用于左右填充;如果用三个值,则赋于上边填充,左右填充和下边填充;如果用四个值,则分别用于上,右,下,左填充。可以混合数值类型。
例子

二、框边框属性

1、border-top
border-bottom
border-right
border-left

功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺省情况下,边框没有样式设置。
数值:共有三个边框属性
border-width: 取值为 thin, medium, thick或指定长度。
border-style: 设置用于修饰边框的底纹。可以设置下列样式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。
border-color: 设置边框颜色。
例子

2、border-top-width
border-bottom-width
border-right=width
border-left-width

功能:分别设置各个边框的厚度。
数值:
thin - 细边框。
medium - 中等线宽。
thick - 粗线。
长度 - 用相对或绝对单位设置边框宽度。
例子

3、border-width

功能:简写属性,可同时设置四个边框的宽度。
数值:
thin - 细边框。
medium - 中等线宽。
thick - 粗线。
长度 - 用相对或绝对单位设置边框宽度。
说明:见 padding 说明。
例子:

边框属性

4、border-color

功能:简写属性,设置四个边框的颜色值。
数值:可以用颜色名或RGB值。如果指定单个颜色,则四个边框都显示为这个颜色;如果指定两个颜色,则顺序为上下,左右;如果指定三种颜色,则顺序为上,左右,下;如果指定四种颜色,则顺序为上,右,下,左。
说明:颜色名如下
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
对于RGB值,可用三种方法指定
#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)
例子:

边框颜色

5、border-style

功能:用于显示边框和指定边框样式。
数值:
none - 不显示边框,为缺省值
dotted - 点线
dashed - 虛线
solid - 实线
double - 双线
groove - 3D陷入线
ridge - 3D山脊狀线
inset - 使页面有沉入感
outset - 使页面有浮出感
说明:并非所有浏览器都能显示ridge, inset, outset 之类的样式,有些浏览器将所有边框都绘制成实线。

Example1

Example2

6、border

功能:简写属性,设置所有边框属性。
数值:
border-width - 取值 thin, medium, thick 或指定长度。
border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - 可用颜色名或RGB值。
说明:与其它简写属性不同的是,每个设置只能取一个值,这个属性均匀作用于框的各边。
例子:

CSS常用文本属性文本对齐属性(text-align)
这个属性用来设定文本的对齐方式。有以下值:

left (居左,缺省值)
right (居右)
center (居中)
justify (两端对齐)
示例代码如下:

.p2 {text-align:right}


文本修饰属性(text-decoration)
这个属性主要设定文本划线的属性。有以下值:

none (无,缺省值)
underline (下划线)
overline (上划线)
line-through (当中划线)
示例代码如下:

.p2 {text-decoration: underline}


文本缩进属性(text-indent)
这个属性设定文本首行缩进。其值有以下设定方法:

length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
percentage (百分比,相当于父对象宽度的百分比)
示例代码如下:

.p1 {text-indent: 8mm}


行高属性(line-height)
这个属性设定每行之间的距离。其值有以下设定方法:

normal (缺省值)
length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
percentage (百分比,相当于父对象高度的百分比)
示例代码如下:

.p1 {line-height:1cm}


字间距属性(letter-spacing)
这个属性用来设定字符之间的距离。

normal (缺省值)
length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下:

.p1 {letter-spacing: 3mm}


颜色属性(color)
用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下:

.p1{color:gray}


CSS背景属性背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。

body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。


背景图片属性(background-image)
这个属性为HTML元素设定背景图片,相当于HTML中background属性。

<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。


背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。

repeat-x 背景图片横向重复
repeat-y 背景图片竖向重复
no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。


背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动,不随内容滚动而动。


背景位置属性(background-position)
这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。


背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。

CSS边框属性边框风格属性(border-style)
这个属性用来设定上下左右边框的风格,它的值如下:

none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例

边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度,它的值如下:

medium (是缺省值)
thin (比medium细)
thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例

边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下:

.d5 {border-color:gray;border-style:solid;}


边框属性(border)
这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下:

.d1 {border:5px solid gray;}


单边边框属性
上下左右四个边框不但可以统一设定,也可以分开设定。

设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。


CSS边距属性边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

左边距属性(margin-left)
这个属性用来设定左边距的宽度。示例如下:

.d1{margin-left:1cm}


右边距属性(margin-right)
这个属性用来设定右边距的宽度。示例如下:

.d1 {margin-right:1cm}

上边距属性(margin-top)
这个属性用来设定上边距的宽度。示例如下:

.d1 {margin-top:1cm}

下边距属性(margin-bottom)
这个属性用来设定下边距的宽度。示例如下:

.d1{margin-bottom:1cm}

边距属性(margin)
这个属性是设定边距宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右边距属性。

你可以为上下左右边距设置相同的宽度。示例入下:

.d1 {margin:1cm}
你也可以分别设置边距,顺序是上,右,下,左。示例如下:

.d1 {margin:1cm 2cm 3cm 4cm}
上面的代码表示,上边距为1cm,右边距为2cm,下边距为3cm,左边距为4cm。


                       CSS间隙属性间隙属性
(padding)是用来设置元素内容到元素边界的距离。

左间隙属性(padding-left)
这个属性用来设定左间隙的宽度。示例如下:

.d1{padding-left:1cm}


右间隙属性(padding-right)
这个属性用来设定右间隙的宽度。示例如下:

.d1 {padding-right:1cm}


上间隙属性(padding-top)
这个属性用来设定上间隙的宽度。示例如下:

.d1 {padding-top:1cm}


下间隙属性(margin-bottom)
这个属性用来设定下间隙的宽度。示例如下:

.d1{padding-bottom:1cm}

间隙属性(padding)
这个属性是设定间隙宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右间隙属性。

你可以为上下左右间隙设置相同的宽度。示例入下:

.d1 {padding:1cm}
你也可以分别设置间隙,顺序是上,右,下,左。示例如下:

.d1 {padding:1cm 2cm 3cm 4cm}
上面的代码表示,上间隙为1cm,右间隙为2cm,下间隙为3cm,左间隙为4cm。
CSS列表样式属性列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值:

disc (缺省值,黑圆点)
circle (空心圆点)
square (小黑方块)
decimal (数字排序)
lower-roman (小写罗马字排序)
upper-roman (大写罗马字排序)
lower-alpha (小写字母排序)
upper-alpha (大写字母排序)
none (无列表项标记)
以disc,circle,square,none作为列表项标记的列表示例

以decimal,lower-roman,upper-roman,lower-alpha,upper-alpha作为列表项标记的列表示例

列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值:

outside (以列表项内容为准对齐)
inside (以列表项标记为准对齐)


列表样式图片属性(list-style-image)
列表项标记可以用图片来表示,用列表样式图片属性(list-style-image)来设定图片。示例代码如下:

ul {list-style-image: url(../images/css_tutorials/dot02.gif)}


列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type),列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下:

ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
CSS盒子模式(Box Model)CSS 中有个重要的概念,就是盒子模式 (Box model)。

胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城,而这个盒子模式套用这句话来说,就是方块套方块。


盒子里由外至里依次是:

margin 边距
border 边框
padding 间隙 (也有人称做补丁)
content (内容,比如文本,图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。


类别:Css||添加到搜藏 |分享到i贴吧|浏览(381)|评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
     

   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu