常见 w3.css 类的自定义 css

Question

I have been looking at the W3.CSS framework and at first sight looks interesting, BUT adding all the 'css' into the HTML seems to defeat the purpose of css.我一直在研究 W3.CSS 框架，乍一看看起来很有趣，但是将所有“css”添加到 HTML 中似乎违背了 css 的目的。 Take this for example (three rows with different widths but identical colours and justification):以此为例（三行宽度不同但颜色和对齐方式相同）：

m4米4

m6米6

m2平方米

<div class="w3-row">
    <div class="w3-col m4 w3-red w3-center w3-container"><p>m4</p></div>
    <div class="w3-col m6 w3-light-grey w3-center"><p>m6</p></div>
    <div class="w3-col m2 w3-light-grey w3-center"><p>m2</p></div>
</div>

<div class="w3-row">
    <div class="w3-col m4 w3-red w3-center w3-container"><p>m4</p></div>
    <div class="w3-col m6 w3-light-grey w3-center"><p>m6</p></div>
    <div class="w3-col m2 w3-light-grey w3-center"><p>m2</p></div>
</div>

That's a lot of repetition and a nightmare to change afterward.这是很多重复和之后改变的噩梦。 Is there a way to move the w3 classes into a custom css or use a mechanism like a C header file to collect all common attributes?有没有办法将 w3 类移动到自定义 css 中或使用像 C 头文件这样的机制来收集所有公共属性？

Answer 1

Don't use the w3 css create your own css classes like this:不要使用 w3 css 创建您自己的 css 类，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .row{
                height:20px;
                color:black;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div class="row" style="width:80px">
            <p>Row 1</p>
        </div>
        <div class="row" style="width:60px">
            <p>Row 2</p>
        </div>
        <div class="row" style="width:40px">
            <p>Row 3</p>
        </div>
    </body>
</html>

If you are trying to create a table because it seems like you might be wanting to use the files attached.如果您尝试创建表，因为您似乎想要使用附加的文件。 Have a look here Link to Help Documents在这里查看帮助文档的链接

常见 w3.css 类的自定义 css

问题描述

1 个解决方案

解决方案1
0 2020-09-13 09:31:55

常见 w3.css 类的自定义 css

问题描述

1 个解决方案

解决方案1 0 2020-09-13 09:31:55

解决方案1
0 2020-09-13 09:31:55