Summary of CSS style syntax usage experience during webpage Creation

　　Fire Station Building Institute (Bkjia.com) CSS tutorialIn the previous article "css syntax for adjusting table borders in Dreamweaver", we mentioned that most webmasters are still using tables + CSS to create webpages. The webpage framework made by tables is not flexible, there are too many redundant code, which is not beautiful, is not conducive to SEO, and is not convenient to revise and so on. In the process of building a website, the webmaster must constantly learn and make an enterprising effort to slowly throw the Table and move to DIV + CSS, today, we will discuss some common CSS problems and experiences with webmasters.

1. CSS is generally used in three ways in the production of web pages. Which method should I use?

When multiple webpages require CSS files to be connected, the code of the webpage is greatly reduced and the modification is very convenient.

The CSS used in adopts the Document Header mode. CSS is used only in one or two places on a webpage and is inserted in rows.

2. Do I need to mix the three methods of CSS in one webpage?

These three methods can be used in combination without confusion. This is why it is called a "stacked style sheet". This is where the browser displays the webpage.

Rational: First, check whether there is any inline CSS plug-in. If there is any, execute it. If there is any other CSS plug-in for this sentence, ignore it. Secondly, check the CSS in the header mode and execute it.

When neither of the preceding methods is available, check the CSS format of the external file. Therefore, we can see that the execution priority of the three types of CSS is: Intra-row plug-in, header side

Format.

3. How to make external file CSS in Dreamweaver3?

In Dreamweaver3, there are no special requirements for using CSS with an external connection file. Similarly, you can use NotePad to create a *. css file.

</Head> adds the following code: <link rel = "stylesheet" href = "fill in your CSS file address (relative path + file)

Name) "type =" text/css ">.

4. How can I use Dreamweaver3 to quickly create CSS external files?

It is quite difficult for a web designer who is new to CSS to create an external CSS file with a notebook editor. Because

Dreamweaver3 supports CSS very well. It is much easier to use it to help. You can perform the following operations:

1) First, write the names of cells that may be used in the website's webpage on the paper, and then bring up the CSS panel one by one in the Dreamweaver3 editing window.

And write a bit of relevant content on a blank page, define and try the content while trying it out. If the effect is not satisfactory, modify it immediately;

2) After all the settings are defined, use NotePad to create an empty CSS external link file and copy the defined CSS file between

Go to the CSS file. The whole process is just a mouse. Is it convenient?

5. Do I need to manually write code when using in-line plug-in CSS in Dreamweaver3?

No! First define the CSS to be used in the CSS panel, and then insert the: style = "" In the CSS Tag to insert, and then extract the CSS you just defined from the

Drag it to the double quotation mark (double quotation mark) and delete the part other than the curly braces.

6. There are "<! -- "And" --> "seem useless. Can't you?

The role of this pair is not to cause errors in earlier versions of browsers. If a browser that executes this page does not support CSS, it will ignore

. Although there are very few people who do not support CSS browsers, it is still wonderful to keep it because almost everything may happen on the Internet.

7. How do I add a background color to some texts?

Add different colors to the text. In DW3, you only need to select the color of the text on the attribute Panel. This is very convenient, but you need to add different background colors to some text.

But there is no corresponding function. We can first define the CSS (for example, bgstyle) of the background color, and then click a few mouse points in DW3. If a definition is pale yellow

The background CSS is as follows:

Reference content is as follows: <Style type = "text/css"> /* Bkjia.com _ CSS */ <! -- . Bgstyle {background: # FFFFCC} --> </Style>

 

Select the text you want and click "bgstyle" on the CSS panel.

8. How do I add background images to some texts?

Similar to the operation of adding a background color, the image is loaded when the background is selected. The code of a defined CSS example for adding a background image is as follows:

Reference content is as follows: <Style type = "text/css"> /* Bkjia.com _ CSS */ <! -- . Imgbgstyle {background-image: url (/logo.gif )} --> </Style>

Select the text you want and click "imgbgstyle" on the CSS panel.

9. How can I make the background of a page remain unchanged when the text is "scroll?

CSS to make the background pattern not scroll with the text is as follows:

Reference content is as follows: <Style type = "text/css"> <! -- BODY {background: purple url (/bg.jpg ); Background-repeat: repeat-y; Background-attachment: fixed } /* Bkjia.com _ CSS */ --> </Style>

10. How to define the word spacing?

In the CSS attribute Definition dialog box (style Definition for. style1) of DW3, the "letter spaceing" attribute on the "Block" is defined.

It refers to the extra spacing between each character. The length is the unit and the positive and negative values are acceptable. When a negative value is obtained, the character is squashed together. Lower

The surface code is an example of a defined font spacing CSS:

Reference content is as follows: <Style type = "text/css"> /* Bkjia.com _ CSS */ <! -- . Style1 {letter-spacing: 3px} --> </Style>

11. How can I underline, strikethrough, and flash a text?

In the CSS attribute Definition dialog box (style Definition for. style1) of DW3, the "decoration" attribute defines these

Content. Note that flash properties are not supported by browsers of some versions. The following is an example of CSS that defines the above effect:

Reference content is as follows: <Style type = "text/css"> <! -- . Style1 {text-decoration: underline overline line-through blink} --> /* Bkjia.com _ CSS */ </Style>

"Underline" is an underscore, "overline" is an upper line, "line-through" is a strikethrough line, and "blink"

It defines text flashing.

12. How can I enable the "first line indent" function for a webpage?

Because it is inconvenient to enter spaces in DW3, using the "first line indent" will make up for this deficiency. In the CSS attribute Definition dialog box (style Definition

For. style1) the "text-indent" attribute on the "Block" defines "first line indent". The so-called "first line" refers to the first line of each segment

Simply press the Enter key to form a new paragraph. It is recommended that the indentation be in the unit of "em" (character). For example, the Chinese character orchestration requires that two Chinese characters be indented at the beginning of each segment.

The configured CSS is as follows:

Reference content is as follows: <Style type = "text/css"> <! -- . Style1 {text-indent: 2em} --> /* Bkjia.com _ CSS */ </Style>

In DW3, note: In DW3, the right side of "text-indent" on the "Block" in the CSS attribute Definition dialog box (style Definition for. style1)

In the indentation unit selection box, "EMS" refers to "em ".

13. When using a table for formatting, can the content of a certain party move up from the table line?

Yes! In the CSS attribute Definition dialog Box (style Definition for. style1) of DW3, "margin" defines content separation.

The distance from the edge can be defined in four directions: "top", "bottom", "left", and "right ". The following is a CSS example defined to exit "10px" on the left.

Sub-code:

Reference content is as follows: <Style type = "text/css"> <! -- /* Bkjia.com _ CSS */ . Style1 {margin: 0px 0px 0px 10px} --> </Style>

14. Can I add a border to some content?

CSS can be used to add borders to a part of the content. In the "Border" Definition of the CSS attribute Definition dialog box (style Definition for. style1) in DW3

Is the border line, "top" bottom "" left "" right "four sides can define the line width and color respectively, after these definitions, do not forget in the following

The line type defined in "style". Otherwise, the border line is invisible because the default line type is "none ". The upper border is defined as a blue line, and the left border.

Example of CSS with green lines:

Reference content is as follows: <Style type = "text/css"> /* Bkjia.com _ CSS */ <! -- . Style1 {border: solid; border-width: thin 0px 0px medium; border-color: # 0000FF black #00FF00} -->