Several practical methods of CSS

Source: Internet
Author: User
Tags blank page

Css
What is a style sheet

CSS is the abbreviation for cascading Style Sheet. "Cascading style forms." is a markup language for (enhanced) control of page styles and allows the separation of style information from Web page content.
You may be unfamiliar with the term CSS, in fact, whether you use Internet Explorer or
Netscape Navigator Surf the web, almost anytime with CSS, the Web page has not used CSS may not be easy to find. No matter what job you use,
Software to create a Web page, are intentionally or unintentionally using CSS. With good CSS can make your page more conciseness, why the same content of the page, some people do out there
Dozens of KB, and the master to make only more than 10 kb,css in which the role is self-evident. I have some small experience in using CSS and a letter from some netizens
Ask questions to be sorted 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 which 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, CSS Three of the use of a Web page to be mixed.
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 to use the Dreamweaver3 css in the *.css, and the same is to create a file with Notepad, in the
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 definitions, and then use Notepad to create an empty CSS external file, the To the CSS file, you're done. The whole process is to click the mouse, convenient bar.

5, in the Dreamweaver3 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 insert the markup to insert the CSS: style= "", and then put the CSS you just defined from the 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 "<!--" and "-->", as if there is no use, do not be able to.
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 the 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:
<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 the 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:
<style type= "Text/css" >
<!--
. style1 {LETTER-SPACING:3PX}
-->
</style>

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:
<style type= "Text/css" >
<!--
. style1 {text-decoration:underline overline line-through blink}
-->
</style>
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:
<style type= "Text/css" >
<!--
. style1 {TEXT-INDENT:2EM}
-->
</style>
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, can make a certain direction of content to leave the form 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:
<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}
-->

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.