table of Contents

web front end articles: CSS used stylesheet feature selector

web front end articles: CSS used stylesheet feature selector

Introduction 1.CSS

CSS: Cascading Style Sheet Cascading Style Sheets
Role: modification and beautification of the page elements to achieve a web publishing layout

2.CSS use

The line pattern 1 / the inline style

Features: style attribute in particular Tags, incorporated CSS style code
grammar:
- <Label style = "CSS style declaration">
- CSS style declaration / statement:
  - Add style to the current element
  - Syntax: CSS property: value;
- Note: CSS style declarations can be multiple <label style = "property: value; attribute: value;"
Common CSS properties
- Set font size:
  
  1. attributes: font-size
  
  2. The value of the value in pixels, the browser's default font size is 16px
- Set font color:
  
  1. properties: color
  
  2. Value: the color of English word or RGM (value, value, value) or # b0b0b0 (hex)
- Set the background color
  - background-color
  - Value: the color of English word or RGM (value, value, value) or # b0b0b0 (hex)
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="background: red;color:RGB(123,145,164);font-size: 19px;">asd</p>
</body>
</html>
```

2. Documentation embedded / internal stylesheets

Features: The CSS code label with a specific phase separation in the HTML document tags introduced CSS code.

grammar:

      <style>
          选择器1
          选择器2
          选择器3
          ...
      </style>

Selector:

1. When using the document introduced inline CSS style sheet to achieve phase separation structure and style, but the need to define your own selectors to match the elements in the document, its application style.

2. Role: apply a style to match its document element.

3. Syntax: Selector is actually composed of two parts

A selector (operator) {
attribute: value;
attribute: value;
}
```
et :
  标签选择器/元素选择器：
  使用标签名作为选择符，匹配文档中所有的该标签，并应用样式
  p {
      color :green;
      font-size :20px;
  }
