CSS常用样式

2024-12-15

html 样式的用法

1.引入样式

1.1 行间样式

<!-- 直接在元素本身写一个style属性，属性以；进行分割 -->
<div style="color: red;font-size: 21px;" class="demo" id="demo1">红灯</div>

1.2 头部样式

<!-- 直接在元素本身写一个style属性，属性以；进行分割 -->
<style>
    /* 头部样式，直接写在head标签里 */
    div{
        font-weight: bold;
    }
</style>

1.3 外部引用

<!-- 创建一个以.css为结尾的样式文件 -->
<!-- 引入外部样式 Head标签里-->
<link rel="stylesheet" href="./demo.css">

1.4 样式的级别

行间样式级别最高
头部样式和外部样式谁在后面引入谁的级别高
!important可以设定样式的重要性，此时样式级别将失效

2.样式索引

2.1 直接以元素的名称为索引，所有元素都会执行该样式

<style>
    div{
        color: tomato;
    }
    p{
        color: rgb(24, 221, 106);
    }
</style>

2.2 以元素的类进行区分，在class属性里写上样式类别名，在样式设置时以“.”开头

<style>
    .demo{
        font-size: 21px;
    }
    .dp{
        font-size: 31px;
    }
</style>

2.3 以元素的id进行区分，在id属性里写上元素名，整个HTML页面里都不可以重复，在样式设置时以“#”开头

<style>
    #demo2{
        background-color: thistle;
    }
    #test2{
        background-color: violet;
    }
</style>

3.颜色样式

<style>
    div{
        color: white;
    }
    #demo1{
        background-color: tomato;
    }
    #demo2{
        background-color: rgb(13, 231, 111);
    }
    #demo3{
        background-color: orange;
    }
</style>

4.字体样式

<style>
div{
    font-size: 35px;
    font-weight: bold;
    font-family: '微软雅黑';
}
</style>

5.尺寸与排版样式

<style>
div{
    /* 尺寸与排版样式 */
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}
</style>

6.布局样式

<style>
div{
    /* 布局样式 */
    /* float: left; */
    display: inline-block;
    margin: 10px;
    /* padding: 10px; */
    position: relative;
}
.ico{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: red;
    position:absolute;
    top:0px;
    left: 80px;
}
</style>

7.形状样式

<style>
div{
    /* 形状样式 */
    border-radius: 100px;
    /* border-radius:100px  60px 100px 60px; */
    box-shadow: 2px 5px 15px rgb(124, 240, 108);
}
</style>

8.边框样式

<style>
div{
   /* 边框样式 */
    border: 5px solid black;
}
</style>

9.动画

<style>
@keyframes demo {
    0% {background-color: rgb(233, 91, 66);left: 0px; top:0px}
    25% {background-color: rgb(60, 221, 68);left: 0px; top:100px}
    50% {background-color: rgb(185, 226, 34);left: 0px; top:100px}
    100% {background-color: rgb(233, 31, 182);left: 0px; top:0px}
}
#demo1{
    background-color: tomato;
    animation: demo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
</style>

10.示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lession2：CSS样式</title>
    <style>
        @keyframes demo {
            0% {background-color: rgb(233, 91, 66);left: 0px; top:0px}
            25% {background-color: rgb(60, 221, 68);left: 0px; top:100px}
            50% {background-color: rgb(185, 226, 34);left: 0px; top:100px}
            100% {background-color: rgb(233, 31, 182);left: 0px; top:0px}
        }
        div{
            /* 前景色 */
            color: white;
            /* 字体样式 */
            font-size: 35px;
            font-weight: bold;
            font-family: '微软雅黑';
            /* 尺寸与排版样式 */
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            /* 布局样式 */
            /* float: left; */
            display: inline-block;
            margin: 10px;
            /* padding: 10px; */
            position: relative;
            /* 形状样式 */
            border-radius: 100px;
            /* border-radius:100px  60px 100px 60px; */
            box-shadow: 2px 5px 15px rgb(124, 240, 108);
            /* 边框样式 */
            /* border: 5px solid black; */
        }
        .ico{
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: red;
            position:absolute;
            top:0px;
            left: 80px;
        }
        #demo1{
            background-color: tomato;
            animation: demo;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        #demo2{
            background-color: rgb(13, 231, 111);
            position: relative;
        }
        #demo3{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="demo" id="demo1">红灯</div>
    <div class="demo" id="demo2">
        绿灯
        <!-- <div class="ico"></div> -->
    </div>
    <div class="demo" id="demo3">橙灯</div>
</body>
</html>

阅读剩余

作者：姜九二

链接：https://www.jiangjianwu.cn/development/htmlcssjavascript/css/1395/css%e5%b8%b8%e7%94%a8%e6%a0%b7%e5%bc%8f.html

文章版权归作者所有，未经允许请勿转载。

THE END