HTML/CSS (second entry for beginners)

First, in the actual work, is a team in the project, not a person at work. Many people work together, that is, each team has its own
's naming habits.
1, CSS selector naming, specification.
2, all have the naming specification document.

Ii. CSS Selector function: Specifies the object (range) to which the CSS style works
1. Tag Selector: for HTML tags
2. ID selector: For content that appears only once in the page, ID
3. Class selector: For some elements, same style, repeating style
By default, some HTML elements have their own default values.
4. Control all elements----use wildcard characters----*
Wildcard Selector: *{property: Value}, used to define all HTML elements
* The scope of the action is very wide, but its efficiency is very low. Use with caution
*{margin:0;pandding:0;}//resets the margins and padding of all elements to zero
5. Nested use of selectors----include selectors
The extreme----of front-end development is that the code is very streamlined.
6, if more than one selector will have some of the same style, this time we can make these selectors into a group
Selector 1, selector 2, ... {Property: Value}
A CSS selector is a representation of who you will use to define your style.
/* The following selectors, which indicate that these selectors are grouped into a group, 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
/* for a*/in class named Top
. Top A,.top a:visited

Third, CSS box model
A box is composed of the following parts:
1 Content in the box
2, the box border border
3, the box between the border and the content of the distance, called the fill--padding, padding (inner patch)
4, multiple boxes exist, the distance between box and box, called Boundary--margin, margin (outside patch)

The actual width of the box is the example = left and right border + left and right Border + left and right inside padding + content width
CSS box-related properties
"1", Content properties: The content itself is wide =width, the content itself high =height
"2", Inner padding attribute: the distance between content and boundary padding
When defining the width of the box, take into account the inner padding, widening, and the existence of the boundary.
If an inner padding is added, the entire box width value is subtracted from the padding value you added. (CSS3 can be used in box-
Sizing:border-box the browser to render a box with the specified width and height, and place the border and padding in the box.
）

Top of the small box = 20 Right 30 below 50 left 100 outer border
MARGIN:20 30 50 100;
Margin-top:
Margin-right:
Margin-bottom:
Margin-left:

In the future, use the margin to pay attention to browser compatibility.
In addition to a value of 0, all non-zero values are appended to the unit.
We need to count the default internal and external margins for all browsers from zero.
In the actual work, do not use this * (margin:0;padding:0), the lowest efficiency.
So what elements are used to zero the default values of which elements.

CSS properties, though inherited, are not inherited by all attributes.
CSS layout is mainly through the box model to implement--W3C put the Web page content in some boxes, some of the properties of the box
Control.
Content: Width height
Inner padding: padding
Outer frame: Border
Outer boundary: Margin

About the properties of the list:--There are compatibility issues
List-style: Picture of the list
Grammar:
List-style:list-style-image | | list-style-position | | List-style-type
List style: List of picture list symbol position list style
List-style-none do not list the symbols.

Border Property Description:
CSS syntax:
border:border-width| | border-style| | Border-color
Based on the syntax, infer how it is used
If you write only border, then the following is followed by three different sub-elements, the first: thickness, the second: style, third: Yan
Color
Border style: Two pixels thick solid blue
BORDER:2PX Solid Blue

CSS tips:
"1", let the box horizontal center: Set the left and right edge of the object to auto;
"2", let the contents of the box be centered vertically: Set line height (line-height) = box height, but do not have a newline.
"3", when we are debugging, we can appropriately add the background color.

Categories of HTML elements: block and inline
The background picture is tiled horizontally and vertically by default.
The picture of the default background is displayed in the upper-left corner of the element.
The attachment of a background image: a fixed definition is a location where the picture is pinned to the screen (viewable area).
Compatibility IE6 only the two elements of HTML and body support this property

Make you look professional skills: Flip effect: In fact, the idea is to prepare two pictures of the same size, different content, the normal situation
The next one is displayed, and another is displayed when the mouse is over. (Common transform attribute in CSS3 to define the rollover effect of the picture)

Pseudo-Class, which represents a state
: Link

CSS Wizard tips: Mainly to reduce the HTTP request "CSS3 in the common font icon to replace the traditional small icon (future trend)"
Browser-Server (AC) (Example: Shopping mall – Checkout time. ）

HTML/CSS (second entry for beginners)