前端学习：学习笔记（CSS部分）

CSS的插入方式_内嵌样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    
    
    <body>
        <!-- 插入CSS代码的第1种方式: 内嵌形式 -->
        <div style="height: 300px;width: 300px;background-color: red;">
            <h1>我是DIV--1号</h1>
        </div>
                
                
        <div>
            <h1>我是DIV--2号</h1>
        </div>            
                
    </body>
    
    
    
    
    
</html>

View Code

CSS的插入方式_内部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                background-color: red;
                color: yellow;
            }
        </style>
    </head>

    
    <body>
        <!-- 插入CSS代码的第2种方式: 内部形式 -->
        <div>
            <h1>我是DIV--1号</h1>
        </div>
                
                
        <div>
            <h1>我是DIV--2号</h1>
        </div>    
        
    </body>

</html>

View Code

CSS的插入方式_外部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/Demo1.css" />
    </head>
    
    
    <body>
        <!-- 插入CSS代码的第3种方式: 外部形式 -->
        <div>
            <h1>我是DIV--1号</h1>
        </div>
                
                
        <div>
            <h1>我是DIV--2号</h1>
        </div>    
    </body>
    
</html>

View Code

Demo01.css

div{
    height: 500px;
    width: 500px;
    background-color: #FFFF00;
    color: black;
}

View Code

前端学习：学习笔记（CSS部分）

前端学习：学习笔记（CSS部分）

CSS的插入方式_内嵌样式

CSS的插入方式_内部样式

CSS的插入方式_外部样式

Demo01.css

猜你喜欢