css多种书写格式

css多种书写格式

行内样式

代码直接写在标签内部

<!--书写css第一种方式,行内样式-->
<div style="color: red">css第一种书写格式</div>

内联样式

在head标签之间加上一对style标签，在其中编写css代码

<style>
    /*书写css代码的第二中方式，内联样式*/
    div:nth-child(2) {
        color: skyblue;
    }
</style>

外链样式

可以单独新建一个.css文件，将css代码写在其中，然后通过link标签将.css文件和.html文件链接起来，写在head标签之间。

<!--书写css代码的第三中方式，外链样式-->
  <link rel="stylesheet" href="193-css书写格式.css">

导入样式

可以单独新建一个.css文件，将css代码写在其中，然后在style标签中，使用import导入样式

<style>
    /*书写css代码的第四种方式，导入样式。需要写在style开头 */
    @import "193-css书写格式.css";
</style>

注意点

1.企业开发一般使用外链样式。

2.内联样式不利于实现样式和结构分离，js代码也是的采用外链样式，行为和结构分离，互不影响。

3.导入样式是css2.1推出的，存在兼容问题。外链样式会先加载css样式再加载结构，导入样式会先加载结构再加载样式。用户体验不好。