CSS スタイル シートに関するトップ 10 のヒント_html/css_WEB-ITnose

1.css フォントの省略規則

CSS を使用してフォントを定義するときは、次のようにすることができます:

　　font-size: 1em;　　line-height: 1.5em;　　font-weight: bold;　　font-style: italic;　　font-variant: small-caps;　　font-family: verdana,serif;

実際には、これらのプロパティを省略できます:

　　font: 1em/1.5em bold italic small-caps verdana,serif

It今はかなり良くなりましたが、注意すべき点が 1 つあります。この短縮方法を使用する場合は、少なくとも font-size プロパティと font-family プロパティを指定する必要があります。他のプロパティ (font-weight、font-style、font-varient など) が指定されていない場合は、自動的にデフォルト値が使用されます。 。

2. 同時に 2 つのクラスを使用する

通常、属性には 1 つのクラスのみを指定しますが、実際には、たとえば、必要な数だけ指定できるという意味ではありません。 :

..

2 つのクラスを同時に使用すると (カンマではなくスペースで区切られます)、この段落は両方のクラスで指定されたルールを適用します。いずれかのルールが重複する場合は、後者のルールが優先されます。

3.css border（ボーダー）のデフォルト値

ボーダールールを書くときは、通常、色、幅、スタイルを指定します（順序は任意です）。例: border: 3px Solid #000 (幅 3 ピクセルの黒の実線境界線) 実際、この例で指定する必要がある唯一の値はスタイルです。スタイルをソリッドとして指定した場合、残りの値はデフォルト値を使用します。デフォルトの幅は中 (3 ～ 4 ピクセルに相当)、デフォルトの色は境界線のテキストの色です。これがまさに必要な場合は、CSS で指定する必要はありません。

4.! important は IE では無視されます

css では通常、最後に指定したルールが優先されます。ただし、IE 以外のブラウザの場合、! important でマークされたステートメントは絶対的な優先順位を取得します。例:

　　margin-top: 3.5em !important; margin-top: 2em

IE を除くすべてのブラウザの上の境界線は 3.5em で、IE は 2em、特に次の場合にこれが役立つことがあります。 (この例のように) 相対境界値を使用して、IE と他のブラウザー間の微妙な違いを示します。

（多くの人は CSS サブセレクターも IE によって無視されることに気づいているかもしれません）

5. 画像置換のヒント

通常は、テキストに加えて、画像の代わりに標準の HTML を使用する方が賢明です。ダウンロードの高速化により、使いやすさも向上します。ただし、訪問者のマシンでは使用できない可能性のあるフォントを使用する場合は、画像のみを選択できます。

たとえば、各ページの上部に「ウィジェットを購入」というタイトルを使用したいが、見た目の美しさのために、珍しいフォントを使用する必要がある場合は、検索エンジンにも見つけてもらいたいと考えます。これはもちろん真実ですが、検索エンジンは代替テキストよりも実際のテキストをはるかに重視しているという証拠があります (あまりにも多くの Web サイトがすでに代替テキストをキーワードとして使用しているため)。そのため、別の方法を使用する必要があります :

　　Buy widgets　　，那你的漂亮字体怎么办呢?下面的css可以帮上忙：　　h1　　{　　background: url(/uploadfile/200806/17/96162027360.gif) no-repeat;　　}　　h1 span　　{　　position: absolute;　　left:-2000px;　　}

これで、美しい画像と実際のテキストの適切な非表示が完成しました?? CSS の助けを借りて、テキストは画面の左側から -2000 ピクセルに配置されました。

6. CSS ボックス モデル ハックの別のオプション

CSS ボックス モデル ハックは、IE6.0 より前のバージョンでは、幅内に要素の境界値とパディング値が含まれます。 (幅の値に追加されるのではなく)。たとえば、次の CSS を使用して特定のコンテナの寸法を指定できます:

　　#box　　{　　width: 100px;　　border: 5px;　　padding: 20px;　　}

それからそれを HTML に適用します: ...

ボックスの合計幅は、ほとんどすべてのブラウザで 150 ピクセルです (100 ピクセル)幅 + 2 つの 5 ピクセルの境界線 + 2 つの 20 ピクセルのパディング)、IE6 より前のブラウザでのみ 100 ピクセルのままです (境界線の値とパディングの値は幅の値に含まれます)。ボックス モデルのハックはまさに​​この問題を解決するものです。ただし、トラブルが発生する可能性もあります。より簡単な方法は次のとおりです:

　　css:　　#box　　{　　width: 150px;　　}　　#box div {　　border: 5px;　　padding: 20px;　　}　　html:　　...

この方法では、どのブラウザでもボックスの合計幅は 150 ピクセルになります。

7. ブロック要素を中央に配置します

Web サイトが固定幅レイアウトを使用し、すべてのコンテンツが画面の中央に配置されていると仮定すると、次の CSS を使用できます:

　　#content　　{　　width: 700px;　　margin: 0 auto;　　}

HTML の本文内でアイテムが中央に配置されている場合、そのアイテムは自動的に同じ左右の境界値を取得して、中央に表示されます。ただし、IE6 より前のブラウザでは中央揃えにならないという問題が依然として残っているため、次のように修正する必要があります:

　　body　　{　　text-align: center;　　}　　#content　　{　　text-align: left;　　width: 700px;　　margin: 0 auto;　　}

本文を設定するとメインコンテンツが中央揃えになりますが、すべてのテキストも中央揃えになります。このため、#content の div にも値を指定する必要があります: text-align: left

8. 垂直方向の中央揃えを実現するには、css を使用します。

　　垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align: middle即可，但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。

　　要解决这一问题，只需将盒的行高设为与盒的高度相同即可，以这个例子来说，盒高2em,那么只需在css中再加入一条：line-height: 2em 就可实现垂直居中了!

　　9. 容器内的css定位

　　css的最大优点之一就是可以将对象定位在文档的任何位置，同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则：

　　#container　　{　　position: relative;　　}

　　则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构：

　　...

　　如果想将navigation定位在容器内离左边界30像素，离顶部5像素，可以使用以下css语句：

　　#navigation　　{　　position: absolute;　　left: 30px;　　top: 5px;　　}

　　10.延伸至屏幕底部的背景色

　　css的缺点之一是缺乏垂直方向的控制，从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景，但你希望导航所在的列为蓝色背景，使用以下css即可：

　　#navigation　　{　　background: blue;　　width: 150px;　　}

　　问题在于导航项不会一直延伸到页面的底部，自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断，浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法，即将body的背景指定为与左列同颜色同宽度的图片，css如下：

　　body　　{　　background: url(blue-image.gif) 0 0 repeat-y;　　}

　　背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度，当用户改变文字的大小导致内容的宽度扩张时，背景色的宽度不会随之改变。