CSS使用

todd1er

已于 2023-04-20 20:47:23 修改

阅读量109

点赞数

文章标签： css 前端 html

于 2023-04-20 20:47:01 首次发布

本文链接：https://blog.csdn.net/qq_55916894/article/details/130254736

版权

目录

一.三种写法

1.内部样式

2.内联样式

3.外部样式

二.CSS选择器

1.标签选择器

2.类选择器

3.id选择器

4.复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

三.常用属性

CSS即层叠样式表，CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果。

一.三种写法

1.内部样式

内部样式是使用style标签，直接把CSS写入到html如闻中，可以放在任意位置，建议放在head标签内。

<style><!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>Document</title>

    <style>
        p{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <!--内部样式 -->
    <p> 理塘 </p>
</body>
</html>

2.内联样式

内联样式：使用style属性，针对当前元素设置样式，只对当前元素生效。内联样式优先级大于内部样式。

<!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>Document</title>
</head>
<body>
     <!-- 内联样式-->
    <p style="color: blue;font-size: 50px;">理塘</p>
</body>
</html>

3.外部样式

把css代码单独写一个.css文件，使用link引入。

<!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>Document</title>
    //引入css文件
    <link rel="stylesheet" href="test.css">
</head>
<body>
</body>
</html>

二.CSS选择器

1.标签选择器

直接再{前写标签名字。效果是当前页面的所有同类标签都会被选中。

如：

<style>
        p{
            color: rgb(32, 197, 54);
            font-size: 30px;
        }
</style>

2.类选择器

可以创建CSS类，手动指定哪些元素应用该类。类选择器，可以让多个元素应用同一个类。

<style>
        .two{
            color: rgb(243, 4, 4);
        }
        .four{
            font-size: 50px;
        }
</style>
    <div class="two">此是div</div>
    <div class="two four">此是active</div>

3.id选择器

html页面中的每一个元素，都可以设置唯一的id。id选择器只能针对唯一的元素生效。

<style>
        #ding{
            color: blue;
        }
        #li{
            color: blueviolet;
        }
</style>

    <div id="ding">bug</div>
    <div id="li">bug1</div>

4.复合选择器

后代选择器

<style>
        /*选中ul里的li标签*/  
        /* li只要是ul的后代即可（包含子元素，孙子元素等） */      
        ul li{
            color: chartreuse;
        }
</style>


    <ul>
        <li>a</li>
        <li>b</li>
        <li>c
            <ul>
                <li>D</li>
            </ul>
        </li>
    </ul>

    ol标签内的li标签没有变化
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>

子选择器

子选择器只选择子元素。

        /* 子选择器 */
    <style>
    .one>li{
          color: bisque;
    }   
    </style>
    <div class="one">
        <li>sad</li>
        <ul>
            <li>ds</li>
        </ul>
    </div>

并集选择器

使两个选择器应用同样的样式。

<style>
         .four,.five{
            color: aliceblue;
        }
</style>

伪类选择器

伪类选择器选择某个元素的某种状态。

<style>
/* 伪类选择器 */

        /* 鼠标悬停改变 */
        .six:hover{
            color: blue;
        }

        /* 鼠标按下 */
        .seven:active{
            color: aqua;
        }
</style>

三.常用属性

<!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>Document</title>
    <!-- <link rel="stylesheet" href="test.css"> -->
</head>
<body>
    <style>
        .one{
        /* color: rgb(0, 15, 155); */
        /* color: #ff0000; */
        color: #111;/*缩写 aabbcc-》abc*/
    
        /* 字体 */
        font-family: 宋体;
        
        /* 字体大小 */
        font-size: 20px;
        
        /* 字体粗细 */
        font-weight: 700;
        
        /* 字体倾斜 */
        font-style: italic;
    
        /* 文字对齐 */
        text-align: center;
    
        /* 文本装饰 */
        text-decoration: none;/* */
    
        /* 文本缩进 */
        text-indent: 2em;/*em为相对的单位，是以文字尺寸为基础设置的*/
    
        /*行高  = 文字高度+行间距*/
        line-height: 30px;
    
        /* 背景颜色 */
        /* background-color: rgba(255,0,0,0.1); */
    
        /* 背景图片 */
        background-image: url(../BoKe/image/20200722081817153.jpg);
        background-repeat: no-repeat;/*不平铺*/
        /* 图片位置 */
        background-position: center;
        background-size: cover;

    }
    .two{
        line-height: 200px;
        text-align: center;
        width: 200px;
        height: 200px;
        background-color: #660707;

        /*圆角*/
        border-radius: 100px;/*高度一半为圆*/

        /*显示模式*/
        display: block;/*块级*/
        display: inline;/*行内元素*/

        /* 边框 有4个方向border-left -right -top -bottom */
        /* 1.边框粗细 */
        /* 2.边框颜色 */
        /* 3.边框风格 */
        /*默认边框会撑大盒子*/
        border: 5px black solid ;

        /* 不撑大盒子   边框向内延伸*/
        /* box-sizing: border-box; */

        /* 内边距 */
        padding: 10px;/*四个方向都是10px*/
        /* padding: 20px 10px;上下边距20px 左右边距10px */

        /* 外边距 */
        margin: 10px 20px 30px 40px;/*上右下左*/
        /*把margin-left margin-right 都设置成auto则该元素在父元素内水平居中*/
    }

    div{
        width: 100%;
        height: 200px;
        background-color: #e22727;
        /* 弹性布局 */
        display: flex;
        /* 水平排列 */
        justify-content: space-around;
        /* 垂直排列 */
        align-items: center;
    }
    div>span{
        text-align: center;
        background-color: rgb(39, 184, 99);
        width: 100px;
        height: 100px;
        line-height: 100px;
    }
    </style>
    <!-- <div class="two">猛虎<br>

    </div> -->
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>


    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat repudiandae esse eius quia, id laborum distinctio odio accusantium ipsa, quos harum sapiente nobis ducimus sunt. Deleniti laudantium aut ipsam sequi!</p>
    
</body>
</html>

over.