CSS基本语法

2023-03-21 21:48:23 浏览数 (1)

CSS基本语法

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

代码语言：javascript复制
<divstyle="color: red;">
 这是div
</div>

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

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

代码语言：javascript复制
.class_name{
        属性1:值;
        属性2:值[值];
    }

用法

代码语言：javascript复制
<divclass="class_name"></div>

2、标签选择器

代码语言：javascript复制
     div{
        属性1:值[值];
    }

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

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

代码语言：javascript复制
#myid{
        属性1:值[值];
    }

用法

代码语言：javascript复制
<divid="myid"></div>

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

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

test.css

代码语言：javascript复制
.mydiv{
    color: red;
    font-size:50px;
    background-color: yellow;
    border:1px solid green;
    margin-top:100px;
}

四、代码实战

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

代码语言：javascript复制
<!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>
css html class 程序 语法

0 人点赞