First, CSS common text properties
1. Color representation in CSS
1.1 Words that use color directly: red, green, blue
1.2 Hexadecimal representation of the color: #ff0000, #00ff00, six digits, 22 groupings, respectively, for red, green, blue 1.3 using RGB (0~255,0~255,0~255), three digits, respectively, the ratio of red to green and blue.
1.4rgba (); Fourth digit indicates transparency.
2. Font
2.1 font-weight: Font weight, 400 means norml,700 is bold;
Bold : bold; lighter: fine; You can also use 100-900 values.
2.2 font-style: Font style;
italic: Tilt; norml: normal;
2.3 font-size: Font size; px can be written in pixels;
200% indicates the browser default size (16px) of twice times =32px;
2.4 font-family: Font family, you can write the font name directly, or write the system column name.
Common Sub-Body series: serif: Liner body; Sans-serif: non-liner;
you can write multiple values, separated by multiple commas. The first one is preferred, and if there is no font, use it backwards. Usually the last one puts the font family name.
2.5 font abbreviation FORM:
Order must be: Font-weight font-style font-size/line-height font-family
Between different attributes, separated by a space;
Font-size/line-height must be a group, used/separated;
Font-family: Between multiple fonts, separated by commas.
3. Font Color
Color : Font colors, can be words, RGB, 16 binary and so on.
opacity: Transparency, optional value 0-1
The difference between 3.1 opacity and Rgba
The RGBA itself can set the color, and the opacity must be used with other properties,
RGBA is only the color transparency of the current element settings;
Opacity will make all text, background, and child elements in the current element transparent.
Line-height: Row height, can write PX units, can write numbers (indicating the default line spacing several times), can write% (indicating the percentage of default leading)
The important role of row height: to have single-line text centered vertically in the div.
Sets the height of the row =div, which allows the text to be centered vertically.
text-align: Sets the horizontal alignment of the area's insider level elements, which is not valid for block-level elements.
letter-spacing: Character spacing. The distance between the word and the word.
Text-decoration: Text retouching;
under-line: underline; Over-line: underline; Line-through: strikethrough; none: Remove underline;
Text-overflow: Set the display mode of extra text at the end of line;
Clip: Redundant text cut off; ellipsis: Extra text shows ellipsis (need to match white-space:nowrap; use);
White-sapce:nowrap, set the end of the Chinese line, continue to display.
3.2 Set line end display ellipsis (three lines of code, indispensable)
Overflow:hidden;
White-space:nowrap;
text-overflow:ellipsis;
text-shdow:2px (horizontal to right 2 pixels) 2px (vertical 2 pixels) 2px (blur degree, 0 means not blurry) blue; text Shadow,
A positive horizontal shadow distance indicates that the shadow is shifted to the right and the negative indicates the left shift.
Vertical Shadow Distance: A positive number indicates a shadow move down, and a negative number indicates a shadow move up.
Text-indent: First line indent.
-webkit-text-stroke:0.5px blue; text stroke.
-webkit: Indicates that only the WebKit kernel browser is in effect, common Chrome,safari
Second, CSS common background properties
1, background-color: Background color.
2, Background-image:url (); background image. When the background and background are present, the background map covers the background color .
3, Background-repeat: Background map repeating mode
no-repeat: Uneven paving;
repeat-x:x axis Tile;
Repeat-y:y axis Tile;
Repeat: tiled;
4, Background-size: background map size;
Specify width Height: can write px, can also write% (parent container width high%)
When writing two attributes, indicate width height, respectively
When writing an attribute, the width is expressed, and the height will be equal to the zoom
Contain: The picture is scaled until the width or height of the large side is scaled to 100%. (may lead to shorter side <100%, picture cannot cover all areas)
cover: The picture light pen is scaled until it is scaled to 100% by the width or height of the small side. (May cause longer side >100%, resulting in picture not showing)
5, background-position: Background image offset.
Specify location: left/center/right top/center/bottom
When a value is written, the other default is centered.
Specify coordinates: two properties indicate horizontal displacement, vertical displacement, respectively.
coordinates can be either pixel units or%
when writing pixels px units: Positive shift right, negative shift left, vertical direction: Positive Move down, negative number up.
when writing%: Generally write only positive numbers. Indicates that the width of the image is removed, and the remaining white space is distributed proportionally.
background-position:30%; horizontal to remove the width of the picture, the remaining area 3:7 points.
6. List
List-style: Modifies the style of the list's small dots.
None: Remove small dots
URL (); You can use a URL to import a small picture, as a list of
Float: Floats can be implemented so that block-level elements are displayed on a single line.
CSSC Common Styles
