From basics to proficiency: CSS practical tutorial (2)

Seven. Controlling the style of text

Controlling the style of text includes two parts: text case and text modification.

1． Text case

Text case allows web designers to avoid having to complete the case of text when entering text. Instead, they can set the case of partial text as needed after inputting.

The basic format is as follows:

text-transform: Parameter

Parameter value range:

·uppercase: All text is displayed in uppercase

·lowercase: All text is displayed in lowercase

·capitalize: The first letter of each word is capitalized Display

·none: Do not inherit the text transformation parameters of the parent

Note: Inheritance means that HTML identifiers will be inherited for parameters that contain their own identifiers.

2. Text modification

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

The basic format is as follows:

text-decoration: parameter

Parameter value range:

·underline: underline the text

·overline: underline the text

·line-through: underline the text Strikethrough

·blink: Make the text blink

·none: Do not display any of the above effects

8. Control the style of text

The style of controlling text includes six parts: word distance, letter distance, text line spacing, text horizontal alignment, text vertical alignment, and text indentation.

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: spacing distance

The value of spacing distance: points, em, pixels, in, cm, mm, pc, ex, normal, etc.

2. Letter spacing

Letter spacing refers to the distance between English letters. The functions, usage, and parameter settings are very similar to word spacing.

The basic format is as follows:

letter-spacing: letter spacing

3. Leading spacing

Leading spacing refers to the vertical distance between the upper and lower baselines. Generally speaking, in English five-line exercise books, the third horizontal line from top to bottom is what the computer considers to be the baseline of that row.

The basic format is as follows:

line-height: distance between lines

Value of distance between lines:

·Number without unit: 1 is the base, equivalent to 100% of the proportional relationship

·With length unit Number: subject to specific units

·Proportional relationship

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． Text horizontal alignment

Text horizontal alignment can control the horizontal alignment of text, and it not only refers to text content, but also includes setting the alignment of pictures and video materials.

The basic format is as follows:

text-align: parameter

Value of parameter:

·left: left alignment

·right: right alignment

·center: center alignment

·justify: relative left and right alignment

But it should be noted that text-alight is a block-level attribute and can only be used in identifiers such as , , , ~.

5． Vertical alignment of text

The vertical alignment of text should be relative to the position of the text parent, not the vertical alignment of text on the web page. For example, if there is a section of text in a table cell, then setting the vertical centering of this text is measured against the cell. That is to say, the text will be displayed in the center of the cell, not the center of the entire web page.

The basic format is as follows:

vertical-align: parameter

parameter value:

·top: top alignment

·bottom: bottom alignment

·text-top: relative text top alignment

·text-bottom : Relative to text bottom alignment

·baseline: baseline alignment

·middle: center alignment

·sub: displayed in the form of subscript

·super: displayed in the form of superscript

6． Text indent

Text indent allows text to be displayed in a narrower area than the default value. It is mainly used to indent the first line of Chinese style, or to create an indent format for large paragraphs of quoted text and notes.

The basic format is as follows:

text-indent: Indent distance

Indent distance value:

·Numbers with length units

·Proportional relationship

But it should be noted that when using proportional relationships , some people may think that the default proportion of the browser is relative to the width of the paragraph. In fact, this is not the case. The entire browser window is the default reference of the browser.

In addition, text-indent is a block-level attribute and can only be used in identifiers such as , , , ~.

Nine. Controlling color and background styles

Controlling color and background styles includes six parts: color attributes, background color, background image, background image repetition, background image fixation, and background positioning.

1. The basic format of the color attribute

is as follows:

color: parameter

Color parameter value range:

·Represented by RGB value

·Represented by hexadecimal (hex) color value

·In English of the default color Name representation

It is undoubtedly the most convenient to use the English name of the default color, but because there are too few predefined color types, more web designers prefer to use the RGB method. The RGB method has many benefits. Not only can it accurately represent colors in digital form, but it is also the default specification used in many image production software (such as Photoshop). This lays a solid foundation for better integration of pictures and web pages. .

2． Background color

