CSS attributes Summary

Source: Internet
Author: User
Scroll bar
1. Set overflow content overflow (set whether the set object displays a scroll bar)
Settings for overflow-x horizontal content Overflow
Settings for overflow-y vertical content Overflow
The values of the preceding three attributes are visible (default), scroll, hidden, and auto.

2. scrollbar-3d-light-color three-dimensional scroll bar bright side color (set the color of the scroll bar)
Scrollbar-arrow-color the color of the upper and lower arrow of the buttons
Scrollbar-base-color Basic Color of the scroll bar
Scrollbar-Dark-shadow-color the color of the strong shadow of the three-dimensional scroll bar
Scrollbar-face-color of the protruding part of the stereo scroll bar
Scrollbar-Highlight-color the color of the blank area of the scroll bar
Scrollbar-shadow-color specifies the color of the shadow of a three-dimensional scroll bar.

We use several examples to explain the above style attributes:
1. Make the browser window never show a scroll bar
No horizontal scroll bar
<Body style = "overflow-X: hidden">
No vertical scroll bar

Note: There are various optional attributes in the brackets.
Type: Type
Font-family
Size: font-size
Style: font-style :( italic, normal, oblique (italic ))
Width: font-weight :( bold, normal, bolder, lighter, 100-900)
Variable: font-variant :( normal, small-caps small capital letters)
Line Height: Line-height :( 20px ,...)
Case: Text-transform :( capitalize is capitalized, uppercase is capitalized, lowercase is lowercase, none is none)
Modifier: Text-decoration :( underline, overline underline, line-through strikethrough, blink flashing, none)
Color: Color :( # 0000cc, Red ,...)

Background: backdrop
Background Color: Background-color :( # fff)
Background Image: Background-image :( url(mypicture.jpg) <! -- Here we use this document. -->
Repeat: Background-repeat :( no-repeat is not repeated, repeat is repeated, repeat-X is repeated horizontally, and repeat-y is repeated vertically)
Attachment: Background-attachment :( fixed, scroll rolling)
Horizontal and vertical positions: Background-position: (center horizontal Center, Center vertical center or 20px horizontal 20px, 20px vertical 20px)

Block: Block
Word Spacing: Word-spacing :( 20px; normal)
Letter Spacing: letter-Spacing: (1px; normal)
Vertical Alignment: vertical-align :( baseline alignment the baseline of the element and the baseline of the parent element. sub displays the following mark of the element, and super displays the above mark of the element, top alignment: Alignment, text-bottom alignment the bottom of the element with the text of the parent element .)
Text align: Text-align :( left, center, right, justify)
Text indent: Text-indent :( 20pt, 20%, 20px, 2em ....)
Space: white-space :( pre reserved, normal, nowrap do not wrap)

Box: Casing
Width: width :( auto, 20px)
Height: height :( auto, 1em)
Floating: Float :( left, right, none)
Clear: Clear :( both, left, right, none)
Fill: padding-top :( 2px), padding-Right :( 2px), padding-bottom :( 2px), padding-left :( 2px)

Border: Frame
Border-top, border-right, border-bottom, border-left
Style: (none, dotted, dashed, solid, double, groove, ridge, inset, outset)
Width: (thin fine, in medium, thick, 10px pixels)
Color :( #999999)

List: List
Type: List-style-type :( disc dot, circle, square, decimal number, lower-Roman lower case Rome number, upper-Roman upper case Rome number, lower-Alpha lower case letter, upper-Alpha uppercase letters, none)
Project symbol image: List-style-image :( url(mypic.gif ))
Location: List-style-position :( outside external, inside)

Location: Place
Type: Position :( relative Relative, static statement, absolute)
Display: visibility: (visible, inherit inherited, hidden)
Width: width: 200px
Height: 100px
Z axis: Z-index: 2 (overlapping layers)
Overflow: overflow :( hidden, visible, scroll, auto)
Position: Top :( 20px)
Right
Left
Bottom
Clip: Clip :( rect (automatic on auto, 20px right, 20px, 10px left)

extended: Exhibit
before paging: page-break-before :( always, left, right, auto)
after paging: page-break-after: (same as above)
visual effect: (cursor: Wait)
filter: alpha transparent gradient effect
blendtrans hybrid gradient filter
blur wind blowing blur effect
transparent effect of chroma specific colors
dropshadow shadow effect
fliph level flip effect
flipv vertical flip effect
glow edge halo effect
gray black and white effect
inzert image negative effect
light added to light source projection effect
mask masking effect
rezealtrans display gradient filter
shadow gradient shadow effect
adding Waze to waveform effect
adding Xray to wheel Guo effect

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.