1px → 边框大小
red → 边框颜色
solid → 边框样式
------------------------------------
运行结果：
给你写个例子<table>
<tr style="background:#000;">
<td>我的背景是黑色</td>
</tr>
</talbe>
这样就行了要设置什么颜色自己定义就可以了!这里就涉及到css样式的优先级了。
从大的方面将，html文档中样式有三种定义方式。
1、外部样式，通过link引用外部样式文件，如<link rel="stylesheet" type="text/css" href="stylecss"/>
2、内部样式，在html文档中定义样式，如h3{color:green;}
3、内嵌样式，在某个dom元素上定义style。
这三种方式的优先级从1-3逐渐增强。
如果同时定义了好几个样式作用于一个元素上，则最终起作用的按照以下优先级。
1 内联样式表的权值最高 1000；
2 ID 选择器的权值为 100
3 Class 类选择器的权值为 10
4 HTML 标签选择器的权值为 1
权值越高的就优先起作用。<table> <tr> <td> </td></tr> 1把<td>改成<td style="border:1px solid red">border后面的第一个参数是边框像素，第二个是边框样式（solid：实线）,第三个是边框的颜色2通过外部css改变td｛ border:1px solid red;｝ 如果你是要在网页中动态的改变边框样式的话，一般配合javascript来实现（比如开始边框颜色为黑色，把鼠标放上去变为红色）边框样式可以
CSS 参考手册
定义和用法border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-widthborder-styleborder-color如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
默认值：not specified继承性：no版本：CSS1JavaScript 语法：objectstyleborder="3px solid blue"实例
设置4 个边框的样式：
p { border:5px solid red; }TIY
浏览器支持所有浏览器都支持 border 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值值描述border-width规定边框的宽度。参阅：border-width 中可能的值。border-style规定边框的样式。参阅：border-style 中可能的值。border-color规定边框的颜色。参阅：border-color 中可能的值。
示例
可以使用以上方式创建并书写 css 样式文件
当然, 也可以简单点: 右键 => 新建笔记本 ( 记事本 ) => 在内部书写 "abc { bacground-color: red; }" => 关闭笔记本 ( 记事本 ) => 重命名 ( 将 新建本txt => yscss ) => 在使用 <link> 去连接样式即可
<html><head>
<title>鼠标划过表格行变色－简洁实现</title>
<style type="text/css">
#tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>库存数量</th>
<th>货位</th>
</tr>
<tr>
<td>丁学最喜欢的仙四豪华版-菱纱版</td>
<td>139</td>
<td>10000000</td>
<td>A12-253</td>
</tr>
<tr>
<td>仙四豪华版-梦璃版</td>
<td>139</td>
<td>10000000</td>
<td>A12-254</td>
</tr>
<tr>
<td>仙四普通版-首发</td>
<td>69</td>
<td>10000000</td>
<td>A12-255</td>
</tr>
</table>
<script type="text/javascript">
var obj=documentgetElementById("tb");
for(var i=0;i<objrowslength;i++){
objrows[i]onmouseover=function(){thisstylebackground="#0EF";}
objrows[i]onmouseout=function(){thisstylebackground="";}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）