51, the first knowledge of CSS

CSS syntax

A CSS rule consists of two main parts: a selector, and one or more declarations.

123456789

‘‘‘        selector {                  property: value;                  property: value;             ...  property: value                  }        ‘‘‘

For example:

1	h1 {color:red; font-size:14px;}

　　

　　

Back to top four ways to introduce CSS 1. In-line

Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.

1

<p style=" padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">>hello yuan</p>

2. Embedded

Embedded is a set of CSS styles that are written in the

123456789

<meta charset="UTF-8">    <title>Title</title>    <style>        p{            background-color: #2b99ff;        }    </style></head>

3-Link

Introduce a. css file into an HTML file

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

4. Import Type

Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the

12345

<style type="text/css">          @import"mystyle.css"; 此处要注意.css文件的路径</style>

Attention:

The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking.

CSS Selector Basic Selector

Combo Selector

123456789

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝ E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; } E +F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div +p { color:#f00; } E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

Note, about tag nesting:

In general, block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements. It is important to note that P tags cannot contain block-level labels.

Property Selector

12345678910111213141516

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素                td[class~=”name”] { color:#f00; }E[attr^=val]    匹配属性值以指定值开头的每个元素                                    div[class^="test"]{background:#ffff00;}E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

Pseudo class Anchor Pseudo-class:Designed to control the display of links

"'        a:link (links that have not been contacted) are used to define the general state of the link.        A:hover (the state on which the mouse is placed on the link) for creating visual effects.                a:visited (visited links), used to read articles, can clearly judge the links that have been visited.                A:active (the state when the mouse is pressed on the link), which is used to show the link state when the mouse is pressed.                pseudo-Class selectors: pseudo-class refers to the different states of the label:                           a ==> point over state no point over state mouse hover state activation state                A:link {color: #FF0000}/* not visited link */                a:visited {color: #00FF00}/* Visited link */                a:hover {color: #FF00FF}/* Mouse moved to link *                /a:active {color: #0000FF}/* Selected link */format: Tags: pseudo-class name {CSS code;} '

<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>. top{background-color:rebeccapurple;           width:100px;       height:100px; }. bottom{Background-Color:green;            width:100px;        height:100px; }. outer:hover. bottom{background-Color:yellow; Note: It must be outer:hover control a tag in outer, otherwise invalid. Top:hover. bottom{background-Color:yellow; }    </style>class="outer"> <divclass="Top">top</div> <divclass="Bottom">bottom</div></div></body>View Codebefore afterPseudo class
: Before    p:before       insert content before each <p> element      :        after p:after inserts a sample after each <p> element     : p:before{ Content: "Hello"; color:red;display:block;}
Precedence CSS inheritance for selectors
Inheritance is a major feature of CSS, and it is dependent on the ancestor-descendant relationship. Inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a body-defined color value is also applied to the text of a paragraph.

 
 
 
  
  
 
   
 
    
1
 
    
body{color:red;}       <p>helloyuan</p>
 
   
 
  
 
 
 
This text has been inherited by body {color:red;} The color of the style definition. However, the weight of CSS inheritance is very low, it is 0 lower than the weight of ordinary elements.

 
 
 
  
  
 
   
 
    
1
 
    
p{color:green}
 
   
 
  
 
 
 
Discover that you only need to add a color value to overwrite the color of the style it inherits. Thus, any rule that displays a declaration can override its inheritance style.
In addition, inheritance is an important part of CSS, and we don't even have to think about why it's possible, but there are limitations to CSS inheritance. Some properties cannot be inherited, such as: border, margin, padding, background, etc.
div{  border:1px solid #222}<div>hello <p>yuan</p> </div>
Precedence of CSS
The so-called CSS precedence refers to the order in which CSS styles are parsed in the browser.
The particularity of the style sheet describes the relative weights of the different rules, and its basic rules are:

1 The weights of the inline style sheet are highest style= ""------------1000;
2 The number of ID attributes in the statistics selector. #id--------------100
3 Number of class attributes in the statistics selector: class-------------10

4 the number of HTML tag names in the statistics selector. P---------------1
By adding the number of strings to bits by these rules, the final weight is obtained, and then the comparison is based on the left-to-right order.
1. The style priority in the text is 1,0,0,0, so it is always higher than the external definition.　　    2, there is!important declaration of the rules above all.　　3. If the!important declares a conflict, the priority is compared.　　4, if the priority is the same, according to the order in the source code to decide, later on the home. 5. The style obtained by inheritance has no specificity calculation, it is below all other rules (such as the rules defined by global selectors *).
51, the first knowledge of CSS