第三节、Web前端学习_CSS3基础_web表单设计的信息字体红色-CSDN博客

本文链接：https://blog.csdn.net/qq_42148307/article/details/119539743

本文介绍了HTML中应用CSS样式的四种方法：行内样式、内部样式、外部样式和导入样式，并详细阐述了CSS的三大特性——层叠性、继承性和优先性。通过实例展示了如何在脚本中动态修改页面样式，以及设计登录和注册界面的实践案例，涵盖了网页设计的基础知识和技巧。

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

文章目录

HTML网页应用CSS样式的方法

使用行内样式表
使用内部CSS样式表
引入外部样式表
导入外部样式文件
注释CSS样式表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2{
            color: blue;         /*颜色*/
            font-size: 20px;     /*字体大小*/
            font-family: 宋体;   /*字体类型*/
        }
    </style>
    <link rel="stylesheet" href="style1.css">
    <style>
        @import "style2.css";
    </style>
</head>
<body>
    <!--使用行内样式表，字体颜色为红色，字体大小为20像素，字体类型为微软雅黑-->
    <h1 style="color: red;font-size: 20px;font-family: 微软雅黑;">使用行内样式表2</h1>
    <!--使用内部CSS-->
    <h2>使用内部CSS样式表</h2>
    <!--引入外部样式表-->
    <p>导入外部样式表</p>
    <!--引入外部样式文件-->
    <h3>导入外部样式文件</h3>
</body>
</html>

p{
     color: green;
     font-size: 20px;
     font-family: 隶书;
 }

h3{
    color: orange;
    font-size: 20px;
    font-family:华文隶书;
}

输出：

CSS三大特性

CSS层叠性
权重低的选择器效果会被权重高的选择器效果覆盖掉，若权重相同时取后者。

CSS继承性：如a标签的颜色不能继承，必须对a标签本身进行设置，h标签的字体大小不能继承，必须对h标签本身进行设置。
CSS优先性：!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 20px;
            text-shadow: 2px 2px 2px #FF0000;
            color: gold;
        }
        #box2 {
            color: gold;
        }
        .box2 {
            color: red !important; /*!important优先性最高*/
        }
    </style>
</head>
<body>
<div>
    <p>p标签的继承性</p>
    <a href="">a标签的继承性</a>
    <h1>h标签的继承性</h1>
</div>
    <p id="box2" class="box2">!important优先性最高</p>
</body>
</html>

输出：

在脚本中修改显示样式

随机改变页面的背景色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .show {
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-right: #222222 20px solid;
            border-bottom: #222222 20px solid;
            border-left: #dddddd 20px solid;
            border-top: #dddddd 20px solid;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<input type='button' value='动态增加立体效果' onclick="change()"/>
<hr/>
<div id="box">立体效果</div>
</body>
</html>
<script>
    function change() {
        //getElementById获取页面的body元素，给box添加show样式
        document.getElementById("box").className = "show";
    }
</script>

输出：

实践案例_设计登陆和注册界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        .content {
            background-color: #1cff89;
            position: absolute; /*绝对定位*/
            width: 100%;
            height: 400px;
        }

        .main {
            text-align: center; /*文本居中*/
            padding: 50px 0px; /*设置内边距上下为50px,左右为0*/
            margin: 0 auto; /*设置上、下外边距为0px，左右自适应*/
        }

        h2 {
            font-family: "微软雅黑"; /*设置字体*/
            font-size: 40px; /*设置字体大小*/
            font-weight: bold; /*调整字体粗细*/
        }

        input {
            border: 1px solid white;
            display: block; /*设置成块级标签*/
            margin: 10px auto; /*设置上、下外边距为10px，左右自适应*/
            padding: 5px;
            width: 230px;
            border-radius: 15px; /*设置圆角边框*/
            font-size: 18px;
            font-weight: 300;
            text-align: center;
        }

        button {
            background-color: #20a7ff;
            border-radius: 10px;
            border: 0;
            height: 30px;
            width: 80px;
            padding: 5px;
            color: white;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="main">
        <h2>You are welcome！</h2>
        <form>
            <input type="text" placeholder="用户名"/>
            <input type="password" placeholder="密码">
            <p>
                <button type="submit">登&nbsp;&nbsp;录</button>
                <button type="submit">注&nbsp;&nbsp;册</button>
            </p>
        </form>
    </div>
</div>
</body>
</html>