Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the common attributes in the div tag

2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly introduces what are the commonly used attributes in div tags, which have certain reference value. Interested friends can refer to them. I hope that after reading this article, you will gain a lot. Let Xiaobian take you to understand them together.

div List of common attributes in tags

1, style set css style (extended to understand style tags)

2, align Set div The contents of the box are centered, left and right

3. id leads to external corresponding #(pound sign) to select symbol style

4. Class leads to external correspondence. (Period) Select symbol style

5, title settings div (title) mouse over the text display (extended understanding title tag)

Next DIVCSS5 introduces DIV attributes one by one, through HTML basic syntax structure, CSS syntax infrastructure, and then through the example graphic way to introduce the above five div attributes.

1. div style attribute- TOP

Style attribute can be used directly in div tag. This attribute can directly set CSS style, also called in-tag style. Similarly, span, h2, h3, strong, p and other tags can directly use style attribute to set CSS style.

1. We have seen grammar demonstrations

font size 18px, font color red

Here is the direct div using style to set CSS style

2. Screenshot of style setting css effect

div Set style attribute CSS style case effect screenshot

3. Style summary of div attributes

Using style in div tags is to set CSS styles directly on div tags, so if you want to use style sheets directly in div tags, you can set styles directly on div using style attributes.

II. div align attribute- TOP

Directly add align attribute to the label, the effect is to make the content of the object left, center, right effect.

1. Set align attribute for div Example code is as follows

div Properties Demo Left, center, right.

2. Screenshots of tutorial cases

Set align attribute for div to realize content centering left and right

3. Related CSS Styles

1), css center, CSS left, css right is what style word implementation.

2) html div align tutorial

III. div id attribute- TOP

Use id in div tag, on the one hand if it is JS effect may be action script class recognition function, on the other hand in CSS named with #style selector style. Of course, other tags can be set id attribute.

1, id use instance code

div Properties Demo #{color:#F00; font-size:16px; font-weight:bold} Font is red, font 16px, bold

2. div id instance screenshot

Using id screenshots in div

IV. div class attribute- TOP

class and id syntax structure usage are the same, usually set the object style to use, usually in css with ". "Style selectors named with half-letter lowercase periods, applied using class in div or other tags.

1. Example complete html source code

div Properties Demo. {color:#00F; font-size:18px} Font is blue, font 18px

2. Screenshot of class div instance effect

div class attribute instance screenshot

V. Set title attribute for div- TOP

Set the title attribute for div or other tags. The effect is to display the prompt content when the mouse hovers over div or changes the object, just like setting the title attribute for a tag.

1, div+css instance code

div Properties Demo DIVCSS5 Content

2. Example effect browser screenshot

Set title to div, and take a screenshot of the effect when hovering over div object

When the mouse hovers over the div box with the title attribute, the mouse prompts to display the content information of the title setting. This is used in the same way as html a hyperlink setting title attribute.

Thank you for reading this article carefully. I hope that Xiaobian will share the article "What are the common attributes in div tags?" This article is helpful to everyone. At the same time, I hope everyone will support you more, pay attention to the industry information channel, and more relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 214

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report