Web-CSS基础_为注册界面中所有输入框设计选择器 input selector-CSDN博客

本文链接：https://blog.csdn.net/Jagger_Lin/article/details/86487782

一、CSS概述
1. 概念： CSS (Cascading Style Sheets) 通常称为CSS样式或专业术语层叠样式表；
层叠：使用不同的添加方式，给一个HTML标签添加样式，最后所有的样式叠加到一起，共同作用于该标签；
样式：给HTML标签添加需要显示的效果；
2. 作用： 渲染HTML页面更好看（文本内容、图片外形、版面布局等）
3. CSS的代码规则：
选择器{
属性名:属性值;
属性名:属性值;
…
}
或
选择器{属性名:属性值; 属性名:属性值;…}
4. 注意：

选择器严格区分大小写，属性和属性值不区分大小写；
多个属性之间用分号;隔开，最后一个属性结尾分号可以省略；
如果某个属性（border属性除外）的值由多个单词组成并且之间包含空格，则必须将这个属性值用引号" "包含；
属性的值和单位之间不允许出现空格，否则解析错误；

二、CSS具体用法
1. 在HTML中引入CSS样式的三种方式：

行内样式：在标签的style属性值中写CSS代码（只对该标签有效），此时选择器和大括号不用写，只需要属性名:属性值;属性名:属性值
内部样式: 在head标签的子标签< style >中写, 注意不能省略选择器和大括号；
外部样式: 在另外一个文件中写，这文件他的后缀必须是.css ，不能省略选择器和大括号；再通过head标签的另外一个子标签 < link >标签引入刚刚写的xxx.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!--内部样式-->
    <style>
        h2{
            color:blue;
        }
    </style>
    
    <!--外部样式-->
    <link rel="stylesheet" href="scratch1.css">
</head>
<body>
    <!--行内样式-->
    <h1 style="color:red;font-style: italic">测试行内样式</h1>
    
    <h2>测试内部样式</h2>
    <h3>测试外部样式</h3>
</body>
</html>

2. CSS的三种选择器（selector）：
选择器作用就是选中某个或者某些标签，以便于我们给这些标签设置属性；

