Quick query of common CSS attributes

Quick query of common CSS attributes

There are too many attributes. it is much easier for me to quickly query tables without going deep into the WEB. Note that the directories at the beginning will be updated constantly.

CSS Font attributes)

Attribute description CSS
Font sets all font attributes in a declaration. 1
Font-family specifies the font family of the text. 1
Font-size specifies the font size of the text. 1
Font-size-adjust is the aspect value specified by the element. 2
Font-stretch: contract or stretch the current font family. 2
Font-style specifies the font style of the text. 1
Font-variant specifies whether text is displayed in small uppercase letters. 1
Font-weight specifies the font width. 1

CSS Text attributes (Text)

Attribute description CSS
Color sets the text color. 1
Direction specifies the direction/writing direction of the text. 2
Letter-spacing: Set the Character spacing. 1
Line-height: Set the Row height. 1
Text-align specifies the horizontal alignment of the text. 1
Text-decoration specifies the decoration effect added to the text. 1
Text-indent specifies the indentation of the first line of a text block. 1
Text-shadow specifies the shadow effect to be added to text. 2
Text-transform controls the case sensitivity of text. 1
Unicode-bidi sets the text direction. 2
White-space specifies how to process white spaces in elements. 1
Word-spacing: Set the word spacing. 1
Hanging-punctuation specifies whether punctuation marks are located out of the box. 3
Punctuation-trim specifies whether to trim punctuation. 3
Text-align-last specifies how to align the last line or the Line adjacent to the forced line break. 3
Text-emphasis applies the highlight and the foreground color of the highlight to the text of the element. 3
Text-justify specifies the Alignment Method used when text-align is set to "justify. 3
Text-outline specifies the outline of the text. 3
Text-overflow specifies what happens when a text overflow contains elements. 3
Text-shadow adds a shadow to the text. 3
Text-wrap specifies a line feed rule for text. 3
Word-break specifies the line feed rules for non-Chinese-Japanese text. 3
Word-wrap allows you to split long words and wrap them into the next line.

CSS Background attributes (Background)

Attribute description CSS
Set all background attributes in a declaration. 1
Background-attachment sets whether the background image is fixed or scrolled along the rest of the page. 1
Background-color sets the background color of the element. 1
Background-image sets the background image of the element. 1
Set the start position of the background image. 1
Background-repeat specifies whether and how to repeat the background image. 1
Background-clip specifies the plotting area of the background. 3
Background-origin specifies the location of the background image. 3
Background-size specifies the size of the background image. 3

Block attributes: (Block)

Character spacing letter-spacing: normal; value text-align: justify; (both ends alignment) left; (left alignment) right; (right alignment) center; (center) indent text-indent: value px; vertical-align: baseline; (baseline) sub; (subscript) super; (subscript) top; text-top; middle; bottom; text-bottom; word spacing word-spacing: normal; Numeric space white-space: pre; (Reserved) nowrap; (no line feed) display: block; (block) inline; (embedded) list-item; (list item) run-in; (append part) compact; (compact) marker; (Mark) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption; (table title)

Box attribute

Attribute description CSS
Overflow-x whether to crop the left or right edge of the content if the content overflows the element content area. 3
Overflow-y if the content overflows the element content area, whether to crop the top/bottom edge of the content. 3
Overflow-style specifies the preferred scrolling Method for overflow elements. 3
Rotation rotates the point-to-point elements defined by the rotation-point attribute. 3
Rotation-point defines the offset point from the edge of the upper left border.

Hyperlink Properties

Attribute description CSS
Set the target-name, target-new, and target-position attributes. 3
Target-name specifies where to open the Link (target of the link ). 3
Target-new specifies whether the target link is opened in a new window or in a new tab of an existing window. 3
Target-position specifies where to place a new target link.

CSS Margin attribute (Margin)

Attribute description CSS
Margin sets all margin attributes in a declaration. 1
Margin-bottom sets the bottom margin of the element. 1
Margin-left sets the left margin of the element. 1
Margin-right specifies the right margin of the element. 1
Margin-top specifies the top margin of the element.

CSS Dimension attributes (Dimension)

Attribute description CSS
Height: sets the element height. 1
Max-height specifies the maximum height of an element. 2
Max-width specifies the maximum width of an element. 2
Min-height: sets the minimum height of an element. 2
Min-width sets the minimum width of the element. 2
Width: Set the width of the element.

