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

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

WBOY

リリース： 2016-06-24 11:49:09

オリジナル

1113 人が閲覧しました

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 ページを作成します:

<!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. まとめ
抽象化はプログラミングの進歩を促進します。