CSS (c): Basic properties

1. Property Selector

E[att]: Select the e element with the ATT attribute.

1 / * Get the P element with the class attribute * / 2 p[class]{3    color:red; 4 }56<class= "a">class: A</p>

E[att= "Val"]: Select the e element that has the ATT attribute and the attribute value equals Val.

1 / * Get the P element with the value "a" for the class attribute * / 2 p[class= "A"]{3    color:red; 4 }56<class= "a">class: A</p>

E[att~= "Val"]: Select the list of words with the ATT attribute with a space-delimited attribute value, one of which equals the E element in Val.

1 / * Get the P element with a space-delimited "a" in the class attribute value * / 2 p[class~= "A"]{3    color:red; 4 }56<class= "B a C"> Class:b a C</p>

E[att^= "Val"]: Select the e element with the ATT attribute and the property value as a string starting with Val.

1 / * Get the P element with the class attribute value beginning with "a" * / 2 p[class^= "A"]{3    color:red; 4 }56<class= "abc"> CLASS:ABC</p>

E[att$= "Val"]: Select the e element that has the ATT attribute and the property value is the string ending in Val.

1 / * Get the P element with the class attribute value ending with "a" * / 2 p[class$= "A"]{3    color:red; 4 }56<class= "BCA"> CLASS:BCA</p>

E[att*= "Val"]: Select the e element with the ATT attribute and the property value as a string containing Val.

1 / * Get the Class Property value containing the P element of "B" * / 2 p[class*= "B"]{3    color:red; 4 }56<class= "abc"> CLASS:ABC</p>

E[att|= "Val"]: Select the e element with the ATT attribute and the attribute value to begin with Val and the string separated by the connector "-".

1 / * Get the class attribute value starting with "a" and the P element of the string separated by the connector "-" */ 2 p[class|= "A"]{3    color:red; 4 }56<class= "A-BC"> CLASS:A-BC</p>

2.CSS Properties

• Font-family

The Font-family property specifies the font of an element.

Font-family can save multiple font names as a "fallback" system. If the browser does not support the first font, it will try the next one.

There are two types of font family names:

• family-name -Specified series name: the name of the specific font, for example: "Times", "Courier", "Arial".
• generic-family -Usually the font family name: For example: "Serif", "Sans-serif", "cursive", "Fantasy", "monospace".

The use of a particular font family (Geneva) depends entirely on whether the font family is available on the user's machine, and this property does not indicate any font downloads. Therefore, it is strongly recommended to use a common Word system column name as a posterior.

Note: Each value is separated by commas.

1 / * Set the font for P elements * / 2 p{3    font-family: "Times New Roman", Georgia,serif; 4 }56<p>times New Roman</p  >

• Font-size

Sets the font size of the element. Note that it actually sets the height of the character box in the font; the actual character glyphs may be taller or shorter (usually shorter) than these boxes. The default font size of the browser is generally around 16px.

1 / * Set the font size of P element to 16px * / 2 p{3    font-size:16px; 4 }56<p>font-size:16px</p  >

• Font-weight

To set the thickness of the text, it is desirable to 100~900 the whole hundred value, the numeric value 400 equals the keyword normal,700 equivalent to the bold. The font bold for each numeric value must be at least as thin as the next minimum number, and at least as thick as the next maximum number.

1 / * Set the font weight of the P element to "bold" * / 2 p{3    font-weight:bold; 4 }56<p>font-weight:bold</ P >

• Font-style

This property setting uses italic, italic, or normal fonts. Italic fonts are typically defined as a separate font in the font family. In theory, a user agent can calculate an italic font based on a normal font.

1 / * Set the font for the P element to italic * / 2 p{3    font-style:italic; 4 }56<p>font-style:italic</ P >

• Font

The font shorthand property sets all font properties in a declaration.

The properties that can be set are (in order): "Font-style font-variant font-weight font-size/line-height font-family"

The values for font-size and font-family are required. If another value is missing, the default value is inserted, if there is a default value.

Note: The Line-height property sets the space between the line and the row.

1 / * Set the font for the P element to italic, bold, 16px in size, line height 20px, Microsoft Jas Black font * / 2 p{3    font:italic bold 16px/20px "Microsoft Jas Black"; 4 }56<p>font:italic bold 16px/20px "Microsoft Ya Hei" </ P >

• Color

The Color property specifies the colors of the text.

This property sets the foreground color of an element (in HTML representation, the color of the element text), and the raster image is not affected by color. This color is also applied to all borders of the element, unless overridden by a border-color or another border color property.

1 / * Set the text color of the P element to red * / 2 p{3    color:red; 4 }56<p>color:red</p  >

• Text-decoration

The Text-decoration property specifies the adornment that is added to the text.

Note: The decorated color is set by the "Color" property.

This property allows you to set some kind of effect on text, such as underlining. If the descendant elements do not have their own decorations, the decorations set on the ancestor elements "extend" to the descendant elements.

1 / * Set the text decoration of the P element to underline * / 2 p{3    text-decoration:underline; 4 }56<p>text-decoration:underline</  p>

• Text-shadow

The Text-shadow property joins one or more shadow text. The property is a shadow, separated by commas for each 2 or 3 length value specified and an optional color value.

The desirable values and descriptions are as follows:

Value	Describe
H-shadow	Necessary. The position of the horizontal shadow. Negative values are allowed.
V-shadow	Necessary. The position of the vertical shadow. Negative values are allowed.
Blur	Optional. Blur the distance.
Color	Optional. The color of the shadow.

1 /* Set the text shadow of the P element to the right and bottom offsets 3px, the blur distance is 2px, the color is red */ 2 p{3    text-shadow:3px 3px 2px red; 4 }56<p>text-shadow:3px 3px 2px Red</  p>

• Width

The Width property sets the widths of the elements.

Description: This property defines the width of the element's content area, which can be increased by padding, borders, and margins outside the content area. This property is ignored in inline non-replacement elements.

1 / * Set P element width to 100px * / 2 p{3    width:100px; 4 }56<p>width:100px</p  >

• Height

The Height property sets the altitude of the element.

1 / * Set P element height to 100px * / 2 p{3    height:100px; 4 }56<p>height:100px</p  >

• Margin

The margin shorthand property sets all margin properties in a declaration. This property can have between 1 and 4 values. The vertical adjacent margins of block-level elements are merged, while the inline elements do not actually occupy the upper and lower margins. The left and right margins of the inline elements are not merged. Similarly, the margins of floating elements are not merged. Allows you to specify a negative margin value.

When four values are taken, they represent: top, right, bottom, left.

When you take three values, they represent: top, left, and bottom.

When you take two values, they represent: up and down, around.

1 / * Set the margin of the P element to the bottom right and the left by: 5px, 10px, 15px, 20px * / 2 p{3    margin:5px 10px 15px 20px; 4 }56<p>margin:5px 10px 15px 20px</  p>

• Padding

The padding shorthand property sets all the fill properties in a declaration. This property can have between 1 and 4 values.

The order rules for the Padding property are consistent with the margin property.

1 / * Set the inner margin of the P element to the bottom right and left: 5px, 10px, 15px, 20px * / 2 p{3    padding:5px 10px 15px 20px; 4 }56<p>padding:5px 10px 15px 20px</  p>

CSS (c): Basic properties