Marquee attributes

Attribute description CSS
Marquee-direction: set the direction for moving content. 3
Marquee-play-count sets the number of times the content is moved. 3
Marquee-speed sets the content to scroll much faster. 3
Marquee-style: Set the style of the moving content.

CSS Padding attribute (Padding)

Attribute description CSS
Set all padding attributes in a declaration. 1
Padding-bottom sets the bottom padding of the element. 1
Padding-left sets the left padding of the element. 1
Padding-right is used to set the right padding of an element. 1
The top padding of the padding-top setting element.

Positioning)

Attribute description CSS
Bottom sets the offset between the bottom margin boundary of the positioning element and the bottom boundary of the contained block. 2
Clear specifies which side of the element does not allow other floating elements. 1
Clip clipping absolute positioning elements. 2
Cursor specifies the type (SHAPE) of the cursor to be displayed ). 2
Display specifies the type of the box that the element should generate. 1
Float specifies whether the box should be floating. 1
Left sets the offset between the left margin boundary of the positioning element and the left boundary of the contained block. 2
Overflow specifies what happens when the content overflows the element box. 2
Position specifies the positioning type of the element. 2
Right sets the offset between the right margin boundary of the positioning element and the right boundary of the contained block. 2
Top sets the offset between the top margin boundary of the positioning element and the top boundary of the contained block. 2
Vertical-align sets the vertical alignment of elements. 1
Visibility specifies whether the element is visible. 2
Z-index sets the stacking sequence of elements.

CSS Border attributes (Border and Outline)

Attribute description CSS
Border sets all border attributes in a declaration. 1
Border-bottom sets all the bottom border attributes in a declaration. 1
Border-bottom-color sets the color of the bottom border. 2
Border-bottom-style: Set the style of the bottom border. 2
Border-bottom-width: Set the width of the bottom border. 1
Border-color: Set the color of the four borders. 1
Border-left: set all the left border attributes in a declaration. 1
Border-left-color: Set the color of the left border. 2
Border-left-style: Set the style of the left border. 2
Border-left-width: Set the width of the left border. 1
Border-right: set all the right border attributes in a declaration. 1
Border-right-color: Set the color of the right border. 2
Border-right-style: Set the style of the right border. 2
Border-right-width: Set the width of the right border. 1
Border-style: Set the style of the four borders. 1
Border-top: set all the top border attributes in a declaration. 1
Border-top-color: Set the color of the top border. 2
Border-top-style: Set the style of the upper border. 2
Border-top-width: Set the width of the upper border. 1
Border-width: Set the width of the four borders. 1
Outline sets all profile attributes in a declaration. 2
Outline-color sets the outline color. 2
Set the outline style in outline-style. 2
Set outline-width to the width of the contour. 2
Border-bottom-left-radius defines the shape in the lower left corner of the border. 3
Border-bottom-right-radius defines the shape of the bottom right corner of the border. 3
Border-image short attribute, set all border-image-* attributes. 3
Border-image-outset specifies that the number of border image regions exceeds the border. 3
Whether the border of the border-image-repeat image should be repeated, rounded, or stretched ). 3
Border-image-slice specifies the inner offset of the image border. 3
Border-image-source specifies the image used as the border. 3
Border-image-width specifies the border width of the image. 3
The abbreviated border-radius attribute sets all four border-*-radius attributes. 3
Border-top-left-radius defines the shape in the upper left corner of the border. 3
Border-top-right-radius defines the shape in the lower right corner of the border. 3
Box-decoration-break 3
Box-shadow adds one or more shadows to the box.

List attributes: (List-style)

Type list-style-type: disc; (DOT) circle; (circle) square; (square) decimal; (number) lower-roman; (lower code number) upper-roman; lower-alpha; upper-alpha;
Position list-style-position: outside; (outer) inside;
Image list-style-image: url (..);
Positioning property: (Position)
Position: absolute; relative; static;
Visibility: inherit; visible; hidden;
Overflow: visible; hidden; scroll; auto;
Clip: rect (12px, auto, 12px, auto) (cropping)

CSS Filter attributes

