ホームページ > 記事 > ウェブフロントエンド > DIV+CSS の初心者向けに最も役立つ 10 の CSS コード [転送]_html/css_WEB-ITnose
DIV+CSS の初心者向けに最も役立つ 10 の CSS コード [転送]_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:28:571288ブラウズ
私の個人的な経験に基づいて、よく使われる CSS のヒントをまとめました。初心者の友人に役立つことを願っています:
1.float:left
機能: 複数の div を並列および並べて作成します。 :
2.clear:both
機能: 複数の div を並列に配置する場合、空の div を追加して、clear:both で記述する必要があります。制限を課さない場合、IE では正常に表示されますが、Firefox では誤字脱字が発生するためです。
使用法:
3.margin:0 auto
機能: ページを中央揃えにして配置したい場合、幅は画面の幅と等しくありません。このようにして、margin:0 auto はその巨大な値を示します
Usage:
4.margin:0px
Function:ページにフォームを追加しましたが、どのように調整しても常に改行されたり、外側のコンテナが展開されたりして、レイアウトを調整できませんでした。 margin:0px を使用してください
Usage:
5.margin:-x px
機能: 画像とスパンテキストコンテンツを並べて配置したい場合、高低が常に不一致になることがわかります。このように、マージンを使用して外側マージンを定義できます。この値は負の値にすることもできます
使用法:
(画像が 2px 上に移動することを示します) 6.padding:x px
関数: コンテンツとコンテナーの間に一定の距離を空けるにはどうすればよいですか?これがパディングの役割です。ここで言及するのは、その使用法に注意するためです。
データは次のとおりです。 /div>(この div の表示の高さは何ですか? 30px)
7.line-height:x px
機能: 多くの場合、テキストが近すぎて煩わしく見えます。次に、行間隔を広げ、line-height を使用して行の高さを定義します。 使用法:
Usage:
a:link{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text -decoration:none;
}
a:visited{
font-size:12px;font-family:太字;color:red;text-decoration:none;
}
a:hover{
font -size:12px;font-family:宋体;font-weight:bolder;color:orange;text-decoration:underline;
}
a:actived{
font-size:12px;font-family:宋体;font-weight :bolder;color:red;text-decoration:none;
}
9:border:0px
機能: 画像にリンクを追加すると、煩わしい境界線が表示されます。このとき、それを削除するには 0 と定義します。それ。
使用法:
< ;/a>
10:display:none
機能: オブジェクトを非表示にする必要がある場合がありますが、現時点では表示が最適です。多くのオンライン エディターの編集モードで特に便利です。
使用法:
IFRAME ID="eWebEditor1" src=" /eWebEditor /ewebeditor.htm?id=content&style=coolblue" Frameborder="0"scrolling="no" width="550" height="350">(データベースに新しいコンテンツを追加する場合)
< ; textarea name="content" id="content" style="display:none;"><%=data%>
(データベース コンテンツの更新時に使用)
7.line-height:x px
機能: 多くの場合、テキストが近すぎて煩わしく見えます。次に、行間隔を広げ、line-height を使用して行の高さを定義します。 使用法:
ここにデータがあります!
: リンクのプロパティを定義します。初心者はよく「CSS プロパティを定義しているのに、なぜ正しく表示されないのですか?」と尋ねる傾向があります。その場合、a の順序を間違える可能性があります。正しい順序は lvha です。 Usage:
a:link{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text -decoration:none;
}
a:visited{
font-size:12px;font-family:太字;color:red;text-decoration:none;
}
a:hover{
font -size:12px;font-family:宋体;font-weight:bolder;color:orange;text-decoration:underline;
}
a:actived{
font-size:12px;font-family:宋体;font-weight :bolder;color:red;text-decoration:none;
}
9:border:0px
機能: 画像にリンクを追加すると、煩わしい境界線が表示されます。このとき、それを削除するには 0 と定義します。それ。
使用法:
< ;/a> 10:display:none
機能: オブジェクトを非表示にする必要がある場合がありますが、現時点では表示が最適です。多くのオンライン エディターの編集モードで特に便利です。
使用法:
IFRAME ID="eWebEditor1" src=" /eWebEditor /ewebeditor.htm?id=content&style=coolblue" Frameborder="0"scrolling="no" width="550" height="350">(データベースに新しいコンテンツを追加する場合)
< ; textarea name="content" id="content" style="display:none;"><%=data%>
(データベース コンテンツの更新時に使用)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。