全称セレクタでリセットしないようにとか適当にメモ

CSSリセットはアンチ全称セレクタがトレンドになりつつあるとか、そういう記事を見た気がする。2,3箇月前に。なので脱全称セレクタリセットしてみようとした。けど、飽きた。そして適当に記録を残す。
どうでもいいけどHTMLもCSSも、しばらくふれてないとどうやって書くのか忘れる。忘れるほど習得してるわけでもないけど。なんとなく思い出したけど、ちょうど一年前くらいに、ほーむぺーじの更新やれとか言われて、なんかひょこひょこ情報収集はじめたんだっけかなぁと本当にどうでもいいことを思い出した。この1年何も習得してないから困る。

@charset "UTF-8";

/*  reset  =============================================
====================================================  */

/* html, body */
html, body {
    margin: 0;
    padding: 0;
    border: 0;
}

/* heading, block, list, table */
h1, h2, h3, h4, h5, h6, div,
address, p, blockquote, pre, noscript,
ins, del,
dl, dt, dd, ol, ul, li,
table, thead, tbody, tfoot, tr, th, td, caption {
    margin: 0;
    padding: 0;
    border: 0;
}

/* inline */
a, img, br, hr, span,
abbr, acronym, dfn,
q, cite,
code, kbd, samp, var,
em, strong,
sub, sup,
object, applet, embed, noembed, iframe {
    margin: 0;
    padding: 0;
    border: 0;
}

/* form */
fieldset, form, legend, optgroup {
    margin: 0;
    padding: 0;
    border: 0;
}

label, input, select, textarea, label, button, option {
    margin: 0;
}

いろいろ不備がありそう。フォーム関係がよくわからないからビビリ炸裂。
これに自分がよく使うような指定を追加したりとか。

/*  common style  ======================================
====================================================  */

/* block */
address {
    font-style: normal;
}

/* inline */
em {
    font-style: normal;
}

acronym,
abbr {
    border-bottom: 1px dotted #666;
    cursor: help;
}

/* table */
th {
    text-align: left;
}

/* form */
select {
    font-size: 100%;
    font-style: normal;
}

option {
    color: #222;
    background-color: #fff;
}

optgroup {
    color: #222;
    background-color: #fec;
}

textarea {
    border: 1px solid #aaa;
    font-size: 100%;
}

textarea:active,
textarea:focus {
    border: 1px solid #322;
}

input.inputField {
    border: 1px solid #999;
    font-size: 100%;
}

input[type="text"] {
    border: 1px solid #999;
    font-size: 100%;
}

input[type="text"]:active,
input[type="text"]:focus {
    border: 1px solid #333;
}

button,
input.submit {
    border-top: 1px solid #ebebeb;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    border-left: 1px solid #ebebeb;
    height: 1.6em;
    line-height: 100%;
    font-size: 92%;
    color: #222;
    background-color: #ddd;
    background-image: url('./input.png');
    background-repeat: repeat-x;
    background-position: 0 0;
}

body > button,
input[type="submit"] {
    border-top: 1px solid #ebebeb;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    border-left: 1px solid #ebebeb;
    height: 1.6em;
    line-height: 100%;
    font-size: 92%;
    color: #222;
    background-color: #ddd;
    background-image: url('./input.png');
    background-repeat: repeat-x;
    background-position: 0 0;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
    cursor: pointer;
    color: #222;
    background-color: #ffe;
    background-image: url('./input_hover.png');
    background-repeat: repeat-x;
    background-position: 0 0;
}

デフォルトスタイルの差異を無くすCSSで使われてるCSS TESTにスタイル適用して確認してやってた。ので、そこで出てくるinputFiledとかsubmitなんていうクラスを使った（IE6のために）。IE6はこの辺について擬似クラスは対応してなさそうなのでスルー。selectとかoptionは出てこないから確認してない。だからあとで。
input.submitとinput[type="submit"]で同じものを別々に指定してるのは、一緒に指定するとIEが無視するからしかたなくやった。
inputとかはpaddingでうまく調整できる気がしなかったから、heightとかで何とかなってるようななってないような。
フォーム関係では、IE,Operaと、Firefoxでフォントのサイズとか少し違う気がしたから適当に指定した。IEとかOperaとかのデフォルトは85%から90%くらいに見える。適当だけど。Firefoxはたぶん100%。きっちりそろえたいならfont.cssとかで、YUIとかなんとか使ってそろえればいいと思う。
background-colorとかborderとかも適当。とくに#777とか三桁のは何も考えてない。
bakground-imageとかも適当。大きめにとっておけば文字のサイズ変えても何とかなるんじゃないかとか、もう適当。
もうみんな適当。そのうちがんばる。ちゃんと勉強する。

適当デモ。
どうにもならないからあきらめたい気分。