Familiar with some CSS syntax attributes

CSS syntax Manual (I) font attributes

 

1. Font-family

Function: used to change the font of HTML labels or elements. You can set a list of available fonts. The browser selects fonts from front to back. Powered by 25175.net

Syntax: {font-family: font 1, font 2,..., font n}

Example:

 

Font

2. Font-style

Function: displays text in italic, italic, or italic.

Value:

Normal-normal

Italic-italic

Oblique-italic

Example:

 

Normal

Italic

Oblique

3. Font-variant

Function: switches between normal and small uppercase letters.

Value: Normal-if the flag inherits the small-caps setting of the parent element, the keyword normal sets font-variant to the normal font.

Small-Caps-display lowercase letters as uppercase letters with smaller fonts.

Example:

 

Font-variant

4. Font-weight

Function: used to set the font gray scale to generate the font's deep and light versions.

Value:

Normal grayscale-normal

Relatively gray-bold, bolder, light, and lighter

Gradient grayscale-values: 100,200,300,400 (equivalent to normal), 500,600,700 (equivalent to bold), and 800,900.

Example:

 

Font grayscale

5. Font-size

Function: controls the text font size with various measurement units.

Value: There are four Numerical Methods

Absolute size-use a specific font size table to define the font size. You can take one of the following values: XX-small, X-small, small, medium, large, X-large, and XX-large. Different fonts have different numbers.

Relative Dimensions-larger and smaller are relative to the font size of the parent container.

Length-in millimeters (mm), centimeters (CM), inches (in), points (PT), pixels (PX), Pica (PC ), ex (the height of lowercase letter X) or EM (the font height) as the unit of measurement.

Percentage-the percentage of the font size of the parent element.

Example: font size

 

6. Font

Function: Short for Attribute. It provides a shortcut for setting all attributes of a font.

Syntax: {Font: font attribute 1 Font attribute 2... Font attribute n}

Numeric value: the font property value is the value listed above. You can also set the line-height attribute (see text attribute) for the line spacing attribute. The content sequence is: font-style; font-variant; font-weight; font-size; line-height; font-family. Some attributes can be omitted. attribute values are separated by spaces.

Example:

 

Font

 

CSS syntax Manual (ii) text attributes

 

 

1. Letter-spacing

Function: controls the spacing between letters of a text element. The configured distance applies to the entire element. Powered by 25175.net

Value:

Normal-normal spacing. Reset the spacing between characters to the normal spacing of all fonts and font sizes.

Length-set the padding length. A positive value indicates the normal length inherited by the parent element, and a negative value indicates that the limit value is equal to the normal length. Specify the following measurement units after the number: Mm, CM, In, Pt (points), PX (pixels), PC (PICA), Ex (lowercase letter x height ), EM (the width of uppercase letter M ).

Example:

 

Letter-spacing

2. Line-height

Function: sets the line spacing of text in an element.

Value:

Normal-normal height, usually 1-times the font size, which is the default setting.

Number-set the distance between the text lines in the element to the font size multiplied by the number. For example, if the font size is 10 and the line-height is set to 2, the spacing is 20 points.

Length-set the spacing with the standard measurement unit. Some are absolute and some are relative. For details, see Xiaoming in letter-spacing.

Percent-also sets the padding for the percentage of the font size.

 

Example: This is the first line.

This is the second line.

This is the third line.

3. Text-align

Function: horizontal alignment of text in the element box.

Value:

Left-left alignment

Right-right alignment

Center-center

Justify-evenly distributed, generating long rows

Example:

 

To left

Center

Right

4. Text-Decoration

Function: This function is used to control the effects of text elements. It is especially suitable for text effects such as notes and warnings.

Value:

None-No text modifier, default setting.

Underline-underline.

Overline-dashes.

Line-through-strikethrough.

Blink-flashing.

Multiple keywords can be combined in the same statement.

Example:

 

Underline

Overline

5. Text-indent

Function: Used to scale down the first line of a paragraph.

Value:

Length-set the size of the first line to the specified measurement unit. Some units are relative and others are absolute. For details, see the description of the letter-spacing attribute.

%-Set the first line to scale in as long as the percentage.

Example:

 

The first line of a paragraph.

6. Text-Transform

Function: sets the uppercase standard for one or more elements.

Value:

None-do not change the uppercase and lowercase letters of the text.

The first letter of a word in the capitalize-element is capitalized.

Uppercase-set all text to uppercase.

Lowercase-set all text to lowercase.

Example:

 

A text-transform example.

A text-transform example.

A text-transform example.

7. Vertical-align

Function: vertical alignment.

Value:

Baseline-align the lower-case letter baseline of two elements.

Sub-subscript.

Super-superscript.

Top-top alignment.

Text-top-align the top of the text.

Middle-midline alignment.

Bottom-bottom line alignment.

Text-bottom line alignment of letters.

Percentage-increase or decrease the online element baseline by a certain percentage based on the parent element baseline and combine it with the line-height attribute of the element.

