搜集CSS的一些用法

收集CSS的一些用法

1. css中hideFocus的用法

简单说：hideFocus是对超链接外虚线框的设定！

hideFocus即隐藏聚焦，具有使对象聚焦失效的功能，其功能相当于： onFocus="this.blur()"

它的值是一个布尔值，如hideFocus=true。也可省略赋值直接写hideFocus。

你给的代码如果没有hideFocus,那么鼠标点击该超链接，则外面出现一个虚线框，即为聚焦。而使用了hideFocus则不会有虚线框。

在IE下，需要在标签 a 的结构中加入 hidefocus="true" 属性。

演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

<a href="#" hidefocus="true" title="XX">没有虚线框</a>

</BODY></HTML>

而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：

a {outline:none;} 或者 a{blr:expression(this.onFocus=this.blur());outline:none;}//支持IE

2. background-color

所有浏览器都支持 background-color 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值

值描述

color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

3. CSS中的属性clear用法

其属性值有四个clear:both|left|right|none;
简单来说呢，clear属性的作用就是“清除”浮动。
如果某元素设置clear:left;表示该元素左边不存在浮动元素
相应的，clear:right;表示该元素右边不存在浮动元素；clear:both;表示该元素两边都不存浮动元素。
clear:none表示两边允许有浮动元素。

在视觉上要使某元素左边或右边不存在浮动元素,就只有它往下移一行，或浮动元素往下移一行。
（这个元素肯定是不能将浮动元素清除的了,只是用这样的方式达到页面布局的效果而已）

4. CSS margin 属性

定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

例子 1

margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

例子 2

margin:10px 5px 15px;

上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

例子 3

margin:10px 5px;

上外边距和下外边距是 10px
右外边距和左外边距是 5px

例子 4

margin:10px;

所有 4 个外边距都是 10px

5. 透明处理

opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
具体参数含义如下：
opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style    指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形
startx   渐变透明效果开始处的 X坐标。
starty   渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
以上的参数可以选用，可以只设置一个opacity
例如：
{filter:alpha(opacity=50)}
这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用";"间隔，不然设置是无效的
例如：
我要设置模版区域背景的颜色（白色）+半透明[就是我现在blog的效果]
只要在
.modbox{}
.modbl{}
.modbc{}
.modbr{}
中都设置background-color:white
这些就是模版背景设置的ID
然后再在.modbox,.modbl,.modbc,.modbr{}
中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了

如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可
background:transparent                        这就是背景全透明的代码

6. textarea 标签中 resize 缩放属性的设置

CSS 3中新增了resize 缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css 3属性，即Google chrome和Apple safari都支持。

而textarea 标签中，Webkit内核的浏览器会默认resize 的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea 的默认显示，textarea 右下角有一个可以控制缩放的按钮。

一般情况下，textarea 是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea 添加resize :none的css 属性。这样就可以去除Webkit内核的浏览器的默认显示。

以下是resize 属性的的各个取值:

none：用户不能操纵机制调节元素的尺寸；
both：用户可以调节元素的宽度和高度；
horizontal：用户可以调节元素的宽度；
vertical：让用户可以调节元素的高度；
inherit：默认继承。

1 楼 zui4yi1 2011-09-07

hideFocus很好用，图片背景的button中，我就经常用hideFocus来去掉外虚线框。

搜集CSS的一些用法

可能的值

例子 2

6. textarea 标签中 resize 缩放属性的设置

相关推荐