The classic practical CSS tutorial detailed explanation

css| Tutorial

CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages that is now supported by most browsers and is one of the essential tools for Web design. The use of CSS can simplify the format of the page code, speed up the download display, but also reduce the number of code to upload, greatly reducing the amount of duplication of work. Especially when you are faced with a site with hundreds of pages, CSS is like God's gift to us!

Preface　　

CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages that is now supported by most browsers and is one of the essential tools for Web design.

The World Wide Web Consortium The Dynamic HTML into three parts: scripting languages (including JavaScript, VBScript, and so on), browsers that support dynamic effects, including the Internet Explorer, Netscape Navigator, and so on) and CSS style sheets.

one. Features of cascading style sheets　　

And do not say the past lack of dynamic web pages, that is, the layout of the content of the Web page also has a lot of difficulties, if not professionals or particularly patient people, it is difficult to let the Web page according to their own ideas and ideas to display information. Even those who have mastered the essence of the HTML language will have to pass many tests to master the layout of the information, the process is very long and painful. For the development of the Internet, let more people set foot in this colorful world as soon as possible, new HTML auxiliary tool is ready to be ready.

The style sheet is born under this kind of demand, the first thing to do is to precisely position the elements on the Web page, so that web designers like the director, easy to control by the text, the image of the actors, in the Web site on the stage according to the script requirements to perform well.

Second, it separates the content structure and format control on the Web page. The viewer wants to see the content structure on the Web page, and in order for the viewer to see this information better, it is necessary to help by formatting control. The previous two on the Web page distribution is staggered, see the modification is inconvenient, and now the two separate will greatly facilitate the designer of the Web page. The separation of the content structure from the format control allows the Web page to be composed of content, while the formatting of all pages is controlled to a CSS style sheet file. This is done in two ways:

First, the format code for the Web page is simplified, and the external stylesheet is saved in the cache by the browser, speeding up the download display and reducing the number of code that needs to be uploaded (because the format of the duplicate settings will be saved only once).

Second, as long as the changes to preserve the Web site format CSS style sheet files can change the style of the entire site, in the number of pages to modify the huge site, it is particularly useful. Avoid a Web page modification, greatly reducing the workload of duplication of work, when you are facing a site with hundreds of pages, CSS is like God's gift to us! ^_^

two. Ways to add cascading style sheets　　

There are four ways we can add style sheets to a Web page.

1. The simplest method is to add directly to the HTML identifier (TAG):

< Tag style= "Properties" > Web content </tag>

As an example:

< P style= "color:blue; Font-size:10pt "&GT;CSS Example </p>

Code Description:

Displays a "CSS instance" with a font size of 10pt in blue. Although simple and intuitive to use, this approach is less common because it adds the advantage of not being able to fully play the style sheet. "Content structure and formatting control are saved separately."

2. Added in the header information identifier < head> of HTML:

< head>

< style type= "Text/css" >

<!--

What the style sheet is about

-->

</style>


Type= "text/css" means that style sheets are MIME types that help browsers that do not support CSS to filter out CSS code, and avoid displaying the style sheets we set directly in front of the browser in the form of a source code. However, in order to ensure that this does not happen, it is necessary to add the annotation identifier "<!--annotation content-->" in the stylesheet.

3. Link Style sheet

The same is added to the header information identifier < head> in HTML:

< head>

< link rel= "stylesheet" href= "*.css" type= "text/css" media= "screen" >


*.css is a separately saved style sheet file that cannot contain < style> identifiers and can only be suffixes of CSS.

Media is an optional property that indicates what media output will be used for a Web page that uses a style sheet. Value range:

· Screen (default): Output to computer screens

· Print: Output to printer

· TV: Output to TV

· Projection: Output to projector

· Aural: Output to Speakers

· Braille: Output to Braille tactile sensing devices

· Tty: Output to Fax typewriter

· All: output to all devices above

If you want to output to multiple media, you can separate the values table with commas.

