基本的な使用CSS -01

CSSカスケーディング・スタイル・シート

1.CSS

  • コンセプト:

    一般的にCSSスタイルシート、またはカスケードスタイルシートと呼ばれるCSS(カスケーディング・スタイルシート)、(カスケーディング・スタイル・シート)

  • 役割:

    • 主に使用される設定だけでなく、テキスト(フォント、サイズ、配向、等)HTMLページ、画像の形状(幅、高さ、境界線のスタイル、マージン等)、レイアウト表示スタイルのレイアウトと外観。
    • HTMLのCSSは、などのフォント、色、背景とコントロールの全体的なレイアウト、などの機能の富を提供する、ベース、だけでなく、別のブラウザごとに異なるスタイルを設定することができます。

2. CSSスタイルシートの導入

2.1インライン式(インラインスタイル)

  • コンセプト:

    また、インラインスタイル、インラインスタイルとして知られています。

    これは、スタイル属性タグにスタイル要素によって設定されています

  • 次のように基本的な構文は次のとおりです。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

実質的に任意のHTMLタグが内側の線を設定するために使用されるスタイル属性を、持っています。

  • 例:
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
  • 注意:
    • スタイルは、実際にラベルの財産です
    • スタイル、そして中間値は、:
    • 間で属性値の複数組の;分離しました。
    • そして、あなたは、コードの冗長性が得られ、その中でネストされた現在のラベルやタグの単語を制御することができます
  • 短所:
    • スタイル構造は達成されないと相分離

2.2内部スタイルシート(インラインスタイルシート)

  • コンセプト:

    また、組み込みとして知られています

    CSSコードは、HTMLドキュメントのフォーカスヘッドheadタグに書き込まれ、スタイルラベルによって定義されます

  • 次のように基本的な構文は次のとおりです。

<head>
<style type="text/CSS">
    选择器(选择的标签) { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>
  • 例:
<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>
  • 注意:

    • スタイルタグは、一般的にheadタグ内に配置されている、もちろん、理論的には、彼はHTMLドキュメントのどこにでも配置することができます。
    • タイプ=「テキスト/ CSSは」HTML5では省略されてもよいです。
    • 現在のページのみを制御します
  • 短所:

    • いいえ完全に分離しません

2.3 Waibuyangshibiao(外鎖)

  • コンセプト:

    また、チェーンのように知られています

    それは、の一の以上の.css拡張子に外部スタイルシートファイル内のすべてのスタイルであります

    HTMLドキュメントに外部スタイルシートのリンクタグファイルをリンクすることにより、

  • 次のように基本的な構文は次のとおりです。

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
  • 注意:
    • リンクタグは、単一であります
    • リンクタグは、headタグヘッダに必要であり、3つの属性は、リンクタグを指定します
プロパティ 効果
REL 必要性は、「スタイルシート」として指定され、現在の文書とリンクされたドキュメントとの関係を定義し、それがリンクされたドキュメントは、スタイルシートファイルで表します。
タイプ ここでは、文書型定義リンクは、外部CSSスタイルシートファイルへのリンクを示す、「テキスト/ CSS」を指定する必要があります。私たちは、省略することができます
HREF リンクされた外部スタイルシートファイルのURLを定義し、それは相対パス、または絶対パスを指定できます。

表2.4は、3つのスタイルをまとめたもの

スタイルシート 利点 短所 使い方 制御範囲
インラインスタイルシート 便利な、高重量を書きます スタイル構造は達成されないと相分離 レス ラベルの制御(小)
内部スタイルシート そして、部分構造は、相分離を形成します いいえ完全に分離しません もっと ページを制御する(中)
外部スタイルシート 完全に相分離構造とスタイルを実現 導入する必要があります せいぜい、それを強くお勧めします サイト全体の制御(およびそれ以上)

コードスタイル

書き込みには2つの一般的なスタイルがあります。

  • 一つは、コンパクトな形式(コンパクト)であります
h3 { color: deeppink;font-size: 20px;}
  • そして、拡張フォーマット(推奨)
h3 {
	color: deeppink;
    font-size: 20px;    
}

コードケース

/* 推荐 */
h3{
	color: pink;
}
	
/* 不推荐 */
H3{
	COLOR: PINK;
}

3.要約筆記CSSスタイルルール

次の形式:

要約:

  1. CSSスタイルセレクターはHTMLタグの役割を指定するために使用され、中括弧の中に彼らの特定の設定のスタイルです。
  2. 「鍵ペア」の形で属性と属性値。
  3. 属性は、フォントサイズ、文字色など、要素のスタイルプロパティの設定が指定されています。
  4. 「:」接続属性と属性値の間に英語。
  5. 区別;英語の間の「キーと値のペア」の複数の「」
公開された11元の記事 ウォンの賞賛0 ビュー174

おすすめ

転載: blog.csdn.net/m0_46647964/article/details/105329988