フロントエンドの研究ノート（2）フロントエンドの3つの銃士のCSS

CSSとは

名前が示すように、css（カスケードスタイルシート）の英語の意味から意味を知ることは難しくありません。cssの直訳はカスケードテーブルと呼ばれます。つまり、複数のスタイルを同じhtml要素に適用できます。つまり、それらは同時に有効になります。

cssの利点

機能を押してください
コンテンツの表示とスタイルの制御を分離して
、結合と分離を減らします。
分業を容易にします。
開発効率を向上させます。

cssの基本構文

形式：
セレクター{ 属性名1：属性値1;属性名2：属性値2; … }セレクター：類似した特性を持つフィルター要素注：属性の各ペアを使用する必要があります。個別に、属性の最後のペアは省略できます。プラス;

セレクター：同様の特性を持つフィルター要素

ベースセレクター

idセレクター：特定のid属性値を持つ要素を選択します
。htmlページに一意のid値を含めることをお勧めします。構文：#id属性値{}
要素セレクター：同じタグ名を持つ要素を選択します
構文：タグ名{}
注：IDセレクターは要素セレクターよりも優先されます
クラスセレクター：同じクラス属性値を持つ要素を選択します。
構文：.class属性値{}
注：クラスセレクターの優先度は要素セレクターよりも高くなります

拡張セレクター：

すべての要素を選択します。
構文：* {}
ユニオンセレクター：
セレクター1、セレクター2 {}
サブセレクター：セレクター1要素の下でセレクター2要素をフィルターします
構文：セレクター1セレクター2 {}
親セレクター：セレクター2の親要素をフィルターし
ますセレクター1構文：セレクター1>セレクター2 {}
属性セレクター：要素名を選択、属性名=属性値要素
構文：要素名[属性名= "属性値"] {}
疑似クラスセレクター：いくつかの要素の状態を選択します。
構文：要素：状態{}
など：<a>
状態：
リンク：初期化された状態
訪問済み：訪問済み状態
アクティブ：訪問状態
ホバー：マウスホバー状態

属性

フォント、テキスト
font-size：フォントサイズ
color：テキストの色
text-align：配置方法
line-height：行の高さ
背景
：
境界線
：境界線を設定し、属性に準拠します
サイズ
幅：幅
高さ：高さ
ボックスモデル：コントロールレイアウト
マージン：外側マージン
パディング：内側マージン
デフォルトでは、内側マージンは
ボックス全体のサイズに影響しますボックスサイズ：border-box;幅と高さが最終になるように、ボックスのプロパティを設定しますボックスサイズの
フロート：フロート
左
右

CSSがページレイアウトを実装する方法

インラインスタイル
style属性を使用して、タグにCSSコードを指定します。

<div style="color:red;">hello css</div>

内部スタイル
headタグで、styleタグを定義します。styleタグの内容はcssコードです。

<div style="color:red;">hello css</div>

外部スタイル
1.CSSリソースファイルを定義します。
2. headタグで、linkタグを定義し、外部リソースファイルをインポートします。

<style>
	div{
		color:blue;
	 }	
</style>
<div>hello css</div>

エクステリアスタイル

CSSリソースファイルを定義する
headタグで、linkタグを定義し、外部リソースファイルをインポートします。

a.css文件：
div{
    
    
	color:green;
}

使用する場合は、導入する必要があるだけです。

<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注：3つの方法の上から下に向かって、cssの範囲が順番に大きく
なります。インラインスタイルはめったに使用されず、最も一般的に使用される2と3がプロジェクトで使用されます。
3番目の形式は次のように記述できます。

<style>
      @import "css/a.css";
 </style>

場合

cssを使用して、登録ページの書き換え
スタイルコードを実装します

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background: url("../img/register_bg.png") no-repeat center;
    padding-top: 100px;
}

.rg{
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;
    /*让div水平居中*/
    margin: auto;
}

.rg_left{
    border: 1px solid red;
    float: left;
    margin: 20px;
    /*padding: 20px;*/
}

.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;
    border: 2px solid red;
}

.rg_right > p:first-child{
    font-size: 15px;

}

.rg_right p a {
    color:red;
}

.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 ;
}

ページコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="text" name="password" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>

            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td>
                    <input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>
            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg" alt="验证码">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</body>
</html>