The Rel property indicates how the style sheet will be combined with the HTML document. Value range:

· Stylesheet: Specify an external style sheet

· Alternate stylesheet: Specifies the use of an interactive style sheet

4. Using style sheets jointly

The same is added to the header information identifier < head> in HTML:

< head>

< style type= "Text/css" >

<!--

@import "*.css"

Declaration of other style sheets

-->

</style>


The combined style sheet input method that starts with @import is similar to the method of linking style sheets, but the combined style sheet input approach has the advantage. Because the Union method can be linked to the external style sheet, as well as the specific situation of the page, to make other pages do not need style rules.

It is to be noted that:

• Union method input style sheet must begin with @import.

• If multiple style sheets are entered at the same time, the page will be formatted according to the first entered style sheet.

• Use an external style sheet when you enter a style sheet that conflicts with style rules in a Web page.

three. Format Cascading Style sheets

in general, the Declaration of a stylesheet is divided into selectors (selector) and blocks {} (block), which contains attributes (properties) and the value of the property (value), and the basic format is as follows:

Selector

Other format 1:

Selector 1, selector 2, selector 3

Sometimes multiple selectors will use the same settings, in order to simplify the code, we can set the style for them, and add "," between the multiple selectors. to separate them.

must be separated by ";" Between two properties when there are multiple properties.

Other Format 2:

Selector 1 selector 2

and format 1 are very similar, but only a little less "," between the selectors, but the effect is very different. Represents a style rule that is set when the selection character 2 includes content that is included in the selector 1.

Four. Classification of cascading style sheets

to make the page's format not overly monotonous, you must have the same selectors sorted and have different style designs in different categories. The basic format is as follows: the

Selector. The category name

Category name can be identified in the HTML character reference:

< identifier class= category name > page content

five. Pseudo-Class

of cascading style sheets in addition to the above classification, the concept of pseudo classes arises in order to make the use of classifications more flexible and diverse. What is the difference between a class and a pseudo class?

Generally speaking, selectors can be set in bundles with multiple classes, so that although many different styles can be created for the same selector, the form of bundling also restricts the set class to be used by other selectors. Pseudo class is created to solve this problem, each of the predefined pseudo class can be referenced by all HTML identifiers, of course, some block-level content, except the settings. The basic format is as follows:

. The pseudo class name

Pseudo class can be referenced in HTML by any identifier.

< identifier class= Pseudo class name > Web page content

　　Six. Control the style of a font

Control font styles include four parts that control font type, font size, font style, and font weight.

1. Font type

Usually in the use of Word and other word processing software, often need to adjust the display of fonts, such as "Arial", "Impact", "Verdana" and other fonts are the author used more.

The basic format is as follows:

Font-family: Font Name

If you add a variety of font names after font-family, browser back to the order of the font name in the user's computer to find the installed fonts, once encountered with the required matching font, the font to display the content of the page, and stop the search; If all the fonts in the stylesheet are not installed, the browser will use its default font instead of displaying the contents of the page.

Attention:

• Use "," to separate each font name when you specify more than one font.

• When the font name contains more than two separate words, enclose the font name with "".

• When there is already "" in the style rule, use ' instead of '.

2. Font size

The basic format is as follows:

Font-size: Font Size parameters

Value range of font size:

• Point unit: DOT units are available on all browsers and operating platforms

• In EM: The size of the letter element, the same distance as point

• In pixes: pixels can be used for all operating platforms, but may result in differences in display results due to the different screen resolution of the viewer

• In (inches)

• In cm (cm)

• in mm (mm) as the unit

• PC (printer font size)

• In EX (x-height)

smaller: Smaller than the default size of the current text

larger: Smaller than the default size of the current text

• Use proportional relationships

Xx-small

X-small

Small

Medium

Large

X-large

Xx-large

3. Font style

Font style can only control the display of various italic characters.

The basic format is as follows:

Font-style: Name of italic word

4. Font weight

