CSS常用用法总结：

最新推荐文章于 2025-03-25 19:40:35 发布

娃哈哈哈❚❚

最新推荐文章于 2025-03-25 19:40:35 发布

阅读量1k

点赞数 15

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_73756512/article/details/137979398

版权

本文详细介绍了CSS的三种引入方式（行内式、内嵌式和外部样式表），以及元素、ID和Class选择器的使用。还探讨了浮动、定位和盒子模型的概念，包括padding和margin对布局的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css引入标签：

引入方式

方式1、行内式

通过元素的style属性引入样式

语法：style="样式名:样式值;样式名:样式值;... ..."

缺点：1、代码复用度低，不利于维护

2、scc样式代码和html结构代码交织在一起，影响阅读，影响文件大小，影响性能

方式2、内嵌式

通过head标签中的style标签定义本页面的公共样式

通过选择器确定样式的作用元素

方式3、外部样式表

将css代码单独放入一个css文件中，哪个html需要这些代码就在head中通过link标签引入

代码：方式3调用代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/btn.css">
</head>
<body>
    <input type="button" value="钱来" >
    <input type="button" value="钱来" >
    <input type="button" value="钱来" >
    <input type="button" value="钱来" >
</body>
</html>

代码:总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 元素选择器，通过标签名，确定样式的作用元素 */
        input{
            width:60px;
            height: 40px;
            background-color: red;
            color: white;
            font-size: 22px;
            font-family: '隶书';
            border: 2px solid green;
            border-radius: 5px;
        }
    </style>


</head>
<body>
     <input type="button" value="钱来" >
     <input type="button" value="钱来" >
     <input type="button" value="钱来" >
     <input type="button" value="钱来" >


    <!-- <input type="button" value="钱来" 
    style="
    width:60px;
    height: 40px;
    background-color: red;
    color: white;
    font-size: 22px;
    font-family: '隶书';
    border: 2px solid green;
    border-radius: 5px;
    ">

    <input type="button" value="钱来" 
    style="
    width:60px;
    height: 40px;
    background-color: red;
    color: white;
    font-size: 22px;
    font-family: '隶书';
    border: 2px solid green;
    border-radius: 5px;
    "> -->

</body>
</html>

效果图：

css选择器：

1、元素选择器：根据标签的名字确定样式的作用元素

语法：标签名{}

缺点：某些同名的元素不希望使用某些样式，某些不同名的元素也是使用该样式，都无法协调

2、id选择器：根据标签的id值来确定样式的作用元素

一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性

语法： #id值{}

缺点： id具有唯一性，样式只能做用到一个元素上

3、class选择器：根据元素的class属性值确定样式的作用元素

元素的class属性值可以重复，而且一个元素的class属性可以有多个值

语法： .class属性值{}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input{
            width:80px;
            height: 40px;
            background-color: greenyellow;
            color: black;
            border: 1px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 8px;

        } */

        /* #btn4{
            width:80px;
            height: 40px;
            background-color: greenyellow;
            color: black;
            border: 1px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 8px;

        } */

        .shapeClass{
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }

        .colorClass{
            background-color: greenyellow;
            color: black;
            border: 3px solid green;
        }

        .fontClass{
            font-size: 20px;
            font-family: '隶书';
            line-height: 30px;
        }

    </style>

</head>
<body>
    <input id="btn1" class="shapeClass colorClass fontClass" type="button" value="钱来"/>
    <input id="btn2" type="button" value="钱来"/>
    <input id="btn3" type="button" value="钱来"/>
    <input id="btn4" type="button" value="钱来"/>
    <button id="btn5">按钮</button>
</body>
</html>

效果图：

css浮动：

dispaly: inline

block 块 inline 行内

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style>
     .outDiv{
        width: 500px;
        height: 300px;
        border: 1px solid greenyellow;
        background-color: beige;
     }
    .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        /* dispaly: inline   block 块 inline 行内 */ 
    } 
    .d1{
        background-color: yellow;
        float: left;/* float: right;   */
    }
    .d2{
        background-color: red;
        /* float: right; */
    }
    .d3{
        background-color: green;
        /* float: right; */
    }
    </style>
<body>
    
    <div class="outDiv">
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div2</div>
        <div class="innerDiv d3">div3</div>
    </div>
</body>
</html>

效果图：（div2和div3重合）

css定位：

position：

static 默认

absoult 绝对

relative 相对相对元素的原本位置

fixed 相对相对浏览器窗口

left 左

right 右

top 上

bottom 下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style>
     
    .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        
    } 
    .d1{
        background-color: yellow;
        /* position: absolute; */
        /* position: relative; */
        position: fixed;
        top: 30px;
        left: 30px;
    }
    .d2{
        background-color: red;
        
    }
    .d3{
        background-color: green;
        
    }
    </style>
<body>
   
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div2</div>
        <div class="innerDiv d3">div3</div>

        <br><br><br><br><br><br><br>
</body>
</html>

效果图：

css盒子模型：

padding 内边距

margin 外边距

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style>
     .outDiv{
        width: 500px;
        height: 300px;
        border: 1px solid greenyellow;
        background-color: beige;
        margin: 0px auto;
     }
    .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        float: left;
    } 

    .d1{
        background-color: yellow;
        /* margin-right: 10px;
        margin-top: 10px;
        margin-left: 10px;

        padding-top: 10px;
        padding-left: 10px;
         */

        margin: 10px 20px 30px 40px;
        padding: 20px 10px 10px 5px;
    }
    .d2{
        background-color: red;
        margin-left: 10px;
    }
    .d3{
        background-color: green;
        
    }
    </style>
<body>
    
    <div class="outDiv">
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div2</div>
        <div class="innerDiv d3">div3</div>
    </div>
</body>
</html>

效果图：