怎样把css和页面分开写

在进行网页设计时，CSS是一个很重要的组成部分。为了让我们的代码更加方便管理和修改，我们需要把CSS和页面分开写。

首先，我们需要在HTML文档中引入CSS文件。我们可以在标签中使用标签来链接CSS文件，例如：

head>
    link rel="stylesheet" type="text/css" href="style.css">
    /head>
    

这样，我们就可以把CSS代码写在单独的style.css文件中。接下来，我们需要在HTML文档中添加class或者id来选中需要修改样式的元素。例如：

div class="content">
    p class="intro">
    这里是介绍文字/p>
    ul class="list">
    li>
    列表项1/li>
    li>
    列表项2/li>
    li>
    列表项3/li>
    /ul>
    /div>

在CSS文件中，我们可以使用class或者id来选中需要修改样式的元素。例如：

.content {
    width: 800px;
    margin: auto;
}
.intro {
    font-size: 18px;
    font-weight: bold;
}
.list li {
    list-style: none;
    float: left;
    margin-right: 10px;
}

使用class或者id来选中元素可以让我们更加方便地修改样式。在CSS文件中，我们还可以使用媒体查询来适配不同的设备，例如：

@media screen and (max-width: 600px) {
.content {
    width: 100%;
}
.list li {
    margin-right: 0;
}
}
    

这样，在小屏设备上，我们的网页就可以自动适配。

总的来说，把CSS和页面分开写可以让我们的代码更加清晰、易于管理和修改，也可以让我们更加方便地适配不同的设备。

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