CSS code Daquan

Source: Internet
Author: User
Introduction: A css text attribute: Color: #999999;/* text color */font-family:, sans-serif;/* text font */font-size: 9pt; /* text size */font-style: itelic;/* Text italic */font-variant: Small-caps;/* small font */Letter-s... Keywords: CSS-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 the Row Height */
Font-weight: bold;/* Bold text */
Vertical-align: Sub;/* subscripts */
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 letters */
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;/* scatter and alignment of text */
Vertical-align attributes
Vertical-align: Top;/* vertical and upward alignment */
Vertical-align: bottom;/* vertically aligned down */
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 */
Http://www.dw8.org DW professional website
Ii. CSS border Blank
Padding-top: 10px;/* Leave the upper border blank */
Padding-Right: 10px;/* left blank on the Right Border */
Padding-bottom: 10px;/* Leave the bottom border blank */
Padding-left: 10px;/* Left Border Blank
Iii. CSS symbol attributes:
List-style-type: none;/* No number */
List-style-type: decimal;/* arabic numerals */
List-style-type: lower-Roman;/* lowercase roman numerals */
List-style-type: Upper-Roman;/* uppercase roman numerals */
List-style-type: lower-alpha;/* lowercase letters */
List-style-type: Upper-alpha;/* uppercase letters */
List-style-type: disc;/* Solid circular symbol */
List-style-type: circle;/* hollow circle symbol */
List-style-type: Square;/* solid square symbol */
List-style-image: URL (/dot.gif);/* image symbol */
List-style-position: Outside;/* convex */
List-style-position: Inside;/* indent */
Iv. CSS background style:
Background-color: # f5e2ec;/* Background Color */
Http://www.dw8.org Dreamweaver CS3 professional website
Background: transparent;/* view background */
Background-image: URL (/image/bg.gif);/* background image */
Background-Attachment: fixed;/* float watermark fixed background */
Background-repeat: Repeat;/* repeat-default page */
Background-repeat: No-Repeat;/* no duplicates */
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 background image X and Y axis */
Background-position: Top;/* align upwards */
Background-position: buttom;/* align downward */
Background-position: Left;/* align to left */
Background-position: Right;/* align to the right */
Background-position: center;/* center alignment */
V. CSS connection attributes:
A/* All hyperlinks */
A: Link/* hyperlink text format */http://www.dw8.org Dreamweaver professional website
A: visited/* URL text format browsed */
A: active/* Format of the pressed link */
A: hover/* move the cursor to the 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 box line */
Border-bottom: 1px solid # 6699cc;/* bottom line */
Border-left: 1px solid # 6699cc;/* left frame line */http://www.dw8.org Dreamweaver professional website
Border-Right: 1px solid # 6699cc;/* right frame line */
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 line */
Border-top-width: 1px/* set the top width of the upper box line */
Border-top-style: solid/* set the top style of the upper box line */
Other box style
Solid/* solid box */
Dotted/* dotted box */
Double/* double box */
Groove/* three-dimensional convex box */
Ridge/* stereo relief frame */
Inset/* concave box */
Outset/* convex box */
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 */ [Background] There are six attributes:

Background-color ),Set the background color.
Background-image ),Set the webpage background image.
Repeat ),Controls the tiled mode of the background image, including no-repeat, repeat, horizontal and vertical, image tiled along the horizontal direction) and vertical repetition (Repeat-y, tiled along the vertical direction of the image.
Background-attachment ),Used to control whether the background image will scroll along the page. There are two options: fixed (fixd, fixed background image quality when text is rolling) and rolling (scroll, background image scrolling along with text content.
"Horizontal position"/"vertical position" (background-position ),Determine the horizontal and vertical positions of the background image
. There are a total of left, right, top, bottom, center, and values (starting position of the custom background image, allows you to more accurately control the location of the background image.

There are nine [Types] attributes:

Font-family ),When setting the font, consider whether the font is in the browser.
"Size" (font-size ),Note the measurement unit.
Font-weight ),In addition to normal (normal), bold (BOLD), bolder (special), and lighter (small body), there are also nine pixel-based setting methods.
"Style" (font-style ),That is, the font.
Line-height ),It is the line spacing. Note that the line spacing can only be set to the font size.
"Deformation" (font-variant ),This attribute is not supported by IE.
Text-transform ),This attribute can easily control the case sensitivity of letters, including capitalize, uppercase, lowercase, and none, so that all inherited text and deformation parameters are ignored, text will be displayed in normal format.
"Modify" (text-decoration ),Controls the display form of link text, including underline, overline, line-through, blink, and none,. However, ie4 does not support text flashing.

 

There are six [block] attributes:

