Where do beautiful pages come from? -CSS_html/css_WEB-ITnose

Where does the beautiful page come from, from the clever configuration of CSS styles !

CSSFeatures: realize the separation of web content and style

1. Use the selector to select the content marked in the selector in Html, so that these Content is displayed according to the styles in CSS
2. How to apply CSS styles to web content
   1. Inline styles
   1. Inline styles
   1. Introduction method: html file and css file are successfully separated
      1. Link type: when the client browses your web page, it first loads the external CSS file into the web page, and then compiles and displays it, so this In this case, the displayed web page is the same as what we expected
      1. Import type: when the client browses the web page, it first presents the structure of html, and then loads the external CSS file into In the web page, of course the final effect is the same as the former, except that when the network speed is slow, the html web page without CSS unified layout will be displayed first
         1. Comparison of advantages and disadvantages: Importing styles can avoid too many pages Point to a css file. When there are not many pages using the same CSS file in the website, there is almost no difference between the two methods in terms of effect. However, when the number of pages on the website reaches a certain level (such as portals such as Sina), it may be difficult to use the link method. This will cause the speed to drop due to multiple pages calling the same CSS file, but generally websites that can reach this level of page will also have the capital to use the best hard disk, so there is no need to worry about this factor.

1. Basic CSS Selector
   1. Tag Selector

   1. Category Selector
      1. Class
   1. ID Selector
      1. ID
   1. Priority of selector: ID Selector > Class Selector > HTML Tag Selector

1. Composite Selector
   1. Intersection Selector
   2. Union selector
   3. Descendant selector

1. Box model
   1. margin: outer margin
   2. Border: border
   3. padding: inner margin
      1. respectively left, right, bottom , top four attributes
      2. When setting four attribute values:

1. Box positioning
   1. static: the default layout method (the box is laid out according to the standard flow including floating method)
   1. relative : Relative positioning, which offsets the box by a specified distance relative to its original standard position. Other boxes still treat it as a standard flow
   1. absolute: Absolute positioning, the position of the box is offset based on its containing box. Position other boxes as if this box does not exist
   2. Fixed: Position based on the browser window

CSS There is still a lot we need to learn in , and we need to continue to deepen it in the future.