CSS tutorial Part2 [background, text, font] (Excerpted from W3C School)

ArticleDirectory

• CSS background
• CSS text
• CSS font

CSS background

CSS allows the application of solid colors as the background, and allows the use of background images to create quite complex effects. CSS is far above HTML.

 

Background Color

You can use the background-color attribute to set the background color for the element. This property accepts any valid color value. Background-color cannot be inherited. The default value is transparent. Transparent is transparent. That is to say, if a background color is not specified for an element, the background is transparent so that the background of the ancestor element can be visible.

P {background-color: Gray ;}

 

Background Image

To put an image into the background, you must use the background-image attribute. To set a background image, you must set a URL value for this attribute:

Body {background-image: URL (/I/eg_bg_04.gif );}

Most backgrounds are applied to the body element, but not limited to this.

 

Duplicate background

To tile the background image on the page, you can use the background-repeat attribute. Attribute Value repeat causes the image to be tiled horizontally and vertically, just as the background image is typically used. Repeat-X and repeat-y lead to duplicate images in the horizontal or vertical directions, respectively. No-repeat allows tiled images in any direction. By default, the background image starts from the upper left corner of an element.

Body {

Background-image: URL (/I/eg_bg_03.gif );

Background-repeat: Repeat-y;

}

 

Background

You can use the background-position attribute to change the position of an image in the background. The following example places a background image in the center of the body element:

Body {

Background-image: URL ('/I/eg_bg_03.gif ');

Background-repeat: No-Repeat;

Background-Attachment: fixed;

Background-position: center;

}

Set the background-attachment attribute to "fixed" to ensure that this attribute works properly in Firefox and opera.

 

Percentage value

The expression of the percentage value is more complex. The percentage value is applied to both elements and images.

Suppose you want to center the image in its element with a percentage value:Background-position: 50% 50%

Suppose you want to use the percentage value to place the image in the bottom right corner of the element:Background-position: 100% 100%

 

Length Value

The Length Value refers to the offset in the upper left corner of the element's padding area. The offset is the upper left corner of the image. If the value is set to 50px 100px, the upper left corner of the image will be at the right of 50 pixels in the upper left corner of the element's padding area, and the position of 100 pixels down.

 

Background Association

If the document is long, the background image will also scroll as the document rolls down. The image disappears when the document rolls to a position that exceeds the image.

You can use the background-attachment attribute to prevent such scrolling. With this attribute, you can declare that the image is fixed (fixed) relative to the visible area, so it will not be affected by scrolling:

 

CSS text

CSS text attributes can define the appearance of text. By using text attributes, you can change the text color, Character spacing, align the text, decorate the text, indent the text, and so on.

 

Indent text

Indent the first line of a paragraph on a web page, which is the most common text formatting effect. CSS provides the text-indent attribute, which facilitates text indent. By using the text-indent attribute, the first line of all elements can be indented to a given length, or even a negative value. The most common purpose of this attribute is to indent the first line of a paragraph. The following rule will indent the first line of all paragraphs by 5 EM:

P {text-indent: 5em ;}

Note:In general, text-indent can be applied to all block-level elements, but this attribute cannot be applied to intra-row elements. Text-indent attributes cannot be applied to replacement elements such as images. However, if an image exists in the first line of a block-level element (such as a paragraph), it will move with the rest of the text in the line.

Tip:If you want to "indent" the first line of an element in a row, you can use the left margin or the outer margin to create this effect.

 

Horizontal Alignment

Text-align is a basic attribute that affects the alignment of text lines in an element. To center block-level elements or table elements, you must set the Left and Right outer margins on these elements.

Text-align: center and <center>

You may think that the text-align: center and <center> elements have the same effect, but they are actually different.. <Center> not only affects the text, but also centers the entire element. Text-align does not control the alignment of elements, but only affects internal content. Elements are not moved from one segment to the other, but the text is affected.

Justify

The last horizontal alignment attribute is justify. In the aligned text at both ends, the left and right sides of the text line are placed on the inner boundary of the parent element. Then, adjust the interval between words and letters so that the length of each row is exactly the same.Text alignment at both ends is common in printing.

 

Word Interval

The word-spacing attribute can change the standard interval between words. The default value of normal is the same as that of 0.

Letter Interval

The difference between the letter-spacing attribute and word-spacing attribute is that the interval between letters is modified by the interval between characters or letters.

 

Character conversion

The text-transform attribute processes the case of text. As an attribute, text-transform may be irrelevant. However, this attribute is useful if you suddenly decide to change all H1 elements to uppercase. You do not have to modify the content of all H1 elements separately. You only need to use text-transform to complete the modification.

 

Text Decoration

Next, we will discuss the text-decoration attribute, which is a very interesting attribute and provides many very interesting behaviors. In general, the text without decoration is the default appearance, but it is not always the same. For example, the link is underlined by default. If you want to remove the underline Of the hyperlink, you can use the following CSS to do this:

A {text-Decoration: none ;}

 

Process blank characters

The white-space attribute affects the processing of spaces, line breaks, and tab characters in the source document by the user agent.

 

Text direction

If you are reading an English book, you will read it from left to right, from top to bottom. This is the English stream direction. However, not all languages do. We know that ancient Chinese is read from right to left, including Hebrew and Arabic.

The direction attribute affects the writing direction of the text in the block-level element, the direction of the column layout in the table, the direction of the element box filled with content horizontally, and the end of the last row in the alignment element at both ends.

 

 

CSS font attributes

Font: Font attributes

Set all font attributes in a declaration. (Comprehensive Writing of many font attributes)

 

 

Font-family: Specifies the font family of elements.

 

Font-size: The font size can be set for attributes. (In fact, it sets the height of the character box in the font.)

 

Font-style: Attribute defines the Font Style

 

Font-weight: Property to set the text width (The numeric value 400 is equivalent to the normal keyword, and 700 is equivalent to the bold)