CSS style sheet Efficient use of skills to take advantage of the power of style sheets

To improve the efficiency of Web page maintenance, we can use stylesheets to change only one file to change the appearance of hundreds of pages at a time. In order to be able to fully use the strength and flexibility of the style sheet, how to use the style sheet effectively, to talk about their own experience

With the development of the Internet economy, the number of professional websites, public service websites and enterprise portals in the Internet is 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, multiple ways to invoke CSS at the same time in a Web page

introduces CSS in HTML, such as direct inserts, using a linked external style sheet, using CSS "@import" Import style sheets and use the "style" tag in internal elements to define style sheets, and so on. Some netizens ask whether these introduction methods can be called at the same time in a Web page, will they create confusion between them? In fact, we don't have to worry so much, that's why it's called Cascading style sheets, the browser in the processing page of the style sheet is processed in a certain order, first check the page is directly inserted CSS, if the existence of the first to execute it, 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 in turn. As a result, we can call the various introductions of CSS at the same time in a Web page.

2, Quick Create CSS outer-link file

for a web designer who first touches CSS, it's very difficult to create a CSS file with an editor like WordPad. Because Dreamweaver is good for CSS support, it is much easier to use it to help. This can be done: 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 bit of relevant content, edge definition test, the effect is not satisfied, immediately modify All defined, 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, keep the background pattern stationary

When Web pages are not displayed in a single screen, we tend to use waterFlat and vertical scroll bar to browse outside the screen, moving the scroll bar when the general image and text are moved together, then we have no way to make the background image with the text "rolling" it? The use of CSS can achieve such a goal, we just put the following source code directly in the Web page and between the label on it, where bg.jpg is the background image of the Web page, you can replace it with the background image you need:

Copy Code code as follows:


〈style type= "Text/css" 〉


〈!--


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


background-repeat:repeat-y;


background-attachment:fixed


}


--〉


〈/style〉

4, let the Web page automatically to "indent the first line"

With Dreamweaver to design the 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 can 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:

Copy Code code as follows:


〈style type= "Text/css" 〉


〈!--


. Style1 {TEXT-INDENT:2EM}


--〉


〈/style〉

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 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:

Copy Code code as follows:


〈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 bottom, 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 the Style, otherwise we will not see the defined border line, because the CSS default line style is "none". The following is a CSS source code that defines the top border as: Blue thin lines, and the left border: Green in bold:

Copy Code code as follows:


〈style type= "Text/css" 〉


〈!--


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


--〉


〈/style〉

7, using style sheets to control the color of hyperlinks

If you look at the hyperlinks, you'll find that the default way the browser handles hyperlinks is, Hyperlinks that have not yet been accessed are displayed in blue and underlined text, and hyperlinks that have been visited are displayed in dark purple and with a dark purple underline. 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 hyperlink in this page:

a:link {text-decoration:none Color:blue} is a description that the hyperlink has not been accessed, it is not underlined, and the color is blue. The

a:visited {color:red Text-decoration:line-through} describes the hyperlink being accessed, and its color turns red, with 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} indicates that when the mouse moves to the hyperlink, it does not underline, the text color turns yellow, The background color is black.

Based on the explanation above, we can modify the display color of hyperlinks in various states to their liking, so that they can better show their individuality.

8, add background image to selected text

in Dreamweaver, we can also add a background image to the specified text, which is similar to the background color for the specified text. Just choose the background color instead of the background image you choose to load. The specific procedure is, first we can do a definition of the background color of the CSS, for example, to the CSS named Txstyle, and then select the page you need to set the color of the text, and then in the toolBar, click "Txstyle" on the line. Here is the source code for the CSS that defines the background image (where test.gif is the background image that is loaded):

Copy Code code as follows:

〈style type= "Text/css"
〈!--
. txbgstyle {Background-image:url (test.gif)}
--〉
〈/style〉

Note : For more wonderful tutorials, please pay attention to the triple web Design Tutorial section,