CSS属性

 

 

一、属性

1、CSS float 属性

定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

实例

把图像向右浮动：

img  {  float:right;  }

2、CSS cursor 属性

定义和用法

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

一些不同的光标：

span.crosshair {cursor:crosshair;}span.help {cursor:help;}span.wait {cursor:wait;}

3、CSS margin-right 属性

定义和用法

margin-right 属性设置元素的右外边距。

注释：允许使用负值。

设置 p 元素的右外边距：

p  {  margin-right:2cm;  }

4、CSS background-position 属性

定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

 

如何定位背景图像：

body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}

5、CSS background-repeat 属性

定义和用法

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

详细说明

background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

实例

body  {  background-image: url(stars.gif);  background-repeat: repeat-y;  }

 

6、CSS padding-left 属性

定义和用法

padding-left 属性设置元素左内边距（空白）。

说明

该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.

注释：不允许使用负值。

实例

设置 p 元素的左内边距：

p  {  padding-left:2cm;  }

7、CSS display 属性

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

实例

使段落生出行内框：

p.inline  {  display:inline;  }

 

display:block可以理解为块。用个简单的例子给你！比如你做一个超链接，
<li><a href="#">超链接</a></li>
当你鼠标移过去文字的时候，超链接有效果！
而当我把样式这样设置：
li a{width:100px;height:100px; display:block; color:red; text-decoration:none;}
鼠标移到文字周围100*100的地方，就有超链接效果了，就是把100*100做为一块来的超链接！

display    的参数列表   
   display版本：CSS1/CSS2　    兼容性：IE4+    NS4+　继承性：无   
      
   语法：     
      
   display    :    block    |    none    |    inline    |    compact    |    marker    |     
   inline-table    |    list-item    |    run-in    |    table    |table-caption    |     
   table-cell    |    table-column    |    table-column-group    |     
   table-footer-group    |    table-header-group    |    table-row    |    table-row-group     
参数：     
      
   block    :    　CSS1　块对象的默认值。用该值为对象之后添加新行     
   none    :    　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间     
   inline    :    　CSS1　内联对象的默认值。用该值将从对象中删除行     
   compact    :    　CSS2　分配对象为块对象或基于内容之上的内联对象     
   marker    :    　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before    伪元素一起使用     
   inline-table    :    　CSS2　将表格显示为无前后换行的内联对象或内联容器     
   list-item    :    　CSS1　将块对象指定为列表项目。并可以添加可选项目标志     
   run-in    :    　CSS2　分配对象为块对象或基于内容之上的内联对象     
   table    :    　CSS2　将对象作为块元素级的表格显示     
   table-caption    :    　CSS2　将对象作为表格标题显示     
   table-cell    :    　CSS2　将对象作为表格单元格显示     
   table-column    :    　CSS2　将对象作为表格列显示     
   table-column-group    :    　CSS2　将对象作为表格列组显示     
   table-header-group    :    　CSS2　将对象作为表格标题组显示     
   table-footer-group    :    　CSS2　将对象作为表格脚注组显示     
   table-row    :    　CSS2　将对象作为表格行显示     
   table-row-group    :    　CSS2　将对象作为表格行组显示          
  

8、CSS clear 属性

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

实例

图像的左侧和右侧均不允许出现浮动元素：

img  {  float:left;  clear:both;  }

 

 

9、CSS overflow 属性

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

JavaScript 语法：

object.style.overflow="scroll"

 

实例

设置 overflow 属性：

div  {  width:150px;  height:150px;  overflow:scroll;  }

 

10、CSS list-style-image 属性

定义和用法

list-style-image 属性使用图像来替换列表项的标记。

说明

这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。

注释：请始终规定一个 "list-style-type" 属性以防图像不可用。

JavaScript 语法：object.style.listStyleImage="url('/images/blueball.gif')"

实例

把图像设置为列表中的项目标记：

ul  {  list-style-image:url("/i/arrow.gif");  list-style-type:square;  }

11、CSS list-style-type 属性

定义和用法

list-style-type 属性设置列表项标记的类型。

JavaScript 语法：object.style.listStyleType="square"

实例

设置不同的列表样式：

ul.circle {list-style-type:circle;}ul.square {list-style-type:square;}ol.upper-roman {list-style-type:upper-roman;}ol.lower-alpha {list-style-type:lower-alpha;}

12、CSS margin 属性

定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

例子 1

margin:10px 5px 15px 20px;

• 上外边距是 10px
• 右外边距是 5px
• 下外边距是 15px
• 左外边距是 20px

例子 2

margin:10px 5px 15px;

• 上外边距是 10px
• 右外边距和左外边距是 5px
• 下外边距是 15px

例子 3

margin:10px 5px;

• 上外边距和下外边距是 10px
• 右外边距和左外边距是 5px

例子 4

margin:10px;

• 所有 4 个外边距都是 10px

JavaScript 语法：object.style.margin="10px 5px"

实例

设置 p 元素的 4 个外边距：

p  {  margin:2cm 4cm 3cm 4cm;  }

 

13、CSS line-height 属性

定义和用法

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。

说明

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

 14、CSS color 属性

定义和用法

color 属性规定文本的颜色。

这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。

要设置一个元素的前景色，最容易的方法是使用 color 属性。

实例

为不同元素设置文本颜色：

body  {  color:red;  }h1  {  color:#00ff00;  }p  {  color:rgb(0,0,255);  }

 

15、CSS text-indent 属性

定义

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

实例

将段落的第一行缩进 50 像素：

p  {  text-indent:50px;  }

 16、CSS background 属性

定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以按顺序设置如下属性：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

实例

如何在一个声明中设置所有背景属性：

body  {   background: #00FF00 url(bgimage.gif) no-repeat fixed top;  }

 

二、语法

1、

有以下的CSS定义：

.e2 li a.title{overflow:hidden;line-height:25px;font-size:14px;margin-left: 5px;padding-left: 10px;}

以上CSS表在.e2新式里有<li>标签，在<li>标签里有<a>标签，在<a标签时使用了名为.title的样式

使用时：

 <ul class="e2">    {dede:list pagesize='10'}    <li> <a href="[field:arcurl/]" class="title">[field:title/]</a> [field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}' class='preview'><img src='{@me['litpic']}'/></a>"); [/field:array]