文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

div标签内常用属性有哪些

2024-04-02 19:55

关注

这篇文章主要介绍了div标签内常用属性有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

div标签内常用属性列表

接下来DIVCSS5为大家逐个介绍DIV属性,通过HTML基础语法结构、CSS语法基础结构,再到通过实例图文方式介绍以上五点div 属性。

一、div style属性    -   TOP

在div标签内可以直接使用style属性,此属性可以直接设置CSS样式,也叫标签内样式,同理span、h2、h3、strong、p等标签都可以直接使用style属性来设置CSS样式。

1、我们见过语法示范

<div style="color:#F00; font-size:18px">字体大小18px,字体颜色为红色</div>

这里就是直接div使用style设置CSS样式

2、style设置css效果截图

div标签内常用属性有哪些
div内设置style属性CSS样式案例效果截图

3、div属性之style总结
对div标签内使用style作用是直接对div标签设置CSS样式,所以要想div直接标签内使用样式表,那直接对div使用style属性设置样式即可。

二、div align属性    -   TOP

直接对标签内加align属性,作用是让对象内的内容居左、居中、居右效果。

1、对div设置align属性实例代码如下

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div的属性演示</title> </head> <body> <div align="left">居左</div> <div align="center">居中</div> <div align="right">居右</div> </body> </html>

2、教程案例截图

div标签内常用属性有哪些
对div设置align属性实现内容居中 居左 居右

3、相关CSS样式
1)、css 居中、CSS居左、css居右是什么样式单词实现。
2)、html div align教程

三、div id属性    -   TOP

在div标签内使用id,一方面如果是JS特效可能是动作脚本类识别功能,另外一方面在CSS中以#号命名的样式选择器样式。当然其它标签均可以设置id属性。

1、id使用实例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div的属性演示</title> <style> #编程网{color:#F00; font-size:16px; font-weight:bold} </style> </head> <body> <div id="编程网"> 字体为红色,字体16px,加粗 </div> </body> </html>

2、div id实例截图

div标签内常用属性有哪些
在div中使用id截图

四、div class属性    -   TOP

class和id语法结构用法均相同,通常设置对象样式使用,通在css中以“.”英文半角小写句号开头命名的样式选择器,在div或其他标签使用class应用。

1、实例完整html源代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div的属性演示</title> <style> .编程网{color:#00F; font-size:18px} </style> </head> <body> <div class="编程网"> 字体为蓝色,字体18px </div> </body> </html>

2、class div实例效果截图

div标签内常用属性有哪些
div class属性实例截图

五、对div设置title属性    -   TOP

对div或其它标签设置title属性,作用是当鼠标经过悬停与div或改对象时候显示提示内容,就像对a标签设置title属性相同道理(了解 网页中title)。

1、div+css实例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div的属性演示</title> </head> <body> <div title="鼠标悬停时 我显示"> DIVCSS5内容 </div> </body> </html>

2、实例效果浏览器截图

div标签内常用属性有哪些
对div设置title,鼠标经过悬停在div对象上时效果截图

当鼠标经过悬停与设置title属性的div盒子上时,鼠标旁边提示显示title设置的内容信息。此使用方法与html a超链接设置title属性相同。

感谢你能够认真阅读完这篇文章,希望小编分享的“div标签内常用属性有哪些”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