• 目录

CSS基本语法

阅读量: 1055 编辑

CSS基本语法

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

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

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

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

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

用法

<div class="class_name"> </div>

2、标签选择器

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

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

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

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

用法

<div id="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>
<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>CSS的语法</title>

        <style type="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>
        <div class="my-div">这是一行文字</div>
        <br/>
        <div>这是一行文字2</div><br/>
        <div>这是一行文字3</div><br/>
        <div id="my-id-div">这是一行文字4</div><br/>
    </body>
    
</html>
  • 目录