Css简单学习

前言

本文章对Css结合HTML使用进行了介绍,是后端学习者参考文,并非前端专业文。


目录

一、CSS的基本概念以及使用方式

        1.1、css基本概念

        1.2、使用Css的好处:

        1.3、css的使用

二、选择器

   2.1、选择器定义

   2.2、分类

三、属性

 四、注册页面案例实践


一、CSS的基本概念以及使用方式

        1.1、css基本概念

    Cascading Style Sheets 层叠样式表
     层叠:多个样式可以作用在同一个html的元素上,同时生效

         1.2、使用Css的好处:

    1. 功能强大
    2. 将内容展示和样式控制分离
        * 降低耦合度。解耦
        * 让分工协作更容易
        * 提高开发效率


        1.3、css的使用


    css与HTML结合方式

       1.内联样式:
            在标签内使用style属性指定css代码
            如:<div style="color:red;">hello css</div>
        2. 内部样式
            * 在head标签内,定义style标签,style标签的标签体内容就是css代码
            * 如:
                <style>
                div{
                    color:blue;
                }
            </style>
            <div>hello css</div>
        3. 外部样式
            1. 定义css资源文件。
            2. 在head标签内,定义link标签,引入外部的资源文件
            如:
                * a.css文件:
                div{
                    color:green;
                }


            <link rel="stylesheet" href="css/a.css">
            <div>hello css</div>
            <div>hello css</div>
        

代码演示

<!--
*@packageName 
*@className css内联方式一
*@author wang
*@date 2022/1/24 14:14
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS与HTML内联方式结合一</title>
</head>
<body>
<!--测试内联方式,通过style属性-->
<div style="color: gold">hello css</div>
</body>
</html>



<!--
*@packageName 
*@className Css内部方式结合
*@author wang
*@date 2022/1/24 14:17
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部方式结合</title>

<!--    该方式只能指定本文件,无法应用所有文件-->
    <style>
        div{
            color: gold;
        }
    </style>
</head>
<body>
<!--测试内部方式结合 通过 在head标签内使用style标签-->
<div>哈哈哈哈哈Css</div>

</body>
</html>



<!--
*@packageName 
*@className Css外部样式方式
*@author wang
*@date 2022/1/24 14:19
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css外部样式</title>
<!--    在head标签中引入css资源文件-->
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--首先应该编写css资源文件-->
<div>hello world</div>

</body>
</html>

        css文件

div{
    color: greenyellow;
}

注意:
            * 1,2,3种方式 css作用范围越来越大
            * 1方式不常用,后期常用2,3
            * 3种格式可以写为:
                <style>
                @import "css/a.css";
            </style>

二、选择器


   2.1、选择器定义

筛选具有相似特征的元素

   2.2、分类

        基础选择器
            1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
                        * 语法:#id属性值{}
            2. 元素选择器:选择具有相同标签名称的元素
                        * 语法: 标签名称{}
                        * 注意:id选择器优先级高于元素选择器
            3. 类选择器:选择具有相同的class属性值的元素。
                        * 语法:.class属性值{}
                        * 注意:类选择器选择器优先级高于元素选择器
        拓展选择器
            1. 选择所有元素:
                * 语法: *{}
            2. 并集选择器:
                * 选择器1,选择器2{}
            3. 子选择器:筛选选择器1元素下的选择器2元素
                * 语法:  选择器1 选择器2{}
            4. 父选择器:筛选选择器2的父元素选择器1
                * 语法:  选择器1 > 选择器2{}
            5. 属性选择器:选择元素名称,属性名=属性值的元素
                * 语法:  元素名称[属性名="属性值"]{}
            6. 伪类选择器:选择一些元素具有的状态
                * 语法: 元素:状态{}
                * 如: <a>
                    * 状态:
                        * link:初始化的状态
                        * visited:被访问过的状态
                        * active:正在访问状态
                        * hover:鼠标悬浮状态

 部分选择器代码演示

<!--
*@packageName 
*@className 基础选择器
*@author wang
*@date 2022/1/24 14:40
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*ID选择器*/
        #div1{
            color: greenyellow;
        }

        /*元素选择器*/
        div{
            color: coral;
        }

        /*类选择器*/

        .h{
            color: red;
        }


        /*属性选择器*/
        input[type='text'] {
            border: 5px solid;
        }

/*伪类选择器*/
/*        初始化的状态*/
        a:link{
           color: cyan;
        }
        /*鼠标悬浮状态*/
        a:hover{
            color: seagreen;
        }
        /*正在访问状态*/
        a:active{
            color:blue;
        }
        /*被访问过的状态*/
        a:visited{
            color: red;
        }

    </style>
</head>
<>

<!--测试基础选择器之ID选择器-->
    <div id="div1">hello world</div>
    <div>hello world2</div>

<hr>
<!--测试元素选择器-->
<div>hello world</div>
<div>hello world2</div>

<!--测试类选择器-->
<div class="h"> hello world</div>
<div>hello world2</div>

<!--测试属性选择器-->
<input type="text">



<!--测试伪类选择器-->
    <a href="#">
        点这里
    </a>

</body>
</html>

三、属性

   1. 字体、文本
        * font-size:字体大小
        * color:文本颜色
        * text-align:对其方式
        * line-height:行高 
    2. 背景
        * background:
    3. 边框
        * border:设置边框,符合属性
    4. 尺寸
        * width:宽度
        * height:高度
    5. 盒子模型:控制布局
        * margin:外边距
        * padding:内边距
            * 默认情况下内边距会影响整个盒子的大小
            * box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小
        * float:浮动
            * left
            * right
     

 边距图解
            

 四、注册页面案例实践

        案例效果

 代码演示

        

<!--
*@packageName 
*@className 注册页面Css
*@author wang
*@date 2022/1/24 18:54
*@Description 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面Css</title>

    <style>
        /*给页面设置背景*/
        body{
            background: url(img/register_bg.png) no-repeat center;
            padding-top: 50px;
        }

        /*整个布局设置,三个盒子的大盒子*/
        .rg_layout{
            width: 900px;
            height: 500px;
            /*边界线的颜色,宽度*/
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }

        /*左边盒子相关设置*/
        .rg_left{
            /*border: 1px red solid;*/
            float: left;
            margin: 15px;
        }

        /*左边中文设置*/
        .p-left1{
            font-size: 20px;
            color: #ffd026;
        }
        /*左边英文设置*/
        .p-left2{
            font-size: 20px;
            color: #a6a6a6;
        }
/*中间盒子设置*/
        .rg_center{
            margin-top: 55px;
            /*border: 1px red solid;*/
            float: left;
        }

        /*右边盒子设置*/
        .rg_right{
            /*border: 1px red solid;*/
            float: right;
            margin: 15px;
        }

        /*右边的文字字号*/
        .p-right{
            font-size: 15px;
        }
        /*右边的立即登陆颜色*/
        .p-right2{
            color: pink;
        }

        /*中间盒子的左半部分文字效果*/
        .td-left{
            width: 100px;
            height: 45px;
            text-align: right;
            color: grey;
        }

        /*中间盒子的右半部分的文字效果*/
        .td-right{
            padding-left: 50px;

        }
        /*右半部分的边框效果*/
        #username,#password,#email,#firstName,#phone,#birth{
            width: 220px;
            height: 25px;
            padding-left: 15px;
            color: grey;
            border: 1px solid #a6a6a6;
            /*边框圆角矩形*/
            border-radius: 5px;
        }
        /*验证码边框*/
        #checkCode{
            width: 110px;
        }

        /*验证码图片效果*/
        #img-check{
            height: 25px;
            vertical-align: middle;
        }

        /*注册按钮效果*/
        #button-sub{
            width: 150px;
            height: 40px;
            background-color: #ffd026;
            border: 1px solid #ffd026;
        }



    </style>
</head>
<body>
<div class="rg_layout">

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

    <div class="rg_center">

        <!--定义一个表单 不要忘记属性-->
        <form action="#" method="post">
            <!--    定义一个表格,不要忘记属性-->

            <table >
                <!--        用户名-->
                <tr>
                    <td class="td-left">
                        <label for="username">用户名</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="username" placeholder="请输入账号" id="username">
                    </td>
                </tr>

                <!--        密码-->
                <tr>
                    <td class="td-left">
                        <label for="password">密码</label>
                    </td>
                    <td class="td-right">
                        <input type="password" name="password" placeholder="请输入密码" id="password">
                    </td>
                </tr>

                <!--        email-->
                <tr>
                    <td class="td-left">
                        <label for="email">Email</label>
                    </td>
                    <td class="td-right">
                        <input type="email" name="email" placeholder="请输入email" id="email">
                    </td>
                </tr>

                <!--        姓名-->

                <tr>
                    <td class="td-left">
                        <label for="firstName">姓名</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="name" placeholder="请输入真实姓名" id="firstName">
                    </td>
                </tr>

                <!--        手机号-->
                <tr>
                    <td class="td-left">
                        <label for="phone">手机号</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="phone" placeholder="请输入您的手机号" id="phone">
                    </td>
                </tr>

                <!--        性别-->
                <tr>
                    <td class="td-left">
                        <label>性别</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="birth">出生日期</label>
                    </td>
                    <td  class="td-right">
                         <input type="date" name="birthDate" id="birth">
                    </td>
                </tr>

                <!--        验证码-->
                <tr>
                    <td class="td-left">
                        <label for="checkCode">验证码</label>
                    </td>
                    <td class="td-right">
                        <input type="text" name="checkCode" id="checkCode">
                        <img src="img/verify_code.jpg" id="img-check">
                    </td>
                </tr>
                <!--            注册按钮-->
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" name="button" value="注册" id="button-sub">
                    </td>
                </tr>

            </table>

        </form>
    </div>

    <div class="rg_right">

        <p class="p-right">已有用户?<a class="p-right2" href="#">立即登陆</a></p>
    </div>
</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空山新雨后~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值