ホームページ >ウェブフロントエンド >htmlチュートリアル >未経験のCSS - 【牛ブリスケットニュースリリースシステム】_html/css_WEB-ITnose
未経験のCSS - 【牛ブリスケットニュースリリースシステム】_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:091131ブラウズ
1. 背景:
インターネットの発展に伴い、Web ページのパーソナライズの要件も常に増加しています。 HTML (HyperTextMarkupLanguage、ハイパーテキスト マークアップ言語) は、本来は説明用のテキストですが、ユーザーはさらに多くのタグと属性を必要とし、その後も HTML のタグと属性を追加し続けるため、Web ページのコンテンツとスタイルが混乱し、保守が困難になります。そこで、Web ページのコンテンツとスタイルの分離を実現し、ページの作成と変更の効率を大幅に向上させる CSS が登場したのはこの時でした。
CSS (CasCading Style Sheets)、カスケード スタイル シート。スタイルとコンテンツがハンバーガーのように積み重ねられます~
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 ページを作成します:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><!-- 创建人：王美 创建时间：2015-02-23 15:56:31--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>css测试</title> <link href="css/StyleSheet.css" rel="stylesheet" /></head><body> <span id="special" class="menu">栏目四</span> <span class="menu">栏目五</span> <span class="menu">栏目六</span> <span class="title">这是<span> 一</span>条新闻标题</span> 434434343434346464</body></html>
3. 後で結果を表示します。実行中:
4 body HTML タグ内の優先度 ID クラス セレクターを証明します。class を持つものは赤色で、デフォルトの bodyHTML タグ形式はピンク色です。セレクター > HTML タグ セレクター
4. まとめ
抽象化はプログラミングの進歩を促進します。