_css of front-end technology the next day

_css of front-end technology the next day 1. css Base selector

HTML is responsible for the structure, CSS is responsible for the style, JS responsible behavior.

CSS is written in the head tag, the container style tag.

Write the selector first, then write the curly braces, and the curly braces are the styles.

    <style type= "text/css" >        body{            background-color: pink;        }     </style>

Common Properties:

    H1{            color:blue;             Font-size: 60px;             font-weight: normal;             text-decoration: underline;             font-style: italic;        }    

1.1 Tag Selector

is to use the tag name as the selector.

1) All tags can be used as selectors, such as body, H1, DL, UL, span, etc.

2) No matter how deep the label is hidden, it can be selected.

3) Select all, not one. So it's a commonality, not a feature.

For example, NetEase, I hope all the hyperlinks on the page are not underlined:

        a{             /* Remove underline:*/            text-decoration: none;         }

1.2 ID Selector

#表示选择id

1  #lj1{2  font-size: 60px;  3  font-weight: bold; 4  Color:black; 5  }

1) Any label can have Id,id name to start with a letter, can have numbers, underline. Casing is strictly different, that is, mm and mm are two distinct IDs.

2) The same page ID cannot be duplicated, even if the label is not the same, it cannot be the same ID. In other words, if there is a p ID called haha, the ID of all other elements in this page is not called haha.

Class 1.3 Selector

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{Color:Red; }. Zhongyao{text-decoration:Underline; }</style>

. is the symbol of the class . Class English is called class.

the so-called class is the Class attribute, the class attribute and the ID are very similar, and any tag can carry the class attribute .

The class attribute can be repeated, for example, there may be many tags on the page that have the Teshu category :

1  

CSS is used to represent classes:

1  . Teshu{2  color: red;  3  }

the same label, which may belong to more than one class, is separated by a space :

1 

Thus, this h3 belongs to the Teshu class at the same time and also belongs to the Zhongyao class.

A common mistake for beginners is to write a two class:

1 

So to summarize two articles:

1) class can be repeated, that is, the same page may have multiple labels at the same time belong to a certain class;

2) The same tag can carry more than one class at a time.

The use of classes can determine the level of a person's CSS.

1) Don't try to use a class name to finish writing all the styles of a tag. This tag carries several classes, which together create the style of the label.

2) Each class should be as small as possible, with a "public" concept that allows more labels to be used.

Correct use of public classes: Cases

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{Color:Green; }. Da{font-size:60px; }. Xian{text-decoration:Underline; }</style>

1.4 In the end with ID or class?

Answer: Use the class as much as possible , unless you can use the ID for very special situations.

Reason:the ID is JS used. That is, JS to pass the id attribute to get the label, so we try to avoid the CSS level ID, otherwise JS is very awkward. On another level, we think of an element with an ID that has a dynamic effect.

is a label that can be selected at the same time by a variety of selectors, tag selector, ID selector, class selector. These selectors can select the same label to affect the style, which is the first layer of the CSS's cascading "cascading" meaning.

2. CSS Advanced selector 2.1 descendant Selector

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{Color:Red; }</style>

View Code

1  <style type= "Text/css" >2  . Div1 p{3  color:red;  4  }5  </style>

spaces represent descendants,. Div1 P is the offspring of. Div1 all P.

Emphasize that the choice is the offspring, not necessarily the son.

For example:

1    <div class= "Div1" >2        <ul>3            <li>4                <p> paragraph </p>5                <p> paragraph </p>6                <p> Paragraphs </p>7            </li>8        </ul>    </div>

The descendant selector is a balance: the commonality, the characteristic balance. When you want to change the style of all of the parts, you have to think of the descendant selector.

Descendant selectors, which describe the ancestor structure.

Can be selected on the following selector:

1  . Div1 p{2  color:red;}

So, see this selector to know that it is a descendant, not a son. The selected "P" in all. Div1 "is the descendant p.

2.2 Intersection Selector

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{            color:red;        }     </style>

