CSS基本语法

鹤川

发布于 2023-03-21 21:48:23

25400

代码可运行

文章被收录于专栏：鹤川博客鹤川博客

运行总次数：0

代码可运行

CSS基本语法

一、用法一：在HTML标签的style属性中使用

<divstyle="color: red;">
 这是div
</div>

二、用法二：通过选择器来使用

1、类选择器。用在标签的 class 属性上

.class_name{
        属性1:值;
        属性2:值[值];
    }

用法

<divclass="class_name"></div>

2、标签选择器

     div{
        属性1:值[值];
    }

所有的div都会用上这个样式

3、id选择器，标签的id属性上

#myid{
        属性1:值[值];
    }

用法

<divid="myid"></div>

三、用法三：直接写在一个 `.css` 文件中，然后在 `.html` 文件中引入即可

css文件中的具体写法，参考： 用法二、通过选择器来使用

test.css

.mydiv{
    color: red;
    font-size:50px;
    background-color: yellow;
    border:1px solid green;
    margin-top:100px;
}

四、代码实战

新建 html 文件 02-style.html ，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>CSS的语法</title>

        <styletype="text/css">
            .my-div{
                color:blue;
                border:1px solid red; 
                text-align:center;  
            }

            div{
                border:1px solid blue; 
                text-align:center;   
            }

            #my-id-div{
                color:green;
            }
        </style>

    </head>
  
    <body>
        <divclass="my-div">这是一行文字</div>
        <br/>
        <div>这是一行文字2</div><br/>
        <div>这是一行文字3</div><br/>
        <divid="my-id-div">这是一行文字4</div><br/>
    </body>
  
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023 年 02 月，如有侵权请联系 cloudcommunity@tencent.com 删除

css