Example:

 

A1x2

8. Word-spacing

Function: controls the spacing between elements and words in text. The configured spacing applies to the entire element. A larger or smaller spacing cannot be inserted between a word.

Value:

Normal-normal spacing.

Length-if the length is positive, the normal length inherited from the parent element is added. If the length is negative, the length is subtracted.

Example:

 

A word spacing example

CSS syntax Manual (3) text filling, border, border, and location attributes (1)

 

 

I. Box filling property powered by 25175.net

1. Padding-bottom

Padding-left

Padding-top

Padding-Right

Function: border is available for all containers. These attributes set the distance between the border and the elements in the box.

Value:

Length-set relative or absolute values. Specify the following measurement units after the number: Mm, CM, In, PT, PX, PC, ex, Em. The EM and ex settings generate the font size relative to the parent font.

%-Set the border as the percentage of the parent element.

Note: The fill value cannot use a negative value, but it can be a decimal number.

[Url = article. asp? Typeid =] CSS [/url] YU/01/01 .htm" target = _ blank> example

2. padding

Function: it is a short attribute used to set the spacing between borders and content elements in the upper, lower, left, and right directions.

Value: Same as the preceding value.

Note: a single value can be used to fill the edges in an equal distance. If two values are used, the first value is used for upper and lower filling, and the second value is used for Left and Right filling. If three values are used, top fill, left fill, and bottom fill. If four values are used, they are respectively used for top, right, bottom, and left fill. You can mix numeric values.

Example

Ii. Border attributes

1. Border-top

Border-bottom

Border-Right

Border-left

 

Function: these four attributes are short-lived attributes, respectively set the top, bottom, right, left border attributes. By default, no style settings are set for the border.

Value: There are three border attributes.

Border-width: The value is thin, medium, thick, or the specified length.

Border-style: Set the background pattern used to modify the border. You can set the following styles: None, dotted, doshed, solid, double, groove, ridge, inset, and outset.

Border-color: Set the border color.

Example

2. Border-top-Width

Border-bottom-Width

Border-Right = width

Border-left-Width

Function: Set the Border thickness respectively.

Value:

Thin-thin border.

Medium-moderate width.

Thick-thick line.

Length-set the Border Width in relative or absolute units.

Example

3. Border-Width

Function: Short for Attribute. You can set the width of the four borders at the same time.

Value:

Thin-thin border.

Medium-moderate width.

Thick-thick line.

Length-set the Border Width in relative or absolute units.

Description: see the description of padding.

Example:

 

Border attributes

4. Border-color

Function: This attribute is short for setting the color values of the four borders.

Value: You can use a color name or an RGB value. If a single color is specified, the four borders are displayed in this color. If two colors are specified, the order is upper, lower, and left. If three colors are specified, the order is upper, left, and lower; if four colors are specified, the order is top, right, bottom, left.

Note: The color name is as follows:

Aqua, black, blue, Fuchsia, gray, green, lime, maroon, navy, Olive, purple, Red, silver, teal, white, yellow.

Three methods can be used to specify RGB values.

# Rrggbb; RGB (R, G, B); RGB (R %, G %, B %)

Example:

 

Border color

5. Border-style

Function: displays borders and specified border styles.

Value:

None-the border is not displayed, which is the default value.

Dotted-dot line

Dashed-Cable

Solid-solid line

Double-double line

Groove-3D cabling

Ridge-3D ridge Cable

Inset-make the page sink

Outset-make the page feel surfaced

Note: not all browsers can display Ridge, inset, and outset styles. Some browsers draw all borders into solid lines.

 

 

Example1

Example2

6. Border

Function: Short for all border attributes.

Value:

Border-width-value: thin, medium, thick, or specified length.

Border-style-values: None, dotted, dashed, solid, double, groove, ridge, inset, and outset

Border-color-available color name or RGB value.

Note: unlike other shorthand attributes, each setting can only take one value. This attribute uniformly applies to all sides of the box.

Example:

 

This is a example

 

CSS syntax Manual (4) text filling, border, border and location attributes (2)

 

3. Box boundary attributes

1. Margin-bottompowered by 25175.net

Margin-left

Margin-Right

Margin-top

Function: these four attributes are used to set the distance between an element and its adjacent elements. They can be defined by length or the percentage of width relative to the parent text, or automatically processed.

Value:

Length-set the relative or absolute distance between the corresponding edge of the element and the edge of the box. Valid units: Mm, CM, In, PX, PT, pica, ex, em...

%-Set the boundary size as the percentage of the parent element width.

Auto-auto. This setting takes the default border of the browser.

[Url = article. asp? Typeid =] CSS [/url] YU/02/01 .htm"> example

2. Margin

Function: Short for setting all boundaries of an element. This is used to describe the distance from the edge of the element content to the edge of the box. This area is always transparent and you can see the background of the following page.

Value:

Length-same as before

%-Set the boundary size as the percentage of the parent element width.

