div的属性总结

　　div属性

　　color : #999999 文字颜色

　　font-family : 宋体 文字字型

　　font-size : 10pt 文字大小

　　font-style:itelic 文字斜体育

　　font-variant:small-caps 小字体

　　letter-spacing : 1pt 文字间距

　　line-height : 200% 设定行高

　　font-weight:bold 文字粗体

　　vertical-align:sub 下标字

　　vertical-align:super 上标字

　　text-decoration:line-through 加?h除线

　　text-decoration:overline 加顶线

　　text-decoration:underline 加底线

　　text-decoration:none ?h除连接底线

　　text-transform : capitalize 首字大写

　　text-transform : uppercase 英文大写

　　text-transform : lowercase 英文写

　　text-align:right 文字*右对齐

　　text-align:left 文字*左对齐

　　text-align:center 文字置中对齐

　　这些是一些简单的文字效果，可以应用到css的页面中。　

　　背景

　　background-color:black 背景颜色

　　background-image : url(image/bg.gif) 背景图片

　　background-attachment : fixed 固定背景

　　background-repeat : repeat 重复排列-网页预设

　　background-repeat : no-repeat 不重复排列

　　background-repeat : repeat-x 在x轴重复排列

　　background-repeat : repeat-y 在y轴重复排列

　　background-position : 90% 90% 背景图片x与y轴的位置

　　链接

　　A 所有超连接

　　A:link 超连接文字格式

　　A:visited 浏览过的连接文字格式

　　A:active 按下连接的格式

　　A:hover 鼠标移至连接

　　边框

　　border-top : 1px solid black 上框

　　border-bottom : 1px solid #6699cc 下框

　　border-left : 1px solid #6699cc 左框

　　border-right : 1px solid #6699cc 右框

　　border: 1px solid #6699cc 四边框

　　虚线

