CSS is the current mainstream form of web page layout, and it is also the core content introduced to you by 52CSS.com. Since CSS is widely used on almost all websites, let’s take some time to create a style sheet and ensure that it meets good standards. The following tips will greatly help CSS beginners during the development process. You can learn about the ten skills that DivCSS beginners should know and their understanding of Web standards.
1. Index The definitions here will help you and other developers understand websites and CSS files. They will also help you understand what is in CSS files. The index section contains a formatted CSS comment paragraph.
1. Give the author information of the CSS file 2. Define the design of the website (number of columns, static/dynamic) [columns, static/liquid]
3. Continuously track file versions (very useful when the file has multiple authors or needs to be upgraded in the future)
2. Anchor point Anchors are like bookmarks within the same CSS file. Anchors allow you to view the entire CSS file clearly and keep it organized.
Anchors need to be defined at the CSS's index (mentioned above), and since CSS doesn't have its own anchor system, I used a simple trick to define the anchors in the document.
The method is to use a relatively rare character to define the comment. When you want to find an anchor point, you can copy and search the anchor point's definer from the index and find the anchor point.
3. Redefinition Redefinition is a method used to override the default tag styles of HTML and redefine them. Have you ever seen CSS code like this, it just wants to style that specific element!
A very beautiful usage in CSS is contextual selectors, let's use it:
4. Naming rules A key factor is giving elements precise and clean names. This will avoid confusion and make it easier and faster to read your CSS.
5. Abbreviation The abbreviation feature in CSS is a property that allows you to combine many properties of the same type into one.
CSS abbreviations make the development process easier and keep your CSS files clean, short, and readable. Here are a few examples:
6. Sprites Translating it into elf doesn't seem to deepen the perceptual understanding of the article. On the contrary, when I actually read it in English, I didn't understand it, so I simply didn't translate it. Combining all background images into one and using background positioning to display different parts is what we call CSS Sprites.
CSS Sprites can reduce the number of HTTP requests, save bandwidth, and make reading faster. At the same time, it can also avoid image instability (for example, when the mouse passes over one picture, the effect of another picture can be displayed, and the latter picture will wait for half a day on a slow Internet connection to appear).
The best and most popular example of CSS Sprites is the menu system on Apple’s website:
7. Clarification Selector explicitation is the process of prioritizing which one to use when several rules can be used for the same element.
Simply put, every CSS selector has a weight. The sum of all weights of a selector determines its properties in the document. Explicitness can be a big help when the CSS document is so large that you don't know which element has greater weight.
Well, clarity is such a large area in CSS that it’s hard to explain in just a few sentences. Let’s look at an example:
8. Attribute reset Global property resets ensure that a website appears almost identically in all browsers. In each case, different browsers use their own set of default style settings for all websites, which will cause our website to appear differently in different browsers. A global property reset will correct this situation and allow you to build your site from an absolutely consistent base.
I don't always recommend using CSS frameworks, but you still need to use CSS reset. There are many different reset methods out there, ranging from simple to complex.
9. CSS Hacks Even if it is a perfect CSS, it cannot produce exactly the same display in all browsers. Each browser has a different way of interpreting CSS. All in all, if you need your website to be consistent across all browsers, you have to use CSS Hacks.
Using CSS Hacks will reduce errors when validating CSS, I agree. An alternative way to achieve this is to use a single different CSS file for each browser and tell the browser which specific CSS should be used by including browser-specific tags in the HTML. I always create a "fuck-ie.css" in all my projects :) (Translator's note: The author here uses swear words to express his anger towards IE. If translated as "mating with IE.css", the world will Wouldn’t it be more harmonious?)
After using this method, your "main CSS file" will be verified. At the same time, the "fuck-ie.css" file will also be verified, but it will only overwrite the "main CSS file" in IE browser.
10. Verification It's always important to validate your CSS when you create it. This will ensure that your CSS is error-free and can be interpreted correctly by all browsers.
W3C Validator is a very popular online CSS validation tool.
