基本css样式

《1》在<table><td>宽度可以直接用：width="10%" </?xml:namespace>

《2》thinkphp中设置背景图片：background:url(__PUBLIC__/picture/2011090515320295.png);

《3》引用头上的css样式：<style type="text/css">

 body

 {

  background:url(__PUBLIC__/picture/2011090515320295.png);

 }

 table

 {

 margin:260px 540px;

 }

 </style>

《4》字体大小

     style="width:100px; height:40px ;font-size:26px"

《5》想让div显示边框的

     border: solid 3px red;  

《6》让body里的所有样式居中

    body

    {

         

         text-align=center;

    }

《7》对table的css属性的设置

       

黑边框: <table   style= "border:2px   dashed   #000; "> </table>

居中显示: <tr   style= "text-align:center; "> </tr>

综合所得最好做一个css列表:

<style   type= "text/css ">

<!--

.tablea   {border:2px   dashed   #000;}

.tra   {text-align:center;}

-->

</style>

《8》让table变成黑色的方法

   【方法一】  

<!--

td{

   border-top-width: 1px;

   border-top-style: solid;

   border-top-color: #000000;

   border-left-width: 1px;

   border-left-style: solid;

   border-left-color: #000000;

}

table{

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000000;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000000;

}

-->

【方法二】

默认的样式设置的效果如下：

</?xml:namespace>

但是需要的是1像素黑色边框表格，就是效果如下：

如何实现呢？众所周知的表格上网页布局中的一大敌人，除了需要显示数据除外。没办法，开始查资料吧，原来需要把表格的背景设定为黑色，再将每一行的背景设定为白色，然后再将cellpadding和cellspacing设定为1即可。

代码如下：

<table bgcolor="#000000" cellpadding="1" cellspacing="1">

<tr bgcolor="#FFFFFF">

<td>1111</td>

<td>2222</td>

<td>3333</td>

</tr>

<tr bgcolor="#FFFFFF">

<td>4444</td>

<td>5555</td>

<td>6666</td>

</tr>

<tr bgcolor="#FFFFFF">

<td>7777</td>

<td>8888</td>

<td>9999</td>

</tr>

</table>

《9》<a>标签中没有下划线

        text-decoration:none;

《10》让table中的<th>中的字居中

《11》div的边框显示

     【1】border: 1px solid black;

     【2】

  border-width: 1px;

  border-style: solid;

  border-color: #000000;

《12》div的内外边距

【外边距】

例子 1

margin:10px 5px 15px 20px;

o 上外边距是 10px

o 右外边距是 5px

o 下外边距是 15px

o 左外边距是 20px

例子 2

margin:10px 5px 15px;

o 上外边距是 10px

o 右外边距和左外边距是 5px

o 下外边距是 15px

例子 3

margin:10px 5px;

o 上外边距和下外边距是 10px

o 右外边距和左外边距是 5px

例子 4

margin:10px;

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

【内边距】

   

padding:10px 5px 15px 20px;

o 上内边距是 10px

o 右内边距是 5px

o 下内边距是 15px

o 左内边距是 20px

例子 2

padding:10px 5px 15px;

o 上内边距是 10px

o 右内边距和左内边距是 5px

o 下内边距是 15px

例子 3

padding:10px 5px;

o 上内边距和下内边距是 10px

o 右内边距和左内边距是 5px

例子 4

padding:10px;

o 所有 4 个内边距都是 10px

《12》

                    color:red;

font-size:15px;

《13》font-family:"隶书";

#con{

   width:740px;

   height:650px;

   border-style:solid;

border-width:1px;

margin:0px auto;

}

#content{

   width:400px;

   height:400px;

   border-style:solid;

border-width:1px;

float:left;

margin-top:100px;

margin-left:100px;

《14》背景色设为透明

background-color:transparent;

《15》行间高度：line-height:75px;

《1》在<table><td>宽度可以直接用：width="10%"

