Eight techniques for efficient use of CSS style sheets

css| Skills | style sheet

With the development of the Internet economy, the number of professional websites, public service websites and enterprise portals are increasing rapidly, and the information of each website is also in an explosive growth trend. 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 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, the rapid creation of CSS external link file

For a web designer who first touches CSS, it's very difficult to use an editor such as WordPad to create a CSS external link file. 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, let the background pattern still not move

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"? The use of CSS can achieve such a goal, we just put the following source code directly on the page and between the label on it, where bg.jpg is the background image of the Web page, you can replace it with their own needs of the background image:

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

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

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

〈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 page, and 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} describes the mouse moved to the hyperlink, it does not underline, the text color turned yellow, 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 that they can better display their personality.

　　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 operation for the specified text, except for selecting the background color instead of selecting the background image to load. The specific operation of the process is, first we can do a definition of the background color of the CSS, for example, to name the CSS Txstyle, and then select the page you need to set the color of the text, and then click on the toolbar "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):

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