Get to know CSS_html/css_WEB-ITnose

1. Introduction

Cascading style sheets are an application used to express HTML (an application of Standard Generalized Markup Language) or XML (an application of Standard Generalized Markup Language). subset) and other file-style computer languages.

CSS is a style design language that can truly separate web page performance and content. Compared with the performance of traditional HTML, CSS can perform pixel-level precise control over the position and layout of objects in web pages, supports almost all font size styles, has the ability to edit web page objects and model styles, and can perform preliminary interactions. Design is currently the best expressive design language based on text display. CSS can simplify or optimize writing methods according to the understanding ability of different users, making it highly readable for all types of people.

2. How to use

There are three ways to use style sheets on site pages:

1. External Linking (Also called external styles): Link web pages to external style sheets.

2. Embedding (also called internal page style): Create an embedded style sheet on the web page.

3. Inline (also called inline style): Apply inline styles to each web page element.

Among them, priority: Inline> Embedded> Outline

External style sheet

When the style needs to be applied to With many pages, an external style sheet would be ideal. Using external style sheets, you can change the look of your entire site by changing one file.

1 2 3

1 2

3

1 2 3 4 5

1 2 3

This is a paragraph

Internal style sheet When a single file needs special When styling, you can use internal style sheets. You can define internal style sheets via the Inline styles Inline styles can be used when special styles need to be applied to individual elements. The way to use inline styles is to use the style attribute in the relevant tag. Style properties can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

1 2 3

This is a paragraph

3. Layout features

I. Streamline the code and reduce the difficulty of refactoring. When spiders crawl the pages of a website, if there are too many junk codes, the search spiders will feel unfriendly and distrustful of them. At the same time, the crawling speed of spiders will also be slowed down. For website SEO, it can be said that A big no-no. Just like the traditional use of table pages, we need to optimize the code of the website, and this requires the use of CSS divs. Let’s talk about some of the benefits of using CSS divs for code optimization.

The website uses DIV CSS layout to make the code very streamlined. I believe most of my friends have heard of it. CSS files can be called on any page of the website, but if you use a table to modify some pages, it will appear Very troublesome. If it is a portal website, many pages need to be changed manually, and looking at the tables will feel messy and time-consuming. However, using css div layout only requires modifying a code in the css file.

II. Web page access speed

Compared with the Table layout, the web page using DIV CSS layout has streamlined many page codes, so its browsing access speed will naturally increase, thus improving the website's User experience.

III. SEO Optimization

Websites using div-css layout are very friendly to search engines, so they avoid the problem of too many nested levels of tables that cannot be crawled by search engines. Moreover, concise and structured code is more conducive to highlighting key points and suitable for search engine crawling.

IV. Browser compatibility

Compared with TABLE layout, DIV CSS is more prone to incompatibility issues with multiple browsers. The main reason is that different browsers have different default values ​​for web standards. . The mainstream in China is IE, with Firefox and Chrome less commonly used. In terms of compatibility testing, you first need to ensure that no problems occur in multiple versions of IE. Here are some methods and techniques, and you can find solutions to specific problems on the website.

V. Small mistakes often made when laying out CSS DIV web pages

1. Check whether the HTML elements have spelling errors or forget the closing tag

Even veterans often You will get the nesting relationship of divs wrong. You can use dreameweaver's verification function to check for errors.

2. Check whether the CSS is written correctly

Check whether there are spelling errors, whether you forgot the ending }, etc. You can use CleanCSS to check CSS for spelling errors. CleanCSS is a tool to reduce weight for CSS, but it can also check for spelling errors.

3. Use the deletion method to determine where the error occurred

If the error affects the overall layout, you can delete the div blocks one by one until the display returns to normal after deleting a certain div block. The location where the error occurred.

4. Use the border attribute to determine the layout characteristics of the error element

Using the float attribute for layout may cause errors if you are not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.

5. The parent element of a float element cannot specify the clear attribute

If you use the clear attribute on the parent element of a float element under MacIE, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will take detours.

6. Float elements must specify the width attribute

Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.

In addition, try to use em instead of px as the unit when specifying elements.

7. Float elements cannot specify attributes such as margin and padding.

IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values ​​for IE.

8. The sum of the widths of float elements must be less than 100%

If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%.

9. Have you reset the default style?

Different browsers have different interpretations of certain attributes such as margin, padding, etc. Therefore, it is best to set all margin and padding to 0, list style to none, etc. before development.

10. Did you forget to write the DTD?

If the display results of different browsers are still different no matter how you adjust it, then you can check whether you forgot to write the DTD declaration at the beginning of the page.

Finally, it should be noted that spiders do not like too many CSS codes on a page, otherwise it will also affect the crawling of spiders and the inclusion of search engines, so it is a very good method to call CSS through external calls. At the same time, if you don’t need too many fancy websites, you can also achieve the desired effect by using CSS layout. Such as text color changes in website navigation, drop-down menus, etc.

IV. CSS core content

Four key points: standard flow; box model; box floating; box positioning.

HTML tag format: block-level element (div is a block-level element, spanning a whole line; write

display:block

in the style sheet to convert it to a block level elements), inline elements (span is an inline element, the size is related to the content).

1. Flow: refers to the tags that are ranked in front, and are also displayed in front (compare: flowing water).

2. Box model: The so-called model refers to imitating its shape, making it look like it, and showing it with objective things.

3. In simple terms about box floating:

float:left /* The box floats to the left*/

If necessary Clear the float of a column:

clear:left /* Clear the left float*/

4. Box positioning: Relative positioning does not break away from the standard flow; absolute positioning breaks away from the standard flow.

position：relative;          /* 相对定位 */

position：absolute;         / * 绝对定位 */

5. Learning summary
I have been studying beef brisket videos these days, and I happened to learn about this part To learn and use CSS, let me summarize this part of knowledge. Regarding this part of the study, it is quite smooth, and it is very simple to summarize. Compared with this part of the code, it is easy to understand and it looks good to type. To sum it up, I can sum it up in one sentence: Only by practicing more can you better master this part of knowledge. It is quite simple!

Copyright statement: This article is an original article by the blogger and may not be used without the blogger's permission. Reprint.