《2》thinkphp中设置背景图片：background:url(__PUBLIC__/picture/2011090515320295.png);

《3》引用头上的css样式：<style type="text/css">

 body

 {

  background:url(__PUBLIC__/picture/2011090515320295.png);

  }

 table

 {

 margin:260px 540px;

 }

 </style>

《4》字体大小

     style="width:100px; height:40px ;font-size:26px"

《5》想让div显示边框的

     border: solid 3px red;  

《6》list-style:none:  ul 标签前的实心圆点没有了

          font-weight:bold;字体为粗体

   font-style:italic;  浏览器解析为斜体

 《7》如何让div中的内容居中

①用<center><div>居中</div></center>       其中div居中，div中的内容也居中

② 设置div的属性margin：0 auto；div居中里面的内容靠左如果想让里面的内容也居中，要加上text-align:center; right:left;

③最好的写法：text-aling:center;

                                line-height: 想要的高度；

                                vertail-align:middle;  

    《8》fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

《9》 css中的div    span  label

div与span

大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还

好，但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》

里面的定义让人豁然开朗。

div：指定渲染 HTML 的容器。

span：指定内嵌文本容器。

说白了就是如果里面还有其他标签的时候就用div，如果里面只有文本的就应该用span。

span与label

由于有了以上关于span的说法,那么我们就可以对文本进行span的容器操作了,可以定义css样式什么的,但是label好像也可以?但是两者区别有时什么呢?

label标签主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

span则是对普通的文本的一种容器

div-span-label

<div id="divForm">

   <div class="divFormItem">

       <span>Did you visited my blog：</span>

       <input type="radio" id="radYes" name="visitedblog" checked="checked" />

        <label for="radYes">Yes</label>

       <input type="radio" id="radNo" name="visitedblog" />

       <span><label for="radNo">No</label>(Press the text "Yes" or "No" not the radio)</span>

   </div>

   <div class="divFormItem">

       <label accesskey="1" for="txtName">Your Name：</label>

       <input type="text" id="txtName" value="Press Alt + 1" />

   </div>

</div>

Label的for属性与Accesskey属性

Label的for属性与其他元素的ID属性绑定，就像超链接锚点一样，点击Label标签焦点就会转移到绑定的元素上。

<Label for="input1">姓名</Label>     //点击Label文本“姓名”焦点就会转移到ID="input1"的input标签上

<input ID="input1" type="text">          

Label的Accesskey属性一般与for属性组合使用，当用户键盘按下Accesskey指定的键，Label所绑定的元素将获得焦点。

<Label for="InputBox" Accesskey＝"N">姓名</Label>

<input ID="InputBox" type="text">

AccessKey属性所设置的快捷键不能与浏览器的快捷键冲突。

SPAN元素和DIV元素有什么区别  

最明显的区别是：DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。块元素相当于内嵌元素在前后各加一 个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地， 给内嵌元素定义了display:block就成了块元素了。

具体步骤：

代码示例：

<style>

