Home > Others

Div property Div label attribute how to set attributes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Div attribute Introduction: What can be added to Div? Div attribute list: divcss5 (music relaxation Chair)

Divcss5 sorts out common attributes in the DIV tag, and uses small instances of each attribute to let everyone know and master the attributes.

List of common attributes in the DIV label (music relax Chair)

  • 1. Set CSS styles in style (Extended style labels)
  • 2. Align sets the content in the DIV box to center, center left, and right
  • 3. ID attracts external correspondence # (well ID) Select the symbol Style
  • 4. class attracts external correspondence. (period) Select the symbol Style
  • 5. Set the title to display text when the div (title) cursor goes through (extended understanding of the title label)

 

Next, divcss5 will introduce Div attributes one by one, and introduce the above five Div attributes through the Basic HTML syntax structure and CSS syntax infrastructure. (Music relaxation Chair)

I. Div style Attribute-top

You can directly use the style attribute in the DIV label. This attribute can be used to directly set CSS styles, also called intra-tag styles, similarly, labels such as span, H1, H2, strong, and P can directly use the style attribute to set CSS styles. (Music relaxation Chair)

1. We have seen a syntax demonstration.

  1. <Div style = "color: # f00; font-size: 18px"> the font size is 18px, And the font color is red. </div>

In this example, the DIV uses the style to set the CSS style.

2. Set CSS effect for style (music relax Chair)


Effect of setting the style attribute CSS style in Div

3. Summary of style in Div attributes
To use style in a div label, you can directly set the CSS style for the DIV label. Therefore, if you want to directly use the style table in the DIV label, you can directly set the style for the DIV using the style attribute.

Ii. Div align Attribute-top

Directly add the align attribute to the tag to make the content in the object Center, Center, and right.

1. The code for setting the align attribute for div is as follows:

  1. <! Doctype HTML>
  2. <HTML>
  3. <Head>
  4. <Meta charset = "UTF-8"/>
  5. <Title> Div property demonstration </title>
  6. </Head>
  7. <Body>
  8. <Div align = "Left"> left </div>
  9. <Div align = "center"> center </div>
  10. <Div align = "right"> right </div>
  11. </Body>
  12. </Html>

2. Case studies


Set the align attribute for the DIV to center the content to the left and right

3. Related CSS styles
1) CSS center, CSS center left, and CSS center right.
2). html Div align tutorial

3. Div ID Attribute-top

Use ID in the DIV label. On the one hand, if it is a JS effect, it may be an Action Script recognition function, and on the other hand, it is a style selector style named by # in CSS. Of course, you can set the ID attribute for other labels.

1. ID: Use the instance code

  1. <! Doctype HTML>
  2. <HTML>
  3. <Head>
  4. <Meta charset = "UTF-8"/>
  5. <Title> Div property demonstration </title>
  6. <Style>
  7. # Divcss5 {color: # f00; font-size: 16px; font-weight: bold}
  8. </Style>
  9. </Head>
  10. <Body>
  11. <Div id = "divcss5">
  12. The font is red, 16 PX, bold
  13. </Div>
  14. </Body>
  15. </Html>

2. Div ID instance


Use Id in Div

Iv. Div Class Attribute-top

The class and ID syntax are used in the same structure. Generally, the object style is set to use. the style selector named after the English half-width lowercase ending point. It is applied to Div or other labels using class.

1. Complete HTML source code of the Instance

  1. <! Doctype HTML>
  2. <HTML>
  3. <Head>
  4. <Meta charset = "UTF-8"/>
  5. <Title> Div property demonstration </title>
  6. <Style>
  7. . Divcss5 {color: # 00f; font-size: 18px}
  8. </Style>
  9. </Head>
  10. <Body>
  11. <Div class = "divcss5">
  12. The font is blue and the font is 18px.
  13. </Div>
  14. </Body>
  15. </Html>

2. Class Div instance Effect


Div class attribute instance

5. Set the title Attribute-top for the DIV

Set the title attribute for the Div or other labels to display the prompt content when the mouse is hovering over the Div or modifying the object, just like setting the title attribute for a tag (understanding the title on the webpage ).

1. Div + CSS instance code

  1. <! Doctype HTML>
  2. <HTML>
  3. <Head>
  4. <Meta charset = "UTF-8"/>
  5. <Title> Div property demonstration </title>
  6. </Head>
  7. <Body>
  8. <Div Title = "show me when hovering">
  9. Divcss5 content
  10. </Div>
  11. </Body>
  12. </Html>

2. instance effect Browser


Set the title of the DIV, and hover the mouse over the DIV object.

When you move the cursor over the DIV box with the title attribute set, a message is displayed next to the cursor. This method is the same as setting the title attribute for HTML ahyperlink.

Vi. Summary of Div attributes-top

The above basics and examples describe how to set common attributes in Div labels. You can also set the above five attributes for other labels. The principles and syntax structure are the same. You can refer to the divcss5.

Div property Div label attribute how to set attributes

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
data url attribute in div how to use div tag in php how to make div centered in css how to use div in php div to pdf php how to load html page in div tag using javascript php add class to div

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More