CSS的三种引入方式(行内样式、内部样式、外部样式)

阿里 阅读:252 2022-06-06 14:12:32 评论:0

1. 行内样式

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
</head> 
<body> 
 
<div style="font-weight: 700; font-size: 50px;">盒子一</div> 
 
 
</body> 
</html> 

显示效果:

行内样式

2. 内部样式

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        div { 
            font-weight: 700; 
            font-size: 50px; 
        } 
 
    </style> 
 
</head> 
<body> 
 
<div>盒子一</div> 
 
</body> 
</html> 

显示效果:

行内样式

3. 外部样式

index.css和index.html位于同一文件夹下,内容如下:

 
div { 
    font-weight: 700; 
    font-size: 50px; 
} 

index.html内容如下:

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <link rel="stylesheet" href="index.css"> 
 
</head> 
<body> 
 
<div>盒子一</div> 
 
</body> 
</html> 

显示效果:

行内样式


标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号