Application of Beautiful Style Sheets in XHTML+CSS Web Page Creation
|
This is an article written a long time ago. Now it seems that the ideas in it are worth learning. While studying the cases at jb51.net, you might as well learn some theoretical knowledge, which will be very helpful for your breakthrough in knowledge. Come on everyone! Since I read Mr. Zeldman’s masterpiece “Designing with Web Standards”, the Chinese version of which is “Website Refactoring” (2nd edition), I was deeply impressed and strengthened my idea of using web standards to develop and implement our projects. But just knowing what web standards are and how to apply them to actual projects is far from enough. You must learn and apply each component of the web standards one by one, and break them down one by one, only then can you discover their essence! For web developers and designers like me, if we understand this principle and conduct targeted learning and practice, I believe we will gain more and make a contribution to the application of web standards in China! (Haha, this may sound a bit boastful, but it is indeed the ideal of most of us software practitioners.) Now is the era of web2.0 and even 3.0, the era of XHTML, XML, CSS, ECMAScript and DOM. While they are not the final technology, they combine to form a solution - the foundation for our plan to build a backwards-compatible website, and the necessary technical foundation for making a website that conforms to web standards. We not only hope to gain more user support and visits, but also build long-lasting, beautiful websites to attract their attention for a long time. I believe that learning to use CSS to improve our website is a good way to attract their attention and is also a fashionable development trend in the web2.0 era. Below I will only talk about the experience I gained from CSS technology. If you want to become a CSS expert, it is far from enough to just be proficient in using CSS selectors. It also depends on the overall planning of the work, the mastery of the workflow, and improving the maintainability and efficiency of the style sheet. CSS can be used to create the wonderful website we want, and writing CSS itself is a pleasure. So how can we create more attractive stylesheets? What characteristics should your style sheet have? Through study and combining my own work experience, I have summarized a good method for making exquisite style sheets. 1. Don’t overload your CSS with markup Linking or importing a stylesheet may sound like a daunting task. I have seen many website developers have neat and well-organized CSS documents, but slowly, because they may not be able to update them quickly in the short term, or they are too lazy to manage them, the previously created exquisite style sheets become garbage. If we work on a large website that needs to publish hundreds of pieces of content. Because time is limited, you need to nest or arrange CSS to make quick modifications or updates. Over time, this habit continues until one day you are told that the site is going to be completely redesigned (but the content remains the same) and you only have one week to create it (including testing). Generally speaking, updating a style sheet is a pretty simple approach, unless you make changes to scattered areas of your site over a long period of time and you don’t have an overall grasp of the site’s style sheet structure. Linking or importing your stylesheet is not a haphazard affair. Create a clean style sheet and stick to it, and you’ll be happier at work. Note: If you try to create a new stylesheet every time you update or add new content, you are definitely asking for trouble. Too many linked and imported style sheets can make it difficult to eliminate bugs and make the style sheets difficult to maintain. It is understandable that larger websites create separate style sheets for different parts. Just be careful not to go to extremes. Adding a lot of style sheets will increase more http requests and may affect subsequent work. 2. Semantic definitions are clear and easy to understand In addition to choosing the most appropriate and meaningful element to express the content, you must also be sure to select the class and id attribute values. Clear definitions make maintenance easier and everyone in the team will understand them. Look at this definition: .l10k { color: #369; } , .left-blue { color: #369; } , if I made it, I might know what it means, but others may not understand it. Even if we know its meaning today, can we guarantee that we will still know its meaning many years later? It is best not to add color or length and width dimensions to the class attributes. A more appropriate naming convention is: .work-description { color: #369; } 3. Know when to add conditional comments and apply techniques Many articles have been written about some troubleshooting techniques, and conditional comments are a good way to control IE releases. I agree that conditional comments are much better than writing them all over your CSS, but I've recently come to realize that there's a lot of evidence that this isn't the best solution. You want to set a minimum height on an element, but IE6 doesn't enforce it, so you know that any height you can use will be treated the same way. Rebuild a style sheet and add conditional comments to your markup so that all you need to do is follow this rule? Wouldn't it be better to keep the minimum height and height rules together, choosing a trick and keeping them in the same CSS document? In this case, I think it would be difficult to use this approach. 4. Apply CSS to web pages and try to use external style sheets Are there any benefits? Everyone is quite clear about this, and of course one thing is undeniable, which is that it can maximize code reuse and optimize the configuration of website files. Well, the above are some of my personal opinions. I hope that my friends can give me more suggestions. Your suggestions are my motivation to challenge difficulties! Thanks! |
<<: Vue encapsulation component upload picture component
>>: MySQL 5.7 cluster configuration steps
Recommend
Restart the Docker service to apply the automatic start and stop command (recommended)
Let's take a look at the command to restart t...
Example code for implementing a three-column layout with CSS, where the middle column is adaptive and changes width with text size
The questions encountered in Baidu interviews nee...
How to check the version of Kali Linux system
1. Check the kali linux system version Command: c...
mysql creates root users and ordinary users and modify and delete functions
Method 1: Use the SET PASSWORD command mysql -u r...
MySQL commonly used SQL and commands from entry to deleting database and running away
Table of contents Start and stop Database related...
Detailed explanation of MySQL remote connection permission
1. Log in to MySQL database mysql -u root -p View...
Key issues and solutions for web page access speed
<br /> The website access speed can directly...
Introduction to the usage of common XHTML tags
There are many tags in XHTML, but only a few are ...
Implementation of textarea adaptive height solution in Vue
Table of contents Hidden Problems Solution to ada...
Three ways to avoid duplicate insertion of data in MySql
Preface In the case of primary key conflict or un...
Detailed explanation of MySql 5.7.17 free installation configuration tutorial
1. Download the mysql-5.7.17-winx64.zip installat...
How to strike a balance between ease of use and security in the login interface
Whether you are a web designer or a UI designer, ...
Detailed explanation of the solution to the problem of automatic disconnection of xshell remote connection
Solution to the problem of automatic disconnectio...
The actual process of encapsulating axios in the project
Table of contents Preface Benefits of axios encap...
Summary of Vue's common APIs and advanced APIs
Table of contents nextTick Mixins $forceUpdate se...