14 Tips in CSS applications

css| Tips

CSS is the abbreviation of cascading style sheets, Chinese translation "Cascading style form", I call it "cascading style sheet", I feel this kind of casually, no other meaning. It's actually a set of styles. You may be unfamiliar with the term CSS, in fact, whether you use Internet Explorer or Netscape Navigator surf the web, almost always with CSS, the Web page without the use of CSS may not be easy to find. No matter what tool you use to make Web pages, there is an unintentional use of CSS. With good CSS can make your page more conciseness, why the same content of the page, some people do out there are dozens of KB, and the master made only more than 10 kb,css in which the role is self-evident. I put some of my experience in the use of CSS and some of the questions asked by netizens to write out, for your reference.

　　1, CSS in the Web page is generally used in the production of three ways, then specific in the use of what kind of usage?

When there are multiple pages to use the CSS, the use of the external CSS file, so that the code of the Web page is greatly reduced, modified very conveniently; CSS used only in a single Web page, using the document head method; only CSS used in one or two places in a Web page is used in inline inserts.

　　2, the three kinds of usage of CSS in a Web page to mix it?

Three uses can be mixed without causing confusion. That's why it's called "Cascading style sheets," browser in the display of the Web page is handled like this: first check that there is no inline CSS, there is the implementation of the other CSS for this sentence does not take care of it; second, check the head way of the CSS, there is , and then check the CSS for the external file way without the first two. Therefore, it can be seen that three kinds of CSS implementation priority is: inline insertion, head mode, external file mode.

　　3, in the Dreamweaver how to make the external file-style CSS?

In Dreamweaver, there is no special requirement to use the external file CSS, but also to create a *.css file with Notepad, and add a code to the

　　4. How to use Dreamweaver to quickly create CSS external linked files?

For a web designer who first touches CSS, it's difficult to create a CSS file with an editor like Notepad. Because Dreamweaver is good for CSS support, it is much easier to use it to help. This can be done:

1 First write on the paper on the Web page in the website may be used in the name of the lattice, then in the Dreamweaver edit window to pull out the CSS panel, one by one to define, and on a blank page appropriately write a little relevant content, edge definition side trial, the effect is not satisfied, immediately modify;

2 after all defined, and then use Notepad to create an empty CSS external link file, the

　　5, in the Dreamweaver to use inline insert CSS to manually write code?

No! First, use the CSS panel to define the CSS you want to use, and then insert the markup you want to insert into the CSS: style= "", then drag the CSS you just defined from behind the

　　6, in the side of the head and outside the file mode of the CSS has "<!--" and "->", as if there is no use, do not you?

This pair of Dongdong's function is to not cause the low version browser error. If a browser that executes this page does not support CSS, it ignores the contents. Although there are few people who don't support CSS browsers now, it's good to keep it because almost anything on the internet can happen.

　　7. How to add a background color to a part of text?

To add a different color to the text, in the DW3 as long as the text on the property panel to select the color on the line, very convenient, but to give some text plus different background color does not have the corresponding function, we can first do a definition of the background color of the CSS (such as: Bgstyle), in the DW3 midpoint of a few mice completed. A CSS that defines a light yellow background is like this:

<style type= "Text/css" >
<!--
. bgstyle {background: #FFFFCC}
-->
</style>

When you want to select that paragraph of text, and then click on the CSS panel "Bgstyle" on the line.

　　8, how to add some text background image?

Similar to the plus background color operation, in the background in the selection of the load image is, a well-defined background image of the CSS example code is this:

<style type= "Text/css" >
<!--
. imgbgstyle {Background-image:url (logo.gif)}
-->
</style>

When you want to select that paragraph of text, and then click on the CSS panel "Imgbgstyle" on the line.

　　9, how to make the background of the page in the text "scrolling" when the background pattern is still motionless?

The CSS that makes the background pattern "scroll" with the text is like this:

<style type= "Text/css" >
<!--
Body {background:purple URL (bg.jpg);
Background-repeat:repeat-y;
Background-attachment:fixed
}
-->
</style>

　　10, how to define word spacing?

The letter spaceing attribute on the "block" of the CSS Property Definition dialog box (style definition for. Style1) in DW3 defines the word spacing, which refers to the extra spacing between each character, which is either positive or negative in length, The effect of a character being squeezed together when a negative value is taken. The following code is a well-defined word spacing CSS example:

<style type= "Text/css" >
<!--
. style1 {LETTER-SPACING:3PX}
-->
</style>

　　11, how to underline text, underline, delete lines and flashing?

The "decoration" attribute on the "Type" of the CSS Property Definition dialog box (style definition for. Style1) in DW3 is defined by these contents, and note that some versions of the browser do not support the blinking properties and use them sparingly. Here is a CSS example that defines the above effects:

<style type= "Text/css" >
<!--
. style1 {text-decoration:underline overline line-through blink}
-->
</style>

Where: "Underline" is the definition of underline, "overline" is a defined underline, "Line-through" defines a strikethrough, and "blink" defines text flicker.

　　12, how to make the page with "first line indent" function?

Because the DW3 input space inconvenient, the use of "first line indent" will make up for this deficiency. The "Text-indent" attribute on the "block" of the CSS Property Definition dialog box (style definition for. Style1) in DW3 defines "first line indent", and "first row" refers to the first line of each paragraph, That is, pressing ENTER directly creates 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>

Note in the DW3: in the DW3 of the CSS Property Definition dialog box (style definition for. Style1) on the "block" on the right side of the indent unit in the selection box "EMS" refers to "em".

　　13, in the form of typesetting, you can make a certain direction of the content to leave the table line point?

OK! The "margin" on the "box" of the CSS Property Definition dialog box (styledefinitionfor. Style1) in DW3 defines the distance from the content's left edge, which can be defined in four directions: "Top", "bottom" "left", and "right". Here is the CSS example code that defines leaving "10px" on the Left:

<style type= "Text/css" >
<!--
. style1 {margin:0px 0px 0px 10px}
-->
</style>

14. Can you add a border to a certain part of the content?

With CSS you can add a border to a part of the content, in the DW3 CSS Property Definition dialog box (style definition for. Style1), "Border" is defined as the border line, "top" "bottom" "left" "right" Four sides you can define the thickness and color of the line, these definitions do not forget to define the line style in the "style" below, otherwise you will see the border line, because the default line style is "none". Below is a CSS example that defines the top border as: Blue thin lines, and the left border is: Green in bold line

<style type= "Text/css" >
<!--
. style1 {border:solid border-width:thin 0px 0px medium border-color: #0000FF black #00FF00}
-->
</style>