14 Examples of application of CSS style sheet in web design

css|web| Skills | design | style sheet CSS is the abbreviation of cascading style sheets, Chinese translation "Cascading style form", I call it "cascading style sheet", I feel this is a little bit more interesting. 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 more than one page to use the CSS, the use of external CSS file way, so that the code of the page is greatly reduced, very convenient to modify; only on a single page
Use the CSS, the document head way, only in a Web page one, two places to use the CSS, using inline insertion mode.

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," where browsers display Web pages
Rationale: 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 CSS, there is
, and then check out the CSS in the way of the external file without the first two. So you can see that the execution priority of three kinds of CSS is: inline insert, head side
-style, external file mode.

3, in the Dreamweaver3 how to make the external file-style CSS?
There is no special requirement for using external file CSS in Dreamweaver3, as well as creating a *.css file with Notepad in the Web page with
Add a sentence like this to 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, and it's much easier to use it to help. This can be done:
1 first on the paper on the Web page may be used in the name of the grid, and then in the Dreamweaver3 edit window to pull up the CSS panel, one by one
Righteousness, and in a blank page appropriate to write a little related 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, the section between the and the definition of a good CSS replication
To the CSS file, you're done. The whole process is to click the mouse, convenient?

5, in the Dreamweaver3 to use inline insert CSS to manually write code?
No! First use the CSS panel to define the CSS that you want to use, and then, in the markup to insert the CSS: style= "", and then put the CSS you just defined from
Drag it back into this double quote, and delete the rest of the curly braces.

6, in the side of the head and outside the file mode of the CSS has "", 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 inner
Capacity. 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?
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 a different background color
But there is no 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:

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:

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:


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
Is the spacing between words, which refers to the extra spacing between each character, which, by length, is positive or negative, resulting in a character squeezing together when a negative value is taken. Under
The face code is a well-defined word spacing CSS example:


11, how to underline text, underline, delete lines and flashing?
These are defined by the "Decoration" property on the "Type" of the CSS Property Definition dialog box (style definition for. style1) in DW3.
Content, to note that the flashing properties of some versions of the browser does not support, less to use as well. Here is a CSS example that defines the above effects:

Where: "Underline" is the definition of underline, "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 CSS Property Definition dialog box in DW3 (style definition
For. Style1), the "text-indent" attribute on "block" defines "first line indent", and "first line" refers to the first line of each paragraph, and
is to press enter directly to form a new paragraph. Indents are best measured in ' em ' (character), such as: Chinese character choreography requires that each paragraph begin to indent two Han
Words, set the good CSS as shown below:

Note in DW3: the "text-indent" right in the "block" of the CSS Property Definition dialog box (style definition for. style1) in DW3.
The "EMS" in the Indent Unit selection box of the face 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 definition of "margin" on the "box" of the CSS Property Definition dialog box (style definition for. Style1) in DW3 is that the content is left
Open the edge of the distance, can be defined in four directions: "Top" "Bottom" "Leave" "right." The following is a CSS example that defines leaving "10px" on the Left
Child code:


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: