[分享]css两种书写方法

CSS，即层叠样式表，是前端开发中必不可少的一部分。在实际开发中，经常会看到两种不同的CSS书写方法，分别是内联式和外部式。下面我们就来分别介绍这两种书写方法。/ 外部式CSS / body { ba...

CSS，即层叠样式表，是前端开发中必不可少的一部分。在实际开发中，经常会看到两种不同的CSS书写方法，分别是内联式和外部式。下面我们就来分别介绍这两种书写方法。

/* 外部式CSS */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

h1 {
  color: #333333;
  font-size: 24px;
  font-weight: bold;
}

/* 省略其他CSS代码 */

/* 内联式CSS */
<p style="background-color: #f0f0f0; font-family: Arial, sans-serif; font-size: 16px;">这是一个段落文本。</p>

<h1 style="color: #333333; font-size: 24px; font-weight: bold;">这是一个标题</h1>

<!-- 省略其他HTML代码 --> 

外部式CSS是将所有样式集中写在一个.css文件中，通过<link>标签引用到HTML页面中。这种方法的好处在于，可以避免重复的代码，并且让每个HTML页面的代码结构更加清晰、易于维护。

而内联式CSS则是将样式直接写在HTML标签的style属性中。这种方法的好处在于，可以快速地为某个标签添加样式，不需要像外部式CSS那样去寻找特定的CSS文件。但是，随着HTML页面的增多，使用内联式CSS会导致整个页面的代码变得十分混乱和难以维护。

总之，两种书写方法各有优缺点，根据自己的项目需要来选择适合自己的方式。不管采用哪种方式，都应该保持代码结构清晰、易于维护。