Font weight controls the display of bold characters, ranging from digital 100~900 to a browser default font weight of 400. In addition, the lighter and bolder can be used to make the font appear thinner or thicker on the original basis.

The basic format is as follows:

Font-weight: Font weight

　　Seven. Control the style of text

The style of control text includes two parts, such as text capitalization and text decoration.

1. Text case

Text case so that the designer of the Web page does not have to fill in the text when the text is completed, but you can enter the finished, and then the local text to be set to case.

The basic format is as follows:

Text-transform: Parameters

Parameter value range:

Uppercase: All text capitalization display

lowercase: All text lowercase display

capitalize: Capitalize the first letter of each word

None: Do not inherit the text deformation parameters of the mother

Note: Inheritance means that an identifier for an HTML inherits from an argument that contains its own identifier.

2. Text decoration

The main purpose of the text decorations is to change the underline when the browser displays text links.

The basic format is as follows:

Text-decoration: Parameters

Parameter value range:

Underline: Underline text

overline: Underline text

Line-through: Delete lines for text

blink: Make text blink

None: Do not show any of the above effects

Eight. Control the style of text 　　

Control text styles include word distance, letter distance, text spacing, text horizontal alignment, and text indented six sections vertically.

1. Word spacing

Word spacing refers to the distance between each word in English, excluding Chinese characters.

The basic format is as follows:

Word-spacing: Interval distance

Distance between the values: points, EM, pixes, in, CM, MM, PC, ex, normal and so on.

2. Letter Spacing

Letter spacing refers to the distance between English letters, function, usage, and the setting of parameters and the spacing of words is very similar.

The basic format is as follows:

Letter-spacing: Letter Spacing

3. Spaced

Line spacing refers to the vertical distance between the two lines of baseline. Generally speaking, the English five-grid exercise book, the third line from the top down is the computer's thought that the line of the baseline.

The basic format is as follows:

Line-height: Distance between rows

Distance between rows:

• Number with no units: 1 as the base, equal to 100% of the proportional relationship

• Number with length units: whichever is the specific unit

• Proportional relationship

Note: If the text has a large font size and the line spacing is relatively small, the two lines of text may overlap.

4. Text Horizontal Alignment

Text horizontal alignment controls the horizontal alignment of text, and does not just refer to text content, but also to the alignment of settings for pictures and image data.

The basic format is as follows:

Text-align: Parameters

The value of the parameter:

left: left-aligned

right: Align Right

Center: Center Alignment

Justify: Relative right and left alignment

It should be noted, however, that Text-alight is a block-level attribute and can only be used in identifiers such as < p>, < blockquqte>, < ul>, < h1>~< h6>, and so on.

5. Text vertically aligned

The vertical alignment of text should be relative to the position of the text parent, not the text being vertically aligned in the Web page. For example, a table cell has a paragraph of text, so the vertical center of the text is measured against the cell, that is, the text will appear in the center of the cell, not the entire page.

The basic format is as follows:

Vertical-align: Parameters

Parameter values:

Top: Top alignment

Bottom: Bottom alignment

text-top: Align relative to top of text

text-bottom: Align relative to text bottom

Baseline: Baseline alignment

Middle: Center Alignment

Sub: The form shown below

Super: The above standard form shows

6. Text indent

Text indentation enables text to be displayed in areas with a narrower default value, mainly for first-line indentation in Chinese plate, or for indented text and notes for large paragraphs.

The basic format is as follows:

Text-indent: Indent Distance

Indent Distance Value:

• Number with length units

• Proportional relationship

However, it should be noted that when using proportional relationships, some people think that the default ratio of browsers is relative to the width of the paragraph, in fact, this is not the case, the entire browser window is the browser's default reference.

In addition, Text-indent is a block-level attribute and can only be used in identifiers such as < p>, < blockquqte>, < ul>, < h1>~< h6>, and so on.

Nine. Control the style of colors and backgrounds
　　
The styles that control color and background include color attributes, background color, background picture, background picture repetition, background picture fixed, background positioning six parts.

