【问题标题】:How do I style links in the w3.css framework? [closed]如何在 w3.css 框架中设置链接样式? [关闭]
【发布时间】:2017-10-18 23:33:42
【问题描述】:

我用 HTML 和 CSS 创建了许多简单的网页,并了解所有基本概念(页面结构、级联性质等)

我是第一次使用 W3.CSS 响应式框架。

举个例子,我对默认链接样式不满意。我宁愿它是彩色的,也许是不同的字体粗细,而不是下划线。

我可以想到两种可能发生这种情况的方式。我想知道在这些方式之间进行选择时可能会出现哪些注意事项。

(1) 如果框架中存在链接样式类,我可以将它们添加到我的链接中。

(2) 我附上了我自己的样式表。这将是我第一次添加覆盖框架的样式表,那么我需要考虑什么以确保不会破坏框架其他部分的功能?

【问题讨论】:

    标签: css responsive-design


    【解决方案1】:

    在自定义框架、W3.CSS、Bootstrap、Foundation 或任何其他框架时,大多数开发人员会附加他们自己的样式表并覆盖他们想要修改的默认框架样式。

    一般来说,这是要走的路,因为您在更新框架时不会失去自定义。

    正如您所指出的,有时链接样式类可能是一种选择,如果是,那么使用它们是有意义的。您可能会发现样式类过于有限,无法满足您的所有需求。

    我需要考虑什么以确保我不会破坏功能 框架的其他部分?

    只要您有一些 CSS 经验,您就会清楚哪些样式规则可以轻松更改,哪些需要注意。

    祝你好运!

    【讨论】:

      【解决方案2】:

      到此为止……在您对 HTML 和 CSS 有深入的了解之前,不要使用框架。 - 特别是不要使用 w3schools.com 制作的东西。

      https://developer.mozilla.org/en-US/docs/Web/HTML
      https://developer.mozilla.org/en-US/docs/Web/CSS

      <!doctype html><!-- declare the type of document (html) -->
      <html>
        <head>
          <!-- document setup stuff -->
          <title>Example page</title>
          <link rel='stylesheet' type='text/css' href='framework-stylesheet.css' />
          <link rel='stylesheet' type='text/css' href='my-stylesheet.css' />
      
          <!-- you can put styles in the document... which I'll do for example - but you should most likely put them in an external file as linked to above -->
          <style>
            a {
              text-decoration: none;
              color: lightgreen;
            }
      
            a { /* your're additions and overrides... */
             color: 'im unique';
            }
          </style>
        </head>
      
        <body>
          <!-- content -->
          <a href='#'>example link</a>
        </body>
      </html>
      

      【讨论】:

      • 我低估了我的经历;我已经编辑了这个问题。这是关于我在使用框架时可能需要考虑的问题——在做一个像你这样的简单页面时不存在的考虑因素。
      • 如果您了解级联样式表 - 那么您可以包含任何“CSS 规则集”(“框架”),然后...添加/覆盖您需要做的任何事情...
      • 我是个彻头彻尾的白痴,竟然试图回答这个“问题”——但事实上我的时间只得到了反对票的回报,这很有趣。
      猜你喜欢
      • 2012-11-02
      • 1970-01-01
      • 2021-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-11-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多