CSS学习

￡神魔★判官ぃ 2023-10-07 09:51 1阅读 0赞

#### 目录 ####

*   *  1.CSS的概念
     *  2.使用CSS的好处
     *  3.CSS的使用：css和html结合的方式
     *  4.CSS语法
     *  5.选择器
     *  6.CSS属性
     *  7.CSS案例

### 1.CSS的概念 ###

**css**（cascading style sheets）：进行页面美化和布局控制

*  层叠：多个样式可以作用在同一个html的元素上同时生效

### 2.使用CSS的好处 ###

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

### 3.CSS的使用：css和html结合的方式 ###

1.内联样式

*  在标签内使用style属性指定css代码  
    如

<div style="color:red;">hello CSS</div>

2.内部样式

*  在head标签内定义style标签，style标签体内容就是 css代码  
    如

<head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           div{
          
               color:blue;
           }
       </style>
    </head>
    <body>
       <div>hello CSS</div>
    </body>

3.外部样式  
步骤：

*  定义css资源文件
 *  在head标签内定义link标签，引入外部资源文件  
    如
 *  css文件

div{
        
        color:green;
    }

*  html文件

<head>
       <meta charset="UTF-8">
       <title>Title</title>
       <link rel="stylesheet" href="css/a.css">
    </head>
    <body>
       <div>hello CSS</div>
    </body>
    </html>

### 4.CSS语法 ###

*  格式

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

**选择器：用来筛选具有相似特征的元素**

### 5.选择器 ###

分类：  
1.基础选择器

*  id选择器：选择具体的 id 属性值的元素,建议在一个 HTML 页面中一个 id 值只使用一次，保持唯一性

#div1{
       color: red;
    }
    
    <div id="div1">
       id选择器
    </div>

*  元素选择器：选择具有相同标签名称的元素

div{
       color:green;
    }
    
    <div>
       元素选择器
    </div>

*  类选择器：选择具有相同的 class 属性值的元素

.cls1{
       color: blue;
    }
    
    <div class="cls1">
       类选择器
    </div>

**选择器优先级：id选择器>类选择器>元素选择器**  
2.扩展选择器

*  通用选择器：选择所有元素

*{
        
    	background-color:yellow;
    }

*  并集选择器：选择所有指定的元素

div,p{
        
    	background-color:yellow;
    }

*  子选择器：选择指定元素下的子元素

div p{
         
    	background-color:yellow;
    }

*  父选择器：选择指定元素下的子元素，且其父元素是指定元素

div>p
    {
         
    	background-color:yellow;
    }

**注意：子选择器和父选择器的区别在于，子选择器中 p 标签在 div 标签中就可以生效，而父选择器不仅要 p 标签在 div 标签中，而且 p 标签的父标签必须是 div 标签才能生效。**

*  属性选择器：选择元素名称，属性名=属性值的元素

input[type="text"]{
        
    	background-color:yellow;
    }

*  伪类选择器：选择一些元素具有的状态

a:link
    {
         
    	background-color:yellow;
    }

**这里的a标签是超链接标签，link表示初始化的状态，visited表示被访问过的状态，active表示正在访问状态，hover表示鼠标悬浮状态**

### 6.CSS属性 ###

1.字体，文本

*  font-size：字体大小
 *  color：字体颜色
 *  text-align：对齐方式
 *  line-height：行高

2.背景

*  background

<div>
    	background:url("img/logo.jpg") no-repeat;
    </div>

以上  
3.边框

*  border：设置边框，复合属性，可以对每个边框分别做设计

4.尺寸

*  width：宽度
 *  height：高度

5.盒子模型

*  margin：外边距
 *  padding：内边距  
    **默认情况下内边距会影响整个盒子的大小**  
    **使用 ：box-sizing：border-box；设置盒子属性，让width和height就是最终盒子大小**

6.float：浮动

*  left
 *  right

### 7.CSS案例 ###

1.效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70]  
2.代码实现

*  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;
    }

*  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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224195837585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz,size_16,color_FFFFFF,t_70