1. Color Properties

The basic format is as follows:

Color: Parameter

Color parameter values range:

• Expressed as an RGB value

• The color value of the 16 (hex) represents

• In English name of default color

The default color of the English name is undoubtedly the most convenient, but because the predefined color types are too few, so more web designers like to use RGB way. RGB way of many benefits, not only can use the form of digital accurate color, but also a lot of image production software (such as Photoshop) in the default use of the specification, so that the picture and the Web better combine to lay a solid foundation.

2. Background color

In HTML, the only way to add a background color to an object is to make a table, set the background color in the table, and put the object in the cell. This is more cumbersome, not only the code more, but also for the size and location of the table to hurt some brains. Now with CSS can easily be directly done, and the scope of the object is very wide, can be a paragraph of text, can also be just a word or a letter.

The basic format is as follows:

Background-color: Parameters

Parameter takes the same value as the Color property.

3. Background picture

The basic format is as follows:

Background-image:url (URL)

The URL is the location of the background image. If you use "none" instead of the background image's storage path, nothing will appear.

4. Duplicate background picture

Background image Repeat control is the background image tile or not, that is, the combination of background positioning control can be on the page of a separate display of a background picture.

The basic format is as follows:

Background-repeat: Parameters

Parameter value range:

no-repeat: Do not repeat tile background picture

repeat-x: Tile the picture in horizontal direction only

repeat-y: Tile the picture in the vertical direction only

If you do not specify a background picture repeating property, the browser defaults to a background picture tiled horizontally, vertically, two directions.

5. Background picture fixed

Background picture fixed controls whether the background picture scrolls with the scrolling of the page. If you do not set the background picture fixed property, the browser default background picture scrolls with the scrolling of the page. To avoid overly flashy background images that damage the viewer's eyesight when scrolling, you can remove the bundle of background pictures and text content, which is tied to the browser window.

The basic format is as follows:

Background-attachment: Parameters

Parameter value range:

fixed: When the Web page scrolls, the background image is fixed as opposed to the browser window

Scroll: When a Web page scrolls, the background image scrolls with the browser's window

6. Background positioning

Background positioning is used to control where a background picture is displayed in a Web page.

The basic format is as follows:

Background-position: Parameter table

Parameter value range:

• Numeric parameters with length units

Top: Top alignment relative to foreground object

bottom: Base alignment relative to foreground object

left: left-aligned relative foreground object

right: Align to right of relative foreground object

Center: Center alignment relative to foreground object

• Proportional relationship

Center of the argument if used in front of another parameter, the center is centered, and if it is followed by another argument, it is centered vertically.

　　10. Control the style of a list

The list is a very useful display in HTML, you can arrange the relevant content neatly vertically, so that the Web page looks neat and professional, and let the viewer have a clear feeling.

The style sheet adds some functionality to the list, and the control list style includes a list style, a graphical symbol, and a list position of three parts.

1. List symbol

A list symbol is the symbol ID that is displayed at the current point in each list item.

The basic format is as follows:

List-style-type: Parameters

Parameter value range:

Disc: Round

Circle: Hollow Circle

Square: Square

Decimal: decimal digits

Lower-roman: Lowercase roman numerals

Upper-roman: Capital Roman Numerals

lower-alpha: Lowercase Greek alphabet

Upper-alpha: Uppercase Greek letters

None: Unsigned display

The disc in the parameter is the default option.

2. Graphical symbols

Graphical symbols refer to the original list of bullets that can be replaced with graphics.

The basic format is as follows:

List-style-image:url

URLs are the addresses of graphic files that are used instead of bullets, and can use relative or absolute addresses.

3. List location

The list location describes where the list is displayed.

The basic format is as follows:

List-style-position: Parameters

Parameter value range:

inside: Show inside the box model

outside: Display outside the box model

Here comes a new concept: the box model. Box refers to a container that contains an object that applies style rules, as described in the following article.

　　11. Control the style of the user interface

