零基础学习CSS(1)——内联样式、内部样式表、外部样式表

Dragon水魅

发布于 2026-01-23 18:59:25

940

注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

HTML中使用CSS有三种方法：内联样式、内部样式表、外部样式表： 内联样式：

<!DOCTYPE html>
<html>
<head>
    <title>内联样式</title>
    <meta charset="utf-8">
</head>
<body>
    <p>I love fishC!</p>
    <p style="color: red; font-size:14px;">零基础学习CSS</p>
    <p>I <span style="border: 2px black dashed; padding: 5px;">love</span> HTML.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>内部样式表</title>
    <meta charset="utf-8">
</head>
<body>
    <style>
        h1 {color: red;}
        p {color: green; font-size: 14px;}
        a {color: #ee82ee; border: 2px black dashed; padding: 5px;}
    </style>
    <h1>内部样式表</h1>
    <p>I love fishC!</p>
    <p>零基础学习CSS</p>
    <a href="https://www.baidu.com/" target="_blank">快点开，有好东西！</a>
</body>
</html>

内部样式表：

外部样式表：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css"
</head>
<body>
    <h1>外样式表</h1>
    <p>I love fishC!</p>
    <p>零基础学习CSS</p>
    <a href="https://www.baidu.com/" target="_blank">快点开，有好东西！</a>
</body>
</html>

h1 {
	color: red;
}
p {
	color: green;
	font-size:
	14px;
}
a {
	color: #ee82ee; 
	border: 2px black dashed; 
	padding: 5px;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

零基础学习CSS(1)——内联样式、内部样式表、外部样式表

零基础学习CSS(1)——内联样式、内部样式表、外部样式表

官方资料

学习正文

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