From Basics to Mastery: A practical tutorial on CSS (II.)

Seven Control the style of text

The style of control text includes two parts: text case, text decoration.

1. Text case

The case of text makes it possible for the designer of a Web page not to write the text when the text is typed, but to set the size of the local text as needed after the input is complete.

The basic format is as follows:

Text-transform: Parameters

Parameter value range:

uppercase: All text uppercase display

lowercase: All text lowercase display

capitalize: The first letter of each word is shown in uppercase

None: Text warp parameters that do not inherit from the parent

Note: Inheritance refers to HTML identifiers that inherit from parameters that contain their own identifiers.

2. Text decoration

The main purpose of text decoration 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: Add strikethrough to Text

blink: Make text blink

None: Do not show any of the above effects

Eight Control the style of text

The styles that control text include word distance, letter distance, text line spacing, text horizontal alignment, text vertical align six parts.

1. Word spacing

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

The basic format is as follows:

Word-spacing: Interval distance

Interval distance value: Points, EM, pixes, in, CM, MM, PC, ex, normal, etc.

2. Letter Spacing

The letter spacing refers to the distance between the letters, the function, the usage, and the settings of the parameters are similar to the word spacing.

The basic format is as follows:

Letter-spacing: Letter Spacing

3. Spaced

Line spacing refers to the vertical distance between the upper and lower lines of the baseline. Generally, English five-wire exercise books, the third horizontal line from the top down is what the computer thinks of as its baseline.

The basic format is as follows:

Line-height: Distance between rows

Distance between rows:

• Numbers without units: Base 1, equivalent to 100% of the proportional relationship

• Numbers with length units: whichever is the specific unit

• Proportional relationships

Note: If the text font is large and the line spacing is relatively small, the upper and lower lines of text may overlap each other.

4. Horizontal alignment of text

Text horizontal alignment controls the horizontal alignment of text, not just text content, but also the alignment of the image and image data.

The basic format is as follows:

Text-align: Parameters

Value of the parameter:

left: Left Justified

right: Right-justified

Center: Center Alignment

Justify: Relative left and right alignment

However, it is important to note that Text-alight is a block-level attribute and can only be used in identifiers such as < p>, < blockquqte>, < ul>, < h1>~< h6>.

5. Text Vertical Alignment

The vertical alignment of the text should be relative to the position of the text parent, not the vertical alignment of the text in the Web page. For example, if there is a text in a table cell, the vertical center of the text is measured against the cell, that is, the text is displayed in the center of the cell, not the middle of the entire page.

The basic format is as follows:

Vertical-align: Parameters

Parameter values:

Top: Top-aligned

Bottom: Bottom alignment

text-top: Align relative text top

Text-bottom: Relative text bottom Alignment

Baseline: Baseline alignment

Middle: Center Alignment

Sub: Shown in the following standard form

Super: Shown in the form above

6. Text indent

Text indentation allows text to be displayed in areas with relatively narrow default values, primarily for the first line indentation of a Chinese plate, or as a form of indentation for a large paragraph of reference text and notes.

The basic format is as follows:

Text-indent: Indent Distance

Indent Distance Value:

• Numbers with a length unit

• Proportional relationships

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

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

Nine Control the style of colors and backgrounds

Styles that control color and background include color properties, background color, background image, background image repetition, background image fixation, background positioning, and six sections.

1. Color Properties

The basic format is as follows:

Color: Parameter

Color parameter value range:

• Expressed as an RGB value

• Expressed as a color value of 16 binary (hex)

• Indicated by the English name of the default color

The English name of the default color is undoubtedly the most convenient, but because of the predefined colors too little, so more web designers like to use the RGB way. The advantages of RGB are many, not only can be in 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 to better combine to lay a solid foundation.

2. Background color

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

The basic format is as follows:

Background-color: Parameters

Parameter values are the same as the color properties.

3. Background image

The basic format is as follows:

Background-image:url (URL)

The URL is the path where the background image is stored. If "None" is used instead of the background picture's storage path, nothing will be displayed.

4. Duplicate background picture

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

The basic format is as follows:

Background-repeat: Parameters

Parameter value range:

no-repeat: Tile background image without repeating

repeat-x: Make the picture tile horizontally only

repeat-y: Make the picture tile vertically only

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

5. Fixed background picture

The background image is fixed to control whether the background image 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 Web page. To avoid overly flashy background images that damage the viewer's eyesight when scrolling, you can unbind the background image and text content, which is bundled with the browser window.

The basic format is as follows:

Background-attachment: Parameters

Parameter value range:

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

Scroll: When a Web page scrolls, the background image scrolls together relative to the browser's window

6. Background positioning

Background positioning controls where the background picture appears in the Web page.

The basic format is as follows:

Background-position: Parameter table

Parameter value range:

• Numeric parameters with length units

top: Align relative foreground object top

bottom: Align relative foreground object bottom

left: Left alignment relative to foreground object

Right: Right alignment relative to foreground object

Center: Align relative foreground object Center

• Proportional relationships

The center of the parameter, if used in front of another parameter, is centered horizontally, and if used after another parameter, indicates vertical centering.

Ten Control the style of a list

The list is a useful display in HTML, you can put the relevant side-by-side content neatly arranged vertically, so that the page looks neat and professional, and let the visitors have a sense of a glance.

Style sheets Add some functionality to the list, and the style of the control list includes list styles, graphic symbols, and three parts of the list position.

1. List symbols

A list symbol is a symbol identifier 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: Block

Decimal: decimal digits

Lower-roman: Lowercase roman numerals

Upper-roman: Uppercase Roman Numerals

lower-alpha: Lowercase Greek alphabet

Upper-alpha: Uppercase Greek alphabet

None: Unsigned display

The disc in the parameter is the default option.

2. Graphic symbols

The graphic symbol refers to the original list of bullets that can be replaced with a graphic.

The basic format is as follows:

List-style-image:url

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

3. List location

The list location description list is displayed.

The basic format is as follows:

List-style-position: Parameters

Parameter value range:

inside: Display inside the box model

outside: Displayed outside the box model

Here comes a new concept: the box model. Box refers to a container that contains objects that apply style rules, which are given in the following article.

Xi. Control the style of the user interface

On the Web page, the mouse is usually arrow-shaped, pointing to the link as a hand, waiting for the page to be downloaded as an hourglass ... This seems to be a conventional one. While this design allows us to know what the browser is like or what it can do, it doesn't seem to meet our needs completely. For a link, you can point to a Help file, or you can move forward one page or a page back, for so many features light on a single hand mouse is not a problem. Thankfully, CSS offers up to 13 mouse shapes to choose from.

The basic format is as follows:

Cursor: Mouse shape parameters

CSS Mouse shape parameter table:

CSS Code

Mouse shape

Style= "Cursor:hand"

Hand shape

Style= "Cursor:crosshair"

Cross-shaped

Style= "Cursor:text"

Text shape

Style= "Cursor:wait"

Hourglass shape

Style= "Cursor:move"

Cross arrow shape

Style= "Cursor:help"

Question mark shape

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

The above is from the basic to proficient: CSS Practical tutorial (ii) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