```
- Note: you can write anywhere in the document, but based on the principle of priority of style, generally written in.

3. The outer link info / Waibuyangshibiao

The definition of external .css file, can be introduced in HTML documents with style sheets truly separated.
grammar:
- Use selectors define styles in an external style sheet; use in an HTML document introduced CSS file

3. Style Sheet feature

1 inheritance

Succession
- Most CSS properties are inherited can be
- Child element or elements offspring can inherit the parent element of style
- All of the text attributes can be inherited, the width of the block elements consistent parent element

2. laminating properties

It allows for the element defines multiple styles work together.
```
p{
  color:red;
  background-color:blue;
}
```

3. stylesheet priority

From low to high
From low to high:
- Browser default settings: the browser's default style
- Embedded Document / outside the chain way: when the style does not conflict with, the style work together;
  if the style of conflict, latecomers, the last defined style final display
- Priority in the style of the highest row

4.CSS selector

Role: page specification which elements can be applied in good style statement
Objective: Match page elements

1. tag selector / selector element

Features: The label name as a selector to match all of the documents in the label, contains descendant elements

grammar:

标签名{
  属性：值
}
标签名如a,div

text-decoration: none; cancel underscore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #aaffff;
            font-size:20px;
        }
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div>这是标签</div>
    <a href="">点一下</a>
</body>
</html>

2. Class Selector

Features: By matching the class attribute value of the element

grammar:

.cl{
  样式
}
<p class="cl">p文本</p>
以英文.开头，跟上class属性值，中间没有空格

创建文件 class-selector
创建几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
3. 文本斜体显示 font-style : italic;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl{
            font-size:24px;
            background-color: orange;
            font-style:italic;
        }
    </style>
</head>
<body>
    <div>这是标签</div>
    <p class="cl">p文本</p>
</body>
</html>

3.ID selector

id Role: HTML all elements has an id attribute, primarily used to represent the elements in the document logo, unique.
id selector: matching the id attribute value of the element

grammar:

属性值{
  样式
}

Note: usually web pages are structured in the periphery of the label, use id identified, unique.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #seq{
            width:100%;
            height:50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span id="seq">这是一个span文本</span>
</body>
</html>

4. The group selector

Role: setting common styles for multiple selectors.

grammar:

选择器1，选择器2，选择器3{
  样式
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,h1,p{
            background-color: gray;
            margin:0;<!--外边距为0-->
        }
    </style>
</head>
<body>
    <h1>标题1</h1>
    <div>div</div>
    <p>p</p>
</body>
</html>

5. descendant selector

Role: relying on the relationship between the descendants of the element to match elements (includes both direct child elements, but also contains the descendant elements).
grammar:
```
选择器1 选择器2{
  样式
｝
```
Selecting progeny matching element in the element 1 corresponding to the descendants of the elements 2 must satisfy the selector.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav span{
            border-radius:2px;
            background-color:RGB(204,204,204);
            padding-left:10px;
        }
    </style>
</head>
<body>
    <p id="nav">
        <span>你好</span>
        <span>
            <span>在那里</span>
        </span>
        <span>再见</span>
    </p>
</body>
</html>

6. progeny selector

Role: Relying offspring relationship elements match, match only direct child elements.

grammar:

选择器1>选择器2 {
｝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav>ul>li{
            color:red;
        }
    </style>
</head>
<body>
    <div id ="nav">
        <ul>
            <li>你好</li>
            <li>你好<span>good<span>good</span></span></li>
        </ul>
    </div>
</body>
</html>

7. Camouflage selector

classification:
- Hyperlinks pseudo-class selectors
- Dynamic pseudo class selector

effect:

The main elements for different states to set style
Hyperlinks different states
- Before the visit: link
- After visiting: visited
- Activation (mouse click or too loose): active
- Mouse over: hover
Other elements have
- Mouse over: hover
- Mouse click: active
Form controls
- State time of acquiring the focus: focus
- For the text box and password box, when the user clicks input, it is regarded as the state gets focus

Pseudo-class selectors used in conjunction with other selection, a style element disposed in different states.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: #8e3fff;
            text-decoration:none;
        }
        a:hover{
            color: #ff45aa;
            text-decoration:none;
        }
        a:visited{
            color: greenyellow;
            text-decoration:none;
        }
        a:active{
            color:blue;
            text-decoration:none;
        }

    </style>
</head>
<body>
    <a href="#">哈哈</a>
</body>
</html>

Note: If you give a hyperlink to add style in four states, must be written in pseudo-class selectors in the following order

    :link
    :visited
    :hover
    :active
    简称 “爱恨原则 LoVe / HAte ”

8. attribute selector

CSS achieved by tpye elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"]{
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

9. The pseudo-element selector

Increase content before and after the text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*在p标签前添加元素*/
        p::before{
            content:"抽烟";
        }
        /*在p标签后添加元素*/
        p::after{
            content:"烫头";
        }
    </style>
</head>
<body>
    <p>喝酒</p>
</body>
</html>
#设置文本第一个字符
#通过伪元素添加内部为行内元素

The priority selector

When a plurality of selectors styles simultaneously applied to an element, according to the priority selector to apply a different style.
```
div{
  color:red;
}
#box{
  color:green;
}
.c1{
  color:blue;
}
<div id="box" class="c1">文本</div>
```
Analyzing the priority selector, primarily the right to see a weight selector (weight) The larger the value, the higher the priority.
```
选择器          权值
标签选择器       1
类选择器/伪类    10
id选择器         100
行内样式         1000
```
If it is a complex selector (offspring, offspring), the final weight of each selector selector is the sum of the weights

权重比较:        
1.数选择器数量： id 类 标签  谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性        
2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性     
3.同是继承来的属性            
    3.1 谁描述的近，谁的优先级越高            
    3.2 描述的一样近，这个时候才回归到数选择器的数

6. Exercise:

Role 1.div and span tags in a web page?

div将网站分割成独立的逻辑区域division分割
span:小区域标签，在不影响文本正常显示的情况下，单独设置对应的样式。
<style>
    span.active{
    font-weight:bold;
    }
</style>
<p>
    <span>内容</span>
</p>

2.CSS basic and advanced selectors selector What?

- 基础选择器
  - 类选择器
  - 标签选择器
  - id选择器
- 高级选择器
  - 后代选择器
  - 子代选择器
  - 组合选择器
  - 交集选择器
  - 伪装选择器      （link visited hover active）
  - 伪元素选择器

3. Properties box model of what? And explain the meaning of the property, draw a box model diagram?

- width:内容宽度
- height:内容的高度
- border:边框
- padding:内边距
- margin:外边距

4. How to make the text is centered vertically and horizontally?

<style>
    div{
        width:200px;
        height:60px;
        text-align:center;
        line-height:60px;
    }
</style>
<div>
    wusir
</div>

让行高等于盒模型的高度实现垂直居中
使用text-align:center;实现文本水平居中

5. How to remove the underscore a label?

text-decoration:none;
none:无线，underline:下划线,overline:上划线,line-through:删除线.

6. How do you reset the page style?

html,body,p,ul,ol{
    margin: 0;
    padding: 0;
}
/*通配符选择器 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
input,textarea{
    border: none;
    outline: none;
}

7. How to remove default border and external input and textarea tags?

border:0;
outline:0;

8. Which attributes can be inherited in the css?

1.字体系列属性：
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
fnot-style:字体的风格

2.文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:单词之间的间距
letter-spacing:中文或者字母之间的间距
text-transform:控制文本大小
color:文本颜色

3.元素可见性
visibility:控制元素显示隐藏

4.列表布局属性
list-style列表风格，包括list-style-type,list-style-image

5.光标属性：
cursor:光标显示为何种形态



color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing

9. How right css correctly heavier?

如果选中了标签
    数选择器的数量  id  class 标签 谁大优先级越高 如果一样大，后面优先级越大
    如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
    都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。
    !important 它设置当前属性的权重为无限大，大不过行内样式的优先级

10. The block-level tags and the tag line?

块级标签:
1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度
2.独占一行
p
div
ul
ol
li
h1~h6
table
tr
form

行内标签：
1.不可以设置宽高
2.在一行内显示
a 
span
b
strong
em
i

行内块标签
1.可以设置宽高
2.在一行内显示
input
img