Import CSS - selectors - weights

Cascading Style Sheets

It is used to control page styles and allows a markup language page content and the style code isolated

CSS syntax structure

{} Declaration selector attribute names: Property Value

css introduced three kinds of ways

Inner fitting formula

<p style='color:red;'>文字颜色为红色</p>

Embedded

<style type='text/css'>
    p{
        color:red;
    }
</style>

External formula

<link rel="stylesheet" href="index.css" type="text/css">

priority

Embedded> Embedded> External style

But 嵌入式>外部式there is a premise: Location css styles embedded in the back outside a certain style.

CSS selectors

Foundation selector

Tag selector

p{
    color:red;
}

Class selector

.class{
    color:red;
}

id selector

#id{
    color:red
}

Senior selector

Descendant selectors

div inside of all the p

div p{
    css代码样式;
}

Descendant selector

Valid only for the offspring

div>p{
    css代码样式;
}

Combination selector

h1,span,p{
    color:red;
    font-size:14px;
}

Pseudo-element selector

It follows the "love-hate guidelines", the so-called hate is "LoVe HAte"

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

Pseudo class selector

Commonly used to set the first letter of a particular style:

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

before and after more than used to remove floating.

CSS inheritance of

Web applications : for example, when we go to website design, website unified font color is gray, the font size is 14px. Then we can achieve this effect to good use css of inheritance. However, not all properties can be inherited

code show as below:

body{
    color:gray;
    font-size:14px;
}

CSS weights

Inheritance weight is almost 0

Element selector 1

Class selector 10

ID selector 100

Inline style 1000

Never carry weight calculation!

! Important weight maximum

p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/