LMS知識社群ePortfolioLogin
Position: Web Programming > Forums > Discussion
關於CSS儲存在外部文件的設計問題
1
老師好,課堂上您有說過CSS最好都獨立放在外部文件,我現在的首頁(登入畫面)跟留言板頁面的所需樣式不太一樣,但tag是一樣的(都是要設定h1和body,只是image和font-color)不同,想請問老師認為下列哪種設計方式較佳?

1. 都寫在同一個stylesheet.css (自訂class不同處以紅字標示):

.h1_index{
    color: red;
    padding-top: 50px;
    text-align: center;
}

.h1_con{
    color: blue;
    padding-top: 50px;
    text-align: center;

}
.body_index {
    background-image: url(bg_se.png);
    background-repeat:no-repeat;
    background-position:right top;
}

.body_con {
    background-image: url(bg_2.png);
    background-repeat:no-repeat;
    background-position:right top;
}

2. 分成首頁用跟留言板用的兩個CSS檔案 (可以指定HTML本來的tag):
stylesheet_index.css:
h1{
    color: red;
    padding-top: 50px;
    text-align: center;
}

body {
    background-image: url(bg_se.png);
    background-repeat:no-repeat;
    background-position:right top;
}

stylesheet_con.css:
h1{
    color: blue;
    padding-top: 50px;
    text-align: center;
}

body {
    background-image: url(bg_2.png);
    background-repeat:no-repeat;
    background-position:right top;
}

不知道這樣有沒有清楚表達到我的問題,謝謝老師。
2
寫在同一個 css,因為版型是共用的
你可以使用 id 與 cascading 的技巧來解決這個問題
也就是首頁和內頁的 div 給不同的 id
然後用 #id .className 的方式套用
例如
#login .h1 { ... }
#message .h1 { ... }