View Code

the selected element satisfies two conditions at the same time: Must be a H3 label, and then must be a special label.

The intersection selector has no spaces.

intersection selector, we usually start with the tag name, such as Div.haha, such as p.special.

2.3 Set Selector (group selector)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{            color:red;        }     </style>

View Code

1 H3,li {2  color:red; }

Use commas to represent the set.

2.4 Wildcard characters *

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{            color:red;        }     </style>

View Code

* All elements are represented.

1 * {2  color:red; }

Inefficient, this selector does not appear on the page if there are more labels on the page and less efficiency.

3, some CSS3 selector 3.1 Compatibility Problem description

We will now introduce you to the browser:

IE: Microsoft's browser, installed with the operating system. So every Windows has IE browser.

IE6 installed on Windows XP operating system

IE7 for Windows Vista operating system installation

IE8 for Windows 7 operating system installation

IE9 for Windows 8 operating system installation

WINDOWS10 operating system-installed Edge

Browser compatibility problem, to out, basically is out in IE6, 7, these two browsers are very low-level browser.

market share of the browser: http://tongji.baidu.com/data/

HTML5 Browser Rating:

Http://html5test.com/results/desktop.html

3.2 son selector >

http://www.ietester.cn/Test Tools

1 div>p {2  color:red; }

Div's son P. And the Div's descendants p are very different.

3.3 Sequencer Selector

IE8 start compatible; IE6, 7 are not compatible

Select the first 1 li:

1  <style type= "Text/css" >2  ul li:first-child{3  color:red;  4  }5  </style>

Select the last 1i:

1  ul li:last-child{2  color:blue;  3  }

because the browser update requires process, now if the company also requires compatibility IE6, 7, then write your own class name:

1    <ul>2        <li class= "First" > Project </li>3        <li> project </li>4        <li> projects </li>5        <li> Projects </li>6        <li> Project </li>7        <li> Project </li>8        <li> Project </li>9        <li> Project </li>10        <li> project </li>11        <li class= "Last" > Projects </li>    </ul>

Use a class selector to select the first or last:

1        ul li.first{2            color:red;  3        }        ul li.last{6            color:blue;        }

3.4 Next Brother selector

IE7 start compatible, IE6 not compatible.

+ means select Next sibling

1    <style type= "text/css" >2        h3+p{3            color:red;  4        }    </style>

The selection is on the first sibling next to the H3 element.

1    

4. CSS Inheritance and cascading 4.1 Inheritance

There are some attributes that, when set to themselves, inherit from their descendants, which is inheritance.

Which properties can inherit?

Color, text-, beginning with line-, font-.

these can inherit the text style; all the properties of the box, positioning, layout cannot be inherited.

So, if the text of our page is gray, it's all 14px. Then you can take advantage of inheritance:

1 Body {2     color:Gray; 3     font-size:14px; }

Inheritance is the element that starts from itself until the smallest.

5.2 Stacking Sex

A lot of companies have to have a written test, so they must be layered.

cascading: CSS is the ability to handle conflicts. All weights are calculated without any compatibility problems!

CSS is as elegant as an artist, as rigorous as an engineer.

When selecting an element on the selector, the statistic weights are as follows:

Number of IDs, number of classes, number of labels

If the weights are the same, then the subsequent occurrences will prevail:

If an element cannot be selected directly, the weight is 0 if it is influenced by inheritance .

If everyone is 0, then there is a nearest principle: who describes the near, who listens.

Weight Problem Big Summary:

1) First to see if there is a check, if selected, then the (ID number, number of classes, the number of tags) to count weights. Who listens to who is big. If all are the same, listen and write whichever is right.

2) if not selected, then the weight is 0. If everyone is 0, the nearest principle.

Case 1:

Case 2:

Case 3:

Case 4:

Summarize:

Inheritance: a good thing. Inherit from top to bottom, which can? Which can't?

Cascading: Conflicts, multiple selectors describe the same property, who listens to?

_css of front-end technology next day