Html/Css (Part 2 for Beginners)

1. In actual work, a team is working on the project, not one person. Multi-person collaboration means that each team has its own
naming habits.
1. Naming of css selectors should be standardized.
2. There are naming specification documents.

2. The role of css selector: specify the object (scope) that the css style is applied to
1. Tag selector: for html tags
2. id selector: for content that only appears once on the page, id
3. Class selector: for certain elements, the same style, repeated styles
***** By default, some html elements themselves have their own default values.
4. Control all elements----use wildcards----*
wildcard selector: *{attribute: value}, used to define all html elements
***** * The range of action is very wide, but its efficiency is very low. Use with caution
*{margin: 0; padding: 0;}//Reset the outer margins and inner margins of all elements to zero
5. Nested use of selectors----including selectors
The limit of front-end development is that the code is very streamlined.
6. If multiple selectors have the same style, we can form a group of these selectors at this time
Selector 1, selector 2,... {Attribute: value }
*****css selector indicates who you will use the style you defined.
/*The following selectors indicate that these selectors are grouped into a group and they all have the same style*/
body,ul,ol,li,p,hi,h2,h3,h4,h5, h6,form,fieldset,table,top a,.top,.top a,.top a:visited
/* means a*/
.top a,.top a: visited

3. CSS box model
****A box is composed of the following parts:
1. Content in the box
2. Border of the box
3. Box The distance between the border and the content is called padding, inner margin (inner patch)
4. Multiple boxes exist, and the distance between boxes is called border --margin, outer margin (External patch)

***** is the actual width of the box, for example = left and right borders, left and right borders, left and right padding content width
*****css box related attributes
[1], content attribute: content The width of the content itself = width, the height of the content itself = height
[2], padding attribute: the distance between the content and the border padding
***** When defining the width of the box, the padding should be considered , widening, the presence of boundaries.
If you add padding, the width of the entire box will be subtracted from the padding value you added. (box- can be used in css3
sizing:border-box; causes the browser to render a box with the specified width and height, and put the border and padding into the box.
)

Top of the small box=20 Right 30 Bottom 50 Left 100 Outer border
margin: 20 30 50 100;
margin-top:
margin-right:
margin-bottom:
margin-left：

***** Please pay attention to browser compatibility when using margins in the future.
*****Except when the value is 0, all non-zero values ​​must be followed by a unit.
*****We need to calculate the default inner and outer margins of all browsers from zero.
In actual work, do not use this * (margin: 0; padding: 0), which is the least efficient.
So we reset the default values ​​​​of which elements are used to zero.

Although CSS properties have inheritance characteristics, not all properties are inherited.
CSS layout is mainly implemented through the box model-w3c places web content in some boxes and adjusts some attributes of this box
Control.
Content: width height
Inner padding: padding
Outer frame: border
Outer border: margin

About the attributes of the list: --There are compatibility issues
list-style: image of the list
Syntax:
list-style: list-style-image || list-style-position | | list-style-type
The style of the list: the picture of the list, the position of the list symbol, the style of the list
list-style-none does not need the symbol of the list.

Border attribute description:
css syntax:
border: border-width||border-style||border-color
According to the syntax, infer its usage
If you only write border , then it will be followed by three different sub-elements, the first: thickness, the second: style, the third: color
Color
Border style: Two pixels thick solid blue
border: 2px solid blue

*****css tips:
[1], center the box horizontally: set the left and right boundaries of the object to auto;
[2], center the content in the box vertically: set the row Height (line-height) = height of the box, but no line breaks.
【3】When we are debugging, we can add the background color appropriately.

*****html element classification: block and inline
Background images are tiled horizontally and vertically by default.
The default background image is displayed in the upper left corner of the element.
How the background image is attached: The definition of fixed is to fix the image at a certain position on the screen (visible area).
Compatibility IE6 only supports this attribute for the two elements html and body

Tips to make you look more professional: Flip effect: In fact, the idea is to prepare two pictures of the same size but different content. Normally One will be displayed under
, and another will be displayed when the mouse passes over it. (The transform attribute is commonly used in css3 to define the flip effect of images)

Pseudo class, representing a state
: link

css wizard skills: mainly to reduce http requests[Commonly used font icons in css3 replace traditional small icons (future trend)]
Browser--server (communication) (example: Shopping supermarket--at checkout)