div,span{border:1px solid #000;margin:2}

</style>

<div>div1</div><div>div2</div>

<span>span1</span><span>span2</span>

<br>

<div style="display:inline">div3</div>

<div style="display:inline">div4</div>

<span style="display:block">span3</span>

<span style="display:block">span4</span>

＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，＜span＞标识符允许你将一个段落分成不同的部分。

还有一个标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。但与＜div＞SPAN不同，＜div＞工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

技 巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为 “层”，只需要给对象定义position属性(值为absolute或relavite)。例如，要让图片成为“层”，可以这样写代码：

<img src="demo.gif" style="posibion:absolute;left:20;top:20">

《11》字间距

H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的缺 省设置，你可以使用我们昨天谈到的任何 一种长度单位：

·         in （英寸）

·         cm （厘米）

·         mm （毫米）

·         pt （点数）

·         pc （打字机字间距）

·         em （ems）

·         ex (x-height)

·         px （象素）

以下为显示结果：

Behold the power of cheese.

如果你的浏览器不支持这种CSS属性，请 点击这里查看显示效果。

如果你看不到任何不同之处，则说明你的 浏览器不支持这种属性，只有MAC机用的IE 4能支持这种字间距设置。

字母间距

字母间距可以在IE 4中应用，但 Communicator不行，唉...

H3 { letter-spacing: 10px }

字母间距的功能和字间距的很类似：其参 数值将被加入到浏览器的缺省设置中，你 可以使用上述任何一种长度单位。

如果你用的是IE 4，这里是一个例子：

Behold the power of cheese.

对于这两种属性，你都可以使用normal参 数。从而使其按照浏览器的原有缺省设置 显示。

利用字间距属性word-spacing，可以调整单词间的距离。

h2 {word-spacing:5pt}

字母间距：

利用字母间距属性letter-spacing，可以调整单词中每个字母间的距离。

h2 {letter-spacing:10pt};

行高：

与字距不同的是行距line-height，它调整的是行与行间垂直方向的距离，有三种方法设置：

长度单位：h3 {font-size:12pt; line-height:24pt};

比例：h3 {font-size:12pt; line-height:200%};

数值：h3 {font-size:12pt; line-height:2};                                //此处line-height=2x12pt=24pt

无论是字距或字母间距或行距都有一个共同的参数：normal，一旦设为normal就是要浏览器使用默认值。

<12>

<iframe src="dataBase/signUpAudit/index.php" width="250" height="50" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"  >                                

</iframe>

<object id="flash"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1056" height="631" title="刘磊">

   <param name="movie" value="9.swf" />

   <param name="wmode" value="transparent">

   <param name="quality" value="high" />

   <embed src="9.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1056" height="631"></embed>

 </object>

<13>

o    用div盖住flash的另类实用办法  

o      

o      

o    本 例子中，不是用div而是用超链接的A标签来盖住flash，但是没有关系，任何标签都可以。重点是：不要用a标签包住flash，让a标签和flash 是兄弟关系。然后通过绝对定位的方式，将它定位flash之上（必要的时候，可以使用z-index属性）。因为要使用定位，所以将a标签和flash至 于一个div中是有必要的。参考代码如下（重要的代码已经用红色标注）：  

o      

6.       <div style="position:relative;">  

7.       <a target="_blank" href="http://justinyoung.cnblogs.com/" style="display:block;width:200px;height:50px;position:absolute;left:0;top:0;background:transparent  url('/images/toumingtupian.gif') no-repeat;"></a>  

8.       <object width="200" height="50" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" >  

9.       <param value="hgjenglsih.swf" name="movie"/>  

          <param value="high" name="quality"/>  

         <param name="wmode" value="opaque" />  

12.   <embed width="200" height="50" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="hgjenglsih.swf" wmode="transparent" />  

13.   </object>  

14.   </div>  

15.    

16.   经测试：IE6-9，Chrome、Firefox、Opera浏览器下ok！  

17.    

18.   2010-12-01 10:22:39 补充：IE下会发现a连接还是不能点击，只能点击a的border部分。这时候，只要给a加一个透明的背景图即可。  

CSS属性---字体加粗

字体加粗

语法: font-weight: &lt;值&gt;

允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

初始值: normal

适用于: 所有对象

向下兼容: 是

字体加粗属性用作说明字体的加粗。当其它值绝对时，bolder和lighter值将相对地成比例增长。

注意: 因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择:

500 会被 400代替，反之亦是

100-300 会被指定为下一较细的加粗，如果有的话，否则就是下一较粗的加粗

600-900 会被指定为下一较粗的加粗，如果有的话，否则就是下一较细的加粗

一些字体加粗的定义例子如下:

H1 { font-weight: 800 }

P { font-weight: normal }

《122》让ul中的li靠左显示

ul,li{list-style:none;padding:0;margin:0;vertical-align:middle;}