フロントエンドスクール-4日目

17352 ワード
テキストリンク

4日目最初のレッスン

1.CSSの適用


1)インライン

<body style="font-size: 14px;">
スタイル属性を使用して、CSSスタイルをHTML要素の内部に適用します.
インラインスタイルは、スタイルを要素にのみ適用できます.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<h1 style='red'; background-color:yellow;>Hello world</h1>
</body>
</html>

2）内部スタイルシート

<head>
	<style>
		body {font-size: 14px;}
	</style>
</head>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style media="screen">
		h1 {
				style='red';
				background-color:yellow;
		}
	</style>
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>
内部スタイルシートを使用するには、HTMLドキュメントのheadタグにstyleタグを使用します.
CSSスタイルを適用すると、内部スタイルシートはそのHTMLドキュメントにのみスタイルを適用できます.

3)外部スタイルシート


スタイルを適用するには、1つのファイルでWebサイト全体のスタイルを変更する方法で、スタイルを適用するWebページのheadラベルに外部スタイルシートを含むリンクラベルを使用します.
<head>
	<link rel="stylesheet" href="css/foo.css">
</head>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="test.css">
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

ファイル名:test。css

h1{
	color: red;
	background-color: yellow;
}
どんな方法でもこのような結果が発生します

2. RESET CSS


各ブラウザに適用されるデフォルトのスタイルを初期化します.

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

style.css

* {
	box-sizing : border-box;
}

3. CSS selector


1）全ての選択者


すべての要素を選択し、追加のネーミングスペース制限を設定できます.

2）ラベル選択器


指定したタグ名を持つすべての要素を選択します.

3）クラスセレクタ


指定したclassプロパティを持つすべての要素を選択します.

4）IDセレクタ


IDプロパティに基づいて要素を選択すると、ドキュメントには所定のIDを持つ要素が1つしか存在しません.

5）属性選択器


ラベルの名前、クラス名、ID名を指定するほか、属性アクセスで選択することもできます.

6)仮想クラスセレクタ


仮想クラスセレクタ:ドキュメントツリーのステータス情報を含まない要素を選択します.

7)仮想要素セレクタ


仮想要素セレクタHTMLを含まないオブジェクトを選択::.

8）優先度


idとclassが同時に存在する場合は、d>class>tagの順にスタイルを適用します.
自分で書いたJFinalのBaseControllerを共有(3)
FTZ level7