Web Learning: A concise tutorial on style sheets CSS

css| Tutorials | Web page | style sheet

Style sheet CSS occupies a very important place in the Web page, and its use has been a hot topic of discussion. CSS is a shorthand for cascading style sheet, translated as "cascading style forms." CSS can almost define all the elements of the Web page, CSS although powerful, but usually we use is very few, the most common is: to define the font size (CSS defined font size will not browser font settings change), remove the hyperlink underline, hyperlink color, and so on. Here's how to use CSS in detail and concisely.

Where does 1.CSS add? When editing CSS, it is highly recommended to use text editing tools such as Notepad to open your Web page code. Find

There are a lot of websites like to write a stylesheet as a CSS file, and then all the files are pointing here to call it. I personally do not like this, because every page of CSS is not the same, the disadvantage of doing so, when due to slow network speed, or server burden of heavy CSS file connection, the Web page becomes very messy. It is wiser to embed CSS directly in a Web page. If you have many pages that are almost exactly the same and insist on using CSS files, use this <link href=***.css rel=stylesheet> to connect CSS files.

Instance 1:<style>td{font-size:9pt;line-height:150%}</style> This means that the font size of the Web page is 9 points, and the line spacing 150%,TD is the cell element. This means that the font in the cell works. Here's the <style> TD, which means the selector, all the TD elements in the Web page will work. These selectors can be all HTML tags, such as P, table, HR, and so on, except for a handful of Br.

Instance 2:<style>a{color:ff0000}input{font-size:9pt}</style> indicates that the hyperlinks are all red and the font for the Single-line text box is 9 points.

A big part of 2.CSS is that it can be used to significantly reduce web page code to lose weight on a Web page by customizing the style sheet selector in a Web page and then referencing the selectors in a large number of pages. Most of the sites are currently referenced using class.

CSS, class and ID function is exactly the same, "class" Word than "id" more than 3 letters. Use the ID, define the selector name between the page <STYLE> and </STYLE>, add the # before the selector name, these can be letters or numbers, or combinations, and then use id=** in the elements of the page to refer to it.

The instance 3:<style> #8 {color:000080} #p2 {margin-left:20} #14 {font-size:14pt}</style>, and then refer to it in the Web page using this sentence: <a id=8 > Black blue </a>,<a id=14>14 pound word </a>. <p id=p2> paragraph ...

In other words, <a id=8> black-blue word </a> equivalent to <a style=color:000080> black-blue word </a>;<a id=14>14-pound word </a> Equivalent to <a style=font-size:14pt>14-pound character </a> The introduction here may be a little too good to understand, you can practice more.

Note: Under certain conditions, using an ID to reference may not work or an error, or conflict with the JavaScript ID, in which case you can use class to refer to it. Class is used in the same way as ID, the difference is: Define the selector name between <STYLE> and </STYLE> of the page, plus the name. (ie point). For example, <style>.a1{color:ff0000}</style>, and then use CLASS=A1 to refer to it.

3. Style sheet syntax. The style sheet's entry and its value should be connected with a colon, such as color:ff00000. A style sheet can also be embedded directly in a paragraph without a class or ID reference, such as <a style=font-size:12pt>12 </a> pound word. That is, using the <* style=*:* > syntax.

4. Small tips. Can be as flexible as necessary, the same selector name can be defined multiple times, or multiple selector names to define the same sentence. For example, <style> #a1 {color:ff0000} #a1 {Font-size:9pt}</style>), which is equivalent to #a1{color:ff0000;font-size:9pt}. Multiple selector names define the same sentence by adding commas between the names of the selectors, such as <style> #a1, #b1 {color:ff0000} #b1 {font-size:9pt}</style> is equivalent to #a1{color: FF0000} #b1 {color:ff0000;font-size:9pt}. Maybe it's not very well understood here, you can be flexible by your own definition as long as you practice a little.

5. Style Sheet Handbook. The most commonly used style sheet statements are listed below:

1 color (colors, such as FF0000 for Red, 000000 for black ...)

2) font-size (font size)

3) font-family (font type)

4 width and height (widths and heights)

5 Line-height (paragraph spacing, recommended to use the form of a percentage, such as 150%)

6) Margin-top indicates paragraph, margin-bottom after paragraph. Margin-left indicates that the entire paragraph is indented to the right, margin-right the distance to the right border from the right of the paragraph. For example, this sentence <p style=margin-top:30;margin-left:20;margin-right:20>. It can also be defined directly in the picture, such as Indicates that the picture is aligned to the right, and the picture moves 9 pixels to the left.

7 Text-align (paragraph alignment, such as left, center, right)

8) Background-color (background color)

9) position:absolute;top:30;left:50 represents absolute positioning (layer in DW)

In short, the most commonly used is the above several, the need for a lot of practice.

6. The most commonly used style sheet code instance.

Example 4: Remove the hyperlink underline,<style>a{text-decoration:none}</style>

Example 5: Hyperlink color,<style>a{color:000000}a:hover{color:ff0000}</style>

Example 6: Hyperlink color and remove underline,<style>a{text-decoration:none; Color:000000}a:hover{color:ff0000}</style>

Instance 7: The hyperlink is discolored and the mouse stops with an underscore on the hyperlink, and the mouse leaves the underline and disappears,<style>a{color:000000; text-decoration:none}a:hover{color:ff0000; Text-decoration:underline}</style>

Example 8, please turn back to the example 1:<style>td{font-size:9pt;line-height:150%}</style>, this can make your Web page of the font is not moving, not with IE browser "view → text size" Change the settings.

If you need to copy code from a Web page into FP or DW, note: Be sure to copy it from here to Notepad and then copy it from Notepad to the FP or DW HTML mode, and remember that it is not.