Html/Css (article 2 for beginners) and css beginners

Html/Css (article 2 for beginners) and css beginners

1. In actual work, a team is working on a project, not a person. Multi-person collaboration means that each team has its own
Naming Conventions.
1. css selection character naming, standard.
2. There are naming conventions.

Ii. css selection operator: Specifies the object (range) to which the css style applies)
1. Tag selector: For html tags
2. id selector: For content that appears only once on the page, id
3. class selector: Repeated styles for some elements in the same style
* ***** By default, some html elements have their own default values.
4. control all elements ---- use wildcards ----*
Wildcard character: * {attribute: Value}, used to define all html elements
* ***** Has a wide range of functions, but its efficiency is very low. Use with caution
* {Margin: 0; pandding: 0;} // reset the outer and inner margins of all elements to zero.
5. nested use of selector ---- contains Selector
The limit of front-end development-that is, the code is very streamlined.
6. If multiple delimiters have the same style, we can combine these delimiters into a group.
Select character 1, character 2,... {attribute: Value}
* *** The css selector indicates who you will use your defined style.
/* The following delimiters indicate that these delimiters are divided into a group and all of them have the same style */
Body, ul, ol, li, p, hi, h2, h3, h4, h5, h6, form, fieldset, table, top ,. top ,. top ,. top a: visited
/* Indicates */
. Top a,. top a: visited

Iii. css Box Model
* *** A box consists of the following parts:
1. content in the box
2. Box border
3. The distance between the border and content of the box is called filling-padding and the padding (inner patch)
4. Multiple boxes exist. The distance between the boxes is called the boundary-margin and the margin (outer patch)

* ***** Is the actual width of the box. For example, the value is left and right border, left and right border, left and right padding, and content width.
* ***** Css box attributes
[1]. Content attributes: the width of the content itself = width, and the height of the content itself = height
[2]. Inner filling attribute: the distance between content and border padding
* *** When defining the width of a box, you must consider the inner filling, widening, and boundary.
If the inner fill is added, the entire box width value minus the inner fill value you added. (Box-
Sizing: border-box; to make the Browser display a box with the specified width and height, and put the border and padding into the box.
)

On the top of the small box = 20 on the right, 30 on the bottom, 50 on the left, and 100 on the outer border
Margin: 20 30 50 100;
Margin-top:
Margin-right:
Margin-bottom:
Margin-left:

* ***** In the future, you should pay attention to the browser compatibility when using the outer margin.
* ***** All non-zero values except 0 must be followed by a unit.
* ***** We need to calculate the default internal and external margins of all browsers from scratch.
In actual work, do not use this * (margin: 0; padding: 0), with the lowest efficiency.
Therefore, when we use the elements, the default values of those elements are reset to zero.

Although css attributes have inheritance characteristics, not all attributes have inheritance.
Css layout is mainly implemented through the box model-w3c places webpage content in some boxes and performs some attributes of the box
Control.
Content: width height
Inner filling: padding
Box: border
Outer border: margin

Introduction to list attributes: -- compatibility problems
List-style: list of images
Syntax:
List-style: list-style-image | list-style-position | list-style-type
List style: the style of the List of image list symbol positions
List-style-none is not a list symbol.

Border attribute description:
Css syntax:
Border: border-width | border-style | border-color
Based on the syntax, deduce how it is used.
If you only write border, three different sub-elements are followed. The first is width, the second is style, and the third is face filter.
Color
Border style: the width is two pixels in blue
Border: 2px solid blue

* *** Css tips:
[1] align the box horizontally: Set the left and right boundary of the object to auto;
[2] align the content in the box vertically: Set line-height = the height of the box, but there is no line break.
[3]. We can add background colors when debugging.

* ***** Classification of html elements: block and inline
By default, the background image is tiled horizontally and vertically.
The Default background image is displayed in the upper left corner of the element.
Attach a background image: The fixed definition is to fix the image to a certain position on the screen (visible area.
Compatibility IE6: only html and body elements support this attribute.

Tips to make you look professional: Flip effect: in fact, the idea is to prepare two images of the same size and different content. Normally
Show one lower, and show another when you move the mouse over. (In css3, the transform attribute is often used to define the image flip effect)

Pseudo class, indicating a state
: Link

Css genie tips: mainly to reduce http requests [commonly used font icons in css3 to replace traditional small icons (future trends )]
Browser-server (Communication) (for example, shopping supermarket-checkout time .)