`

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

阅读更多
用过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和其它的浏览器要区别显示出的效果,我的网站就是想固定显示效果,所以不存在什么优先权。
分享到:
评论

相关推荐

    利用css的clear属性实现广告文字环绕效果

    加载完毕后回调函数----回调参数说明:url-传回图片地址值,picDiv-传回所加载图片DIV的ID,w-传回的图片原始宽度,h-传回的图片原始高度;  加载图片事件参数说明:  url-图片路径,picDiv-装载图片的DIV的ID,用法...

    div背景定位background设置元素的背景参数

    我都是会把工作中接触到的新知识放在我的微博里面,但是由于微博总是限制我的字数,有很多内容我都是分散成几个部分,现在我...DIV背景定义参数:background 设置元素的背景参数,其中属性依在写博客之前 我都是会把

    css实现div内凹角样式的示例代码

    用到的属性则是background或background-image结合径向渐变radial-gradient。示例: background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 而对于径向渐变,主要是3个参数控制。 一个是...

    css实现div自动添加滚动条(图片或文字等超出时显示)

    原来用过,没有太在意,最近又用到。记下方便以后用。 复制代码代码如下: <div xss=removed></div> 语法: overflow : visible | auto | hidden | scroll ; 参数: 1.visible :不剪切内容也不添加滚动条。假如显式...

    jQuery打印指定区域Html页面并自动分页

    最近项目中需要用到打印HTML页面...有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。 PrintArea部分源码: var modes = { iframe : iframe, popup : popup }; var defaults = {

    ExtAspNet_v2.3.2_dll

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    JavaScript Table行定位效果

    w3c的table部分中说width属性是the desired width of the entire table,我估计entire就是包含了padding和border,找不到什么其他说明,先这么理解吧。 定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed...

    jQuery完全实例.rar

    jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    4) 新增按键形式的控件状态栏,可通过toolbar.css样式文件控制其外观,并且按键形式的状态栏为默认状态栏,可通过新增的ImageStatusBar属性设置为True来换回以前图像形式的状态栏。 5) 将粘贴功能区分为粘贴...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    6)调整了控件弹出窗口的方式,部分功能的模式窗口转换为Div+CSS的窗口! 7)调整pathtype属性默认值为AbsoluteFull(绝对全路径)! 8)增加对VS2008的支持,使用VS2008的用户请使用DotNetTextBox2008.sln打开项目,VS2005的...

    精通JavaScript

    • 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法...

    精通javascript

    • 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法...

    jquery插件使用方法大全

     在编写js库代码时候,你一定经常和“$”美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    (就是上文DTD说明语句中的PUBLIC属性)。比如,两个相同行业不同地区的人使用同一个DTD文件来作为文档创建规范,那么他们的数据就很容易交换和共享。网上有其他人想补充数据,也只需要根据公用的DTD规范来建立文档,...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...

Global site tag (gtag.js) - Google Analytics