CSS スタイルのグラフィックとテキストの詳細な説明: css スタイルシートと selector_html/css

メインコンテンツ

CSSの概要

CSSとHTMLを組み合わせる3つの方法: インラインスタイルシート、埋め込みスタイルシート、外部スタイルシート

CSSの4つの基本セレクター: タグセレクター、クラスセレクター、IDセレクター、ユニバーサルselector

3種類のCSS拡張セレクター: 組み合わせセレクター、子孫セレクター、擬似クラスセレクター

CSSスタイルの優先順位

CSSの概要

CSS: カスケードスタイルシート、カスケードスタイルシート。 CSS の機能は、HTML ページのタグにさまざまなスタイルを追加し、Web ページの表示効果を定義することです。簡単に言うと、CSSはWebページのコンテンツと表示スタイルを分離し、表示機能を向上させます。次に、なぜ CSS を使用する必要があるのかについて話したいと思います。

HTMLの欠点:

複数のデバイスに適応できない

インテリジェントで十分な容量のブラウザが必要
データと表示が分離されていない
十分な能力がない

CSS利点:

データと表示を分離する

ネットワークトラフィックを削減する
Webサイト全体の視覚効果を一貫させる
開発効率を向上させる（カップリングが減少し、1人がHTMLを書く責任を負い、1人がHTMLを書く責任を負います） CSS の記述を担当します)

CSS 構文

文法形式:

选择器{	属性名: 属性值;	属性名: 属性值;}

ログイン後にコピー

説明:

セレクターはページ上の特定のタイプの要素を表し、セレクターの後には中括弧が必要です。 属性名はコロンで区切る必要があり、属性値はセミコロンで区切る必要があります (最後の属性にはセミコロンは必要ありません)。
属性名とコロンの間にスペースを入れないことが最善です (経験)。
属性に複数の値がある場合、複数の値はスペースで区切られます

例:

p{color: red;}

ログイン後にコピー

完全版のコード例:

<style type="text/css">	p{		font-weight: bold;		font-style: italic;		color: red;	}</style> <body>	<p>洗白白</p>	<p>你懂得</p>	<p>我不会就这样轻易的狗带</p> </body>

ログイン後にコピー

効果:

CSS コードに関するコメント:

形式:

<style type="text/css">	/*		具体的注释	*/	p{		font-weight: bold;		font-style: italic;		color: red;	}</style>

ログイン後にコピー

注: コメントは /* */ のみあり、// コメントはありません。コメントを有効にするには、

CSS スタイルのグラフィックとテキストの詳細な説明: css スタイル シートと selector_html/css_WEB-ITnose

メインコンテンツ

CSSの概要

CSS スタイルのグラフィックとテキストの詳細な説明: css スタイルシートと selector_html/css_WEB-ITnose