javaweb ---- CSS

最新推荐文章于 2024-03-16 10:16:59 发布

Yiyou-Long

最新推荐文章于 2024-03-16 10:16:59 发布

阅读量125

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/m0_46523928/article/details/117441430

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javaweb ---- CSS

CSS的理解概述：

CSS通过选择器选择元素使样式可以作用于选择器下的所有html元素，即相同的的样式只要写一遍。不同选择器作用于同一元素时有优先级比如：id选择器优先级高于元素选择器,类选择器选择器优先级高于元素选择器。

CSS的使用概述:

将文本，图片，列表，链接，表单效果的标签都嵌套写在块标签，表格的单元格标签里，并赋上便于阅读的class值，再用类选择器，子选择器，包含选择器，标签选择器写样式，最后将样式提取出来成css文件，在html页面中用外联样式的方式引入。
包含选择器与子选择器的使用区别:
在水平方向格式化的“7大属性”（'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block）中，只有3个可以设置为auto: width, margin-left, margin-right; 当wideth = auto; margin-left auto; margin-right auto ;则外边距为0；当width为固定值，margin-left auto; margin-right: auto; 则左右外边距下相同，元素居中。
position属性不同使用情况（博客转载）：https://blog.csdn.net/gamenoover/article/details/90614014
显示的行间距效果为(line-hight) - (font-size) 平分到上下间距。
overflow属性的三种作用（博客转载）：https://blog.csdn.net/qq_41638795/article/details/83304388

HTML&CSS的测试代码：

<!--在head标签内定义style标签，style标签的标签体内容就是css代码-->
<!--外部样式
  1. 定义css资源文件。
  2. 在head标签内，定义link标签，引入外部的资源文件
  -->
<head>  
  <style>
        @import "css/a.css";
   </style>
   <!-- <link rel="stylesheet" href="css/a.css"> 默认type = "text/css"-->
</head> 
   
<!--内部样式
  * 在head标签内，定义style标签，style标签的标签体内容就是css代码
  -->
<head>
   <style>
   /*选择器{
     属性设置
   }*/
    </style>
</head>

选择器的测试代码：

<style>
<!-- id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一-->
  #id{      
      color: 颜色;
      font-size: 字体大小;
      text-align: 对齐方式;
      vertical-align: middle; 垂直居中
      line-height: 行高  
      border: 边框; 
      border-radius: 设置边框圆角;
      height: 高度;
      width:  宽度固定值或者auto即占满空间;
      margin: 上下外边距固定值 左右外边距固定值或auto;
      padding: 内边距;
      padding-left: 内左边距;
      background: url("img/logo.jpg") no-repeat center; 图片
      background-color: 背景颜色;
      box-sizing: border-box即设置width=展示元素水平宽度=内容区宽度+padding+border |  center-box即设置width=内容区宽度，元素展示宽度=padding+border+width ;
      float: 左中右浮动;
   
      
            
       /*...*/}

<!--元素选择器：选择具有相同标签名称的元素-->
 标签名称{
       /*...*/
         }
        
<!--类选择器：选择具有相同的class属性值的元素。-->
  .class{
     /*...*/
     }

<!--*选择器：选择所有元素-->
    *{
       /*...*/
      }

<!--并集选择器：选择两个选择器相加的部分-->
    选择器1,选择器2{
                   /*...*/
                  }
<!--子选择器：筛选选择器1元素下的选择器2元素-->
    选择器1 选择器2{
                   /*...*/
                  }
     
<!--父选择器：筛选选择器2的父元素选择器1-->
    选择器1>选择器2{
                   /*...*/
                  }
<!--属性选择器：选择元素名称，属性名=属性值的元素-->
  元素名称[属性名="属性值"]{
                         /*...*/
                         }       

<!--伪类选择器：选择一些元素具有的状态-->
	元素:状态{
            /*...*/
             }

        a:link{  /*初始化的状态*/
            color: pink;
        }

        a:hover{  /*鼠标悬浮状态*/
            color: green;
        }

        a:active{  /*正在访问状态*/
            color: yellow;
        }

        a:visited{  /*被访问过的状态*/
            color: red;
        
</style>

注册页面的测试代码：

<!--页面效果分析：
    1.背景图片：整体框架为body,插入图片
    2.中间白块灰框：框架为div,并设置背景色，边框宽度，颜色
    3.白块中左中右分三块：三个div设置浮动
    4.最左块两段文本,文本与边框有距离：P标签并调整字体颜色，大小
    5.最右块一段文本附有链接：p标签内嵌a标签并调整字体大小，颜色
    6.中间块为表单
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px; 
        padding: 0px;
        box-sizing: border-box; 
    }

    body{
        background: url("img/register_bg.png") no-repeat center; /*设置背景图*/
        padding-top: 25px; /*内上边距为25xp*/
    }
    
    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        margin: auto;  /*让div水平居中*/
        margin-top: 15px;  /*外边距为15个像素*/
    }

    .rg_left{
        float: left; /*左浮动*/
        margin: 15px; /*外边距为15个像素*/
    }

    /*父标签.rg_left下的第一个子i标签p*/
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    /*父标签.rg_left下的最后一个子i标签p*/
    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }

    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

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

    .rg_right > p:first-child{
        font-size: 15px;

    }
    /*rg_right标签下的p标签下的a标签*/
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ; /*输入框的左内边距加大，显示出提示名称和输入框的距离*/
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        border-radius: 5px;/*设置边框圆角*/
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle; /垂直居中/
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #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-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></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="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>

        </div>

    </div>

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


</div>

</body>
</html>