CSS Advanced Topics

1. Style Priority

1. More specific selectors have higher priority
2. When priorities are equal, later rules override earlier ones
3. When using @import for cascading imports, earlier imports have lower priority (commonly used for implementing user custom styles, e.g., CMS templates that allow users to customize some styles, which need the highest priority)
4. Inline styles > # (ID selector) > ./: (class selector/pseudo-class selector) > tag/:: (tag selector/pseudo-element selector)
5. Styles with !important declaration have the highest priority (supported in IE7+)

2. How to Support Mobile Browsers

1. SSR (Small Screen Rendering): A browser feature where browsers automatically optimize page display

Disadvantages: Users need a specific browser (e.g., Opera) to see the effect, and re-rendering reduces access speed

Advantages: Page designers don't need to make any changes at all

2. Reformat (Programmatic Reformatting): Using server-side technology to simplify pages, generating a "light" page for mobile users

Disadvantages: Access speed decreases, and the server cannot perfectly control page content

Advantages: Access speed is higher than SSR, and page designers only need to make minor changes (create a universal Reformat method for reformatting and apply it to all pages)

3. Stylesheets "Portable" Stylesheets: Using media queries to create responsive layouts

Disadvantages: Requires maintaining multiple stylesheets, and cannot control page content

Advantages: Fast access speed, and the workload is not too large

4. Mobile Specific Site (Creating a Mobile Version Site): Creating a dedicated mobile version for the site

Disadvantages: Time-consuming and laborious, large workload

Advantages: Fastest access speed, and can freely control page content and styles

3. Methods to Eliminate Box Collapse

1. Declare a fixed height

Disadvantages: Not scalable, cannot adapt to content

2. Float all elements

Disadvantages: Poor readability, not easy to maintain

3. Add an empty block element at the bottom of the box, and apply clear: both; style to that element

Disadvantages: Introduces redundant elements

4. Clear floats using the :after pseudo-element

5. overflow: auto; width: 100%;

Disadvantages: Cannot apply borders and margins, otherwise horizontal scrollbars will appear

4. The Role of Negative Margins (margin: -100px;)

Mainly used to resolve conflicts between layout order and document source order. For example, when the navigation bar appears after the content bar in HTML, but we want the navigation bar to display on the left side of the content bar instead of the right, setting a negative margin on the navigation bar will work. However, because negative margins are difficult to understand, detailed comments should be added when they must be used.

5. CSS Image Preloading

Use the background-image property of empty span tags to carry images, avoiding delays from real-time loading

6. Common Logo Replacement Methods

Generally, logos are images, but search engine crawlers cannot recognize the semantics of logos. For SEO purposes, we should display the logo and text description together, such as <h1 style="background-image:url(...)">SiteName</h1>. However, text will appear on top of the logo at this point. There are two solutions:

1. Apply padding-top: 100px; style to h1, where 100px is the height of the image. This approach is more semantically designed

2. Apply text-indent: -9999em; style to h1. This is a simpler approach, but doesn't conform to semantic design

7. Differences Between Importing Styles with link vs. style+ @import

The former has better compatibility and support, such as being able to provide filtering conditions like media="screen"

8. Style Debugging Steps

1. Validate tags and styles

Check if there are unclosed tags, and whether style names in HTML and CSS are consistent

2. Disable styles

Check if inherited styles caused errors, if more specific rules masked important rules, and which style rules are ineffective

3. Disable hacks

Check if hacks are working properly, or if there are problems in the hack code

4. Extract minimal test blocks (try to precisely locate errors)

The entire page is not convenient for debugging; try to extract minimal test blocks for individual debugging

Special note: When troubleshooting CSS errors, it's best to modify backup style files rather than commenting out existing styles, because this approach is more "safe"

9. Font Related

1. Font Classifications (General Font Families)

1. Serif (font-family:serif;)

Characteristics: Proportional width fonts with decorations. Proportional means letter widths are inconsistent; M is widest, i is narrowest. Decorations refer to small ornaments at the start and end of strokes, improving readability. Includes Times New Roman, Georgia, Garamond, etc.

Usage: Typically used in lengthy body text or long paragraphs and for print fonts; not commonly used for headings and subheadings

2. Sans Serif (font-family:sans-serif)

Characteristics: Proportional width but without decorations. Includes Helvetica, Verdana, Arial, Univers, etc.

Usage: Mostly used for headings and subheadings

3. Monospace (font-family:monospace;)

Characteristics: Fixed-width fonts, may have decorations. Fixed-width means each letter has the same width. Includes Courier, Monaco, etc.

Usage: Mainly used for instructional text, such as code

4. Cursive (font-family:cursive;)

Characteristics: Handwritten (or script) fonts. Includes Comic Sans, Zapf Chancery, Zapfino, etc.

Usage: Readability is not as good as the first two; generally not used to display body text

5. Fantasy (font-family:fantasy;)

Characteristics: Primarily decorative fonts. Includes Desdemona, Playbill, Herculanum, etc.

Usage: These fonts are rarely used on the web; generally used for designing logo images

2. About font-family Property Values

If a font name contains spaces or other ambiguous characters, it needs to be wrapped in quotes (single or double quotes both work). There can also be multiple alternative fonts, with font names separated by commas.

3. About font-weight

Try to use only bold and normal, and avoid using numerical values from 100-900, because some fonts may not have 9 levels of font-weight (you cannot guarantee that users will see the font you set; many browsers support users using custom fonts)

4. About font-size

Try to use em or percentages as much as possible, and you can use the 62.5% hack, i.e., add font-size:62.5%; style to body. Since most browsers default to 1em=16px, after 62.5%, 1em=10px, making calculations easier

The reason not to directly use px for font-size is that IE6 doesn't allow users to resize fonts that have font-size specified in px

10. CSS Common Knowledge

1. Put all stylesheet files in the same folder, e.g., style/css

2. Merge stylesheet files. Use @import or merge directly

3. Class and ID names should stick to one convention (or follow team agreements). For example: class_name, className, class-name, etc.

4. Application of single-line format vs. multi-line format: Use multi-line format for editing versions for easier debugging; use single-line compressed format for release versions for faster loading

5. CSS property ordering should follow certain rules. To avoid repetition, arrange alphabetically or by other rules

6. Use CSS abbreviations appropriately, such as border: 1px solid red; etc. Grasp the appropriate "degree" to avoid overly complex syntax that's difficult to understand

7. Use comments to group styles. One good format: /*=group */; find the equals sign to locate all categories (because equals signs cannot appear in CSS rules)

8. Add metadata comments. Facilitates modification and management, such as adding author, date, and other descriptions at the beginning of stylesheet files

9. Can use comments at the beginning of files to declare repeatedly used color values, fonts, and other property values in styles

10. CSS rules in stylesheet files should have a specific order. For example, from general to specific, according to element position order in the page, or according to content sections. However, note that the second method may cause problems (rules may be inherited/overridden)

11. Use reset.css/initial.css to reset styles. To eliminate differences between default browser styles

12. Can build style libraries or even implement your own CSS framework. To improve reusability

13. Custom list item symbols should use li's background. Not list-style-image, because in IE6, list-style-image is not vertically aligned with li content. Using background images provides greater flexibility and better browser compatibility

14. Statements for importing print stylesheets should come after any style import/declaration sections in the head. If print styles are declared first, styles without media attributes declared afterward may be ignored

Reference Materials:

"Pro CSS Techniques" (Chinese translation: "CSS 实战精粹"), the translation isn't particularly good, but since it was published around 2008, it provides good guidance for IE6- compatibility debugging.