Efficient use of CSS style sheets

With the continuous development of the Internet economy, the number of professional websites, public service websites, and enterprise portals on the Internet is growing rapidly, and the amount of information on each website is also increasing explosively. In the face of this huge amount of information, it is a complicated process to add or delete each column on the webpage. To improve the maintenance and update efficiency of webpages, we can use a style sheet to change the appearance of hundreds of webpages at the same time by changing only one file, however, its personalized performance has not suffered any loss. In order to make full use of the power and flexibility of the style sheet, I will talk about some of my experiences on how to use the style sheet effectively.

1, Simultaneously calling CSS in a webpageMultiple import methods

There are many ways to introduce CSS in HTML, such as direct plug-in, using the link external style sheet, use CSS "@ import" to import a style sheet and use the "style" mark in internal elements to define a style sheet. Some netizens asked if these methods can be called on a web page at the same time. Will there be confusion between them? In fact, we don't have to worry so much. That's why it is called "stacked Style Sheets". Browsers process style sheets on webpages in a certain order, first, check whether there is directly inserted CSS in the page. If there is, execute it first, and ignore other CSS statements in this sentence. Then, check the webpage.Source codeIn the "style" label, run the command. Then, check the internal style table imported by "@ import" and the external style table linked. Therefore, we can call multiple CSS import methods on a web page at the same time.

2Quickly create CSSExternal connected File

It is quite difficult for a web designer who first came into contact with CSS to create an external CSS file using an editor such as a wordpad. Because Dreamweaver supports CSS well, it is much easier to use it for help. You can perform the following operations: First, write the names of cells that may be used in the website's webpage on paper, and then bring up the CSS panel in the Dreamweaver editing window to define them one by one, write a bit of relevant content on a blank page, and try it while defining it. If the effect is unsatisfactory, modify it immediately. After all the content is defined, use NotePad to create an empty CSS external connection file, copy the defined CSS between head and head to the CSS file.

3Make the background pattern Motionless

When a webpage cannot be displayed on a single screen, we often use the horizontal and vertical scroll bars to browse the content outside the screen. When moving the scroll bar, the image and text are generally moved together, is there any way to make the background image "scroll" with the text? CSS can be used to achieve this purpose. We only needCodeDirectly put on the webpage and the label. bg.jpg is the background image in the webpage. You can change it to the background image you need:

<Style type = "text/CSS"> "〉
<〈! --
Body {Background: Purple url(bg.jpg );
Background-repeat: Repeat-y;
Background-Attachment: fixed
}
--> --〉
</Style> 〉

4Allows the web page to automatically indent the first line"

Users who use Dreamweaver to design webpages know that it is not so convenient to enter spaces in Dreamweaver. We can use CSS to design the "first line indent" function to make up for this defect. Open the Dreamweaver design interface and find the CSS attribute definition dialog box (style definition. style1), set the "first line indent" function in the "text-indent" attribute definition setting item under the "Block" tab of the dialog box, the so-called "first line" refers to the first line of each paragraph, that is, directly press the Enter key to form a new paragraph. It is recommended that the indentation be "em" (character). For example, the Chinese character orchestration requires that two Chinese characters be indented at the beginning of each segment. The configured CSS is as follows:

<Style type = "text/CSS"> "〉
<〈! --
. Style1 {text-indent: 2em}
--> --〉
</Style> 〉

5Use CSSTo set the text background

In Dreamweaver, if we need to add different background colors to the text, the operation is very simple. Just click the text color button on the property panel with the mouse, select the desired color from the pop-up color settings bar. But if we want to add different background colors to some texts, what should we do? Dreamweaver3 does not have this function, but we can use CSS to achieve this purpose. The specific procedure is: first, we can first define the CSS of the background color, for example, name this CSS as bjstyle, and then select the text to set the color in the webpage, click "bjstyle" in the toolbar. The following is the source code of CSS that defines the color background:

<Style type = "text/CSS"> "〉
<〈! --
. Bjstyle {Background: # cc00bb}
--> --〉
</Style> 〉

6Add a border to the specified content

In Dreamweaver, we can use the powerful CSS definition function to add borders to a part of the content. when defining the content, we first open the Dreamweaver design interface, on this page, find the CSS attribute definition dialog box (style definition. style1). The "border" setting item in this dialog box is used to define the border line of the specified content, the "TOP", "bottom", "Left", and "right" columns are used to define the width and color of the border lines around the specified content, respectively, after setting these settings, You need to define the line type in the following "style". Otherwise, we will not see the border line defined, because the default CSS line type is "NONE ". The following is a CSS source code that defines the upper border as: Blue fine line; the left border as: Green thick line:

<Style type = "text/CSS"> "〉
<〈! --
. Style1 {border: solid; border-width: thin 0px 0px medium; border-color: # 0000ff black #00ff00}
--> --〉
</Style> 〉

7, Use a style sheet to control the hyperlink color

If you study the hyperlink carefully, you will find that the default way for the browser to process the hyperlink is, hyperlinks that have not been accessed are displayed in blue and underlined text, A hyperlink that has been accessed is displayed in a dark purple text with a dark purple underline. These default settings may be time-consuming, and may be out of coordination with the background color of your webpage. Therefore, we can freely change the hyperlink display color according to our own visual requirements, so that it can better reflect our own style. Next I will introduce the source code for modifying the hyperlink display color. The Code is as follows:

We can add this source code to the HTML file ...... It can take effect for any hyperlink on this page. In this Code:

A: link {text-Decoration: none; color: Blue} indicates that the hyperlink has not been accessed. It has no underline and the color is blue.

A: visited {color: red; text-Decoration: Line-through} indicates that after a hyperlink is accessed, its color turns red and has a strikethrough line.

A: active {color: White; text-Decoration: underline} indicates that when a hyperlink is active, the color of the hyperlink becomes white and underlined.

A: hover {text-Decoration: none; color: # ff0000; Background-color: Black} indicates that after the mouse is moved to the hyperlink, it has no underline and the text color turns yellow, the background color is black.

According to the above explanation, we can change the display color of hyperlink in various States to the one we like, so as to better display our own personality.

8Add a background image to the selected text

In Dreamweaver, we can also add a background image to a specified text. The operation process is similar to adding a background color to the specified text, except that the selected background color is replaced with the selected loaded background image. The specific operation process is: first, we can first define the CSS of the background color, for example, name this CSS as txstyle, and then select the text to set the color in the webpage, click "txstyle" in the toolbar. Next, define the csss' source code (test.gif is the loaded background image ):

<Style type = "text/CSS"> "〉
<〈! --
. Txbgstyle {background-image: url(test.gif )}
--> --〉
</Style> 〉