CSS基础--设置表格样式和表单样式

冰冻果冻

于 2024-10-09 19:30:02 发布

阅读量247

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_85545586/article/details/142770799

版权

1.设置表格样式

常用的CSS表格属性
属性	说明
border-collapse	设置表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacing	设置当表格边框独立时，行和单元格的边框在横向和纵向上间距
empty-cells	设置当表格的单元格无内容时，是否显示该单元格的边框

border-collapse属性：

用于设置表格的边框是合并成单边框，还是分别有各自的边框。

语法格式：

border-collapse：separate | collapse

参数：sparate为默认值表示边框分开不合并，collapse表示边框合并，即如果两个边框相邻则共用同一个边框。

代码：

  <style>
 .table{
            width: 300px;
            height: 200px;
            border: 2px red solid;
            /*边框折叠*/
            border-collapse: collapse;
            background-color: yellows;
            text-align: center;
            /*字体颜色*/
            color: blueviolet; }
    </style>
</head>
<body>
    <table border="1" class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
    </table>
</body>
</html>

运行结果：

2.设置表单样式

可查看上篇CSS--使用CSS修饰页面外观

运行代码：

   <title>Document</title>
    <style>
 #text1{
            width: 200px;
            height: 20px;
            color: blue;
            border: 2px yellow double;
            
        }
        #text3{
            width: 500px;
            height: 50px;
            background-image: url(../表单和表格常用属性设置.png);
        }
    </style>
</head>
<body>
    <form action="">
        <p><input type="text" id="text">默认样式的文本域 </p>
        <p><input type="text" id="text1" value="输入文字显示为蓝色">改变了边框颜色和文字颜色的文本域</p>
        <p><input type="text" id="text3">增加了背景图片的文本域></p>
</body>
</html>

运行结果：

综合练习：

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .table{
            width: 300px;
            height: 200px;
            border: 2px red solid;
            /*边框折叠*/
            border-collapse: collapse;
            background-color: gray;
            text-align: right;
            /*字体颜色*/
            color: blue; }
         #t5{background-color: yellow;
            color: #000;
                text-align: right;
            }
            #t6{background-color: yellow;
            color: #000;
                text-align: right;
             }
            #t8{background-color: yellow;
            color: #000;
                text-align: right;
          }
            #t9{background-color: yellow;
            color: #000;
                text-align: right;
            }
        
        #text1{
            width: 200px;
            height: 20px;
            color: blue;
            border: 2px yellow double;
            
        }
        #text3{
            width: 300px;
            height: 50px;
            background-image: url(../橘子.jpg);
        }
        #btn2{
            width: 100px;
            height: 50px;
            color: blue;
            background-color: pink;
            border: 2px rgb(207, 49, 128) dashed;
            opacity: 0.3;
            cursor: pointer;
        }
        #bnt3{
            border: none;
            width: 100px;
            height: 50px;
            cursor: pointer;
        }


    </style>
</head>
<body>
    <table border="1" class="table">
        <tr>
            <td>无</td>
            <td>列标题1</td>
            <td>列标题2</td>
        </tr>
        <tr>
            <td>行标题1</td>
            <td id="t5">普通单元格1</td>
            <td id="t6">普通单元格2</td>
        </tr>
         <tr>
        <td>行标题1</td>
        <td id="t8">普通单元格3</td>
        <td id="t9">普通单元格4</td>
         </tr>                     
            </table><br>
    <form action="">
        <p><input type="text" id="text">默认样式的文本域 </p>
        <p><input type="text" id="text1" value="输入文字显示为蓝色">改变了边框颜色和文字颜色的文本域</p>
        <p><input type="text" id="text3">增加了背景图片的文本域></p>
        <p><input type="submit" id="btn1">默认提交按钮</p>
        <p> <input type="submit" id="btn2" value="登录">这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮</p>
      <p> <input type="submit" id="bnt3" value="注册">鼠标悬停变手指的无边框按钮</p>

    </form>
</body>
</html>

运行结果：