CSS Learning Notes (ii): Features

First, color characteristics

1. Foreground color: Color

Specify the foreground color in one of 3 ways, RGB color, #16进制编码, color name:

Color:rgb (100,100,100); color: #ee3e80; Color:darkcyan

2. Background color: Background-color

3. Transparency: Opacity,rgba

Color:rgba (0,0,0,0.5); opacity:0.5;

4. HSL Color and Hsla:

The three attribute values of the HSL color are hue (0~360), saturation (percentage), lightness (percentage). Hsla is a more transparent (0~1) representation than HSL.

Background-color:hsla (0,100%,100%,0,5)

Second, the font

1. Font selection: font-family

You can specify multiple fonts, separated by commas, to prevent some fonts from being installed by the user's browser.

Font-family:georgia, times, serif;

2. Font Size: font-size

There are 3 types of font sizes, namely, pixels, percentages, em values:

Pixels: PX Indicates

Percentage: A percentage indicates that 100% means 16px

EM value: 1em is equal to the width of a letter M

3. Bold: Font-weight

Causes the text to appear in bold, bold, and normal thickness.

Font-weight:bold;

4. Italic: Font-style

Causes text to appear in italics, italic as italic, oblique italic, normal as normal font.

Font-style:italic;

5. Case: Text-transform

Makes the text appear in case, uppercase is uppercase, lowercase is lowercase, and capitalize is capitalized.

Text-transform:uppercase;

6. Underline and Strikethrough: text-decoration

Optional values are: None, underline underline, overline top solid line, Line-through strikethrough, blink text flashing

Text-decoration:underline

7. Line spacing: line-height

The line spacing represents the distance from the lower edge of the letter to the upper edge of the next line of letters, usually denoted by an EM value, which can be changed by the size of the letter the user adjusts.

Line-height:1.4em

In addition to line spacing, there are also letter spacing letter-spacing and word spacing word-spacing.

8. Alignment: Text-align

Used to control the alignment of text, the optional value is: left,right,center,justify (justify)

9. Vertical alignment: Vertical-align

For inline elements, the optional value is: Baseline,sub,super,top,text-top,middle,bottom,text-bottom

10. Text indent: text-indent

Indents the first line of text, either PX or EM.

Text-indent: -9999px;

The indent value can be negative, moving the text left out of the screen.

11. Text Projection: Text-shadow (CSS3 characteristics)

Text projection to specify 3 lengths and a color, the first length of the shadow in the left and right direction of the displacement, the second length of the shadow in the upper and lower direction of the offset, the third length is the blur degree of shadow, the last color is the color of the shadow

Text-shadow: -1px-2px 7px #111111;

12. First letter or first line text:: First-letter,: First-line

: First-letter and: First-line is not an attribute, it should be called as a pseudo-element. Specify the pseudo-element at the end of the selector to select the object.

P.intro:first-letter {font-size: 200%;} P.intro:first-line {font-weight:bold;}

13. Link Style:: Link,: Visited

: Link and: Visited are pseudo-classes. : Link represents the styles of links that have not been visited. : visited represents those link styles that have been clicked.

{color: deeppink;} a:visited {color: black;}

14. Corresponding User:: Hover,: active,: Focus

These three are pseudo-classes.

: hover indicates that the cursor is in effect when placed on an element and is not valid for touch screen

: Active indicates action, such as button press or link is clicked

: Focus indicates that the element has the focus when it is active

{Background-color: #665544:} input.submit:active {Background-color: chocolate;}

Three, feature selector

P[class] All <p> elements containing the class attribute p[class= ' dog '] class attribute value ' dog ' <p> element p[class~= ' dog '] class attribute value is a space-delimited list of words, There is a specific <p> element for ' dog ' p[attr^ ' d '  , where the value of one attribute starts with "D" p[attr* "do"]  specific <p> element, where the value of one attribute contains "do" p[attr$ "G"]  specific <p> elements, where an attribute ends with "g"

CSS Learning Notes (ii): Features