DIV+CSS经常用到的属性、参数及说明

野性酷女 2021-11-22 23:22 435阅读 0赞

用过DIV+CSS seo教程布局网站的人都会喜欢上这种方式，虽然开始没有用传统的table直观，但用习惯了就会感觉出DIV+CSS的优越。实际应用中我搜索了DIV+CSS的常用定义项，并对其参数作了归纳和说明，与喜欢DIV+CSS的朋友共享。

通用类  
overflow:hidden;自动隐藏超出的内容，防止撑开层和表格的范围  
!important  
指定样式规则的应用优先权  
文字类 color: \#FF0000;文字颜色 font-family: “Arial”, “Helvetica”, “sans-serif”;字体 font-size: 9px;字号 text-align：center; 居中(left为居左,right为居右) line-height：28px；行高(可用150%值) font-style: italic;斜体(oblique偏斜体) font-weight: bold;服务粗体(bolder特粗，400粗值) font-variant: small-caps;小型大写字母 text-transform: capitalize;首字母大写 text-decoration: underline overline line-through blink;下划线，上划线，删除线，闪烁 text-indent: 2em;文字缩进2个字体高(或15px,即15象素)  
　　背景类 background-attachment: fixed;固定位置(scroll滚动) background: \#0066CC;背景色(transparent透明) background: url(/image/more2.gif);背景图片 background-repeat: repeat;重复(repeat-x横向重复，repeat-y纵向重复) background-position: center top;水平居中 垂直顶部(left center水平居左 垂直居中) background：url(/image/dtbg.gif) \#FEFEFE  
　　no-repeat  
　　right bottom(2px 5px);  
　　背景图片、  
　　背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)  
　　框架位置类  
　　clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)  
　　float: left;浮动对象位置居左(right, 最新列车时刻表位置居右)  
　　position：relative; 相对位置，一般在上级框架中设定 极品时刻表  
　　position：absolute; 绝对位置，配合上级框架的设定对本级框架设定，设置top、left值  
　　top：5px; 页面绝对或相对于框架顶端绝对位置  
　　left：10px; 页面绝对或相对于框架左边绝对位置  
　　width: 100px;宽100px  
　　height: 200px;高200px(可用auto和100%值)  
　　margin 上海火车时刻表：10px 20px 10px 20px；  
　　上右下左页边距(值相同可省写margin:10px)  
　　单独指定用margin-top：10px; (margin-right、margin-bottom、margin-left)  
　　padding：20px 10px 10px 20p；  
　　上右下左内容离边框的距离(值相同可省写padding:10px)  
　　单独指定用padding-top：10px;(padding-right、padding-bottompadding-left)  
　　border：\#ccc 1px solid 成都列车时刻表；  
　　四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)  
　　单独指定用border-top：\#ccc 1px solid；border-right：\#ccc 1px solid  
　　等等  
　　项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像 临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)  
　　扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)  
　　单独设置链接  
　　\#bottool a:link\{color:\#fff\};未访问的颜色  
　　\#bottool a:visited\{color:\#fff\};已访问的颜色 流量软件  
　\#bottool a:hover\{color:\#ff0\};鼠标在链接上  
　　这么多定义项, 其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位；设定框架边距：margin；设定容器内框距：padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。1、取消overflow:hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系，框架或容器的位置还是用float、position、top、left等精确定位。 3、!important  
　　指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果，我的网站就是想固定显示效果，所以不存在什么优先权。  
　　我对DIV+CSS也还在研究之中，有不当之处请大家跟贴指正，有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站，最重要的是布局思路问题，不同的设计方案，设计的繁简大不一样。我着重框架或容器的通用性，设计出几种容器的样式，就象FS4中的标签样式，然后在需要的地方调用这个样式就行了，以达到通用性而不是专用性。今天就谈这些，以后再专门谈谈这个布局设计思路问题。  
　　![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211122/51bb15240b3a44dd807d2258af5d9a07.png