In HTML, there is only one way to add a background color to an object, and that is to first make a table, set the background color in the table, and then put the object into the cell. This is more troublesome. Not only does it require a lot of code, but it also takes some trouble with the size and positioning of the table. Now it's easy to do it directly with CSS, and the object range is very wide, it can be a piece of text, it can be just a word or a letter.

The basic format is as follows:

background-color: Parameter

The parameter value is the same as the color attribute.

3. The basic format of the background image

is as follows:

background-image: url(URL)

URL is the storage path of the background image. If "none" is used instead of the background image storage path, nothing will be displayed.

4. Background image duplication

Background image duplication controls whether the background image is tiled or not. In other words, combined with the control of background positioning, a background image can be displayed separately somewhere on the web page.

The basic format is as follows:

background-repeat: Parameter

Parameter value range:

·no-repeat: Do not repeat the tiled background image

·repeat-x: Make the image tiled only in the horizontal direction

·repeat-y: Make the image tile only in the vertical direction

If you do not specify the background image repeat attribute, the browser defaults to the background image being tiled in both horizontal and vertical directions.

5. Background image fixed

Background image fixed controls whether the background image scrolls with the scrolling of the web page. If you do not set the background image fixed attribute, the browser's default background image will scroll with the scrolling of the web page. In order to prevent overly fancy background images from damaging the viewer's eyesight when scrolling, you can unbundle the background image and text content, which should be bundled with the browser window.

The basic format is as follows:

background-attachment: Parameter

Parameter value range:

·fixed: When the webpage scrolls, the background image is fixed relative to the browser window

·scroll: The webpage scrolls When, the background image scrolls together relative to the browser window

6. Background positioning

Background positioning is used to control the position of the background image displayed on the web page.

The basic format is as follows:

background-position: Parameter table

Parameter value range:

·Numeric parameter with length unit

·top: top alignment relative to the foreground object

·bottom: bottom alignment relative to the foreground object

·left: Aligned to the left relative to the foreground object

·right: Aligned to the right relative to the foreground object

·center: Aligned to the center of the foreground object

·Proportion relationship

If the center in the parameter is used in front of another parameter, It means horizontal centering; if used after another parameter, it means vertical centering.

10. Control the style of the list

List is a very useful display method in HTML. It can neatly arrange related parallel content vertically, making the web page look neat and professional, and giving viewers a clear feeling.

The style sheet adds some functions to the list. The style of the control list includes three parts: list style, graphic symbol, and list position.

1. List symbols

List symbols refer to the symbols displayed in front of each list item.

The basic format is as follows:

list-style-type: parameter

Parameter value range:

·disc: circle

·circle: hollow circle

·square: square

·decimal: decimal number

·lower-roman: lowercase Roman numerals

·upper-roman: uppercase Roman numerals

·lower-alpha: lowercase Greek letters

·upper-alpha: uppercase Greek letters

·none: unsigned display

parameters disc in is the default option.

2. Graphic symbols

Graphic symbols mean that the bullet points of the original list can be replaced by graphics.

The basic format is as follows:

list-style-image: URL

URL is the address of the graphic file used to replace bullets, and you can use relative addresses or absolute addresses.

3. List Position

List Position describes where the list is displayed.

The basic format is as follows:

list-style-position: parameter

Parameter value range:

·inside: displayed inside the BOX model

·outside: displayed outside the BOX model

A new one appears here Concept: BOX model. BOX refers to a container that contains objects to which style rules are applied. The detailed introduction will be given later.

Eleven. Control the style of the user interface

On a web page, the mouse is usually in the shape of an arrow, becomes a hand shape when pointing to a link, and becomes an hourglass shape when waiting for the web page to be downloaded... This seems to be a convention. Although this design allows us to know the current status of the browser or what it can do, it seems that it cannot fully meet our needs. Take a link as an example. It can point to a help file, or it can go forward one page or back one page. For so many functions, the same hand-shaped mouse alone cannot explain the problem. Fortunately, CSS provides up to 13 mouse shapes for us 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 shape

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"

Lower right arrow shape

style="cursor:sw-resize"

Lower left arrow shape

The above is the content of From Basics to Mastery: CSS Practical Tutorial (2). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!