Zhaohuaxishi「マスタリングCSS」第三に、ラベルの一部の要素の使用

一、背景

---

私は、4年前の本を見たが、最近はめったにちょうどCSSと今も何らかの変化と進歩、知識は忘れられ、多くのこと、その後、フロントエンドを書きません、読書ノートの習慣を終了しませんでした「マスタリングCSS」を引き出しますその後、ボーナスに自分自身を与えるために、いくつかのブログのシリーズに出力を終えてパッケージ化。

二、文字

---

1、フォントの種類

（1）フォント

フォントのポイントserif(有衬线)とsans-serif(无衬线)。

サンセリフはセリフよりも読みやすいように考えられています。

（2）サードパーティのフォント

@フォントフェースは、サードパーティ製のフォントを導入することができます。

2、フォントサイズ

font-sizeあなたは、フォントサイズ、単位％、PX、EM、REMを設定することができます。

（1）単位を比較します

ユニット	絶対値	相対値	どのような要素に関して
PX	√		N / A
％		√	親要素
で		√	親要素
REM		√	ルート要素（HTML /ボディ[HTML本体よりも高い優先度]）

（2）なぜ、REMをお勧めしますか？

最初のpxイベントの相対的な大きさは、希望された場合、画面適応すべての要素のフォントを拡大するために、非常に不便なのでパス。

次いで、%及びem問題がある：せる親要素に対する各要素の参照フレームが異なる計算するのは非常に簡単、。

REMを使用することをお勧めします。

（3）どのようにREMを使用するには？

 <style>
      body {
        font-size: 62.5%;  
        /* 因为浏览器默认字体大小为16px，
        所以 100% = 16px
        所以 62.5% = 10px */ 
      } 

      #div1 {
        font-size: 1rem; 
        /* 1rem = 1 * 10px = 10px */
      }

      #div2 {
        font-size: 2.5rem;
        /* 2rem = 2.5 * 10px = 25px */
      }
</style>

Q：身体上のフォントサイズ設定ではなく他の値よりも、62.5％になったのはなぜ？

A：そのようなREMの基本値は、10pxのあるので、それは2つの利点を有します。

1、指定された優れた計算。

図2は、10進整数が原因で、（例えば1.5rem = 15ピクセル）に変換される場合は、フォントサイズの小数を含むピクセルをサポートしていません。

第三に、画像

---

1、色

三種類でCSSカラー値：

• 六角 - など： "＃FF0000の"
• RGB - 如： "RGB（255,0,0）"
• 色の名前 - など：「赤」

図2に示すように、画像

（1）<img>ALTとタイトルとの間の差

alt絵が存在しないaltテキスト場合は、title説明し、指示の絵があります。

SEOのために、最高の二人は一緒にされています。

3、背景

（1）のプロパティ

次の順序で：

• 背景色
• 背景画像
• 背景リピート
• 背景アタッチメント
• 背景位置

background短い時間、順序は上記と一致しています。

body {background:#ffffff url('img_tree.png') no-repeat scroll right top;}

（2）ここで見つけ背景

background-position: [横向] [纵向]

値の種類：

キーワード：トップ/ボトム、左/右、センター

パーセンテージ：X％

値：PX、EMなど

Q：ルールの割合が異なる定義されたのはなぜ？

：実際には、人々の直感の世話をするために：

background-position: 0 0;               //图片靠着左上角 
background-position: 50% 50%;       //图片水平垂直居中
background-position: 100% 100%;     //图片靠着右下角 

（3）背景領域によって占められます

1background-origin 、background-clip値：

border-box：コンテンツ+パディング+ボーダー

padding-box[デフォルト]：コンテンツ+パディング

content-box：コンテンツ

2background-origin 、background-clip差：

前者は切断され、モバイル、（背景原点に基づく値）です。

（4）バックグラウンド複数の追加

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

1、カンマで区切られたプロパティの複数の写真。

図2に示すように、最初の画像は、そうで一番上に表示され、。

第四に、リンク

---

1、リンクのスタイル

そうでない場合は、一部が失敗し、次の順序で最高の疑似クラスを追加してください。

（1）A：リンク表示

（2）A：ホバーホバー

（3）A：活性点

（4）：ポイントを介して訪問

キーボードは、リンクの上に移動するときに、あるでしょう：訪問しました。

2、後藤内 - #

<div id="main">
        <a href="#target">click!</a>

        <span>block——1</span>  
        <br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/>
        <span id="target">block——2</span> 
</div>

1.ジャンプするタグをクリックします。

2、ブラウザを開きurl#target、自動的にジャンプする（動作しません、現在のページを更新する）ことができます

V.フォーム

---

実施例1の形態

    <table summary="三年二班2019期末考试 - 学生各科目成绩">
        <caption>
          三年二班2019期末考试
        </caption>
        <thead>
          <tr>
            <th colspan="3">学生各科目成绩</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td scope="col">语文</td>
            <td scope="col">数学</td>
          </tr>
          <tr>
            <td scope="row">张三</td>
            <td>78</td>
            <td>80</td>
          </tr>
          <tr>
            <td scope="row">李四</td>
            <td>92</td>
            <td>88</td>
          </tr>
          <tr>
            <td scope="row">王五</td>
            <td>62</td>
            <td>73</td>
          </tr>
        </tbody>
    </table>

（1）summaryと同様に<img>alt属性。

(2) th/td的 scope 属性用来标识是列头还是行头。

2、table 的 合并 / 分隔 - border / collapse

以上面的 demo 为例：

(1) 合并（collapsed）

    table, td ,th{
        border: 1px solid black; 
    }
    table{
        width: 200px;  
    }
    /* 下面为重点 */
    table{ 
        border-collapse: collapse;   
    }

(2) 分隔（separated）

    table, td ,th{
        border: 1px solid black; 
    }
    table{
        width: 200px;  
    }
    /* 下面为重点 */
    table{ 
        border-collapse: separate; 
        border-spacing: 10px;    
    }

若 border-collapse: separate ，而省略 border-spacing，那 border-spacing 也是有默认值的且非0。( 0 则跟 border-collapse: collapse 一样了 )

3、各个 table 相关标签的对比

是否支持?	border	width/height	是否符合盒模型	margin	padding	text-align	vertical-align
table	√	√ / √	×	√	√	√	×
caption	√	√ / √	√	√	√	√（默认居中）	×
thead/tbody	×	× / ×	N/A	×	×	√	√
tr	×	× / √	√	×	×	√	√
th/td	√	√ / √	√	×	√	√（默认居中）	√

唉，table 真的有太多坑了。

4、淘汰的 table 属性

(1) table 标签的 cellspacing/cellpadding 属性已被淘汰，请用border-spacing 和padding代替。

(2) 直接在 table 标签定义的 border=1不推荐使用，请在 CSS 里：

table, td ,th{
        border: 1px solid black; 
}

六、表单

---

1、一个表单的范例

<form accept-charset="utf-8" action="form_action.asp" method="post">
      <fieldset> 
        <div>
          <!-- 关联 label 的方法一 -->
          <label for="name">Name:</label>
          <input name="name" id="name" type="text" />
        </div>
        <div>
          <!-- 关联 label 的方法二 -->
          <label>
            Email:
            <input name="email" type="text" />
          </label>
        </div>
        <button type="submit">submit</button>
      </fieldset>
</form>

1、fieldset 周围会加上一个细线边框（哪怕没有 legend 标签），想去掉就把 border 属性设置为 none 。

2、input 元素 focus 时默认会有一个蓝色轮廓，outline: none 可以去掉。