未経験のCSS - 【牛ブリスケットニュースリリースシステム】_html/css_WEB-ITnose

1. 背景:

インターネットの発展に伴い、Web ページのパーソナライズの要件も常に増加しています。 HTML (HyperTextMarkupLanguage、ハイパーテキスト マークアップ言語) は、本来は説明用のテキストですが、ユーザーはさらに多くのタグと属性を必要とし、その後も HTML のタグと属性を追加し続けるため、Web ページのコンテンツとスタイルが混乱し、保守が困難になります。そこで、Web ページのコンテンツとスタイルの分離を実現し、ページの作成と変更の効率を大幅に向上させる CSS が登場したのはこの時でした。

2. CSS とは何ですか?

CSS (CasCading Style Sheets)、カスケード スタイル シート。スタイルとコンテンツがハンバーガーのように積み重ねられます~

3. CSS セレクターとは何ですか?

CSS を使用して HTML ページ内の要素を 1 対 1 (ID)、1 対多 (クラス)、または多対 1 (タグ) で制御するには、CSS セレクターを使用する必要があります。 。 ID セレクターは、各人に 1 つずつある ID カードのようなもので、より対象が絞られています。たとえば、easyUI のコントロールのクラスが easyUI-datagrid に設定されている場合、クラス セレクターはテーブル スタイルです。個人的には、多くのサブシステムを含む大規模なシステムを構築している場合、クラス セレクターは、頭 (頭) であっても腕や足であっても、世界を統一するのに優れた機能を備えていると感じています。 (body) はラベルの制御範囲内です~

CSS セレクターの種類と優先順位:

ID セレクター > HTML タグ セレクター

小さなデモを使用して確認してみましょうセレクターの優先順位:

1. まず、クライアントで CSS スタイル シートを作成します。コードは次のとおりです。

/**创建人：王美*创建时间：2015年2月23日16:14:53*//*css样式*//*标签选择器*/body {    color:#f0f;/*粉红色*/}/*类选择器*/.menu {    color:#f00; /*红色*/}.title {  /*新闻标题样式*/   color:#00f; /*蓝色*/}/*ID选择器*/#special {    font-weight:bold ;/*粗体*/    color:#0f0;/*绿色*/}

2. HTML ページを作成します:

<!--		创建人：王美		创建时间：2015-02-23 15:56:31--><meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>css测试</title>    <link href="css/StyleSheet.css" rel="stylesheet">    <span id="special" class="menu">栏目四</span>    <span class="menu">栏目五</span>    <span class="menu">栏目六</span>    <span class="title">这是<span> 一</span>条新闻标题</span>    434434343434346464

3. 後で結果を表示します。実行中:

4 body HTML タグ内の優先度 ID クラス セレクターを証明します。class を持つものは赤色で、デフォルトの bodyHTML タグ形式はピンク色です。セレクター > HTML タグ セレクター

4. まとめ
抽象化はプログラミングの進歩を促進します。