CSS3语法规范学习总结

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。

行内样式表由于书写繁琐，没有体现结构与表现相分离的思想，只适合于修改简单的样式，不推荐大量使用。

1 2	/CSS的注释写法/ <div style="color: red; font-size:12px; ">码农浅知-高质量码农编程学习笔记</div>

内部样式表

内部样式表（内嵌样式表）是将所有的CSS代码抽取出来，单独放到一个style标签中，写到html页面内部。

style标签理论上可放在html的任何位置，但通常放在head标签中。

内部样式表也没有实现结构与表现的完全分离，推荐在练习时使用。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div>码农浅知-高质量码农编程学习笔记</div>
</body>

外部样式表

外部样式表是将样式单独写到CSS文件中，然后把CSS文件引入到html页面中使用，开发推荐。

新建一个后缀名为**.css**的样式文件，所有的CSS代码都放到此文件中。

在html页面，使用link标签引入.css文件。

style.css代码示例：

/*只有样式，没有标签*/
div {
    color: red;
    font-size: 12px;
}

html代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>码农浅知-高质量码农编程学习笔记</div>
    </body>
</html>