Some 14 tips for using CSS in Web-making learning

css| Skills | Web page

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; In the case of neither of the first and then check the external file mode of CSS. Therefore, it can be seen that three kinds of CSS implementation priority is: inline insertion, head mode, external file mode.

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

There is no special requirement to use Dreamweaver3 CSS in the same way, and the same is done with Notepad to create a *.css file, add a sentence between the page and the code: on the line.

　　4. How to use Dreamweaver3 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 Dreamweaver3 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 Dreamweaver3 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 the definition, and then use Notepad to create an empty CSS external link file, in and between that section of the definition of CSS copied to the CSS file, it is done. The whole process is to click the mouse, convenient?

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

No, no! First, use the CSS panel to define the CSS that you want to use, and then insert the markup that you want to insert into the CSS: style= "", then drag the CSS you just defined from behind into this double quote, and then delete the rest of the curly braces.

6, in the side of the head and outside the file mode of the CSS there are "", as if there is no use, do not you? This pair of Dongdong's function is to not cause the low version of the 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. such as a definition of light yellow

The background of the CSS 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 of the code is: when you want to select the paragraph of text, and then in the CSS panel to click on the "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.

　　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>

Wherein: "Underline" is defined as an underscore; Overline "is defined as an underscore;" Line-through "defines a strikethrough;" Blink

The text is defined as flashing.

　　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?

Yes, you can! The "margin" on the "box" of the CSS Property Definition dialog box (style definition for. Style1) in DW3 defines the distance of the content away from the edge, which can be defined in four directions: "Top" "bottom" "left" 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 definition of the CSS Properties dialog box (style definition for. Style1), "Border" definition

Is the border line, "top" "bottom" "left" "right" four edges can define the line thickness and color, these definitions are not forgotten in the following

Style, or you will see no border line, because the default line style is None. Below is a definition of the top border as: Blue Thin line; left border

As: A CSS example of a thick green Line:

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

</style>