　　<p>　　实线<p>　　<textarea style="border:1px solid pink"><p>　　===========================================================================<p>　　DIV 网页布局规范的对CSS的类及id命名<p>　　Web开发者（也就是您）可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页面元素、标签进行标识。对开发人员来说，在命名重新定义XHTML标记（tags）的CSS selectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。<p>　　在阅读了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后，我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。<p>　　直观命名<p>　　当在设计Web页面以及需要对一个div进行标识的时<p>候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：<p>　　top-panel<p>　　horizontal-nav<p>　　left-side<p>　　center-column<p>　　right-col<p>　　这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。<p>　　但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。<p>　　结构化命名<p>　　结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。<p>　　有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。<p>　　可以按照如下所示的结构化方式来对类以及id名称命名：<p>　　branding<p>　　main-nav<p>　　subnav<p>　　main-content<p>　　sidebar<p>　　这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。<p>　　即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。<p>　　一些命名惯例<p>　　Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：<p>　　header<p>　　content<p>　　nav<p>　　sidebar<p>　　footer<p>　　这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢？尽管这是我所希望的，但我并不这么<p>认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时，使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便，尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。<p>DIV属性position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。<p>left 相对于窗口左边的位置<p>top 相对于窗口上边的位置<p>width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。<p>height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。<p>color（字体颜色）：色彩代码；<p>font-size（字体大小）：数值；<p>line-height（行高）：数值；<p>border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；<p>font-weight（字体粗细）：normal、bold、bolder、lighter；<p>font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆<p>clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。<p>clip:rect(top,right,bottom,left);<p>visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。<p>z-index DIV tag 的立体位置。值越大 DIV 的位置越高。<p>background-color DIV 背景的颜色。<p>layer-background-color Netscape 的 DIV 背景颜色。<p>background-image DIV 的背景图象。<p>layer-background-image Netscape 的 DIV 的背景图象<p>filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；<p>word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；<p>direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）;<p>padding-left：层中的内容距离层左边框的距离；padding-right：层中的内容距离层左边框的距离；padding-top：层中的内容距离层顶部边框的距离；padding-bottom：层中的内容距离层底部边框的距离。<p>绝对定位和相对定位 （position）<p>绝对定位：<p>定位属性将是网虫们打开幸福之门的钥匙：<p>H4 { position: absolute; left: 100px; top: 43px }<p>这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。<p>左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，<p>顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。<p>你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。<p>相对定位：<p>绝对定位使你能精确地定位要素在页面的位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：<p>I { position: relative; left: 40px; top: 10px }<p>相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。<p>除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。<p>定位单元的控制 （width、height、visiblility）<p>除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。<p>宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的，即设定要素的宽度。<p>DIV { position: absolute; left: 200px; top: 40px; width: 150px }<p>浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸在150象素。<p>宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。<p>高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：<p>DIV { position: absolute; left: 200px; top: 40px; height: 150px }<p>这里我用了“理论上讲”，因为有些浏览器不支持高度属性。<p>可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。<p>H4 { visibility: hidden }<p>选项：<p>visible 使要素可以被看见<p>hidden 使要素被隐藏<p>inherit 指它将继承母体要素的可视性设置。<p>值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的<p>EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。<p>当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。此新闻<p>这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。<p>单元层次 （z-index）<p>特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。<p>该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图象设定z-index。（对于Communicator，最好将 标签包在或 标签内，然后将z-index应用到或 。）<p>剪辑绝对定位单元 （clip）<p>绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。<p>在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：<p>clip : rect(top,right.bottom,left) ;<p>其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。<p>控制单元溢出 （overflow）<p>固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值<p>none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。<p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div> <div class="downbox clearfix"> <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div> <div class="txt"> <h4>div的属性总结</h4> <div class="co">div属性div属性color:#999999文字颜色font-family:宋体文字字型font-size:10pt文字大小font-style:itelic文字斜体育font-variant:small-caps小字体letter-spacing:1pt文字间距line-height:200%设定行高font-weight:bold文字粗体vertical-align:sub下标字vertical-align:super上标字text-decoration:line-through加?h除</div> <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div> </div> <div class="btn"> <a href="javascript:;" class="html2word" data-model="article" data-id="raehbdcgs" title="文档下载"> <b>点击下载本文</b> <span>文档为doc格式</span> </a> </div> </div> <script>keji_detail_ga('article_content_bottom');</script> <div class="tvideo_box tvideo_box_tab"> <div class="hd"> <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul> </div> <div class="bd"> <ul class="ult_jpic clearfix"> <script>get_hot_jiaodian_content('wz_hot_jiaodian',374,'hot',1);</script> </ul> </div> </div> </div> <!--中间文章 end--> <!--右侧专题 star--> <div class="ult_zt"> <script>keji_detail_ga('article_right_top');</script> <div class="ult_ztbox"> <h4>最新推荐</h4> <ul class="tvideo_r_a clearfix"> <script>get_detail_right('wz_right_new',374,'')</script> </ul> </div> <script>keji_detail_ga('article_right_middle');</script> <div class="ult_ztbox"> <h4>猜你喜欢</h4> <ul class="telist_rb clearfix"> <script>get_detail_right('wz_right_love',374,'')</script> </ul> </div> <script>keji_detail_ga('article_right_new_bottom');</script> <div class="ult_ztbox"> <h4>热门推荐</h4> <ul class="tvideo_r_b clearfix"> <script>get_detail_right('wz_right_hot',374,'')</script> </ul> </div> <script>keji_detail_ga('article_right_bottom');</script> </div> <!--右侧专题 end--> <div style="display:none"><a href="https://www.51dongshi.net/wzztf/raehb/raehbdcgs/">专题</a> </div> </div> </div> <script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script> <script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script> <style> #qrcode{padding: 15px;background: #fff;} </style> <div id="qrcode" style="display: none"></div> <script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfraehbdcgs.html");</script> <iframe src="https://hits.51dongshi.net/?biao=ho_article&id=190562843" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <script src="https://js.51dongshi.net/js/shHighlighter.js"></script> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script> <div style="display:none"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!--foot star--> <div class="footer"> <div class="m_box"> <div class="footer_in"> <a href="#" target="_blank">产品服务</a> <a href="#" target="_blank">发展历程</a> <a href="#" target="_blank">企业资讯</a> <a href="#" target="_blank">企业文化</a> <a href="#" target="_blank">关于我们</a> <a href="#" target="_blank">加入我们</a> <a href="#" target="_blank">联系我们</a> <a href="#" target="_blank">网站导航</a> <a href="#" target="_blank">网站律师</a> </div> <ul class="ftrlist"> <li> <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a> </li> <li> <a rel="nofollow" href="https://www.12377.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a> </li> <li> <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a> </li> <li> <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a> </li> <li class="last"> <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p> </a> </li> </ul> <div class="footer_co"> <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a> <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p> <p> <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a> </p> <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p> </div> </div> </div> <!--foot end--> <a href="#0" class="cd-top">Top</a> <script type="text/javascript"> $(function(){ var _line=parseInt($(window).height()/3); $(window).scroll(function(){ if ($(window).scrollTop()>100) { $('.edu_top').css({'position':'fixed','top':'0','z-index':'99'}) }else{ $('.edu_top').css({'position':'relative','top':'0'}) } }) }) </script> <script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script> </body> </html>