欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

div 属性 DIV标签属性有什么如何设置属性

div 属性介绍,对DIV可加属性有哪些,DIV属性一览表DIVCSS5整理

DIVCSS5给大家整理DIV标签内常用属性,同时通过div各属性小实例,让大家认识各属性并掌握属性。

div标签内常用属性列表

  • 1、style 设置css样式(扩展了解style标签)
  • 2、align 设置div盒子内的内容居中、居左、居右
  • 3、id 引人外部对应#(井号)选择符号样式
  • 4、class 引人外部对应.(句号)选择符号样式
  • 5、title 设置div(标题)鼠标经过时显示文字(扩展了解 title标签

 

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

一、div style属性   -   TOP

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

1、我们见过语法示范

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

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

2、style设置css效果截图

div内设置style属性CSS样式案例效果截图
div内设置style属性CSS样式案例效果截图

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

二、div align属性   -   TOP

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

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

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>div的属性演示</title> 
  6. </head> 
  7. <body> 
  8. <div align="left">居左</div> 
  9. <div align="center">居中</div> 
  10. <div align="right">居右</div> 
  11. </body> 
  12. </html> 

2、教程案例截图

对div设置align属性实现内容居中 居左 居右
对div设置align属性实现内容居中 居左 居右

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

三、div id属性   -   TOP

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

1、id使用实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>div的属性演示</title> 
  6. <style> 
  7. #divcss5{color:#F00; font-size:16px; font-weight:bold} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div id="divcss5"> 
  12. 字体为红色,字体16px,加粗 
  13. </div> 
  14. </body> 
  15. </html> 

2、div id实例截图

在div中使用id截图
在div中使用id截图

四、div class属性   -   TOP

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

1、实例完整html源代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>div的属性演示</title> 
  6. <style> 
  7. .divcss5{color:#00F; font-size:18px} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"> 
  12. 字体为蓝色,字体18px 
  13. </div> 
  14. </body> 
  15. </html> 

2、class div实例效果截图

div class属性实例截图
div class属性实例截图

五、对div设置title属性   -   TOP

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

1、div+css实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>div的属性演示</title> 
  6. </head> 
  7. <body> 
  8. <div title="鼠标悬停时 我显示"> 
  9. DIVCSS5内容 
  10. </div> 
  11. </body> 
  12. </html> 

2、实例效果浏览器截图

对div设置title
对div设置title,鼠标经过悬停在div对象上时效果截图

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

六、div属性总结   -   TOP

以上基础与实例介绍对div标签内设置常用属性,同时其它标签也可以设置以上五点属性,原理语法结构均相同,大家可以根据DIVCSS5教程举一反三使用。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r642.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-11-13 13:34 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。