css 怎么和html分开写

在网页设计中，HTML和CSS是不可缺少的两个重要部分。HTML（超文本标记语言）负责提供文本内容和网页结构，而CSS（层叠样式表）则负责控制网页的布局和外观。为了方便维护和修改代码，我们通常将HTML和CSS分开写。

分开写HTML和CSS可以提高代码的可读性和可维护性。将CSS写在HTML文档中会使代码变得冗长混乱，难以阅读和修改。而将CSS写在单独的文件中，可以使代码更加组织化，易于维护和修改。同时，使用外部样式表可以让多个页面共用样式，提高代码重用性。

code>
    !DOCTYPE html>
    html>
    head>
    title>
    分开写HTML和CSS/title>
    link rel="stylesheet" type="text/css" href="style.css">
    /head>
    body>
    header>
    h1>
    标题/h1>
    /header>
    nav>
    ul>
    li>
    a href="#">
    链接1/a>
    /li>
    li>
    a href="#">
    链接2/a>
    /li>
    li>
    a href="#">
    链接3/a>
    /li>
    /ul>
    /nav>
    section>
    h2>
    章节标题/h2>
    p>
    这里是内容。/p>
    /section>
    footer>
    p>
    版权信息。/p>
    /footer>
    /body>
    /html>
    /code>
    

在上面的示例中，我们使用link> 标签引入一个名为style.css的外部样式表。在style.css中，我们可以为HTML页面中的元素定义样式：

code>
body {
      font-family: sans-serif;
      color: #333;
}
header {
      background-color: #ccc;
      padding: 20px;
}
nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
}
nav li {
      display: inline-block;
      margin-right: 20px;
}
section {
      border: 1px solid #ccc;
      padding: 20px;
}
footer {
      background-color: #ccc;
      padding: 20px;
}
    /code>
    

在style.css中，我们为body元素设置了字体和颜色，为header、nav、section和footer元素设置了背景色和内边距等样式。这样，我们就可以通过修改style.css中的样式来改变页面的外观，而无需修改HTML文档。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！