Can you improve the maintenance and update rate of Web pages with CSS?

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

With the development of internet economy, the number of professional websites, public service websites and enterprise portals are increasing rapidly, and the information of each website is exploding. In the face of these huge amount of information, we on the Web page of each column additions and deletions, will be a very complex process. To improve the efficiency of Web page maintenance, we can use stylesheets to change only one file to change the appearance of hundreds of web pages at the same time without any loss of personalization performance. In order to be able to fully use the strength and flexibility of the style sheet, I will discuss how to use the style sheet effectively to talk about some of my experience.

1, in a Web page at the same time to call the CSS many ways to introduce

There are many ways to introduce CSS into HTML, such as direct inserts, using linked external style sheets, using CSS "@import" to import style sheets, and using "style" tags in internal elements to define style sheets. Some netizens ask whether these introduction methods can be called at the same time in a Web page, will they create confusion? In fact, we don't have to worry about that, that's why it's called Cascading style sheets, which are processed in a certain order by the browser's style sheet. First check the page for direct insert CSS, if it exists, execute it first, and the other CSS for this sentence will not take care of it; then check the "style" tag in the source code of the Web page, execute it, and then check the external style sheet of the internal style sheet and the link that executes the @import import. As a result, we can call the various introductions of CSS at the same time in a Web page.

2, the rapid creation of CSS external link file

For a web designer who first touches CSS, it's very difficult to use an editor like WordPad to create a CSS file. Because Dreamweaver is good for CSS support, it is much easier to use it to help. You can do this: first on the paper on the Web page may be used in the name of the grid, and then in the Dreamweaver edit window to pull out the CSS panel, one by one, and in a blank page appropriate to write a little relevant content, edge definition test, the effect is not satisfied, immediately modify; All defined, and then use Notepad to create an empty CSS outside the file, the 〈head〉 and 〈/head〉 between the section of the defined CSS copied to the CSS file, it is done.

3, let the background pattern still motionless

When the Web page can not be fully displayed in a screen, we tend to use the horizontal scroll bar and vertical scroll bar to browse outside the screen content, moving the scroll bar when the general image and text are moved together, then there is no way to make the background image with the text "scrolling"? With CSS, you can achieve this, We just put the following source code directly between the page and the label can be, where bg.jpg is the background image of the Web page, you can replace it with their own background image needed:

Example Source Code

〈style type= "Text/css"

〈!--

Body {background:purple URL (bg.jpg);

Background-repeat:repeat-y;

Background-attachment:fixed

}

--〉

〈/style〉

4, let the page automatically "indent First line"

Using Dreamweaver to design Web page users know that in the Dreamweaver input space is not so convenient, we can use CSS to design the "first line indent" function to make up for this shortcoming. Open the Dreamweaver design interface where you find the CSS Property Definition dialog box (Style definition for. Style1), which is set in the Text-indent property definition settings Item under the "Block" tab of the dialog box. First line Indent function, here to note that the so-called "first line" refers to the first line of content, that is, directly press ENTER to form a new paragraph. Indentation is best in the "Em" (character), such as: Chinese character choreography requires each paragraph began to indent two Chinese characters, set a good CSS as shown below:

Example Source Code

〈style type= "Text/css"

〈!--

. style1 {TEXT-INDENT:2EM}

--〉

〈/styl e〉

5, skillfully use CSS to set the background of the text

In Dreamweaver, if we need to add a different background color to the text, the operation is very simple, as long as the mouse click on the property Panel text Color button, from the pop-up color settings bar to choose the color you want. But what if we want to add a different background color to some of the text? Because the DreamWeaver3 does not have this function, but we can skillfully use CSS to achieve this goal. The specific process is, first we can do a definition of the background color of the CSS, for example, to the CSS named Bjstyle, and then select the page you need to set the color of the text, and then click on the toolbar "Bjstyle" on the line. Here's the source code for a CSS that defines a color background:

Example Source Code [

〈style type= "Text/css"

〈!--

. bjstyle {background: #cc00bb}

--〉

〈/style〉

6. Add a border to the specified content

In Dreamweaver, we can use the powerful definition of CSS to add a border to a certain part of the content, define the first open Dreamweaver design interface, in the interface to find the CSS Property Definition dialog box (Style definition for. Style1) , the "Border" setting for the dialog box is used to define the specified content border line. Where the top, the NRC, left, and right settings columns are used to define the thickness and color of the border lines around the specified content, these settings need to be set up below Style, otherwise we will not see the defined border line because the CSS default line style is "none". Below is a CSS source code that defines the top border as: blue thin lines;

Example Source Code

〈style type= "Text/css"

〈 !--

. style1 {border:solid border-width:thin 0px 0px medium border-color: #0000FF black #00FF00}

--〉

〈/style〉

7, using the style sheet to control the color of hyperlinks

If you take a closer look at the hyperlinks, you'll find that the default way for a browser to handle hyperlinks is that hyperlinks that are not currently accessed are displayed in blue and underlined text, and hyperlinks that have been visited are displayed with dark purple and dark purple underlined text. These default settings color time, may have a sense of boredom, and most likely with their own web page background color is not coordinated. Therefore, we can completely according to our own visual requirements, from the change of the hyperlink display color, so that it can reflect their own style. The following author to introduce a section to modify the hyperlink display color source code, the code is as follows:

We can add this source code to the HTML file ... , it can work on any of the hyperlinks in this Web page, in this code:

a:link {Text-decoration:none Color:blue} is a description of the hyperlink has not been accessed, it is not underlined, the color is blue.

a:visited {color:red Text-decoration:line-through} explains that when the hyperlink is accessed, its color turns red and has a strikethrough.

a:active {Color:white Text-decoration:underline} indicates that when the hyperlink is active, its color becomes white and underlined.

a:hover {text-decoration:none;color: #FF0000; Background-color:black} When the mouse moves to the hyperlink, it is not underlined, the text color turns yellow, and the background color is black.

According to the above explanation, we can change the hyperlinks in various states of the display color into their favorite kind, so as to better display their personality.

〈style type= "Text/css"

〈!--

. style1 {border:solid border-width:thin 0px 0px medium border-color: #0000FF black #00FF00}

--〉

〈/style〉