CSS层叠式样式表学习笔记

CSS和HTML分开的优点

HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。
1、实现解耦合的作用
2、使得协作更加明确
3、开发效率得到提高

CSS和HTML的结合方式

内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。

内部：直接在head内部中控制该文件的样式。

外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。

CSS的基本语法

格式：
选择器{
属性：属性值;
属性：属性值;

}

选择器：就是用于筛选特征相似的元素

基础选择器：

id选择器：#id属性值{}
元素选择器：直接筛选元素相对应的内容
类选择器：class属性值{}
优先性上id>calss>元素

扩展选择器：

通用选择器：*{}选择所有元素
并集选择器：选择器1，选择器2{}
子集选择器：选择器1 选择器2{}
父集选择器：选择器1>选择器2（选择选择器2上的选择器1）
属性选择器：元素名称[属性=“属性值”]{}
伪类选择器：元素：状态{}
状态：linked:初始化
hover:鼠标悬浮状态
active：鼠标点击但是未打开状态
visited:访问过状态

CSS属性

字体（Font）属性

font-size：字体大小
font-family：字体系列

文本（Text）属性

color：文本的颜色
text-align：对其方式
line-height：行高

边框（Border）属性

border：设置边框，复合属性

尺寸(Dimension) 属性

width：设置宽度
height：设置高度

背景（background）属性

background：设置背景，复合属性

盒子模型

margin：外边距

padding：内边距

注意：默认情况下内边距会影响整个盒子的大小。

设置 box-sizing: border-box; 可以让width和height就是最终盒子的大小

float：浮动

left：左浮动
right：右浮动

登录案例

HTML展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/注册页面样式表.css">
</head>
<body>
<div class="rg_layout">
    <!--左侧注册提示-->
    <div class="rg_left">
        <p class="rg_left_chinese">新用户注册</p>
        <p class="rg_left_english">USER REGISTER</p>
    </div>
    <!--中间填写注册信息-->
    <div class="rg_center">
        <div>
            <form>
                <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="phone">手机号</label></td>
                        <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</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">出生日期</td>
                        <td class="td_right">
                            <input type="date" name="birthday" id="birthday">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right">
                            <input type="text" name="checkcode" id="checkcode">
                            <img id="img_check" src="img/verify_code.jpg"/>
                        </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 class="rg_right_login">已有账号?<a href="#">立即登陆</a></p>
    </div>

</div>
</body>
</html>

CSS展示

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background: url("../img/register_bg.png") no-repeat center;
}

.rg_layout{
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;
    /*让div水平居中*/
    margin: auto;
    margin-top: 25px;
}

.rg_left{
    /*border: 1px solid red;*/
    float: left;
    margin: 15px;
}
.rg_left_chinese{
    color:#FFD026;
    font-size: 20px;
}
.rg_left_english{
    color:#A6A6A6;
    font-size: 20px;

}

.rg_center{
    /*border: 1px solid red;*/
    float: left;
    margin: 15px;
}
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.td_right{
    padding-left: 50px ;
}
#username,#password,#email,#name,#phone,#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;
    margin-top: 15px;
    margin-left: 50px;
    background-color: #FFD026;
    border: 1px solid #FFD026 ;
}

.rg_right{
    /*border: 1px solid red;*/
    float: right;
    margin: 15px;
}
.rg_right_login{
    font-size: 15px;
}
.rg_right_login a{
    color: pink;
}