Generally speaking, a style sheet is a collection of formatting rules that control the appearance of web content. CSS can be used in your pages in three different ways:
Inline: A one-time style written into the code.
Embedded: A style sheet that controls all elements on a page
External: A style sheet that controls elements on many pages
In fact, many sites use a combination of these three methods as needed.
An important thing to consider when working with CSS is the fact that different browsers and different versions of the same browser parse CSS in different ways. In addition to the differences in web browsers, you also need to realize that there are many other browsers, such as hearing browsers, TV-based browsers, and handheld devices such as the Palm Pilot and TTY (teletypewriter, remote typewriter).
What are best practices?
Most technologies have their own agreed-upon standards. CSS is no exception. While not all CSS that exists on the web is standardized, it is helpful to use CSS according to existing standards. In general, developers should separate content from reporting as much as possible. The advantages of doing this are:
1. Increase the life of the site
Non-standard style sheets may be convenient at the time, but when new versions of browsers come out, compatibility issues are likely to arise. At that time, modifying the site page by page will be a very time-consuming task and it will also make the use of CSS meaningless.
2. Make your site accessible to all users and browsers.
Some local governments have legislated that websites must be accessible to people with disabilities. Browsing devices designed for disability awareness, such as hearing browsers, have extremely strict CSS normative requirements.
3. Make site updates and maintenance easier.
Used correctly, CSS allows adjustments you make on one page to be quickly applied to all pages.
The first choice you have to make is which style sheet to use. When it comes to best practices, here's an analysis of the different style sheets:
Inline CSS; simply put, you should try to avoid using it. Among other disadvantages, using inline CSS means that you don't take advantage of the real advantage of CSS, which is that you don't separate content from formatting. DW uses Inline CSS mainly to position page elements (these elements are called "layers" in DW's user interface), or to use a certain DHTML effect, which requires using Inline style Javascript to change the properties of an object. .
Embedded CSS: It’s also less than ideal because it only affects the current page. During the update process, if a page is lost, the style of the site will be inconsistent; in addition, when users browse your site, style sheet information must be downloaded for each page.
External CSS: This is your first choice. External CSS allows all pages connected to it to maintain a consistent appearance and style; outline it, change it once, and easily update all related pages; make your page smaller and browse faster. Other best practices are discussed below when analyzing specific CSS features.
Create CSS stylesheet in DW
When creating a CSS style sheet in DW (Text 》CSS Style 》New style sheet), in the pop-up dialog box, you have two options: New Style Sheet File and Only for the current page (This Document Only). Select "New Style Sheet File" and you begin the process of creating External CSS. This option requires you to name the style sheet and select a save location for it before the actual creation process; the other option, This Document Only, will write the relevant code directly to the page.
You can also select an existing style sheet to edit or add new definitions in the New Style dialog box.
Should it be connected to External CSS or imported?
After creating the external style sheet, you need to attach it to each page (or template). To do this, click the "Attach Style Sheet" button on the CSS panel. The Link External Style Sheet dialog box will pop up, where you can browse to your target style sheet. After finding the name, you can choose to link or import this external style sheet.
Connection is the most commonly used method. Select "link" to connect the style sheet to the page. It will add the following markup to your page:
The connection option is supported by all browsers that support CSS. If you want some older browsers (such as Netscape 4.x) to "see" this style sheet, you need to use the following method.
If you select the "Import" option, the tags used are:
NetSscape4 will completely ignore the imported CSS and interpret the page according to the connected CSS. In this way, we can use the new features in CSS without worrying about browser compatibility issues.
CSS Property Inspector
You can easily switch to CSS mode in DW's property inspector. By default, the Property Inspector displays font tags in raw HTML mode. Click the little "A" next to the Fonts drop-down menu and you'll see the currently available CSS stylesheets instead of a list of font tags. At the same time, you can easily switch back to HTML mode.
Ready-made CSS style sheets
One of the exciting CSS features in DW is that it includes ready-made CSS style sheets. New users of CSS can try it out first. Select File > New, select CSS style sheets in the pop-up new document dialog box, and a list of all available CSS will appear in the box on the right. To practice what we call best practices, choose one marked "Accessible."
Save the document in the site folder, and then append the CSS to your document using the method described above.
Design Time style sheets
This feature of DW allows you to apply style sheets to pages when working in design view, giving you a more intuitive understanding of the appearance of the site. Design time stylesheets will not appear within the site. This feature is very useful from the perspective of our best practices. If you use both import and join methods (as described above), attaching a design-time stylesheet allows you to develop the site using either one. You can easily change to another style sheet when you want to see how the page will look under another style sheet.
Design-time stylesheets are also useful for developers who want to apply CSS on the server side (such as ASP, PHP, or ColdFusion) or on the client side through Javascript. Server-side style sheets are also another way to deal with poor CSS support in client browsers. But in previous versions of DW, this method did not allow you to view the actual effect of CSS during the design stage. Design-time stylesheets let you view stylesheet effects in real time, so you can work with a visual interface in DW. Another benefit is that when you upload site files, you no longer have to go through the entire site looking for redundant stylesheets.
verify
Whether you create your own style sheet or edit an existing one, validation ensures you don't misuse nonstandard tags or incorrect code. DW itself does not include a CSS validator, you can use the validation service provided by the W3C site.
Within DW you can validate HTML or DHTML tags (File > Check Page > Validate Markup (for HTML) or File > Check Page > Validate as XML for XHTML.). DW provides many auxiliary tools when developing CSS-based sites. With the help of MW MX, coupled with a good understanding of CSS, you can develop a site that will stand the test of time.