CSSのプロパティには書く順番がある？

質問

CSSについての質問です。一つのページ等を構成するプロパティには、書く順番が決まっていて、順番通りに書かないと希望通り表示されないもの何でしょうか。

　そして、例えばボックスを構成するプロパティであるmargin,padding,width,border,border-color,background-color,color等々には書く順番があるのですか？と言うのも、div内のborderを表示させたくとも表示されず、何日も悩んでいるからです。

　どうかご回答よろしくお願いいたします。

回答No.5

steel_gray

borderはstyle,color,widthを一括指定するプロパティですが、一部省略すると省略時の規定値が採用されます。
例）
div{
border:solid medium red;/*スタイル：ソリッド、太さ：普通、色：赤*/
border:thin;/*太さ：細*/
color:blue;
}
後のborderで省略したスタイルと色は先の指定（ソリッド、赤）が残るわけではなく、borderの省略時の規定の値が採用されます。
・スタイル→none
・色→colorの値(blue)
結果→border:thin none blue;

実際にどんな風に書いているかわかりませんが指定順序よって結果が変る事はあります。特にborderのstyleはnoneが規定値なので線が表示されない事もあります。

これはfont等も同じです。一括指定できるプロパティは一部省略すると意図に反した表示になりがちなので全てを指定した方が無難です。

お礼

知りたかったことも知ることが出来た上に、borderも希望通り表示させることに成功しました。
　本当はお一人ずつお礼をしたいのですが、5番さんのお礼欄にて失礼させていただきます。

　皆さんありがとうございました。

回答No.4

leap_day

こんにちは

書く順番には決まりはないとは思いますが優先度というものはあります

・あとから記述されたものが優先される
<style type="text/css"><!--
div {
border:1px solid;
width:100px;
height:50px;
}
a {
text-decolation:none;
color:black;
}
div {
border:10px;
width:200px;
margin:10px;
}
--></style>

のように書いたとすると最終的なdivのスタイルは
div {
border:10px solid;
width:200px;
height:50px;
margin:10px;
}
というふうになります

・タグ、class、idにも優先度があり　タグ＜class＜id　になります
<style type="text/css"><!--
div { background-color:green; }
.boxclass { background-color:red; }
#boxid { background-color:blue; }
--></style>

<div id="boxid" class="boxclass"> 優先度の高い背景色が表示 </div>
<div class="boxclass"> 優先度の高い背景色が表示 </div>
<div> 優先度の高い背景色が表示 </div>

としたときには上から順に　青、赤、緑　という背景色になります
ただし
<div id="boxid">
<div class="boxclass">
<div>
優先度の高い背景色を表示
</div>
</div>
</div>
とした場合にはテキストの部分は直接指定されている緑になります

ただし最重要優先指定　『 ! important 』した場合にはその限りではありません

ですのでそのボックスの指定CSS以降のCSSを削除してみてborderが表示されているようならborder:none;に書き換えられているかもしれません

回答No.3

noname#56882

#2です。誤りがありました。
×　「border」を優先させるのか「border-style」を優先させるのかわかりませんが
○　「border」を優先させるのか「border-color」を優先させるのかわかりませんが

でした。申し訳ありません。

回答No.2

noname#56882

書かれている順番でCSSを作ってみました。
.sample {
margin: 30px 30px;
padding: 10px;
width: 300px;
border: solid blue;
border-color: red;
border-style: solid;/*これは書かれていませんが確認のため*/
background-color: yellow;
color: black;
}

HTML記述は下記で。
<div class="sample">テキストテキストテキストテキスト</div>

それで結果ですが「border-color: red;」が優先されます。（IE6、Firefoxで確認済み）
「border」を優先させるのか「border-style」を優先させるのかわかりませんが
どちらにしてもこのCSSを両方明記することで表示されないようです。

［スタイルシートリファレンス］を参考にされることをお薦めします。
border：http://www.htmq.com/style/border.shtml
border-color：http://www.htmq.com/style/border-color.shtml

回答No.1

noname#96725

こんばんは。

記述に定まった順番はありません。
実際どんな順序で書いても同じです。

しかし慣れた人は何となく自分独自の順番を作って、それに従っているようです。
私も気付いたらいつの間にか順番みたいなものを作っていました。

何故か。

それは管理が楽になるからです。
後からデザインの変更をしたくなった時に、例えば色を変えたいと思ったときに
長々しい記述のどのあたりにその記述がある、と見当をつけやすいという点です。
それが昂じて色の外部CSS　表の外部CSSなどと種類別のファイルを数枚つくってしまいましたけど。

それとどうでも良いものですけど、綺麗に整理したいというこだわりみたいなものがあります。

ご質問の中のborderが表示されないという問題は少なくとも記述の順番が原因では
ないと思います。該当する記述をもれなく書いて別に質問スレを立てられては如何ですか。