HTML样式

最新推荐文章于 2022-10-13 16:58:32 发布

乞力马扎罗的雪CYF

最新推荐文章于 2022-10-13 16:58:32 发布

阅读量1.3k

点赞数 1

分类专栏： HTML5 文章标签： html 标签样式

本文链接：https://blog.csdn.net/CHENYUFENG1991/article/details/48766887

版权

HTML5 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.标签

<link>:资源引用

2.属性

rel:"stylesheet":外部样式表

type:"text/css":引入文档的类型

margin-left:边距

3.三种样式表插入方式

（1）外部样式表：

（2）内部样式表：

body{

background-color:red

}

margin-left:20px

}

</style>

（3）内联样式表

直接在标签内部制定样式；

具体的实现代码如下：

【一】外部样式表

1).新建一个文件，命名为mystyle.css.里面代码如下：

h1{

    color: red;
}

2).新建一个HTML文件，index.html，里面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>


    <h1>神奇网站</h1>

</body>
</html>

3).运行程序：

。

【二】内部样式表

1).内部样式表其实和外部样式表非常类似，只是把在css文件中的代码直接写到了HTML中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>

    <style type="text/css">
        h1{
            color: red;
        }
    </style>

</head>
<body>


    <h1>神奇网站</h1>

</body>
</html>

2).效果如下：其实和第一个外部样式表是一样的。

。

【三】内联样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>

</head>
<body>

<!--直接在标签内部制定样式-->
    <h1 style="color: red">神奇网站</h1>

</body>
</html>

实现效果同上面两个。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

乞力马扎罗的雪CYF

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML样式

1.标签:样式定义:资源引用2.属性rel:"stylesheet":外部样式表type:"text/css":引入文档的类型margin-left:边距3.三种样式表插入方式（1）外部样式表：（2）内部样式表：body{background-color:red}p{margin-left:20px
复制链接

扫一扫