ホームページ > 記事 > ウェブフロントエンド > 最も一般的に使用される CSS テクニックに関するメモのコレクション_html/css_WEB-ITnose
1. ブラウザのフォント サイズをリセットします
ブラウザのデフォルトをリセットしてから、ブラウザのフォント サイズをリセットします。ダウンロードしたくない場合は、Yahoo の UI リセット CSS スキームを使用できます。9MB ファイルの場合、コードは次のとおりです。
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; }
次に、以下を使用してブラウザのフォント サイズを 10 ピクセルにリセットします:
html {font-size: 62.5%;}
このサイズは基本的に適切であり、その後調整できます。タイトル 1 は 120 ピクセルなど、必要に応じてサイズを指定します。
h1 {font-size: 2em;}
2. 水平方向の中央揃えを設定します
現在、ほとんどの Web サイトは固定幅です。 CSS コードは次のとおりです:
div#container {margin: 0 auto;}
3. 制御位置: 絶対位置、相対位置
div が 2 つある場合
<div id='parent'> <div id='son'></div> </div>
div に left 属性と top 属性がある場合、
内部 div の位置属性が絶対値の場合、それはドキュメントの左上隅を基準とします。 内部 div (息子の ID を持つもの) の位置属性が相対、その後の位置左と上の値は外側の div の左上隅からの距離に相対します
4. 必要に応じて、重要な要素を画面の中央に配置します。中央に必要なものを配置するには、次の CSS を使用できます:
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;} div.popup { margin-top: -200px; margin-left: -250px;}
幅と高さを明示的に指定し、この部分を元に戻せるように、top プロパティと left プロパティをそれらの半分に設定する必要があります。画面の中央。
.left {float: left;} .right {float: right;} img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;} img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}独自の CSS スタイル シートを設定すると、必要なときにタグを直接追加できます。 6. IE6 の浮動要素の二重マージン問題を解決する
div に float:left と margin-left:100px を設定すると、このバグが IE6 で発生します。もう 1 つのディスプレイを設定するだけで済みます。コードは次のとおりです:
div {float:left;margin:40px;display:inline;}
7. シンプルなナビゲーション メニュー
<div id=”navbar”> <ul> <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li> <li><a href=”http://www.google.com”">Google</a></li> <li><a href=”http://zenhabits.net/”>Zen Habits</a></li> </ul> </div>
CSS コード:
#navbar ul li {display:inline;margin:0 10px 0 0;} #navbar ul li a {color: #333;display:block;float:left;padding:5px;} #navbar ul li a:hover {background:#eee;color:black;}
8. 現在、テーブルのない Web サイトをデザインしているため、Put it on に重点を置きます。 DIV を使用します。テーブルの列とフィールドには制約がなくなったので、JeddHowden.com にある便利な CSS が必要です
それはページの下部に残ります会社のバージョン情報は常にページの下部に保持されますページのこの部分の情報を実装するにはどうすればよいですか?これは非常に古いテクニックですが、すべて The Man in Blue のおかげです。 内部 CSS オプション。要素は多くのクラスを適用できます。例: .red {color: red;}
.bold {font-weight: Strong;}
それを使用できます:
これらがお役に立てば幸いです!