On the Web page, the mouse is usually arrow-shaped, pointing to the link to become a hand-shaped, waiting for the Web page to download when the hourglass-shaped ... This seems to be a conventional one. Although this design allows us to know the current state of the browser or what can be done, but these do not seem to fully meet our needs. Take the link, you can point to a Help file, it can be to move forward a page or to back a page, for so many features light by the same hand-shaped mouse can not explain the problem. Thankfully, CSS provides up to 13 kinds of mouse shapes for us to choose from.

The basic format is as follows:

Cursor: Mouse shape parameters

CSS Mouse shape parameter table:

Mouse shapes: CSS code

Style= "Cursor:hand" hand shape

Style= "Cursor:crosshair" Cross

style= "Cursor:text" text form

Style= "cursor:wait" hourglass shape

Style= "Cursor:move" Cross Arrow-shaped:

style= "Cursor:help" question mark form

style= "cursor:e-resize" right arrow shape

Style= "cursor:n-resize" Up Arrow shape

style= "Cursor:nw-resize" upper left Arrow shape

Style= "Cursor:w-resize" Left arrow shape

Style= "cursor:s-resize" down arrow shape

style= "Cursor:se-resize" right down arrow shape

Style= "Cursor:sw-resize" Left down arrow shape

12. Control the style of box　　

The stylesheet provides a container box that will store all the operable styles of an object. Includes four aspects of the object itself, border whitespace, object borders, and object clearance.

For a better understanding of the meaning of these attributes and the relationship between them, see the following illustration:

1. Border Blank (MARGIN)

The outermost layer of the box model, as shown in the figure, includes four properties.

The formats are as follows:

margin-top: Top blank distance

margin-right: Right blank distance

margin-bottom: Bottom blank distance

margin-left: Left blank distance

Blank distances can be represented by a number with a length unit.

If you margin by using the simplified method of the above property, you can add four consecutive digits with length units to represent the Margin-top, Margin-right, Margin-bottom, Margin-left respectively, separated by a space in the middle of each number.

2. Object Border (BORDER)

As shown in the figure, between the border whitespace and the object gap, seven properties are included.

The formats are as follows:

border-top: Top Border width

border-right: Right Border width

border-bottom: Bottom Border width

Border-left: Left Border width

border-width: All border widths

border-color: Border color

border-style: Border Style parameters

Where border-width can set all the width of the border at once, border-color the color of the four sides of the border, you can write four colors consecutively, separated by a space. The contiguous set of borders is in the order of Border-top, Border-right, Border-bottom, Border-left.

Border-style is slightly more complex than the other attributes because it also includes parameters for multiple border styles:

None: No border.

dotted: The border is a dotted line.

dashed: The border is a short line.

Solid: The border is a solid line.

Double: The border is two lines.

Groove: Displays a 3D border with different effects based on the Color property

Ridge: Displays a 3D border with different effects based on the Color property

inset: Displays a 3D border with different effects based on the Color property

outset: Displays a 3D border with different effects based on the Color property

3. Object Gap (PADDING)

As shown in the figure, it is located between the object border and the object, including four properties.

The basic format is as follows:

padding-top: Top Clearance

Padding-right: Right Clearance

Padding-bottom: Bottom Clearance

Padding-left: Left Clearance

Similar to margin, padding can also use padding to set all object gaps at once, and the format is similar to margin, no longer enumerated.

　　13. Show control style

The basic format is as follows:

Display: Parameters

Parameter value range:

block (default): Wrapping lines before and after objects

Inline: No wrapping before and after the object.

List-item: Wrapping lines before and after objects, adding bullets

None: No display

　　14. Blank control style

The basic format is as follows:

The whitespace property determines how spaces within an element are handled.

White-space: Parameters

Parameter value range:

Normal: Replace multiple spaces with one to display

Pre: Faithfully press ENTER to display spaces

NoWrap: No Line wrapping

Note, however, that Write-space is also a block-level attribute.