Word-spacing ),It is mainly used to control the distance between texts. There are two options: normal and custom interval values. When the value is selected, the available units include in, CM, mm, PT, and 12pt), the font height (EM), the font X has a high (Ex) pixel (PX ).
Letter spacing (letter-spacing ),The function is similar to the Character spacing, and there are two options: normal and custom interval values.
Vertical-align ),Controls the vertical position of a text or image relative to its parent element. If a 2x3 pixel GIF image is vertically aligned with the top of the parent element text, the GIF image is displayed on the top of the line text. Baseline: alignment the baseline of an element with the baseline of the parent element. subscripts (Sub: display the baseline of an element in the following format). superscript: displays the baseline of an element in the form of a baseline), top (align the top of the element with the highest parent element), text top (text-top, align the top of the element with the top of the parent element text), midline alignment (middle, align the midpoint of the element with the midpoint of the parent element), bottom (bottom, align the bottom of the element with the lowest parent element) and value (custom) and so on.
Text-align ),Sets the horizontal alignment of blocks. There are four options: Left, right, center, and justify.
Text-indent ),Controls the degree of indentation of a block.
White-space ),In HTML, spaces are omitted. In CSS, the white-space attribute is used to control the space input. There are three options: Normal, pre, and nowrap.

 

The [border] has three attributes:

Border-width ),Controls the Border width, which is divided into four attributes: border-top-width top Border width, border-right-width Right Border width, border-bottom-width Bottom Border width, and border-left-width Left Border width.
Border-color ),Set the border color. To display different colors on the four sides of the border, you can list them in settings. For example,
P {: # ff0000 #009900 # 0000ff #55cc00}
The browser understands the four colors as follows: Top border, right border, bottom border, and left border (clockwise from top ).
Border-style ),Set the border style. The options include none, dotted, dotted, dashed, solid, and double) grove, ridge, inset, and outset.

 

There are 6 items in the box attribute:

Width ),Determine the width of the box, so that the width of the box does not depend on how much content it contains.
Height ),Determine the height of the box.
Float ),Set the floating Effect of block elements.
Clear (clear ),Used to clear the set floating effect.
Margin (margin ),Controls the Margin Size of the border. It contains four attributes: margin-top controls the width of the top margin, margin-right controls the width of the right margin, margin-bottom controls the width of the bottom margin, and margin-left controls the width of the left margin.
Padding ),Determines the number of spaces filled around the block element, the attribute "padding-top" controls the white-left width, padding-right controls the white-right width, padding-bottom controls the white-left width, and padding-left controls the white-left width..

 

The [LIST] attribute has three items:

 
"Type" (list-style-type ),Determine the symbols used before each item in the list. There are a total of DOTS (disc), circles (circle), square (square), numbers (decimal), and lower-case roman numerals (lower-Roman) upper-case roman numerals (upper-Roman), lower-case letters (lower-alpha), and upper-case letters (upper-alpha.
"Project image" (list-style-image ),It is used to convert the symbols in front of the list into graphs.
"Position" (list-style-position ),Used to describe the location of the list. There are two options: inner (outside) and inner (inside.

 

[Positioning] There are six attributes:

"Type" (position ),Used to determine the positioning type. There are three options: absolute (absolute), relative (relative), and static (static.
"Z-axis" (Z-index ),This interface is used to control the order of block elements on a web page. You can set overlapping effects for the elements. The parameter value of this attribute uses a pure integer. When the value is 0, the element is at the lowest level, applicable to absolute or relative positioning elements.
Visibility)This property can be used to hide elements in a Web page. There are three options: inheritance (inherit, inherited parent element visibility settings), visibility (visible), and hidden (hidden.
"Overflow ),After the height and width of the element are determined, if the area of the element cannot fully display the content of the element, this attribute will take effect when a monk hits the house for a day. Visible (visible, expanded area to show all content), hidden (hidden, hidden out-of-range content), scroll (scroll, display a scroll bar on the right of the element) and auto (when the content exceeds the element area, the scroll bar is displayed.
「 Positioning 」,When the absolute positioning type is determined for the element, this group of attributes determines the specific location of the element in the webpage. This group of attributes contains four sub-attributes: "Left" (attribute name: "Left", starting position on the left of the control element) and "TOP" (attribute name: "TOP 」, starting position on the control element), "width", or "height" (same as the "width" or "height" attribute on the "box" Property panel ).
Clip ),When an element is specified as an absolute positioning type, this attribute can cut the element area into various shapes, but currently only one square type is provided. The property value is rect (top right bottom left), that is:
Rect (top right bottom left), the unit of the attribute value is any length unit.

 

The [extension] attributes have two parts:

"Pagination", two of which are used to set pagination characters for printed pages. "Before" (page-break-before); "after" (page-break-after ).
"Visual Effects". The two attributes apply special effects to elements on the webpage. Cusor specifies the shape of the cursor to be used on an element. There are 15 options, representing the shape of the mouse in the Windows operating system. In addition, it can also specify the URL address of the pointer icon; "filter" (fiter), can apply a variety of wonderful filter effects to elements in the web page, contains 16 filters.

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.