CSS Application Tips 14 Cases

 css is the abbreviation of cascading style sheets, Chinese translation "Cascading style form", I call it "cascading style sheet", I feel this kind of a little bit, 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 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, CSS Three of the use of a Web page to be mixed? The
three usages 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, how to make an external file css in Dreamweaver3?
There is no special requirement to use the Dreamweaver3 css in the *.css, but also to create a file with Notepad, and add a sentence between the 〈head〉 and 〈/head〉 of the page: 〈link rel= "stylesheet" href = "Fill in your CSS file address (relative path + filename) here" type= "Text/css" on the line.
4, how do I use Dreamweaver3 to quickly create a CSS external link file?
for a web designer who first touches CSS, it's very 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. You can do this:
1) first on the paper to write on the Web page in the website may use the name of the lattice, then in the Dreamweaver3 edit window, the CSS panel, one by one, and in a blank page appropriate to write a little relevant content, edge definition side trial, the effect is not satisfied, immediately modify
2) all defined, and then use Notepad to create an empty CSS outside the file, the 〈head〉 and 〈/head〉 between the section of the defined CSS copy to the CSS file, it is done. The whole process is to click the mouse, convenient?
5, in the Dreamweaver3 with inline insert CSS to write the code manually?  
No! First use the CSS panel to define the CSS you want to use, and then insert the markup to insert the CSS: style= "", and then drag the CSS you just defined from behind the 〈head〉 to this double citationNumber, 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 you?
This pair of dongdong works to not cause errors in the lower version of the browser. 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?
Add a different color to the text, and in the DW3, just select the text color on the property panel, 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.

[Dvnews_page]

8, how to add a background image to some text?


is similar to the plus background color operation, in the background in the selection of loading 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?


CSS to make the background pattern "scroll" with the text:


〈style type= "Text/css" 〉


〈!--


body {background:purple URL (bg.jpg);


background-repeat:repeat-y;


background-attachment:fixed


}


--〉


〈/style〉


10, how do I 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, in length, Both positive and negative values are available, and when a negative value is taken, the characters are squeezed together. 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 line and flicker?


the "decoration" attribute on the "Type" of the CSS Property Definition dialog box (Style definition for. Style1) in DW3 is defined by these contents, note that some versions of the browser do not support the flashing properties, and use less. Here is a CSS example that defines this effect:


〈style type= "Text/css" 〉


〈!--


. style1 {text-decoration:underline overline line-through blink}


--〉


〈/style〉


: "Underline" is defined as an underscore, "overline" is an underscore, "Line-through" defines a strikethrough, and "blink" defines text flicker.


12, how to make a Web 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?


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" "Leave" "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 part of the content?


use CSS to 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". The following is a CSS example that defines the top border as: blue thin lines; The left border is: Green in the thick line:


〈style type= "Text/css" 〉


〈!--


. style1 {border:solid; Border-width:thin 0px 0px medium; Border-color: #0000FF Black #00FF00}


--〉


〈/style〉