CSS的常用申明（2）-优快云博客

本文链接：https://blog.youkuaiyun.com/DZ_OP/article/details/142903303

一、表单属性

1.form：

表单用来收集信息

2.form

标签里有action属性和method属性，action属性表示表单将提交到哪里，method属性表示用什么HTTP方法提交，有get、post两种。

3.文本框：

一个自封闭标签，< input type=“text”/>
input表示“输入”，type表示“类型”，text表示“文本”。
value表示“值”，value属性就是默认值。< input type=“text” value=“默认值”/>

4.密码框：

< input type=“password” value=“weiyuxuan”/>
input标签是文本框还是密码框，由type属性来决定，如type="text"则文本框，如type="password"则密码框。

5.单选按钮：

只能选一个
< input type=“radio” name=“xingbie” />男
< input type=“radio” name=“xingbie” />女
6.input type

type的值，如果是radio，则为单选按钮。单选按钮天生不是互斥的，如果互斥，则需要有相同的name属性。
如果是默认选项，应加上check=“checked”——< input type=“radio” name=“sex” checked=“checked”>

各个文本框以及密码框按钮等，都可通过css来设置样式，非常方便！

<!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>表单属性</title>
    <style>
        #text2{
            width: 400px;
            height: 100px;
            color: aqua;
           background-color: gray;
          border: 2px red double;
          /* background-image: ; */
        }
        #btn2{
            color: aqua;
            background-color: gray;
            color: aquamarine;
            border: 2px red dashed;
           /* 鼠标过去后变成手指 */
            cursor: pointer;


        }

    </style>


</head>




<body>
    <form action="">
        <input type="text" id="text1">这是默认为文本输入框
<br>
        <input type="text" id="text2" value="此处输入你的账号">这是一个有输入值的文本输入框
<br>
        <input type="submit" id="btn1">这是默认按钮
        <br>
        <input type="submit" id="btn2" value="登录">这是做了样式的按钮
    </form>
</body>
</html>

二、表格属性

1、table

为表格，可以通过css来设置表格的样式

2、tr、td

为行以及单元格

3、border

r为边框

tip：可以给td设置id，就可以单独给单元格设置样式了

合并独立边框：

  border-collapse: collapse;

<!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: 400px;
            height: 200px;
            border: 2px red solid;
            border-collapse: collapse;         /*合并独立边框  */
            background-color: aqua; 
            color: black; /*文字颜色 */
        }
        td{
               /* 设置单元格内文本水平对齐位置 */
               text-align: center;
             /* 设置单元格内文本垂直对齐位置  */
            vertical-align: top; 

        }
        #td9{
            background-color:green;
            color: brown;
            /* 设置单元格内文本水平对齐位置 */
            text-align: center;
             /* 设置单元格内文本垂直对齐位置  */
            vertical-align: top; 

        }

    </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>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <td id="td9">单元格9</td>
        </tr>
    </table>
    
</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>
</head>
<style>
    .table{
            width: 400px;
            height: 200px;
            border: 2px red solid;
            border-collapse: collapse;         /*合并独立边框  */
            background-color: yellow; 
            color: black; /*文字颜色 */
            
        }
        #td1{
            background-color:gray;
            color: blue;
          
        }
        td{
              /* 设置单元格内文本水平对齐位置 */
              text-align:right;
             /* 设置单元格内文本垂直对齐位置  */
            vertical-align:  bottom;
        }
        #text2{
            
            color: blue;
           
          border: 2px yellow double;
          }
          #btn2{
            color: gray;
            background-color: pink;
           
            border: 4px red dashed;
           /* 鼠标过去后变成手指 */
            cursor: pointer;
            opacity: 0.3;
            width: 100px;

        }
        #btn3{
            cursor: pointer;
            background-color: gray;
            border: 0ch;
            width: 200px;
           
        }
        #text3{
            background-image: url(./表单和表格常用属性设置.png);
        }
  



</style>


<body>
     <table border="1" class="table">
    <tr>
        <td id="td1">无</td>
        <td id="td1">列标题1</td>
        <td id="td1">列标题2</td>
    </tr>
    <tr>
        <td id="td1">行标题1</td>
        <td>普通单元格1</td>
        <td>普通单元格2</td>
    </tr>
    <tr>
        <td id="td1">行标题2</td>
        <td>普通单元格3</td>
        <td>普通单元格4</td>
    </tr>
</table>
<hr>
<form action="">
    <input type="text" id="text1">这是默认为文本输入框
    <br>
    <input type="text" id="text2" value="此处输入你的账号">改变了边框颜色和文字颜色的文本框
    <br>
    <input type="text" id="text3">增加了背景图片的文本框
    <br>
    <input type="submit" id="btn1">这是默认按钮
    <br>
    <input type="submit" id="btn2" value="登录">这是做了样式的按钮
    <br>
    <input type="submit" id="btn3" value="注册">鼠标悬停的无边框按钮
</form>

    
</body>
</html>