[Original] CSS attribute collection
CSS Attributes
1. Font attributes
This is the most fundamental attribute, you often use. It is mainly composed of the following properties:
Attribute attribute meaning of attribute values font-family what font to use all the font-style fonts whether or not to use italics Normal, Italic, whether oblique font-variant normal body capital, small-caps font Normal-weight font size, bold, bolder, such as lithter font-size font size Absolute-size, relative-size, length, percentage, etc.
Example:
<p Style="font-style:oblique; font-weight:bold;font-size:24pt;font-variant:small-caps"> ABC </ p>
2. Attributes and background colors
Attribute attribute meaning to write attribute definition format color attribute value Jianjingse (color: red) color background-color background color definition (background-color: yellow) background-color pictorial image definition background-image (background: url (*. jpg)) Path background picture background patterns repeat-repeat mode (background-repeat: repeat-y-x) repeat, repeat-y, no-repeat background-attachment set rolling (background-attachment: scroll) scroll, fixed background-position background patterns initial position (background-position: top center) percentage, length, top, left, right, bottom
3. Text attributes
Attribute attribute meaning of attribute values defined word-spacing between each word spacing Normal <length> (must length) for the definition of letter-spacing between each letter spacing Ditto text-decoration definition of the text decorative patterns none | overline | underline | line-through | blinkvertical-align elements in the definition of position on the vertical direction baseline | sub | super | top | text-top | middle | bottom | text-bottom <percentage> text-transform the text into other forms capitalize | uppercase | lowercase | none text-align the text definition of the Alignment left | right | center | justify text-indent text of the definition of the first line indentation method <length> | <percentage> line-height text of the definition of normal to high | <number> | <length> | <percentage>
Example:
<p Style="letter-spacing:1em;text-align:justify;text-indent:4em;line-height:17pt">…… </ p>
<style>
<! –
/ / * Definition of pseudo-element (a:), the definition of the bracketed text decoration Jianjingse attributes and attribute,
Hover with 'font-size' attributes goal is to change the mouse font activation link * / /
A: link (color: green; text-decoration: none)
/ / * Not visit the state, colors are green (green), text decoration attributes (text-decoration) was not (none) * / /
A: visited (color: red; text-decoration: none)
/ / * Visited the state, a red color (red), text decoration did not attribute value for * / /
A: hover (color: blue; text-decoration: overline; font-size: 20pt)
/ / * Mouse-activated state, the blue color (blue), text decoration attribute values are zoned for (overline)
Font size is 20 pt * / /
–>
</ Style>
4. Containers attribute
4.1 attribute border
Attribute attribute meaning of attribute values margin set-top top border length | percentage | Auto margin-bottom settings bottom margins Ditto margin settings Left-left-right margins Ditto margin settings right-hand margins Ibid.
Filled from 4.2 attribute
Attribute attribute meaning of attribute values set-top padding filled from the top of length | percentage padding-bottom settings filled from the bottom-left Ditto padding installed Left-filled padding from the right set up ditto filled from the right-hand Ibid.
Note: Filled distance refers to the text frame and the distance between the text
4.3 frames attribute
Attribute attribute meaning attribute value border-top-width settings thin top rim width | medium | thick | length border-bottom-width settings bottom rim width Ditto border-left-width settings extreme left frame width Ditto border-right-width settings right side frame Ditto width definition of a border-width frame width Ditto border-color settings border color settings color border-style frame styles none | dotted | dash | solid | double | groove | ridge | inset | outset border-top top of the definition of a variety of attributes border-top-width | boder-style | color border-bottom bottom of a definition of the various attributes Ditto a border-left Left definition of the various attributes Ditto border-right definition of the right-hand edge of a variety of attributes Ibid.
4.4 by mixed
Attribute attribute meaning of attribute values width definition of the width attribute length | percentage | auto height attribute length high definition | auto float around in a text so that the elements around left | right | none clear whether there is a side of a definition surround text left | right | none | both
Example:
<! –
Img (margin-right: 2em; float: left)
/ / * Definition picture from the right side for 2 em, floating in the picture to the left of text * / /
–>
</ Style>
5. Classification attributes
Attribute Display attribute meaning attribute value definition is a reflection of Block | inline |-item list | none White-blank space decide how to deal with part of normal | pre | nowrap List-style-type in the list of front disc item # | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image in the list of front pictorial <url> | none List-style decision-position in the list of the second initial position inside | outside List-style in front of a definition of a list of attributes <keyword> | <position> | <url>
Example:
<style Type="text/css"> / / CSS * definition * / /
<! –
P (display: block; white-space: normal)
/ / * Attribute definition display for the "block", which means the region in the new display; white-space so that the normal attributes of a multi-blank * / /
Em (display: inline)
/ / * EM definition of the display attribute to "inline" its purpose is to display the text under the control of non-discount firms * / /
Li (display: list-item; list-style: square)
/ / * Li definition display attributes "list-item" indicating that the item in the list by adding a symbol marking, and list-style attribute value is defined as the square of the list before the marked box * / /
Img (display: block) / / * Attribute definition picture in the picture for the block to a new location to open * / /
–>
</ Style>
6. Mouse attribute
6. Mouse attribute
Changes in the mouse with the CSS attributes is that when the mouse to move to the different elements of the above target, let the mouse in different shapes, patterns show. Primarily use "cursor" attributes to achieve, and its property values are shown in the table below:
Auto meaning of attribute values by default Crosshair precise positioning themselves to change the default Cross Default indicators Hand hand Move Mobile E-resize arrow in the right NE-NW resize arrow in the upper right resize arrow in the upper left-N-SE resize arrow in the top-resize arrow in the lower right SW-S resize arrow in the bottom left-resize arrow in the bottom of the W-resize arrow in the left Text version of the "I" Wait for Help-help
Tags: css button, css download, css fillet, css manuals, css templates, css vertical middling
Leave a Reply