Style Sheet CSS concise tutorial

Style Sheet CSS plays an important role in Web pages. Its use has always been a hot topic. CSS is short for Cascading Style Sheet ". CSS can define almost all webpage elements. Although CSS is powerful, it is rarely used at ordinary times. The most common ones are: defines the font size (the font size defined by CSS does not change the font setting of the browser), removes the hyperlink underline, and changes the color of the hyperlink. The following describes in detail how to use CSS.

1. Where can I add CSS? When editing CSS, we strongly recommend that you use text editing tools such as NotePad to open your webpage.Code. Locate Many websites like to write style sheets as a CSS file, and all the files point here to call it. I personally do not like this because the CSS on each page is different. The disadvantage is that when the CSS file cannot be connected due to slow network speed or heavy server load, the web page becomes messy. It is wise to embed CSS directly in a webpage. If many of your web pages are almost identical and you want to use CSS files, you can use <link href = ***. CSS rel = stylesheet> to connect to the CSS file.

Example 1: <style> TD {font-size: 9pt; line-Height: 150%} </style> indicates that the font size of the webpage is 9 lbs. The line spacing is 150%, TD is the "cell" element, which is used for the font in the cell. The <style> next to TD indicates the selector. All the TD elements in the webpage will work. These separators can be all HTML tags, such as P, table, and HR, except for a few BRs.
Instance 2: <style> A {color: ff0000} input {font-size: 9pt} </style> indicates that the hyperlink is red and the font of the single-line text box is 9 lbs.

2. one of the most important aspects of CSS is that it can be used to greatly reduce the size of webpage code, so as to lose weight on the webpage. The principle is to customize the style sheet selection character on the webpage, then, you can reference these delimiters in a large number on the webpage. Currently, most websites use class for reference.
In CSS, the role of class and ID is exactly the same. The word "class" has three more letters than "ID. ID usage, define the selection of a letter name between the web page <style> and </style>, select the letter name plus #, these selection characters can be letters, numbers, or combinations, and then use ID = ** In the webpage element to reference them.

Instance 3: <style >#8 {color: 000080 }# P2 {margin-left: 20 }# 14 {font-size: 14pt} </style>, then use this sentence on the webpage to reference it: <a id = 8> black and blue </a>, <a id = 14> 14 lbs </a>. <P id = P2> section ......
That is to say, the word <a id = 8> black and blue </a> is equivalent to the word <a style = color: 000080> black and blue </a>; <a id = 14> 14-pound words </a> are equivalent to <a style = font-size: 14pt> 14-pound words </a>, and so on. The introduction here may not be easy to understand. You can practice it more.

Note: Under certain conditions, using ID for reference may not work, report errors, or conflict with the Javascript ID. In this case, you can use class for reference. The usage of the class is the same as that of the ID. The difference is that the selection letter name is defined between the <style> and </style> Of the webpage, And the name is prefixed with. (that is, vertices ). For example, <style>. A1 {color: ff0000} </style>, and reference it with class = A1.

3. style sheet syntax. The item and its value of the style sheet should be connected with a colon, for example, color: ff00000. Style Sheets can also be directly embedded in paragraphs without class or ID references, for example, <a style = font-size: 12pt> 12 lbs </a>. That is, use the <* style = *: *> syntax.

4. Tips. You can flexibly master the settings as needed. You can define the same selector name multiple times or define the same sentence with multiple selector names. For example, <style >#a1 {color: ff0000 }# A1 {font-size: 9pt} </style> is equivalent to # A1 {color: ff0000; font-size: 9pt }. You can use multiple names to define the same sentence by commas (,). For example, <style> # A1, # B1 {color: ff0000 }# B1 {font-size: 9pt} </style> is equivalent to # A1 {color: ff0000 }# B1 {color: ff0000; font-size: 9pt }. It may not be easy to understand here. You only need to practice it a little and you can define it as needed.

5. style sheet manual. The style sheet manual of the author su Shen XiaoYu was released online for free and can now be downloaded from the su Shen Xiaoyu website. In fact, we usually use very few style table statements. The following lists the most commonly used style table statements:
1) color (for example, ff0000 indicates red, 000000 indicates black ......)
2) font-size (font size)
3) font-family (font type)
4) width and height (width and height)
5) line-height (section line spacing, which is in percent format, for example, 150%)
6) margin-top indicates the beginning of the segment; margin-bottom indicates the end of the segment. Margin-left indicates the right indent of the entire section, and margin-right indicates the distance from the right side of the section to the right side of the border. For example, <P style = margin-top: 30; margin-left: 20; margin-Right: 20>. It can also be directly defined in the image, for example, indicates that the image is right aligned and 9 pixels are moved to the left.
7) Text-align (section alignment, such as left, center, right)
8) Background-color (background color)
9) position: absolute; top: 30; left: 50 indicates absolute positioning (layer in DW)
In short, these are the most commonly used ones, and more practices are required.

6. The most common example of style sheet code.

Example 4: remove the hyperlink underline, <style> A {text-Decoration: None} </style>
Example 5: The hyperlink changes color. <style> A {color: 000000} A: hover {color: ff0000} </style>
Example 6: The hyperlink changes color and removes the underline. <style> A {text-Decoration: none; color: 000000} A: hover {color: ff0000} </style>
Example 7: The hyperlink changes color and the mouse stops on the hyperlink with an underline. The mouse leaves the underline and disappears. <style> A {color: 000000; text-Decoration: None} A: hover {color: ff0000; text-Decoration: underline} </style>
Instance 8. Please refer back to instance 1: <style> TD {font-size: 9pt; line-Height: 150%} </style>, this statement does not change the font size of your webpage. It does not change with the setting of "View> text size" in IE.

If you need to copy code from the webpage to FP or dw, please note: you must first copy the code from here to notepad, and then copy it from notepad to HTML mode of FP or dw, remember, otherwise it will be invalid.