CSS - 擴展類屬性

我很新來CSS，到目前爲止一直在尋找我的方法。我正在創建這些按鈕像陰影和東西的鏈接。現在網站上需要有幾個這樣的按鈕 - 關於按鈕的所有內容都是相同的 - 除了幾個屬性像寬度和字體大小一樣變化之外。CSS - 擴展類屬性

現在不是複製相同的代碼 - 每個按鈕一遍又一遍 - 是否有擴展按鈕並添加更改屬性的方法。

的兩個按鈕實例 - CSS

.ask-button-display { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
width:350px; 
font-size: 20px; 
font-weight: bold; 
padding:10px; 
} 


.ask-button-submit { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
font-weight: bold; 
width:75px; 
font-size: 12px; 
padding: 1px; 
}

這就是我如何目前使用它在我的HTML

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

所以我不知道是否有做一個更清潔的方式這 - 就像

.button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 

AND THEN SOMEHOW EXTEND IT LIKE 
.button #display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 

.button #ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
}

但我不知道如何做到這一點。感謝您的輸入

來源

2012-05-22 Gublooo

您可以將多個類添加到一個元素，所以有一個.button類涵蓋一切，然後是一個.button提交的類，它添加了東西。

例如：

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button-submit { 
    background-color: green; 
}

看到一個活的jsfiddle here

在你的情況，下面應該工作：

.button { 
    background: #8BAF3B; 
    border-radius: 4px; 
    display: block; 
    letter-spacing: 0.5px; 
    position: relative; 
    border-color: #293829; 
    border-width: 2px 1px; 
    border-style: solid; 
    text-align:center; 
    color: #FFF; 
    width:350px; 
    font-size: 20px; 
    font-weight: bold; 
    padding:10px; 
} 


.button-submit { 
    width:75px; 
    font-size: 12px; 
    padding: 1px; 
}

看到一個活的jsfiddle here

來源

2012-05-22 15:25:56 jacktheripper

如何擴展'.something button'？我用'class ='button-foo''試過'.something button-foo'，沒有工作。 – raffian

.ask-button-display, 
.ask-button-submit { 
    /* COMMON RULES */ 
} 

.ask-button-display { 

} 

.ask-button-submit { 

}

來源

2012-05-22 15:24:15

一個按鈕類添加到這兩個環節的公共部分

.button { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
}

在你的其它類不常見的規則。

而你的HTML將

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a> 
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>

來源

2012-05-22 15:24:27 Ana

你可以做到這一點，因爲你可以申請一個以上的類的元素。創建您的主類和其他較小的類，然後根據需要應用它們。例如：

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

這將應用按鈕並提交您將創建的類，同時允許您也單獨應用這些類。

修改您的代碼示例沿着線：

.master_button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 
AND THEN SOMEHOW EXTEND IT LIKE 
.button_display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 
.button_ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
}

與應用，如：

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>

來源

2012-05-22 15:24:54 j08691

你可能想看看薩斯。有了Sass，你基本上可以在你的css文件中創建變量，然後重複使用它們。http://sass-lang.com/ 下面的例子來自薩斯官方網站採取：

$blue: #3bbfce; 
$margin: 16px; 

.content-navigation { 
    border-color: $blue; 
    color: 
    darken($blue, 9%); 
} 

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
}

來源

2012-05-22 15:27:50 Mali

而不是重複共同「的按鈕類添加到元素」的答案，我要告訴你在的神祕和怪誕的世界新的東西新時代的CSS，或更好地稱爲SCSS！

樣式表中代碼的這種重用可以通過稱爲「Mixin」的東西來實現。這允許我們通過使用'@include'屬性重用某些樣式。

讓我給你舉個例子。

@mixin button($button-color) { 
    background: #fff; 
    margin: 10px; 
    color: $color; 
}

，然後當我們有一個按鈕，我們說

#unique-button { 
    @include button(#333); 
    ...(additional styles) 
}

在這裏閱讀更多：http://sass-lang.com/tutorial.html。

傳播這個詞!!!

來源

2012-05-22 15:31:02

值得一提的是，saas不是本地支持的 – Sebas

你可能想試試這個：

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button.submit { 
    background-color: green; 
} 
.button.submit:hover { 
    background-color: #ffff00; 
}

這種方式，可以避免重複單詞，並能使用的類在這樣的元素：

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

見的例子JSFiddle（http://goo.gl/6HwroM）

來源

2014-09-10 10:30:34 Marco

CSS - 擴展類屬性

回答

相關問題