元素选择器 / 标签选择器
格式：标签名{属性名:属性值;}
id选择器
格式：#id值{属性名:属性值;}
class选择器
格式：.类名{属性名:属性值;}
class选择器精确选择
格式：标签名.类名{属性名:属性值;}
属性选择器
格式：选择器[属性名=属性值]{属性名:属性值;}
包含选择器/后代选择器
格式：选择器1 选择器2{属性名:属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        h1{
            color: red;
        }
        #i001{
            color: aqua;
        }
        .test{
            color: green;
        }
        h1.test{
            color: coral;
        }
        input[type=password]{
            background-color: darkcyan;
        }
        body h3{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <h1>测试标签选择器</h1>
    <h2 id="i001">测试id选择器</h2>
    <h2 class="test">测试class选择器</h2>
    <h1 class="test">测试class选择器</h1>
    <input type="text" value="测试属性选择器">
    <input type="password" value="测试属性选择器">
    <h3>测试包含选择器</h3>
    <div>
        <h3>测试包含选择器</h3>
    </div>
</body>
</html>

3. 简单属性（不完整，仅做简单介绍）
1）border边框
border-style 边框风格
border-color 边框颜色
border-width 边框宽度
border 都放在一起
border-top 只有一个方向有边框
border-top，border-left 有交界的边都有边框

2）width宽度
属性：width
值：可以是百分比或者像素

3）height高度
属性：width
值：可以是百分比或者像素

4）background背景样式
background-color背景颜色
background-image:url(imagepath); 图片做背景
url(background.jpg) 本地测试
background-repeat 背景重复
background-size: contain 背景平铺

5）文本样式
color 文字颜色
text-align 对齐
text-decoration 文本修饰
line-height 行间距
letter-spacing 字符间距
word-spacing 单词间距
text-indent 首行缩进
text-transform 大小写
white-space 空白格

6）font字体样式
font-size 尺寸
font-style 风格
font-weight 粗细
font-family 字库
font 声明在一起

7）cursor光标样式
cursor:default 默认箭头
cursor:auto 自动
cursor:crosshair 十字
cursor:pointer 小手

8）padding内边距样式
概念：元素内边距指的是元素里的内容与边框之间的距离；
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上右下左

9）margin外边距样式
概念：元素外边距指的是元素边框和元素边框之间的距离；
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

10）display转换
作用：把一个块级元素转成行内元素（内联元素：不换行，但是不能指定大小），常见的块级元素（能指定大小，但是会换行）有div h1 p 等，常见的内联元素有 a b strong i input 等；
值：block(转成块级元素) inline(转成行内元素) none(隐藏) inline-block（元素处于同一行，同时还能指定大小）

11）超链接样式
超链状态有4种：
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

12）隐藏样式
使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

4. 盒子模型或边框模型（浏览器F12查看）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box{
            width: 300px;
            height: 550px;
            border-style: solid;
            border-width: 2px;
            border-color: red;
        }
        div.text{
            width: 200px;
            height: 200px;
            background-color: orange;
            border-style: solid;
            border-width: 2px;
            margin-left: 50px;
            margin-bottom: 50px;
            margin-top: 50px;
            cursor: crosshair;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="text">hello</div>
    <div class="text">world</div>
</div>
</body>
</html>

5. 布局属性
1）float浮动
作用：设置元素的浮动效果，让元素浮起来；
值：left 漂起来向左 right 漂起来向右

2）clear
作用：清除元素两边的浮动效果；
值：both 清楚该元素左右两边的浮动效果

3）绝对定位
作用：设置了绝对定位的元素，相当于该元素被从原文档中删除了，原位置不会留下空档
属性：position
值： absolute
再通过指定left，top绝对定位一个元素；
绝对定位是基于最近的一个定位了的父容器；

4）相对定位
作用：相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离，原位置会产生空档；
属性：position
值：relative

5）水平居中
元素内容居中：

属性align=“center”
属性style=“text-align:center”

元素居中：

span内联元素不能通过margin:0 auto居中，可以通过放置在div中，然后让div的text-align实现居中；
div等块级元素可以设置宽度，然后再使用样式 margin: 0 auto来使得元素居中；

6）垂直居中

line-height ：设置行间距，适合单独一行垂直居中；
内边距：设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上；
display: table-cell：首先通过display:
table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果；

6. 注册界面的简单设计（HTML+CSS）
在这里插入图片描述

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="copyty.css">
</head>
<body>
<div class="container">
    <div class="header">
        <span>欢迎注册</span>
    </div>

    <div class="register">
        <form method="post">
        <div class="form-item">
            <label class="form-label" for="userName">用户名：</label>
            <div class="form-field">
                <input type="text" class="form-text" value="请输入用户名" name="userName" id="userName">
                <span class="username-tips">长度不超过8个中文，注册后不可修改</span>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="form-item">
            <label class="form-label" for="password">密码：</label>
            <div class="form-field">
                <input type="password" class="form-password" value="请输入密码" name="password" id="password">
                <span class="password-tips">至少包含字母和数字，最短6位字符，区分大小写</span>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="form-item">
            <label class="form-label">手机号：</label>
            <div class="form-field">
                <select class="form-areaCode" name="areaCode" id="areaCode">
                    <option selected="selected">0086 中国大陆</option>
                    <option>001 美国</option>
                </select>
                <input type="text" class="form-number" value="请输入您的手机号" name="number" id="number">
                <span class="phoneNumber-tips">一个手机号只能认证一个账号</span>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="form-item">
            <label class="form-label">验证码：</label>
            <div class="form-field">
                <input type="text" class="form-vertificationCode" value="请输入验证码" name="verCode" id="verCode">
                <input type="button" class="form-getCode" value="获取验证码" name="getCode" id="getCode">
                <span class="phoneNumber-tips">请填写验证码</span>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="form-note">
            <p>如无法收取，请关闭手机的拦截软件</p>
        </div>
        <div class="form-item">
            <input type="checkbox" class="form-checkbox" value="1" name="agree" id="agree">
            <span class="form-agreeDoc">我已阅读并同意
                <a target="_blank" href="">《xxx用户协议》</a>
            </span>
        </div>
        <div class="form-item">
            <input type="submit" class="form-submit" value="立即注册" name="register" id="register">
        </div>
        </form>
    </div>

    <div class="footer">
        <p class="link">
            <a target="_blank" href="">关于我们</a>  |
            <a target="_blank" href="">广告服务</a>  |
            <a target="_blank" href="">在线客服</a>  |
            <a target="_blank" href="">隐私版权</a>  |
            <a target="_blank" href="">联系我们</a>  |
            <a target="_blank" href="">加入我们</a>  |
            <a target="_blank" href="">举报投诉</a>
        </p>
        <p class="bottom">© 1999 - 2019 xx社区</p>
    </div>
</div>
</body>
</html>

CSS：

/*覆盖浏览器默认样式，去除user agent stylesheet 的影响*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}
@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;

}
a{
    text-decoration: none;
    color: #000000;
    font-size:15px;
    /*字体*/
}
li{
    list-style: none;
}
input,img{
    border: none;
}
/*正式内容*/
.container{
    margin-left: 600px;
    margin-top: 200px;
    /*border: 1px solid red;*/
    width: 800px;
    height: 500px;
}
.header{
    font-size: 18px;
    color: #2965b1;
    text-align: center;;
    /*border: 1px solid blue;*/
}
.form-item .form-label{
    font-size: 18px;
    color: #333;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
   /* border: 1px solid orange;*/
    width: 200px;
    height: 36px;
    text-align: right;
}
.form-item .form-field .form-text,.form-item .form-field .form-password{
    font-size: 14px;
    color: grey;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 3px 10px;
    width: 250px;
    height: 28px;
}
.form-item .form-field .username-tips,.form-item .form-field .password-tips,.form-item .form-field .phoneNumber-tips{
    font-size: 10px;
    color: darkgray;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    /*border: 1px solid blue;*/
    padding: 8px 10px;
}
.form-item .form-field .form-areaCode{
    font-size: 16px;
    color: black;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    border: 1px solid #dedede;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 3px 10px;
    width: 80px;
    height: 36px;
}
.form-item .form-field .form-number{
    font-size: 14px;
    color: grey;
    float: left;
    margin-top: 15px;
    border: 1px solid #dedede;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 3px 10px;
    width: 170px;
    height: 28px;
}
.form-item .form-field .form-vertificationCode{
    font-size: 14px;
    color: grey;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    border: 1px solid #dedede;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 3px 10px;
    width: 100px;
    height: 28px;
}
.form-item .form-field .form-getCode{
    font-size: 14px;
    color: white;
    background-color: #91C135;
    float: left;
    margin-top: 15px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 150px;
    height: 36px;
}
.form-note{
    font-size: 12px;
    color: grey;
    text-align: center;
    /*border: 1px solid orange;*/
    margin-top: 15px;
}
.form-item .form-checkbox{
    margin-top: 35px;
    margin-left: 250px;
    width: 12px;
    height: 12px;
}
.form-item .form-agreeDoc,.form-item a{
    font-size: 12px;
    color: black;
    padding-top: -5px;
}
.form-item .form-submit{
    font-size: 18px;
    color: white;
    background-color: #4ba0d7;
    margin-left: 260px;
    margin-top: 15px;
    border-radius: 3px;
    border: 0 none;
    width: 250px;
    height: 40px;
}
.footer .link,.footer a{
    font-size: 12px;
    color: grey;
    text-align: center;
    margin-top: 50px;
}
.footer .bottom{
    font-size: 12px;
    color: grey;
    text-align: center;
}