フロントエンド（B）の基礎の基礎を学ぶ-css

私は最近のJavaのバックエンドに関連するコンテンツを学習し、フロントエンドの内容を見ることが必要です。この記事では、学習過程における内容と自分のアイデアのいくつかを理解することが重要かつ困難ないくつかの感触を記録することです。彼はバックエンドを学んでいるので、そんなにフロントエンドのコンテンツのそれを理解するために、綿密な調査を行いません。この記事では、完全に知識のポイントをカバーしていない、いくつかのように、プロだけでなく、参照だけのために、説明されていない、あなたに感謝。

A、CSSは、基本を学びます

学習のw3school推奨されるCSSのチュートリアルを。

（1）CSSの概要

CSS手段カスケーディングスタイルシート（C ascading S tylE S heets）

スタイルが定義表示する方法 HTML要素を

スタイルは、一般的に格納されたスタイルシートで

するために、HTML 4.0にスタイルを追加するコンテンツの分離の問題を解決し、プレゼンテーション

外部スタイルシートは、効率を大幅に向上させることができます

外部スタイルシートは通常に保存されているCSSファイルに

スタイル定義を複数することができる積層 Aとして

CSSは、HTMLや他のドキュメントを表示するために使用されても、動的にページ上の各要素のためにフォーマットすることができるスクリプト言語の様々な言語の、だけでなく、静的に変更されたページ、（ここでは、スタイルはシンプルな色、フォントなどとして理解することができます）。

（2）CSS例

<!--!DOCTYPE用于指定文档类型-->
<!DOCTYPE html>

<!--html标签是整个html文件的开始，注意标签要成对出现-->
<html>

<!--head标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
<head>
	<title>文档的标题</title>

    <!--style用于为 HTML 文档定义样式信息,并且style要放在head中。
        type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"-->
    <!--background-color指定背景色-->
    <!--这里的padding用来指定页边距的宽度（单位是像素）在下面的代码中no2只是一个 标识，不用管，这里涉及类的用法-->
    <!--background-image用于指定背景图片-->
    <!--text-indent用于指定文本缩进-->
	<style type="text/css">
		
		h1{background-color: yellow}

		p.no1{padding: 20px;}

		body{
			background-image: url(背景1.jpg) ;
			background-attachment: fixed;
			background-size: 100%;
		}

		p.no2{text-indent: 0.5em;}

		p.no3{color: green}

	</style>
</head>

<!--body定义文档的主体-->
<body>
	<!--h+数字用于定义标题，数字代表标题的级数-->
	<h1>这是一级标题</h1>
	<h6>这是六级标题</h6>

	<!--p表示段落-->
	<p>这是第一段</p>
	<p>这是第二段</p>

	<!--br/用于换行-->
	<p>
		这是第三段。换行,<br/>换行,<br/>换行。<br/>
	</p>

	<!--b用作定义粗体文本-->
	<p>
		<b>这是一段粗体文字</b>
	</p>

	<!--img用于指定图像，其中src表示图像的路径（url），alt表示图像的替代文本
		height指定图像高度，width指定图像宽度-->
	<p>
		<img src="J:\杂物\美化\壁纸\壁纸1.jpg" alt="这是一张壁纸"
		height="200" width="300">
	</p>

	<!--内边距边框与内容之间的距离，默认情况下可理解为缩进-->
	<p class="no1">
		这是第四段且设置了内边距,距离为20。
	</p>

	<p class="no2">
		这是第五段文字且进行了缩进
	</p>

	<p class="no3">
		这是第六段且文字颜色为绿色。
	</p>


</body>

</html>

他のCSSをheadタグ内に配置する必要があり、前にHTML形式を表示するにはCSSを使用した後、ちょうどHTMLフォームを使用しない、ということに注意してください。

のキーコンセプト（3）CSS

①CSS要素セレクタ

また、セレクタ要素タイプセレクタ（タイプセレクタ）として知られているW3C規格。

タイプセレクタは、文書言語の要素型の名前と一致します。

各タイプセレクタは、この要素タイプの文書ツリーインスタンスと一致します。

あなたがHTMLのスタイルを設定した場合、セレクタは、一般に、pは、h1は、EMは、自分自身をhtmlのさえすることができるように、HTML要素になります。
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

②グループを選択

複数のセレクタを一緒に置くことができる特定の共通の属性を付与要求される場合、カンマで区切られました。例えば：

h2, p {color:gray;}

③クラスセレクタ

クラスセレクタは、スタイルを指定するには依存しない方法で文書要素を可能にします。

セレクタは、単独で用いてもよく、他の要素と組み合わせることができます。

のみ適切に文書をタグ付け、あなたはこれらのセレクタを使用することができますので、これらの二つのオプションを使用するには、通常はいくつかのアイデアや計画を行うために必要とされています。特定の設計要素を考慮せずにスタイルを適用するには、最も一般的な方法は、クラスセレクタを使用することです。

クラスセレクタを使用する前に、作業を適切に選択したクラスを特定の文書のマークアップを変更します。スタイル要素クラスセレクタに関連付けるために、クラスの適切な値として指定されなければなりません。次のHTMLコードを考えてみましょう。
<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>
後で要素をプラス。「」プラスクラス名で使用する場合、
h1.important{color:read;}

④IDセレクタ

クラスセレクタに似たいくつかの点で、IDセレクタではなく、いくつかの重要な違いもあります。

また、ボードの数やハッシュと呼ぶ - フロントIDセレクタは＃を有しています。
*#intro {font-weight:bold;}
HTMLドキュメントでは、IDセレクタは一度だけ使用されます

ID属性はスペースで区切られた単語のリストを許可しないため、IDセレクタは、組み合わせて使用することができません