CSS-小技巧
|
介绍CSS属性border-width边框宽度属性的用法
|
| border-width属性简介： border-width边框宽度属性用来设定边框的宽度。边框区域的定义，可参见 CSS 盒子模式 (Box Model) 。 值：<border-width>{1,4} | inherit 可用值 值的说明 medium 缺省值。中等宽度。 thin 比 medium 细。 thick 比 medium 粗。 width 浮点数后跟绝对长度单位 (cm, mm, in, pt, or pc) 或相对长度单位 (em, ex, or px)。 border-width 是 border-top-width， border-right-width， border-bottom-width，border-left-width 的一种快捷的综合写法，最多允许四个值，依次的顺序是：上，右，下，左。 如果只有一个值，表示四个边框都用同样的宽度。如果有两个值，第一个值表示上下边框宽度，第二个值表示左右边框宽度。如果有三个值，第一个值表示上边框宽度，第二个值表示左右边框宽度，第三个值表示下边框宽度。 示例代码 .d2 {border-width:thin;border-style:solid;} .d3 {border-width:thick;border-style:solid;} .d4 {border-width:10px;border-style:solid;} .d5 {border-width:5mm;border-style:solid;}
|
CSS属性background-position用法
语法:
background-position : length || length
background-position : position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。
示例：
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }
|
CSS属性position用法
|
|
语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位规则 absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 fixed : IE5.5及NS6尚不支持此属性 说明： 检索对象的定位方式。 对应的脚本特性为position。请参阅我编写的其他书目。 示例： div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; } div { position:relative; top:-3px; left:6px; }
|
如何隐藏网页中的层DIV
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白：
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间，如下
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
|
CSS兼容IE6/IE7/FF的通用方法
|
||
|
来源:网络 | 2007-7-14 | (有1230人读过)
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style>2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持. 而*+html 又为 IE7特有标签. <style> #wrapper { #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ } </style> 注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 二、万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽. <style> /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ </style> 三、其他兼容技巧(再次啰嗦) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. P.S 至于IE5以及其他浏览器就没有必要兼顾了. 在这上面花时间不值得.
CSS实用小技巧14则 [摘 要] 用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来，供诸位参考。 CSS是Cascading Style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一 1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？ 2、CSS的三种用法在一个网页中要以混用吗？ 3、在Dreamweaver3中如何使外部文件式CSS？ 4、如何用Dreamweaver3快速创建CSS外连式文件？ 5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？ 6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”，好象没什么用，不要可以吗？ 7、如何给一部分文字加背景色？ 8、如何给部分文字加背景图像？ 9、如何使页面的背景在文字“滚动”时背景图案静止不动？ 10、如何定义字间距？ 11、如何给文字加上划线、下划线、删除线和闪烁？ 12、如何使网页具有“首行缩进”功能？ 13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？ 14、能给某部分内容加边框吗？
背景位置属性(background-position) body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
背景属性(background) body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px} |
|
css中link和@import区别 |
|
css在页面里面一般有三种引入方式 1.在页面里面直接写 <style type="text/css"> body{ margin: 0; padding: 0; } </style>
2.用link进行引用 <link rel="stylesheet" type="text/css" href="my.css"> 3.用import进行引用 <style type="text/css"> @import url(my.css); </style> 第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。 问题1.到底link和@import有什么区别？ 我们先来看看他们的定义 Quote link元素 HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另 外形式的信息（RSS）、联系信息等等。 Quote @import 指定导入的外部样式表及目标设备类型。 其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签, link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能 调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。：） 问题2.link合import到底那个更好？ 上面说了因为上面的老大不一样，所以在使用上就会有一些细节的区别，不能说总体谁好谁坏， 只能说具体情况具体分析。 1）我要用javascript进行样式选择； 这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。 看下列代码 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" /> <link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" /> <link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" /> <link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" /> 这是一段很经典的改变页面风格的代码，因为我们今天主要讲的是link和import，所以我这里只列出了引用css部分。 我们先来看看link里面个个属性都是表达了什么意思： [1]rel:用来声明链接对象的作用或者类型。 譬如上面的的代码："stylesheet"表示链接一个默认的css,而"alternate stylesheet"折表示备选的css [2]href:这个就不用我说了吧，引用css的文件路径。 [3]tyle:文件类型 [4]media:应用的设备，"screen"是说明应用在屏幕上。 [5]title:是css的名称。 这段代码中一共有5个css,第一个是基本样式，而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。 2）我要在应用打印样式； 打印样式顾名思义就是打印页面时候的样式。 这个样式在普通浏览下是没有效果的，只有在打印的时候生效。 如果要为页面单独引用打印样式的话，link和@import都可以的。 link代码 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="print" /> @import代码 <style type="text/css"> @import url(foo.css) print; </style> 另外对于css来说还有一种方式@media： @media print { @import "print.css" } 用@media先制定设备为 print,然后再用@impor链接 3）我要引用多个样式； 如果要在一个页面上引用多个样式组合产生效果的话，永link和@import也是都可以的。 link代码 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" /> @import代码 <style type="text/css"> @import url(../css/base/my.layout.css); @import url(../css/base/my.typo.css); </style> 不过个人觉得，用@import引用多文件的时候更加清晰一些 另外对于多样式还有一种link于@import的组合用法。 先用link引用一个css文件 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> 然后在这个css文件里面再引用。 <style type="text/css"> @import url(../css/base/my.layout.css); @import url(../css/base/my.typo.css); </style> 这样做的好处是，如果你一个站点所有页面引用的样式都是一样的， 而有又多个css，如果你每个页面都加4,5个一样的css样式，却是浪费代码和精力， 所以莫不如这样做，所有一个页面都引用一个css，然后一个css在引用多个css，方便。 |