Auto-auto. This setting takes the default border of the browser.

Example

 

Iv. Box position attributes

1. Height

Function: sets the element height. The browser adjusts the Image Based on the height.

Value:

Length-mm, CM, PX, PT ,.....

Auto-auto.

2. Width

Function: sets the element width. The browser adjusts the Image Based on the width.

Value:

Length:-Mm, CM, In, PX, PT ,......

Percent-set the graph size to the percentage of the width of the parent element.

Auto-Automatic Adjustment

3. Float

Function: This function is used to place elements outside of the general element stream layout rules.

Value:

None-no changes.

Left-place the content of other elements to the right of the floating element.

Right-place the content of other elements to the left of the floating element.

4. Clear

Function: Allows or disables the placement of other elements (usually linear) next to a specified element ).

Value:

None-unrestricted.

Left-place the element below the floating element on the left

Right-place the element under the floating element on the right

Both-float elements cannot be placed on both sides

 

CSS syntax Manual (5) color and background attributes

 

1. Color

Function: sets the color of the foreground or element. Powered by 25175.net

Value: use the color keyword or RGB value.

Example:

 

Text color (keyword)

Text color (# rrggbb)

Text color [RGB (RR, GG, BB)]

Text color [RGB (R %, G %, B %)]

2. Background-color

Function: sets the background color of a page or page element.

Value:

Color-available color name or RGB Value

Transparent-transparent, making the page background the Default background.

Example:

 

Background Color

3. Background-Image

Function: defines the background image.

Value:

None-no image as background

URL-provide the URL of the Graphic File

Note: the background-color attribute can also be used when no image is found.

Example:

 

Graphic background

4. Background-repeat

Function: controls whether the graphic backgrounds are arranged repeatedly.

Value:

Repeat-vertical and horizontal repetition, default value

Repeat-X-horizontal repetition

Repeat-y-vertical repetition

No-repeat-no duplicates

Note: This attribute is used with the background-image and background-position attributes.

Example:

 

Horizontal repeat

5. Background-Attachment

Function: Specifies whether the background of an element is scrolled along with the element or fixed to a certain position on the page.

Value:

Scroll-scroll with elements

Fixed-fixed

Note:

The default value is scroll. This attribute is used with the background-image attribute.

6. Background-Position

Function: used to locate the element background in a space.

Value:

Length-set the start point of the edge of the element frame in relative or absolute units, and give the coordinates under the unit.

Percentage-percentage indicates the position where the browser starts to show the image on the edge of the box. You can repeat this value to provide the vertical and horizontal start points.

Vertical Position-set the start point of the vertical direction. The keyword is top, center, and bottom.

Horizontal position-set the start point of the horizontal direction. The keywords are left, center, and right.

For example, both top left, left top, and 0% 0% indicate that the upper left corner of the graph starts from the upper left corner of the element box.

Example:

 

Body {background-image: url(logo.gif); background-position: 50% 50%}

This statement sets the basic class of the body to center the background image on the page.

7. Background

Function: Abbreviation attribute. You can set all background attributes.

Value:

Background-Attachment

Background-color

Background-Image

Background-Position

Background-repeat

For details about the preceding values, see the attributes section.

 

CSS syntax Manual (6) Classification attributes

 

 

1. Display

Function: changes the display value of an element. You can change the display value of an element type online, block, or list item. Powered by 25175.net

Value:

None-do not show elements

Block-block display, set the line break before and after the element

Inline: deletes the branch character before and after an element to merge it into other element streams.

List-item-set the element to a row in the list

Note: You can use the display property value to generate the insert title and add a list or display the image online.

2. white-space

Function: controls the white space in the element.

Value:

Normal-keep the default value and wrap the line at the browser page length.

Pre-requires that the document be displayed in the source code format.

Nowarp-do not allow visitors to wrap in the element.

3. List-style-type

Function: Specifies the identifier or number type used by the configuration.

Value:

None-No operator

Disc-disc type specifier (solid circle)

Circle-circular emphasize character (hollow circle)

Square (solid)

Decimal-decimal number

Lower-Roman-lower-case Oracle accent

Upper-Roman-UPPERCASE Oracle accent

Lower-alpha-lowercase letter accent

Upper-alpha-uppercase letter specifier

Example:

 

Item1

Item2

Item3

4. List-style-Image

Function: used to replace the standard identifier in the list with the selected image.

Value:

No Image

URL-graphic URL

Example:

 

Item1

Item2

Item3

5. List-style-Position

Function: used to set the scale-in or scale-out of the delimiters. This attribute enables the delimiters to stand out from the list or align with the list items.

Value:

Inside-shrink, align the emphasis with the left boundary of the configuration item content

Outside-stretch, highlighted outside the left boundary of the configuration item content

 

6. List-style

Function: Short for Attribute. Put all the configuration attributes in one statement.

Value:

List-style-type

List-style-Position

List-style-Image

For details about these values, see the attribute section.

Example:

 

Item1

Item2

Item3