JavaWeb——CSS应用实例详解（概述、语法、选择器、属性、用户登录界面实例）

时间:2022-07-25
本文章向大家介绍JavaWeb——CSS应用实例详解（概述、语法、选择器、属性、用户登录界面实例），主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1、CSS概述

CSS是用来页面美化与布局控制的，英文全称为Cascading Style Sheets 层叠样式表，层叠：多个样式可以同时作用在同一个html的元素上，同时生效。

使用CSS的好处有哪些？

  • 功能强大
  • 将内容展示和样式控制分离，降低耦合度，让分工更容易，提高开发效率。

2、CSS的使用

CSS与html的结合方式有三种：内联样式、内部样式、外部样式：

  • 内联样式：在标签内使用style属性指定css代码，如：<div style="color: red"> hello css</div>
  • 内部样式：在head标签内定义style标签，style标签的标签体内容就是css代码，如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
<!--内部样式-->
<div> hello css</div>
</body>
</html>
  • 外部样式：先定义css的资源文件，再在head标签中定义link标签，引入外部的资源文件

第一步：定义css资源文件

div{
    color: green;
}

第二步：引入资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" href="./css/a.css">
</head>
<body>
<!--外部样式-->
<div> hello css</div>
<div> hello css</div>

</body>
</html>

【注意】：

  • 以上三种方式，CSS作用的范围越来越大；
  • 内联方式不常用，常用的是第二种和第三种；
  • 外部样式也可以写成这种形式： <style>        @import "css/a.css" </style>

3、CSS的基本语法与选择器

CSS的语法格式如下，其中，选择器是用来帅选具有相似特征的元素。

选择器{               属性名1：属性值1;               属性名2：属性值2；               ....       }

选择器分为两类：基础选择器、扩展选择器

  • 基础选择器：     id选择器：选择具体的id属性值元素，语法为#id属性值{}，建议在一个html中id值唯一     元素选择器：选择具有相同标签名称的元素，语法为 标签名称{}，id选择器的优先级高于元素选择器     类选择器：选择具有相同的class属性值的元素，语法为 .class属性值{}，类选择器的优先级高于元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: blue;
        }
        .cls1{
            color: bisque;
        }
    </style>
</head>
<body>
    <div id="div1"> 百度一下 </div>
    <div> 百度一下 </div>
    <p class="cls1">百度一下</p>
</body>
</html>
  • 扩展选择器     选择所有元素：语法为 *{}     并集选择器：语法为 选择器1，选择器2     子选择器：语法为 选择器1 选择器2{}，表示帅选选择器1下的选择器2     父选择器：语法为 选择器1>选择器2{}，表示选择器2的父元素选择器1     属性选择器：语法为 元素名称[属性名=‘属性值’]选择元素名称，属性名=属性值的属性     伪类选择器：语法为 元素：状态{} ，表示一些元素具有的状态，如：<a>                           状态： link：初始化的状态                                       visited：被访问过的状态                                       active：正在访问状态                                       hover：鼠标悬浮状态

【举例】：使用扩展选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color: red;
        }
        div > p{
            border: 1px solid;
        }
        input[type='text']{
            border: 5px solid;
        }
        a:link{
            color: pink;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
        a:visited{
            color: red;
        }
    </style>
</head>
<body>

    <div>
        <p> 百度一下</p>
    </div>
    <p> 你就知道 </p>
    <div>aaaa</div>
    <input type="text"> <input type="password"> <br>

    <a href="https://www.baidu.com"> 点我超链接</a>
</body>
</html>

4、CSS属性

CSS的属性很多，需要深入的可以自己查看文档，此处说明几个常用的属性：

  • 字体、文本： font-size：字体大小                        color：文本颜色                        text-align：对齐方式                        line-height：行高
  • 背景：background：
  • 边框：border：边框
  • 尺寸：width：宽度            height：高度 【举例】以上属性的应用举例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>

        div{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            background: url("../image/2.png") no-repeat center;
        }
    </style>
</head>
<body>

    <p> 百度一下 </p>
    <div>
        我是小哪吒
    </div>
</body>
</html>
  • 盒子模型： 用来控制布局                   margin：外边距                   padding：内边距，默认情况下，内边距会影响盒子的大小，此时可用box-sizing: border-box，设置盒子的属性，让width 和 height就是最终盒子的大小。                   float：浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>

        div{
            border: 1px solid red;
        }
        .div1{
            /*margin: 50px;*/
            width: 100px;
            height: 100px;
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            box-sizing: border-box;
        }
        .div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div4{
            float: right;
        }
    </style>
</head>
<body>

<div class="div2">
    <div class="div1">  </div>
</div>
<div class="div3">aaa</div>
<div class="div4">bbbb</div>
<div class="div5">ccccc</div>
</body>
</html>

5、CSS使用案例实战

使用CSS优化上一博文中的用户登录界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面_CSS</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("../image/6模糊背景.jpg") no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background: white;
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left > p :first-child{
            color: FFD026;
            font-size: 20px;

        }
        .rg_left > p :last-child{
            color: grey;
            font-size: 20px;
        }
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 450px;
            margin-top: 20px;
            margin-left: 80px;
        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;

        }
        .rg_right > p :first-child{
            font-size: 10px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{
            width: 100px;
            height: 45px;
            text-align: left;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#psd,#email,#name,#tel,#gender,#date,#code{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #code{
            width: 110px;
        }
        #img_code{
            height: 30px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background: #FFD026;
            border: 1px solid #FFD026;
        }
    </style>
</head>
<body>

    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>

        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username"> 用户名</label></td>
                            <td class="td_right"><input type="text" name="uesrname" id="username" placeholder="请输入用户名"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="psd"> 密码</label></td>
                            <td class="td_right"><input type="password" name="psd" id="psd"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email"> email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name"> 姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="tel"> 手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="gender"> 性别</label></td>
                            <td class="td_right"><input type="radio" name="gender" value="male"> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="date"> 出生日期</label></td>
                            <td class="td_right"><input type="date" name="date" id="date"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="code"> 验证码</label></td>
                            <td class="td_right"><input type="text" name="code" id="code">
                                <img id="img_code" src="../image/5验证码.png">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"> <input id="btn_sub" type="submit" value="注册"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

        <div class="rg_right">
            <p>已有账号? <a href="#">立即登录</a></p>
        </div>
    </div>

</body>
</html>

随机文章
WEB前端知识点必读
最近更新