Question

我正在阅读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标签需要很多代码来设计样式。如何学习所有这些？真的有必要吗？

Answer 1

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

这些浏览器扩展程序用于浏览器兼容性，或用于在浏览器上顺利运行。

-webkit-用于chrome，safary和其他浏览器

-moz-用于mozila

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

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

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

首先从一个简单的CSS样式开始。首先尝试从这里开始http://www.w3schools.com/。学习需要时间，而且当你喝醉时，它不会是一种药物，它会立即生效。

Answer 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样式和规则的吨在线资源。

为什么CSS如此复杂？

2 个答案: