web开发之页面css样式表、以及（jquery+css）

爱被打了一巴掌 2022-05-08 05:28 90阅读 0赞

CSS：层叠样式表。

## CSS选择器 ##

**标记选择器**

**类别选择器**

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;HEAD&gt;</p> <p>&lt;style&gt;<br> .p_one{color:red}<br> &lt;/style&gt;<br> &nbsp;&lt;/HEAD&gt;</p> <p>&nbsp;&lt;BODY&gt;<br> &nbsp; &lt;p class="p_one"&gt;您好！&lt;/p&gt;<br> &nbsp;&lt;/BODY&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

** ID选择器**

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;<br> &lt;HTML&gt;<br> &nbsp;&lt;HEAD&gt;<br> &nbsp; &lt;TITLE&gt; New Document &lt;/TITLE&gt;<br> &nbsp; &lt;META NAME="Generator" CONTENT="EditPlus"&gt;<br> &nbsp; &lt;META NAME="Author" CONTENT=""&gt;<br> &nbsp; &lt;META NAME="Keywords" CONTENT=""&gt;<br> &nbsp; &lt;META NAME="Description" CONTENT=""&gt;<br> &lt;!--id选择器--&gt;<br> &lt;style&gt;<br> #p_one{color:red}<br> &lt;/style&gt;</p> <p>&nbsp;&lt;/HEAD&gt;</p> <p>&nbsp;&lt;BODY&gt;<br> &nbsp; &lt;p id="p_one"&gt;您好！&lt;/p&gt;<br> &nbsp;&lt;/BODY&gt;<br> &lt;/HTML&gt;&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

## CSS几个引入方法 ##

页面中使用CSS有4种使用方法：内联样式表、嵌入样式表、外部样式表、导入样式表。

**内联样式表**

**嵌入样式表**

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;&lt;HEAD&gt;</p> <p>...<br> &nbsp; &lt;style&gt;<br> &nbsp; p{color:red;font-size:4cm;border:2px solid blue}<br> &nbsp; &lt;/style&gt;<br> &nbsp;&lt;/HEAD&gt;</p> <p>&nbsp;&lt;BODY&gt;<br> &nbsp; &lt;p &gt;您好！&lt;/p&gt;<br> &nbsp;&lt;/BODY&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**外部样式表**

引用外部css文件，如test.css

<table> 
 <tbody> 
  <tr> 
   <td>p{color:red;font-size:4cm;border:2px solid blue}</td> 
  </tr> 
 </tbody> 
</table>

页面正文

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;<br> &lt;HTML&gt;<br> &nbsp;&lt;HEAD&gt;<br> &nbsp; &lt;TITLE&gt; New Document &lt;/TITLE&gt;<br> &nbsp; &lt;META NAME="Generator" CONTENT="EditPlus"&gt;<br> &nbsp; &lt;META NAME="Author" CONTENT=""&gt;<br> &nbsp; &lt;META NAME="Keywords" CONTENT=""&gt;<br> &nbsp; &lt;META NAME="Description" CONTENT=""&gt;<br> &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;&nbsp;&nbsp;<br> &nbsp;&nbsp;<br> &nbsp;&lt;/HEAD&gt;</p> <p>&nbsp;&lt;BODY&gt;<br> &nbsp; &lt;p &gt;您好！&lt;/p&gt;<br> &nbsp;&lt;/BODY&gt;<br> &lt;/HTML&gt;<br> </p> </td> 
  </tr> 
 </tbody> 
</table>

**导入样式表**

引用的样式表文件imp.css

<table> 
 <tbody> 
  <tr> 
   <td>p{color:red;background-color:yellow}</td> 
  </tr> 
 </tbody> 
</table>

页面正文

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;<br> &lt;HTML&gt;<br> &nbsp;&lt;HEAD&gt;<br> &nbsp; &lt;TITLE&gt; New Document &lt;/TITLE&gt;<br> &nbsp; &lt;META NAME="Generator" CONTENT="EditPlus"&gt;<br> &nbsp; &lt;META NAME="Author" CONTENT=""&gt;<br> &nbsp; &lt;META NAME="Keywords" CONTENT=""&gt;<br> &nbsp; &lt;META NAME="Description" CONTENT=""&gt;<br> &lt;!--<br> 导入样式表<br> --&gt;</p> <p>&nbsp; &lt;style&gt;<br> @import url(imp.css);<br> &nbsp; &lt;/style&gt;<br> &nbsp;&lt;/HEAD&gt;</p> <p>&nbsp;&lt;BODY&gt;<br> &nbsp; &lt;p &gt;您好！&lt;/p&gt;<br> &nbsp;&lt;/BODY&gt;<br> &lt;/HTML&gt;<br> </p> </td> 
  </tr> 
 </tbody> 
</table>

##  jquery+css ##

1.css方法

$(".detail\_list .op\_td .op\_td\_zoomto").css("margin","1px");

2.removeClass方法

$(".detailinfo\_list tbody tr").removeClass('hilight');

3.addClass方法

$(".detailinfo\_list tbody tr").r.addClass("hilight");

## css样式调试 ##

基本方法：推荐使用chrom调试器，浏览页面，调用“审查元素”，可以看到页面脚本，修改调整css样式，即时预览修改后效果，若效果正确后，就可以根据调整内容修改源码工程中具体的脚本。

有些css样式不好调，引用css文件，但有些个性化的样式，可以使用标记的style属性重载。

如表格的margin属性，调试了许多参数都不理想，后来使用如下方式才调出效果，如下：

<table> 
 <tbody> 
  <tr> 
   <td>&lt;a href="javascript:void(0);" class="op_td_query" style="margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 4px; " title="定位"&gt;&lt;/a&gt;</td> 
  </tr> 
 </tbody> 
</table>

评价：margin方法位置不好调，左右上下间距都要照顾到，索性将所有属性进行重载，这样样式才好调。比用css函数方法直接方便。

参考：[http://www.56.com/u38/v\_ODEyNTYzMjM.html][http_www.56.com_u38_v_ODEyNTYzMjM.html] 初探css样式表

[http_www.56.com_u38_v_ODEyNTYzMjM.html]: http://www.56.com/u38/v_ODEyNTYzMjM.html