Filter: add the Filter effect to the style. As this attribute contains a lot of content, we will introduce the filter separately in the next chapter. 1. Alpha: Set transparency Alpha (Opacity = ?, FinishOpacity = ?, Style = ?, StartX = ?, StartY = ?, FinishX = ?, FinishY = ?) Opacity: transparency level. The value ranges from 0 to 100. 0 indicates full transparency, and indicates full Opacity. FinishOpacity: used to specify the transparency at the end of the gradient when the transparency effect is set. The range is also 0 to 100. Style: sets a gradient transparent Style. The value 0 indicates a uniform shape, 1 indicates a linear shape, 2 indicates a radial shape, and 3 indicates a rectangle. StartX and StartY: the starting X and Y coordinates of the gradient transparency effect. FinishX and FinishY: represent the coordinates of X and Y after the gradient transparency effect ends. 2. BlendTrans: the fade-in and fade-out effects between images. BlendTrans (Duration = ?) Duration: the time when the device fades in or out. Note: This filter must be used in combination with JS to create an image sequence for effect between images. 3. Blru: Create a Blur result Blur (Add = ?, Direction = ?, Strength = ?) Add: whether to blur in a single direction. This parameter is a Boolean value, true (not 0) or false (0 ). Direction: sets the blur Direction, where 0 indicates vertical up, and then every 45 degrees is a unit. Strength: indicates the blurred pixel value. 4. Chroma: Set the specified Color to transparent Chroma (Color = ?) Color: The Color to be transparent. 5. DropShadow: Create the shadow effect DropShadow (Color = ?, OffX = ?, OffY = ?, Positive = ?) Color: Specifies the Color of the shadow. OffX: an integer that specifies the horizontal offset of the shadow to the element. OffY: Specifies the vertical offset of the shadow to the element, an integer. Positive: A boolean value. If the value is true (not 0), it indicates that an external shadow is created. If the value is false (0), it indicates that an internal shadow is created. 6. FlipH: reverse the element horizontally. 7. FlipV: reverse the element vertically. 8. Glow: establish the effect of the luminous effect Glow (Color = ?, Strength = ?) Color: Specifies the Color of the glow. Strength: the intensity of light, which can be any integer between 1 and 255. The larger the number, the larger the intensity of light. 9. gray: remove the color of the image and display it as a black/white image 10. invert: Invert the color of the image to produce negative effects 11. light: the effect of placing the Light source, which can be used to simulate the projection effect of the Light source on the object. Note: This effect requires setting the position and intensity of the Light with JS. 12. Mask: create a transparent Mask (Color = ?) Color: sets the background Color to make the object transparent. 13. RevealTrans: Set the switching effect RevealTrans (Duration = ?, Transition = ?) Duration: The switch time, in seconds. Transtition: indicates the switching mode, which can be set from 0 to 23. Note: If you want to switch between pages, you can add a line of code in the partition :. If the elements used in the page must be used with JS. 14. Shadow: create another Shadow effect Shadow (Color = ?, Direction = ?) Color: The Color of the shadow. Direction: sets the Direction of projection. 0 degrees indicates vertical up, and then every 45 degrees is a unit. 15. Wave: ripple effect Wave (Add = ?, Freq = ?, LightStrength = ?, Phase = ?, Strength = ?) Add: Indicates whether to display the original object, 0 indicates not to display, and non-0 indicates to display the original object. Freq: set the number of fluctuations. LightStrength: Set the illumination intensity of the wave effect, from 0 to 100. 0 indicates the weakest point, and 100 indicates the strongest point. Phase: the starting Phase angle of the wave. The percentage value from 0 to 100. (For example, 25 is equivalent to 90 degrees, and 50 is equivalent to 180 degrees .) Strength: Set the amplitude of the wave swing. 16. Xray: displays the outline of an image. Note: when using a CSS Filter, you must use regional elements, such as tables and images. Text and paragraph elements without a region cannot use CSS filters. For such elements, we can set the Height and Width styles or coordinates of the elements."

 

Css attribute code full CSS text attributes:

