CSS,クラスの再利用率
選択にのみ使用されるTag:<div>と<span>
コレクタはid,classなどに指定してもよいし,divのようにタグ自体を利用してもよい.通常、この目的で使用されるタグはdivおよびspanである.
htmlドキュメントに挿入されたコンテンツを簡単に組み合わせて同じcss属性値を提供するために、特別な機能のないタグがいくつかあります.最も有名な3人の友达はdiv、span、pです.
このうち
<p>
ラベルには、実際にはいくつかの特別な機能があります.名前の通り、この領域の内容は段落であり、シンボルマークである.前の文章で述べたように、彼はメタデータを含むやつで、青衣に1 gぐらいの助けがあります!逆にdivとspanは本当に意味のないやつだが、利用率が最も高いラベルだ.違いと用途は何ですか?
1. <Div>
<div>
ラベルには何の意味もありません.逆に、classまたはidを要素に割り当てるためのコンテナです.Web上でスクロールする多くのページはcssによって構想され、テキスト、画像、ビデオ、その他のコンテンツから構成され、非常にきれいに並べられています.これは必要なコンテンツと計画作業を行うためのラベルです.
<div>
で囲まれた要素はブロック要素となり、行全体の幅を占める.2. <span>
<div>
のラベルを大体知っていれば、無意味な選択者はラベルでDiveに統一すればいいのに、なぜ面倒なのは<span>
というやつを作って区別したのだろうか.勉強しながら感じていますが、パソコンは本当に大バカです.見る目がない用途については、
<span>
マークは<div>
と同じである.唯一の違いはdisplay attribute値がblockかinlineかです.<div>
はblock、<span>
はinlineです.match point: block vs inline
blockとinlineの属性値の違いは1行だけですか?いいえ.
デュプレクス:blockの場合、すべてのローが占有されます.次の要素は必ず次の行にジャンプします逆にwidthまたはheight値を設定して、特定の幅または高さ値を指定できます.
一方、display:inlineは内部コンテンツサイズの画面のみを占有します.中身が非対称なら次の要素も改行せず横書きにしましょう!widthとheightの値は内部コンテンツで提供されるため、css上で制御できません.
詳細はcss display記事を参照してください!まだ書いてないけどいつか使うでしょう?
Tagの再使用
cssページまたはhtml内のstyleラベルに2つの異なるクラスにきれいな色を塗ったとします.
<style>
.background {
background-color: aquamarine;
}
.font {
color: red;
}
</style>
これでこんな見苦しい配色が見えます.
では、背景色とフォントを同時に着色したい場合はどうでしょうか.
1つの領域を2つのクラスに繰り返してもいいですか?
はい.クラスはスペースで同時に2つ与えることができます.
<div class="background">
여기는 백그라운드 컬러만 지정
</div>
<div class="font">
여기는 폰트 컬러만 지정
</div>
<div class= "font background">
여기는 중복 클래스를 주는 부분입니다
</div>
はい、このような区切りで2つのクラスを指定した領域を特定できます!ありがとうございます
Reference
この問題について(CSS,クラスの再利用率), 我々は、より多くの情報をここで見つけました https://velog.io/@lov012726/CSS-Selector의-중복-활용テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol