为什么 CSS 这么复杂？ [关闭]答案

【问题标题】：Why is CSS so complicated? [closed]为什么 CSS 这么复杂？ [关闭]
【发布时间】：2015-11-20 05:11:08
【问题描述】：

我在看一篇 CSS 教程，看到了这样的定义：

.content div {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;  
    line-height:50px;   
    text-decoration:none;
    text-align:left;
    text-shadow:1px 1px 0px #ffffff;
}

一个简单的 DIV 标签需要大量代码来设置样式。如何学习所有这些？真的有必要吗？

【问题讨论】：

不，一个简单的DIV不需要那么多代码，这取决于你的需要。事实上，一个简单的 DIV 根本不需要任何 CSS。您的代码包含许多不再需要的浏览器前缀（例如，整个*-border-radius* 可以简单地写为border-radius: 6px）。 如何学习所有这些 - 阅读一些教程，参考 MDN。 真的有必要吗 - 前面说了，代码量看你需要什么。
你在抱怨什么？ CSS 不工作还是很复杂？ -webkit 和 -moz 是浏览器前缀。
什么是 webkit 和 moz？
如果您在 Google 上问过这个问题，但没有在此处发表评论，您会得到第一个结果：stackoverflow.com/questions/18083056/…

标签： html css

【解决方案1】：

你不需要学习所有关于 CSS 的知识。如果您真的要进行前端开发，则必须学习基础知识。

这些浏览器扩展用于浏览器兼容性或用于在浏览器上流畅运行。

-webkit-用于chrome、safary等浏览器

-moz-在mozila中使用

在一些博客和教程中，他们使用了一些过时的 CSS 代码。这些特别适用于较低版本的 Internet Explorer 和其他浏览器。

不要太担心这些代码。您的代码将取决于要求。

如果您有学习 CSS 的压力，请不要担心，我们大多数人在开始学习 CSS 时也会遇到这种情况。

首先从简单的 CSS 样式开始。尝试先从这里开始http://www.w3schools.com/。学习是需要时间的，它不是一剂醉后立即见效的药。

【讨论】：

【解决方案2】：

其中大部分都是不言自明的，尤其是没有前缀的情况下（webkit、moz、msie...）。您应该只采用您需要修改 div 的默认浏览器样式的样式规则，或者更好的是一组重置规则，使该 div 在所有浏览器中看起来都一样。

而且你的代码似乎已经过时了，例如，所有这些：

-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;

可以在所有现代浏览器中替换和简写：

border-radius:6px;

关于 CSS 样式和规则的在线资源有吨。

【讨论】：