CSS (3): basic attributes and css basic attributes

CSS (3): basic attributes and css basic attributes
1. Attribute Selector

E [att]: select an Eelement with the att attribute.

1/* get the p element with class attributes */2 p [class] {3 color: red; 4} 5 6 <p class = "a"> class: a </p>

E [att = "val"]: select an Eelement with the att attribute and the attribute value is equal to val.

1/* obtain the p element of the class Attribute whose value is "a" */2 p [class = "a"] {3 color: red; 4} 5 6 <p class = "a"> class: a </p>

E [att ~ = "Val"]: select a list of words with the att attribute and the attribute value is separated by spaces. One of the eElements is equal to val.

1/* get the p element of "a" separated by spaces in the class attribute values */2 p [class ~ = "A"] {3 color: red; 4} 5 6 <p class = "B a c"> class: B a c </p>

E [att ^ = "val"]: select an Eelement of a string with the att attribute and Its Attribute Value starting with val.

1/* get the p element */2 p [class ^ = "a"] {3 color: red; 4} 5 6 <p class = "abc"> class: abc </p>

E [att $ = "val"]: select an Eelement of a string with the att attribute and Its Attribute Value ending with val.

1/* obtain the p element ending with "a" as the class property value */2 p [class $ = "a"] {3 color: red; 4} 5 6 <p class = "bca"> class: bca </p>

E [att * = "val"]: select an Eelement of a string with the att attribute and the attribute value is val.

1/* obtain the p element of the class Attribute Value containing "B" */2 p [class * = "B"] {3 color: red; 4} 5 6 <p class = "abc"> class: abc </p>

E [att | = "val"]: select the Eelement of a string with the att attribute and the attribute value starting with val and separated by the connector.

1/* obtain the p element of a string starting with "a" and separated with a connector "-" */2 p [class | = "a"] {3 color: red; 4} 5 6 <p class = "a-bc"> class: a-bc </p>

2. CSS attributes

• Font-family

The font-family attribute specifies the font of an element.

Font-family can store multiple font names as a "rollback" 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-Name of the specified series: the name of the specific font, such as "times", "courier", and "arial ".
• Generic-family-General font family names: for example, "serif", "sans-serif", "cursive", "fantasy", and "monospace.

Using a specific font family (Geneva) depends entirely on whether the font family is available on your machine; this property does not indicate any font downloads. Therefore, we strongly recommend that you use a general font family name as a back path.

Note:Each value is separated by a comma.

1/* set the font of the p element */2 p {3 font-family: "Times New Roman", Georgia, Serif; 4} 5 6 <p> Times New Roman </p>

• Font-size

Set the font size of the element. Note that it is actually set to the height of the character box in the font; the actual font may be higher or shorter (usually shorter) than these boxes ). The default font size of the browser is generally about 16 PX.

1/* set the font size of the p element to 16px */2 p {3 font-size: 16px; 4} 5 6 <p> font-size: 16px </p>

• Font-weight

Set the text width. The value ranges from 100 ~ The value of 900 is a hundred bits. The value of 400 is equivalent to the normal keyword, and 700 is equivalent to the bold. The font size of each numeric value must be at least as small as the next smallest number, and at least as thick as the next largest number.

1/* set the font width of the p element to "bold" */2 p {3 font-weight: bold; 4} 5 6 <p> font-weight: bold </p>

• Font-style

This attribute is set to italic, skewed, or normal. Italic fonts are generally defined as a separate font in the font family. Theoretically, the user agent can calculate an italic font based on the normal font.

1/* set the font of the p element to italic */2 p {3 font-style: italic; 4} 5 6 <p> font-style: italic </p>

• Font

Set all font attributes in a declaration.

Configurable attributes: "font-style font-variant font-weight font-size/line-height font-family"

The font-size and font-family values are required. If other values are missing, the default value is inserted, if any.

Note:The line-height attribute sets the space between rows.

1/* set the font of the p element to italic, bold, 16 Px in size, 20px in line height, and */2 p {3 font: italic bold 16px/20px ""; 4} 5 6 <p> font: italic bold 16px/20px "" </p>

• Color

The color attribute specifies the color of the text.

This attribute sets the foreground color of an element (in the HTML representation, the color of the element text). The Raster image is not affected by the color. This color will also apply to all borders of the element unless it is overwritten by border-color or another border color attribute.

1/* set the text color of the p element to red */2 p {3 color: red; 4} 5 6 <p> color: red </p>

• Text-decoration

The text-decoration attribute specifies the modifier added to the text.

Note: The color of the modifier is set by the "color" attribute.

This attribute allows you to set a certain effect on text, such as underline. If the descendant element does not have its own decoration, the decoration set on the ancestor element will "extend" to the descendant element.

1/* Set p to underline */2 p {3 text-decoration: underline; 4} 5 6 <p> text-decoration: underline </p>

• Text-shadow

The text-shadow attribute connects one or more shadow texts. The property is a shadow. Each two or three length values and an optional color value are separated by commas.

Optional values and descriptions are as follows:

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

 

 

 

 

 

 

 

1/* set the text shadow of the p element to the right and the offset 3px, the blur distance to 2px, and the color to red */2 p {3 text-shadow: 3px 3px 2px red; 4} 5 6 <p> text-shadow: 3px 3px 2px red </p>

• Width

The width attribute sets the width of the element.

Description: This attribute defines the width of the content area of an element. You can add the padding, border, and margin to the content area. This attribute is ignored for non-replacement elements in the row.

1/* set the p element width to 100px */2 p {3 width: 100px; 4} 5 6 <p> width: 100px </p>

• Height

The height attribute sets the height of an element.

1/* set the height of the p element to 100px */2 p {3 height: 100px; 4} 5 6 <p> height: 100px </p>

• Margin

Set all margin attributes in one declaration. This attribute can have 1 to 4 values. The vertical adjacent outer margins of block-level elements are merged, while the intra-row elements do not actually occupy the upper and lower margins. The left and right margins of the element in the row are not merged. Similarly, the margins of floating elements are not merged. You can specify a negative margin value.

The four values are shown as upper, right, lower, and left.

When three values are obtained, they are: Top, left, right, and bottom.

When two values are taken, they are: Up and down, left and right.

1/* set the margin of the p element to 5px, 10px, 15px, 20px */2 p {3 margin: 5px 10px 15px 20px on the top right and bottom left; 4} 5 6 <p> margin: 5px 10px 15px 20px </p>

• Padding

Set all fill attributes in a declaration. This attribute can have 1 to 4 values.

The order rules of the padding attribute are the same as those of the margin attribute.

1/* set the padding of the p element to 5px, 10px, 15px, 20px */2 p {3 padding: 5px 10px 15px 20px on the top right and bottom left; 4} 5 6 <p> padding: 5px 10px 15px 20px </p>