- w3cschool新人チュートリアル。CHM（Tencent Weiyun）：https：//share.weiyun.com/c1FaX6ZD
目次
セクション4CSSの概要
CSS_Overview
1.コンセプト：カスケードスタイルシート
*カスケード：複数のスタイルを同じHTML要素に適用して、同時に有効にすることができます2.利点：
1。強力
2.コンテンツ表示とスタイルコントロールを分離
*して、結合を減らします。デカップリング
*分業を容易にする
*開発効率を向上させる
CSS_とhtmlの組み合わせ方法
3. CSSの使用：CSSとHTMLの組み合わせ
1.インラインスタイル
*スタイル属性を使用してタグにcssコードを指定します
*例：<div style = "color：red;"> hello css </ div>
2。内部スタイル
* headタグで、styleタグを定義します。styleタグのコンテンツはcssコードです
*例：
<style>
div { color：blue; } </ style> <div> hello css </ div> 3。外部スタイル 1。cssリソースファイルを定義します。 2. headタグで、linkタグを定義し、次の ような外部リソースファイルをインポートします。 * a.css file： div { color：green; }
<link rel = "stylesheet" href = "css / a.css">
<div> hello css </ div>
<div> hello css </ div>*注：
* 1、2、および3のメソッドがあり、cssのスコープはますます大きくなっています。
* 1は一般的に使用されませんが、2、3は後で一般的に使用されます。
* 3番目の形式は次のように記述できます。
<style>
@import "css / a.css";
</ style>
セクション5CSS_Selector
CSS_構文形式
4. css構文：
*形式：
セレクター{ 属性名1：属性値1; 属性名2：属性値2; ... } *セレクター：同様の特性を持つフィルター要素 *注： *属性の各ペアには使用が必要です。 、属性の最後のペアは「;」を追加できません。
Selector_Extended Selector（1）
5.セレクター：同様の特性を持つフィルター要素
*分類：
1。基本セレクター
1. idセレクター：特定のid属性値を持つ要素を選択します。HTMLページではID値を一意にすることをお勧めします。
*構文：#id attribute value {}
2.要素セレクター：同じタグ名を持つ要素を選択します。
*構文：タグ名{}
*注：idセレクターは要素セレクター
3よりも優先されます。クラスセレクター：同じクラス属性値を持つ要素を選択します。
*構文：.class属性値{}
*注：クラスセレクターの優先度は、要素セレクターよりも高くなっています。
- インラインスタイル、優先度1000
- IDセレクター、優先度100
- クラスと疑似クラス、優先度10
- 要素セレクター、優先度1
Selector_Extended Selector（2）
5.セレクター：同様の特性を持つフィルター要素。
*分類：
1。基本セレクター
1. idセレクター：特定のid属性値を持つ要素を選択します
。HTMLページでid値を一意にすることをお勧めします*構文：#id属性値{}
2.要素セレクター：タグ名の同じ要素
*構文：タグ名{}
*注：idセレクターは要素セレクター
3よりも優先されます。クラスセレクター：同じクラス属性値を持つ要素を選択します。
*構文：.class属性値{}
*注：クラスセレクターセレクターの優先度は要素セレクター
2よりも高くなり
ます。拡張セレクター： 1。すべての要素を選択します：
*構文：* {}
2.ユニオンセレクター：
*セレクター1 、セレクター2 {}
3.子セレクター：セレクター1の要素の下にセレクター2要素をフィルターします
*構文：セレクター1セレクター2 {}
4.親セレクター：セレクター2セレクター1の親要素をフィルターします
*構文：セレクター1>セレクター2 {}5.属性セレクター：要素名の選択、属性名=属性値の
要素*構文：要素名[属性名= "属性値"] {}6.疑似クラスセレクター：いくつかの要素の状態を選択します
*構文：要素：状態{}
*例：<a>
*状態：
*リンク：初期化された状態
*訪問済み：訪問済み状態
*アクティブ：訪問中状態
*ホバー：マウスホバリング状態
- インラインスタイル、優先度1000
- IDセレクター、優先度100
- クラスと疑似クラス、優先度10
- 要素セレクター、優先度1
- ワイルドカードセレクター、優先度0
セクション6CSSプロパティ
CSS_Attribute 1
6.プロパティ
1.フォント、テキスト
* font-size：フォントサイズ
* color：text color
* text-align：alignment
* line-height：line height
2. background
* background：
3。border
* border：set the border、Meet属性
4.サイズ
*幅：幅
*高さ：高さ
5.ボックスモデル
CSS_Attribute2_Boxモデル
6.プロパティ
1.フォント、テキスト
・フォントサイズ：フォントサイズ
*色：テキストの色
*テキスト整列：アライメント
*行の高さ：行の高さ
2.背景
*背景：
3境界
*境界：境界線を設定し、適合プロパティ
4へ。サイズ
*幅：幅
*高さ：高さ
5.ボックスモデル：コントロールレイアウト
*マージン：外側マージン
*パディング：内側マージン
*デフォルトでは、内側マージンはボックス全体のサイズに影響します。
* box-sizing：border-box;幅と高さが最終的なボックスサイズになるようにボックスのプロパティを設定します。*フロート：フロート
*左
*右
CSS：ページの美化とレイアウト制御
セクション7CSS_Case-登録ページ
CSS_Case-登録ページ
CSS_Case-登録ページ1
CSS_Case-登録ページ2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/* border: 1px solid red; */
float: left;
margin: 15px;
}
.rg_left>p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left>p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red; */
}
.rg_right {
/* border: 1px solid red; */
float: right;
margin: 15px;
}
.rg_right>p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username,
#password,
#email,
#name,
#tel,
#birthday,
#checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>さあ~~~ JavaWebの学習を始めましょう~~~