Html/Css (first entry for beginners)

1. Understand the meaning of web standards - why use web standards
***** Separate content and style
1. Web standards are a series of standards, that is, a series of technical standards
in use It is a combination application
[1], structured content html
[2], expressive content css
[3], behavioral content JavaScript
2, and a small tool for web development-- The firebug
tool in Firefox - add-ons - search firebug
works as a web front-end and needs to be compatible with browsers such as IE, Firefox, Google Chrome, Safari, etc.
Whether the webpage has css style, test-change the text size in the browser.
3. CSS definition skills:
[1]. For future CSS code optimization, it is recommended that all attribute values ​​be followed by ";"
[2]. Some html tags have their own defaults css attribute value,
for example, the h1 tag has its own attribute value, which is automatically displayed in bold and the font size is relatively large.
【3】In order to be compatible with mainstream browsers and for unification, it is recommended that we reset the css attributes of all elements to standard when setting.
【4】. Different browsers have incompatible CSS attribute values ​​- the most important thing is browser compatibility.
【5】What should I do if I have a special font that I want to use? --Convert it into a picture. (In css3, you can pass @font-face

Custom font)
divided into Chinese and English fonts. Set the order of fonts, set English fonts in the front and Chinese fonts in the back.
【6】, css editing tool - you can use anything, experts, use leaves to kill people.
【7】. If you want the text to be centered in the vertical direction, set the line height to the height of the element, line height = element height.
【8】. The css can be reset to the default style of the html tag.
4. The way CSS is applied to web pages: It is equivalent to how people put on clothes.
【1】, Inline style: applied to one.
【2】, Embed style: applied to a type of tags.
【3】. If we have many web pages, we must use CSS and write these CSS into a separate file. This is the external link type (recommended).
【4】.Imported style: the style is also written into a file and then poured into the web page.
*****Explanation, the imported style is actually similar to the embedded style, both add styles to the web page.
1. Importing will occupy html file space
2. Some browsers may have parsing problems. The browser will finally read the content in @import
3. Import multiple style files into one style file.

2. Characteristics of css
css is called cascading style sheets.
1. Inheritance: Child elements will inherit some styles of the parent element.
[Because some child elements have default values, they do not use parent elements]
2. Overlay: If the child element defines the same style as the parent element, it will override the style of the parent element.
****The following styles will overwrite the previous styles

3. Priority of CSS styles: When styles conflict, who will listen? (You can use !important to increase its priority)
css priority: proximity principle
The smaller the scope, the higher the priority.
The closer the style is to the target to be modified, the higher the priority.

Grandpa--Red
Dad--Green
Child--Blue
Select priority
Inline>id>class>Tag selector
In special cases, we can improve a certain Permissions for each attribute
*****IEtest tool also has a compatibility issue. It cannot open ie6 under win7.--Download the green version of ie6. No need to install which version to use directly.

4. Some commonly used text and text-controlled css styles
***** When we apply css styles, we must pay attention to its default values. Because different browsers have different css default values ​​(different attribute browsing
The browser support is different. We also need to ensure the compatibility of our web pages and try to use the passed attributes instead of attributes with compatibility differences. )

5. CSS controls a certain state of the element - pseudo class
Pseudo class syntax:
Element name: pseudo class name {attribute: value}
For example: the mouse passing state of a hyperlink
a:hover{text-decoration:underline;}
*****If the effect of placing the mouse does not work, please modify the order of the connection status L-V-H-A