Color: #999999 ;/Text color/
Font-family:, sans-serif ;/Text font/
Font-size: 9pt ;/Text Size/
Font-style: itelic ;/Italic text/
Font-variant: small-caps ;/Small font/
Letter-spacing: 1pt ;/Distance between words/
Line-height: 200% ;/Set Row Height/
Font-weight: bold ;/Bold Text/
Vertical-align: sub ;/Subscript/
Vertical-align: super ;/Superscript/
Text-decoration: line-through ;/Strikethrough/
Text-decoration: overline ;/Top Line/
Text-decoration: underline ;/Underline/
Text-decoration: none ;/Delete link underline/
Text-transform: capitalize ;/Uppercase letters/
Text-transform: uppercase ;/Uppercase/
Text-transform: lowercase ;/Lowercase letters/
Text-align: right ;/Right-aligned text/
Text-align: left ;/Left-aligned text/
Text-align: center ;/Align text in Center/
Text-align: justify ;/Text dispersion and alignment/
Vertical-align attributes
Vertical-align: top ;/Vertical and upward alignment/
Vertical-align: bottom ;/Vertical downward alignment/
Vertical-align: middle ;/Vertical center alignment/
Vertical-align: text-top ;/Vertical and upward alignment of Text/
Vertical-align: text-bottom ;/Vertical and downward alignment of Text/

Ii. CSS border Blank

Padding-top: 10px ;/Left blank on the upper border/
Padding-right: 10px ;/Left blank on the Right Border/
Padding-bottom: 10px ;/Blank lower border/
Padding-left: 10px;/* left Border Blank

Iii. CSS symbol attributes:

List-style-type: none ;/No./
List-style-type: decimal ;/Arabic numerals/
List-style-type: lower-roman ;/Lowercase roman numerals/
List-style-type: upper-roman ;/Upper-case roman numerals/
List-style-type: lower-alpha ;/Lowercase English letters/
List-style-type: upper-alpha ;/Uppercase letters/
List-style-type: disc ;/Solid circle symbol/
List-style-type: circle ;/Hollow circle symbol/
List-style-type: square ;/Solid square symbol/
List-style-image: url (/dot.gif );/Graphical symbols/
List-style-position: outside ;/Convex/
List-style-position: inside ;/Indent/

Iv. CSS background style:

Background-color: # F5E2EC ;/Background Color/
Background: transparent ;/View background/
Background-image: url (/image/bg.gif );/Background Image/
Background-attachment: fixed ;/Fixed floating watermark background/
Background-repeat: repeat ;/Repeat-web page default/
Background-repeat: no-repeat ;/Not arranged repeatedly/
Background-repeat: repeat-x ;/Repeat on the X axis/
Background-repeat: repeat-y ;/Repeat the Y axis/
Specify the background position
Background-position: 90% 90% ;/Position of the x and Y axes of the background image/
Background-position: top ;/Align upwards/
Background-position: buttom ;/Align downward/
Background-position: left ;/Align left/
Background-position: right ;/Align right/
Background-position: center ;/Center alignment/

V. CSS connection attributes:

A/All hyperlinks/
A: link/Hyperlink text format/
A: visited/Text Format of browsed links/
A: active/Format of the pressed Link/
A: hover/Mouse to link/
Mouse and cursor style:
Link finger CURSOR: hand
Cross cursor: crosshair
Arrow down cursor: s-resize
Cross arrow cursor: move
Arrow toward right cursor: move
Add a question mark (cursor: help)
Arrow toward left cursor: w-resize
Arrow up cursor: n-resize
Arrow toward top right cursor: ne-resize
Arrow toward top left cursor: nw-resize
Text I-type cursor: text
Arrow oblique lower right cursor: se-resize
Down-left arrow cursor: sw-resize
Funnel cursor: wait
Cursor pattern (IE6) p {cursor: url ("cursor file name. cur"), text ;}

Vi. List of CSS borders:

Border-top: 1px solid # 6699cc ;/Upper line/
Border-bottom: 1px solid # 6699cc ;/Bottom Line/
Border-left: 1px solid # 6699cc ;/Left Frame/
Border-right: 1px solid # 6699cc ;/Right Frame/
The above is the recommended writing method, but you can also use the conventional method as follows:
Border-top-color: #369/Set the top color of the upper box/
Border-top-width: 1px/Set top width of the upper line/
Border-top-style: solid/Set the top style of the upper box/
Other box style
Solid/Solid box/
Dotted/Dotted box/
Double/Double box/
Groove/Three-dimensional convex Frame/
Ridge/Three-dimensional relief Frame/
Inset/Concave Frame/
Outset/Convex Frame/

VII. CSS form application:

Text Box
Button
Check box
Selection button
Multi-line text box
Drop-down menu option 1 option 2
VIII. CSS border style:
Margin-top: 10px ;/Upper Boundary/
Margin-right: 10px ;/Right Boundary Value/
Margin-bottom: 10px ;/Bottom Boundary Value/
Margin-left: 10px ;/Left Boundary Value/