ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML CSS レイアウトを理解する (カスケード スタイル シート)_html/css_WEB-ITnose
HTML CSS レイアウトを理解する (カスケード スタイル シート)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:091134ブラウズ
CSSの正式名称は「Cascading Style Sheets (Cascading Style Sheets)」で、主にブラウザに表示されるHTMLコンテンツのテキスト、色、視覚的な静的効果、レイアウトなどのスタイルを定義するために使用されます。など。 HTML が Web 開発の基礎であるなら、CSS は Web ページを変更するアート ペンであり、将来学習する JS (JavaScript) は Web ページの魂です (個人的な意見です)。
簡単なCSSコード例で説明しましょう 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>认识CSS样式</title> 6 <style type="text/css"> 7 #wang{ 8 font-size:20px;/*设置文字字号*/ 9 color:red;/*设置文字颜色*/10 font-weight:bold;/*设置字体加粗*/11 }12 </style>13 </head>14 <body>15 <p id = "wang">网页制作是任何一个从事开发行业的人都应该掌握的技能, 因为它无时不刻的在我们的生活中出现, 了解学习网页制作, 会让你的视野更加开阔, 而CSS在网页开发中, 更具有着举足轻重的位置, 所以一定要认真用心的学习.</p>16 </body>17 </html> このようなWebページの場合、簡単なテキストコメントから効果が誰でも推測できると思いますが、段落タグに含まれるテキストは、内部のCSSスタイルに従って変更されます。 c9ccee2e6ea535a969eb3f532ad9fe89 この実装の効果は、たとえば、この段落のテキストのフォント サイズが 20、テキストの色が赤、フォント スタイルが太字になるようです。文ごとに分析してください
まず、タグ内の属性を見てみましょう。e388a4556c0f65e1904146cc1a846bee タグの id = "wang" を宣言し、次にスタイル シート内で #wang を使用してその CSS スタイルを変更することを表します。このタグ (class = "wang" の場合、その文は Yes.wang になります)、具体的な違いについては後で詳しく説明します
次に、CSS スタイル シートについて説明します。 c9ccee2e6ea535a969eb3f532ad9fe89 スタイルタグ。内部でさまざまなタイプを設定できます。タイプはテキスト CSS です。この形式の CSS スタイルをタグ内で使用します (推奨されません)。 !) (タグ セレクター)、#id 名 (ID セレクター)、または .class 名 (クラス セレクター) (ID セレクターとクラス セレクターが推奨スタイルです!!!) CSS スタイルを設定するには、中括弧 {} の形式を追加します。
例えば #wang{font -size:12px;}
この文では #wang をセレクター、セレクターとも言います（ラベルセレクター、クラスセレクター、IDセレクターの3種類）、Web内の要素を示しますルール スタイルを適用するページ、つまり Web ページ内のどの要素に「style」が作用するかということです。ここでは、変更する必要がある場合は、id = "wang" のタグのみがスタイルを変更します。段落タグの場合、セレクターは p (タグ セレクター) として記述されます。 class = "wang" に設定すると、クラス属性 (クラス セレクター) は同じになります。セレクターの要件を満たさない他のタグは、単に .wang を使用します。影響を受けません (このとき、45a2772a6b6107b401db3c9b82c049c2 タグのパワーが反映されます)、dc6dce4a544fdca2df29d5ac0ea9906b論理タグも同様です
クラスセレクターと ID セレクターに違いはないようですが。簡単に言うと、ID セレクターは複数回設定でき、class は class = "wang fei" を許可し、次に .wang セレクターを使用します。 selector とその他のマルチカテゴリ設定スタイルですが、ID セレクターは単語リストを使用できません。 これは非常に重要です。Baidu で詳しく学習してください。
font-size:12px; この文はステートメントと呼ばれます。このようなスタイルルールを宣言し、選択したタグにそれらを遵守させてください。font-size は属性と呼ばれ、CSS スタイルシートの属性にたくさんあります。これは、専門的な外国語を知っている人や、専門的な外国語を知っている人にとっては非常に快適です。英語結局、名前を見れば意味が分かります
この属性の値は1対1です。対応するものは 1 つあり、color は 16 進数の色、または英語の直接の色の単語に対応する必要があり、font-size はフォント サイズを意味するため、フォント サイズの表現、つまり 12px (12 ピクセル サイズ) に対応する必要があります。複数のスタイル属性がある場合は、コードをより標準化するためにセミコロンで区切る必要があります。
コメントのスタイルは HTML とは異なり、他の言語ブロックを使用してコメント化されます。 /*コメントする内容*/
CSS の 3 つのスタイル
CSS スタイルは、インライン、埋め込み、外部 (より一般的に使用される) の 3 つのタイプに分かれており、セレクター タグのスタイル設定は、最も近い原則 (類似) に従います。変数の割り当てまで、最後の設定が最終的なスタイルです)、特定の 3 つのスタイルについては Baidu で使用できるため、1 つずつ説明しません。