标签的属性是否与 CSS 相关？ [关闭]答案

【问题标题】：Are attributes of tags related to CSS at all? [closed]标签的属性是否与 CSS 相关？ [关闭]
【发布时间】：2015-07-16 19:08:01
【问题描述】：

我和一位同事进行了一场辩论。例如，假设我们有一个带有属性type="a" 的有序列表：

<ol type="a">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

该属性的存在将列表的样式从数字编号列表更改为字母编号列表。我的同事想知道这是否构成 CSS。

我认为它显然不是，因为type="a" 是标签的一个属性，而 CSS 是一种样式表语言。

但是，我的同事认为，只要添加或更改属性会改变元素的外观，就应该构成添加或更改 CSS。

他们还认为，width 和 height 属性在

<img src="..." width="100" height="100">

也应该构成 CSS。

他们扩展了他们的论点，解释说对于每个元素，网络浏览器都有自己的样式表，例如

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

添加type="a" 可以有效地将ol { list-style-type: lower-alpha; } 添加到Web 浏览器的样式表中。因此，由于添加属性会改变 Web 浏览器的 CSS，因此该属性也应构成 CSS。

但是，这个论点对我来说仍然没有任何意义，但我想不出任何方法来解释为什么这是错误的。

所以我的问题是：谁是正确的？ CSS 和属性是完全不同的概念吗？或者我的同事在 type="a" 等属性应该构成 CSS（以及为什么）方面是正确的？

【问题讨论】：

哦，是的，我同意你的观点，表单元素是一个更好的例子，<input type="button"> 和 <input type="text"> 它们的风格非常不同。在 CSS 中，您会看到类似 input[type="text"]{...} 等的内容。
href 对 css 没有直接影响。
我对谁对谁错的部分感到困惑，但即使是复杂的网页也只是纯文本，没有CSS（包括浏览器默认样式表）根本没有格式，再次表单元素不同不确定它们如何呈现，还取决于浏览器和操作系统。 HTML/CSS 必须一直协同工作。（我想我会在阅读后删除 cmets，不确定它是否有帮助）
@Pangloss 我改写了最后一部分。我知道 CSS 和 HTML 必须协同工作才能使页面看起来不仅仅是纯文本。但我想知道的是，在<ol> 中添加type="a" 等属性是否构成添加或更改页面的CSS。
@DanielA.White 他们同意href 不构成CSS。但他们坚持认为 type="a" 或 width="100" 之类的东西应该算作 CSS，因为它改变了元素的“样式”。

标签： html css tags attributes

【解决方案1】：

唯一真实存在的用于渲染和修改的是 DOM，它不是 HTML 或 CSS。它是 HTML、CSS、JavaScript 和浏览器提供的默认值的计算表示。

当您设置一个属性时，DOM 会被修改以修改其样式表示。 WebKit 让人们很容易看到和理解这一点。

使用属性时——这是在 WebKit 中所做的：

void HTMLOListElement::collectStyleForPresentationAttribute(const QualifiedName& name, const AtomicString& value, MutableStyleProperties& style)
{
    if (name == typeAttr) {
        if (value == "a")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerAlpha);
        else if (value == "A")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperAlpha);
        else if (value == "i")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerRoman);
        else if (value == "I")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperRoman);
        else if (value == "1")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueDecimal);
    } else
        HTMLElement::collectStyleForPresentationAttribute(name, value, style);
}

来源：https://github.com/WebKit/webkit/blob/d055853e59dd6cc4cfd835b143e79258bb13c552/Source/WebCore/html/HTMLOListElement.cpp

【讨论】：

你说设置属性不是CSS，但是webkit源代码好像在CSSPropertyListStyleType上加了CSSValueLowerAlpha。那么是不是说加样式不等于加CSS，所以我同事说的不对呢？
它正在设置一个样式。 CSS 是设置样式的一种方式。另一个是通过 JavaScript。