【HTML+CSS】CSS基础用法1

本文链接：https://blog.csdn.net/Mr_TianSDQ/article/details/130628342

该文展示了HTML中表单元素的样式设置，通过内联、内嵌和外链三种方式应用CSS，包括输入框、按钮和文本的样式调整。同时，文章还涉及了类别选择器、ID选择器、伪类以及选择器嵌套的用法，以及文本样式的详细设置，如背景图片、字体和对齐方式等。

摘要由CSDN通过智能技术生成

1. 行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
</head>
<body>
    <form action="" method="post" name="myform">
        用户名：<input type="text" value="小王" name="userName" size="20" maxlength="10" 
        style="border: 1px solid blue;background-color: yellow;"> <br>
        密码：<input type="password" name="userPwd" size="20" maxlength="10" 
        style="border: 1px solid red;"> <br>
        性别：<input type="radio" value="男" checked = "true" name="userGender">男
        <input type="radio" value="女" name="userGender">女 <br>
        专业：<input type="checkbox" value="计算机" name="major">计算机
        <input type="checkbox" value="软件工程" name="major">软件工程
        <input type="checkbox" value="外贸英语" name="major">外贸英语<br>

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

2.内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        input{border: 1px solid blue;background-color: yellow;}
     </style>
</head>
<body>
    <form action="" method="post" name="myform">
        用户名：<input type="text" value="小王" name="userName" size="20" maxlength="10" > <br>
        密码：<input type="password" name="userPwd" size="20" maxlength="10"> <br>
        性别：<input type="radio" value="男" checked = "true" name="userGender">男
        <input type="radio" value="女" name="userGender">女 <br>
        专业：<input type="checkbox" value="计算机" name="major">计算机
        <input type="checkbox" value="软件工程" name="major">软件工程
        <input type="checkbox" value="外贸英语" name="major">外贸英语<br>

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

3.外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <link rel="stylesheet" href="E:\06LeadTech\test\index.css" />
</head>
<body>
    <form action="" method="post" name="myform">
        用户名：<input type="text" value="小王" name="userName" size="20" maxlength="10" > <br>
        密码：<input type="password" name="userPwd" size="20" maxlength="10"> <br>
        性别：<input type="radio" value="男" checked = "true" name="userGender">男
        <input type="radio" value="女" name="userGender">女 <br>
        专业：<input type="checkbox" value="计算机" name="major">计算机
        <input type="checkbox" value="软件工程" name="major">软件工程
        <input type="checkbox" value="外贸英语" name="major">外贸英语<br>

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

index.css内容：

input{border: 1px solid blue;background-color: yellow;}

4.类别选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        .one{color: aquamarine;font-size: 18px;} /*类别选择器 */
        #linkAuthor{color: red;font-size: 25px;font-style: italic;} /*Id选择器 */
    </style>
</head>
<body>
    <form action="" method="post" name="myform" class="one">
        用户名：<input type="text" value="小王" name="userName" size="20" maxlength="10" > <br>
        密码：<input type="password" name="userPwd" size="20" maxlength="10"> <br>
    </form>
    <p class="one">类别选择器</p>
    <input type="button" value="一般按钮" class="one" />
 
    <div id="linkAuthor">
        联系我们：<a href="maito: 123@163.com">网上答疑邮箱</a>
    </div>
</body>
</html>

5.选择器嵌套+伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        #linkAuthor a{color: blue;text-decoration: none;font-size: 12px;}
        #linkAuthor a:hover{color: red;text-decoration: none;font-size: 12px;}/*伪类属性：a:link;a:visited;a:hover;a:active*/

        #otherdiv a{color: greenyellow;text-decoration: none;font-size: 22px;}
 a{color: red;text-decoration: underline;}
    </style>
</head>
<body>
    <div id="linkAuthor">
        <a href="#">这是第一个div内的a标签</a>
    </div>
    <div id="otherdiv">
        <a href="#">这是第二个div内的a标签</a>
    </div>
    <a href="#">使用伪类选择器超链接4</a>
</body>
</html>

6.文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        body
        {
            background-image:url(D:/素材/素材/3333.jpg);
            background-repeat:repeat -x;

        }
        #txtStyle {
            font-size: 30px;
            font-family:'Courier New', Courier, monospace;
            font-weight: bold;
            color:rgb(0, 255, 115);
            line-height: 35px;
            text-decoration: underline;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="txtStyle">
        床前明月光，<br>
        疑是地上霜，<br>
        举头望明月，<br>
        低头思故乡。<br>

    </div>
</body>
</html>