[Knowledge] front end CSS basics strengthen

1.CSS style (selector) priority?

Weight 1.1 weight calculation rules

The first priority: unconditional priority attributes only need to use important property later!. It will cover the elements within the page style is defined anywhere. (Some bug on ie6 support).
First the like: inline style, such as: style = "color: red;", a weight of 1000. (this method will cause css difficult to manage, it is not recommended)
Second, etc.: ID selector, such as: #header, a weight of 0100.
Third, etc.: class selector, such as: .bar, a weight of 0010.
Fourth, etc.: Type (tag) pseudo-element selector and selection, such as: div :: first-line with a weight of 0001.
Wildcard, child selectors, adjacent selectors like. As *>, +, a weight of 0000.
Inherited Styles no weight.

[! NOTE]
the CSS's selection priority:! Important> inline style> ID selector> class selector> tag selector> Other

1.2 actual case

<style>
    a{color: yellow;} /*权值：0,0,0,1*/
    div a{color: green;} /*权值：0,0,0,2*/
    .demo a{color: black;} /*权值：0,0,1,1*/
    .demo input[type="text"]{color: blue;} /*权值：0,0,2,1*/
    .demo *[type="text"]{color: grey;} /*权值：0,0,2,0*/
    #demo a{color: orange;} /*权值：0,1,0,1*/
    div#demo a{color: red;} /*权值：0,1,0,2*/
</style>

<body>
    <a href="">第一条应该是黄色</a> <!-适用第1行规则->
    <div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!-适用第4、5行规则，第4行优先级高->
    <a href="">第三条应该是黑色</a><!-适用第2、3行规则，第3行优先级高->
    </div>
    <div id="demo">
    <a href="">第四条应该是红色</a><!-适用第5、6行规则，第6行优先级高->
    </div>
</body>

2. Sprite action figure?

[! NOTE]
reduce the number of HTTP requests, improving the performance of load
in some cases can reduce the image size of
the key is to understand and use the concept of background-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车特效</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .select{
            margin: 0 auto;
            display: block;
            width: 1000px;
            height: 35px;
            background-color:#F5FFFA;
        }
        div{
            width: 42px;
            height: 34px;
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -8px -335px;
        }
        div:hover{
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -55px -335px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target='_blank' class="select">
        <div></div>

    </a>
</body>
</html>

3. custom font usage scenarios?

[! NOTE]
propaganda / brand / banner and other fixed copy
the font icon used

<style>
@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}
/* 使用方法：html中的代码中加一个h1或者其他的，里面写你自己想要的特殊文字 */
h1{
    font-size:36px; 
    color:#ccc;
    font-family: "字体名称随便起";
}

</style>

4.Base64 use?

4.1 concept

Base64 is based on visible characters 64 (26 uppercase letters, lowercase letters 26, numbers 10, 1 + a / exactly 64 characters) to represent binary data representation.

[! NOTE]
expansion: an invisible character is not really is not displayed, but these characters do not show up on the screen, such as: newline, carriage return, backspace ...... character.

Base64 alphabet characters originally with 6 bit can represent, now add two zeros in front, becomes 8 bit, cause some waste. Therefore, after the Base64 encoded text, about one-third than the original

4.2 Principle

The first step, each of the character string to be converted into a group of three bytes, each byte representing 8bit, then a total of 24 bits.
A second step, the upper 24 bits of each of a set of six, divided into 4 groups.
The third step, in front of each add two 0 each consisting of 6 becomes 8 bits, a total of 32 bits, i.e. four bytes.
A fourth step, the corresponding value obtained from the Base64 encoding table (see below).

[NOTE!]
Two bytes: two bytes of 16 bits, still grouped according to the rules. At this time, a total of sixteen binary bits, with each group of six, two of the third group is missing, padded with zeros, to obtain three Base64 encoding, the fourth set of data with no "=" fill. Thus, after the figure above "BC" is converted to "QKM =";
one byte: a byte of 8 bits, are grouped according to the rules still. At this time, a total of eight bits, with each group of six, the second set of four missing, padded with zeros, to obtain two Base64 encoding, while the rear two sets of data do not correspond, both by "=" fill. Accordingly, the above figure "A" then is converted to "QQ ==";

4.3 Role

HTTP requests for reducing
For small pictures
Base64 encoded image volume after about 4/3 of the original

5. The difference between pseudo-classes and pseudo-elements?

Pseudo-element is really an element
The former is a single colon, which is the double colon

<style>
li:first-child {
    height: 20px;
    width: 100px;
    background-color: #139aff;
}
li:last-child {
    height: 60px;
    width: 100px;
    background-color: #89ff56;
    line-height: 60px;
}
p:first-of-type {
    background-color:  red;
}
p:last-of-type {
    background-color:deeppink;
}


/*每个p标签之前新增一个Hello文本*/
.container p::before {
    content: 'Hello';
}
.container p::after {
    content: 'Thanks';
}
.container p::first-letter {
    font-size: 32px;
}
.container p::first-line {
    background-color: #f1ffad;
}

/*所有选中的元素会变色*/
.container p::selection {
    background-color: #1025ff;
    color: red;
}
</style>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
<div>
    <h1>h1文本</h1>
    <p>p文本1</p>
    <p>p文本2</p>
    <p>p文本3</p>
    <p>p文本4</p>
</div>

<div class="container">
    <p> css1 </p>
    <p> css2 </p>
    <p> css3 </p>
    <p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>
</div>
</body>
</html>

6. How landscaping CheckBox?

[!NOTE]

label[for]和id

Hidden input native

: Checked + label selector

<style>
#value1{
        display: none;
}
#value1:checked+label{
    color:blue;
    background: #4cda60;
}
#value1:checked+label:before{
    left:31px;
}
#value1+label{
    cursor: pointer;
    color:red;
    display: block;
    width:60px;
    height: 30px;
    background: #fafbfa;
    border-radius: 15px;
    position: relative;
    box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);
    transition: background 0.1s;
    -webkit-transition: background 0.1s;
    -moz-transition: background 0.1s;
    -o-transition: background 0.1s;
}
#value1+label:before{
    content:'';
    position: absolute;
    background: #fff;
    top:1px;
    left:1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);
    transition: left 0.1s;
    -webkit-transition: left 0.1s;
    -moz-transition: left 0.1s;
    -o-transition: left 0.1s;
}
</style>
<body>
    <input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>
    <label for="value1"></label>
</body>