2015-11-20 69 views
-4

我正在讀的CSS教程中,看到了這樣的定義:爲什麼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標籤需要這麼多的代碼風格。如何學習所有這些?它真的有必要嗎?

+0

不,一個簡單的DIV不需要太多的代碼,這取決於你的需求。事實上,一個簡單的DIV根本不需要任何CSS。你的代碼包含很多不再需要的瀏覽器前綴(例如,整個'* -border-radius *'可以簡單的寫成'border-radius:6px')。 *如何學習所有這些* - 閱讀一些教程,請參閱MDN。 *是否真的有必要* - 正如我前面所說,代碼的數量取決於你需要的。 – Harry

+0

你在抱怨什麼? CSS不工作或其複雜? -webkit和-moz是瀏覽器前綴。 –

+0

webkit和moz是什麼? – user697911

回答

3

你不需要學習關於css的一切。如果你真的在開發前端,你必須學習基礎知識。

這些瀏覽器擴展用於瀏覽器兼容性或用於在瀏覽器上順利工作。

-webkit-在鉻,safary和其他瀏覽器

-moz-用於mozila

在一些博客和輔導時,他們使用一些過時的CSS代碼。這些特別適用於較低版本的Internet Explorer和其他瀏覽器。

不要太擔心這些代碼。您的代碼將取決於要求。

如果你有學習CSS的壓力,不要擔心,我們大多數人都會在我們開始時體驗到這一點。

首先從簡單的CSS樣式開始。試着先從這裏開始http://www.w3schools.com/。學習需要時間,喝醉時不是藥,它會立即生效。

1

其中大多數都是不言自明的,特別是沒有前綴(webkit,moz,msie ...)。您應該只採用您需要的樣式規則來修改您的div,使其脫離默認的瀏覽器樣式,或者甚至更好地使用一組重置規則,以使該div在所有瀏覽器中都保持一致。

而且,由於你的代碼似乎已經過時,例如,這一切:

border-radius:6px; 

噸在線

-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; 

可以在所有現代瀏覽器取代和缺兵少將本關於CSS樣式和規則的資源。

相關問題