CSS入门教程——应用方式

Posted 2022-09-28 老梁写代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS入门教程——应用方式相关的知识，希望对你有一定的参考价值。

有三种方式可以将 CSS 作用于 html：

内联

内联的方式最简单，但也最难以维护，因为它直接通过 style 属性内嵌于 html 的标签之上。

例如：

<p style="color: red">text</p>

这段代码会让段落内的文本颜色变为红色。

虽然这种写法简单粗暴，但将 CSS 文件和 HTML 文件进行隔离的方式才是最佳实践。

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p 
        color: red;
    

    a 
        color: blue;
    

</style>
...

内部样式会作用于整个页面，CSS 代码位于 head 标签内，用 style 包裹起来。

外部样式可以作用于所有网站，要用到一个额外的文件，用于存放 css 内容。

p 
    color: red;


a 
    color: blue;

然后在 html 文件的 <head> 标签中定义一个 <link> 标签：

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...

注意，这里的 style.css 文件和当前文件夹处在同一文件夹下，否则要需要修改文件路径。

以上是关于CSS入门教程——应用方式的主要内容，如果未能解决你的问题，请参考以下文章