CSS attribute values

Source: Internet
Author: User
Tags compact
1: Possible CSS-dispaly values:
Value Description
None This element is not displayed.
Block This element is displayed as a block-level element with a line break before and after it.
Inline Default value. This element is displayed as an inline element, and there is no line break before and after the element.
Inline-block The block element in the row. (Newly added value of css2.1)
List-item This element is displayed as a list.
Run-in This element is displayed as a block-level element or Inline element based on the context.
Compact Compact is a value in CSS, but it has been deleted from css2.1 due to lack of extensive support.
Marker CSS has a value of marker, but it has been deleted from css2.1 due to lack of extensive support.
Table This element is displayed as a block-Level Table (similar to <Table>), with a line break before and after the table.
Inline-table This element is displayed as an inline table (similar to <Table>) without line breaks before and after the table.
Table-row-group This element is displayed as a group of one or more rows (similar to <tbody> ).
Table-header-group This element is displayed as a group of one or more rows (similar to <thead> ).
Table-footer-group This element is displayed as a group of one or more rows (similar to <tfoot> ).
Table-row This element is displayed as a table row (similar to <tr> ).
Table-column-group This element is displayed as a group of one or more columns (similar to <colgroup> ).
Table-Column This element is displayed as a cell column (similar to <Col>)
Table-Cell This element is displayed as a table cell (similar to <TD> and <TH>)
Table-Caption This element is displayed as a table title (similar to <caption>)
Inherit Specifies that the value of the display attribute should be inherited from the parent element.

The difference between display: none and visible: false: Setting visible: false is not included in the DOM structure of the client.

    1. The border-collapse attribute sets whether the border of the table is merged into a single border or is displayed separately as in standard HTML. The default value is as follows:
Border-collapse: Separate; Border-collapse:Collapse

2. About text align: justify;

 

Text-justify Version: ie5 + private property inheritance: No Syntax: Text-justify: Auto | Distribute | Distribute-all-Lines | Distribute-center-last | Inter-cluster | Inter-ideograph | Inter-word | Kashida | Newspaper Valid value:
Auto : Default Value. Allow the browser agent to determine the two-end alignment rules used
Distribute : Processing space is very similarNewspaperFor East Asian documents. Especially Thai
Distribute-all-Lines : The two ends are in lineDistributeThe same does not contain the last line of the two aligned paragraphs. Applies to ideographic documents
Distribute-center-last : Not Implemented
Inter-cluster : Adjust the line of text with no space between words. This adjustment is used to optimize the Asian language documentation.
Inter-ideograph : Provides full two-end alignment for ideographic text. He adds or removes spaces between ideographic words and words.
Inter-word : Align text by adding spaces between words. This behavior is the fastest way to align all text rows. The alignment at both ends of the paragraph is invalid for the last line of the paragraph.
Kashida : Adjust the text by extending the characters of the selected vertex. This adjustment mode is especially provided for the Arabic scripting language. Ie5.5 + is required
Newspaper : Align text by adding or removing spaces between words or letters. Is the most precise format used for alignment at both ends of the Latin alphabet
Note: You can set or retrieve the alignment of the text in an object.
Because this attribute affects the text layout, the text-align attribute must be set Justify .
This attribute only applies to block objects.
This property Currentstyle The object is read-only. Other objects can be read and written.
Corresponding script features: Textjustify . 3:

Set all background attributes in a declaration.

You can set the following attributes in sequence:

  • Background-color:

    Color_name Specifies the background color (such as red) of the color name ).
    Hex_number Specifies the background color of the hexadecimal value (for example, # ff0000 ).
    Rgb_number The specified color value is RGB.CodeBackground color (such as RGB (, 0 )).
    Transparent Default value. The background color is transparent.
  • Background-Image
  • Background-repeat:
    Repeat Default value. The background image will be repeated in the vertical and horizontal directions.
    Repeat-x The background image will be repeated in the horizontal direction.
    Repeat-y The background image will be repeated in the vertical direction.
    No-repeat The background image is displayed only once.
  • Background-attachment (specifies whether the background image is fixed or scrolled along with the rest of the page, with two values: Scroll and fixed ):
    Scroll Default value. The background image will move along with the rest of the page.
    Fixed When the rest of the page is rolled, the background image is not moved.
  • Background-Position
Commonly used is to implement the list-type style in the label inside li without list-tyle: # HR2 ul Li {
Color: #777575; padding-left: 10px; Background: transparent URL (/eq_art2/eq_images/listtypeimage.jpg) No-repeat fixed left ;}
4: IE6 is not transparent. This is an old problem: first, let's look at a script,

Function chekc (){
VaR arversion = navigator. appversion. Split ("MSIE ")
VaR version = parsefloat (arversion [1])
If (version> = 5.5) & (document. Body. filters )){
For (var j = 0; j <document. Images. length; j ++ ){
VaR IMG = Document. Images [J]
VaR imgname = IMG. SRC. touppercase ()
If (imgname. substring (imgname. Length-3, imgname. Length) = "PNG "){
VaR imgid = (IMG. ID )? "Id = '" + IMG. ID + "'":""
VaR imgclass = (IMG. classname )? "Class = '" + IMG. classname + "'":""
VaR imgtitle = (IMG. Title )? "Title = '" + IMG. Title + "'": "Title = '" + IMG. Alt + "'"
VaR imgstyle = "display: inline-block;" + img.style.css text
If (IMG. align = "Left") imgstyle = "float: Left;" + imgstyle
If (IMG. align = "right") imgstyle = "float: right;" + imgstyle
If (IMG. parentelement. href) imgstyle = "cursor: hand;" + imgstyle
VaR strnewhtml = "<span" + imgid + imgclass + imgtitle
+ "Style = \" "+" width: "+ IMG. Width +" PX; Height: "+ IMG. height +" PX; "+ imgstyle + ";"
+ "Filter: progid: DXImageTransform. Microsoft. alphaimageloader"
+ "(Src = \ '" + IMG. SRC + "\', sizingmethod = 'Scale'); \"> </span>"
IMG. outerhtml = strnewhtml
J = J-1
}
}
}
}
After Dom loading is complete, modify the outerhtml attribute of each PNG image. 5: outerhtml contains not only all the content of innerhtml, but also the object tag itself. 6: Overflow implements textarea with no borders and no scroll bars Overflow version: css2 compatibility: ie4 + ns6 + inheritance: None

Syntax:

Overflow: visible | auto | hidden | scroll

Parameters:

Visible: Do not cut the content or add a scroll bar. If this default value is explicitly declared, the object is cut to the size of the window or frame containing the object. And the clip attribute settings will be invalid.

Auto: the default value for the body object and textarea. Cut the content and add a scroll bar as needed

Hidden: Do not display content that exceeds the object size

Scroll: Always displays the scroll bar

Note:

Retrieves or sets how to manage content when the content of an object exceeds its specified height and width.

Setting the textarea object to a den value will hide its scroll bar.

For a table, if the table-layout attribute is set to fixed, the TD object supports
There is an overflow attribute whose default value is hidden. If it is set to hidden, scroll, or Auto, the content beyond the TD size will be cut. If
Visible, causing extra text to overflow to the right or left (depending on the setting of the direction attribute) cells.

This attribute is available on Mac platform since ie5

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.