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

最新推荐文章于 2022-06-05 15:20:58 发布

Dragon水魅

最新推荐文章于 2022-06-05 15:20:58 发布

阅读量499

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/108969678

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

注：学习笔记基于小甲鱼学习视频，官方论坛：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;
}

Dragon水魅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习CSS(1)——内联样式、内部样式表、外部样式表

注：学习笔记基于小甲鱼学习视频，官方论坛：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&
复制链接

扫一扫