Zhaohuaxishi "Mastering CSS" Third, the use of some of the elements of the label

One, background

---

Pulls out "Mastering CSS" I see a book four years ago, but did not finish the habit of reading notes, recently rarely write front-end, then a lot of things, knowledge forgotten, just css and now also some change and progress, then packaged with finishing output into several blog series to give a bonus himself.

Second, character

---

1, font type

(1) font

Font points serif(有衬线)and sans-serif(无衬线).

sans-serif is considered to be easier to read than serif.

(2) third-party font

@ Font-face can be introduced third-party fonts.

2, font size

font-sizeYou can set the font size, units%, px, em, rem.

(1) Compare units

unit	Absolute value	relative value	With respect to what elements
px	√		N/A
%		√	The parent element
in		√	The parent element
rem		√	Root element (html / body [html higher priority than the body])

(2) Why recommended rem?

First pxis the relative size of the event would like to zoom font for all elements when the screen adaptation , very inconvenient, so the pass.

Then %and emhas a problem: with respect to the parent element, which causes the reference frame for each element is different , very easy to calculate.

It is recommended to use rem.

(3) how to use 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: Why font-size setting on the body became 62.5%, rather than the other values?

A: Because the base value of such rem is 10px, it has two advantages:

1, a good calculation specified.

2, if the decimal integer will be converted into (e.g. 1.5rem = 15px), because of font-size does not support px containing decimal .

Third, the image

---

1, color

CSS color values ​​in three types:

• Hex - such as: "# ff0000"
• RGB - 如："rgb(255,0,0)"
• Color names - such as: "red"

2, the image

(1) <img>the difference between the alt and title

altIf alt text when the picture does not exist, titleis a picture of the description and further instructions.

For SEO, the best two are together.

3, background

(1) Properties

In the following order:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

With backgroundtime short, the order is consistent with the above:

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

(2) locate where the background

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

Value type:

Keywords: top / bottom, left / right, center

Percentages: x%

Values: px, em, etc.

Q: Why Percentage of rules defined different?

A: In fact, in order to take care of people's intuition:

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

(3) occupied by the background area

1background-origin , background-clipvalues:

border-box： content + padding + border

padding-box[Default]: content + padding

content-box：content

2background-origin , background-clipthe difference between:

The former is a mobile, which is cut (the value based on the background-origin).

(4) adding a plurality of background

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

1, multiple pictures of the property separated by commas.

2, the first picture displayed at the top, and so on.

Fourth, the link

---

1, link styles

Please add the best pseudo-classes in the following order, otherwise some will fail.

(1) a: link display

(2) a: hover hover

(3) a: active point

(4) a: visited through point

When the keyboard to move onto the link, there will be a: visited.

2, within Goto - #

<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. Click a tag to jump.

2, open the browser url#targetcan automatically jump (refresh the current page does not work)

V. Form

---

Example 1, a form of

    <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) summarySimilar <img>alt attribute.

(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 可以去掉。