我的CSS学习笔记

最新推荐文章于 2024-09-23 15:32:37 发布

weixin_33749131

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量158

点赞数

原文链接：http://www.cnblogs.com/guoxiaowen/archive/2008/02/21/1076845.html

版权

1.文字修饰中text-decoration:blink(文字闪烁)在现在的浏览器中已经无法显示效果.

2.排列元素中的文本text-align:justify的效果为使文字行两端对齐.但是要注意的是,不足一行的文字无法显示该效果,且段落的最后一行也无法显示该效果.

3.设置文字阴影与模糊效果text-shadow,是控制网页中文字阴影属性的样式(Style)，但是，目前只有Safari浏览器支持text-shadow。如果是其他浏览器想实现文字阴影效果，必须使用一些其他的技术或是属性。当然，纯“CSS”也是可以的。其语法为:
text-shadow : color 　length　length　opacity
其中,
color : 设置阴影颜色;
length : 设置阴影水平方向的延长值;
length : 设置阴影垂直方向的延长值;
opacity : 由浮点数字和单位标识符组成的长度值.不可为负值.指定模糊效果的作用距离.如果你仅仅需要模糊效果,将前两个length全部设定为0.
注意：此属性只支持Safari浏览器.
注意：上述4个属性是写在一起的.
注意:可以被用于伪类:first-letter和 :first-line.

4.white-space:pre 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐.但是实际上并看不到效果,多个空格还是会被合并成一个,因为ie对white-space:pre的解析不符合css1标准，是个bug.

5.text-underline-position只能与text-decoration:underline联用才能有效果,与其他属性,例如text-decoration:overline,text-decoration:line-through等都不能产生效果.text-underline-position:above的效果等同于text-decoration:overline.

6.border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用.
对应的脚本特性为borderStyle.

7.border-bottom : border-width || border-style || border-color
其中border-width : medium | thin | thick | length 的参数有:
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值.
注意:
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框.
如果只提供一个，将用于全部的四条边.
如果提供两个，第一个用于上－下，第二个用于左－右.
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下.
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute.
如果border-style设置为none，本属性将失去作用.
对应的脚本特性为borderWidth.

8.margin又名外补丁,表示边距,定义元素周围的空间;padding又名内补丁,表示填充,定义元素边框与元素内容之间的空白.

9.list-style:list-style-type|list-style-position|list-style-image
同时使用所有属性的例子:list-style:disc inside url("xx.jpg")

10.list-style-type设置列表项标记的类型(以下标记有CSS1的是可以使用的值):
disc : 　CSS1　实心圆
circle : 　CSS1　空心圆
square : 　CSS1　实心方块
decimal : 　CSS1　阿拉伯数字
lower-roman : 　CSS1　小写罗马数字
upper-roman : 　CSS1　大写罗马数字
lower-alpha : 　CSS1　小写英文字母
upper-alpha : 　CSS1　大写英文字母
none : 　CSS1　不使用项目符号
armenian : 　CSS2　传统的亚美尼亚数字
cjk-ideographic : 　CSS2　浅白的表意数字
georgian : 　CSS2　传统的乔治数字
lower-greek : 　CSS2　基本的希腊小写字母
hebrew : 　CSS2　传统的希伯莱数字
hiragana : 　CSS2　日文平假名字符
hiragana-iroha : 　CSS2　日文平假名序号
katakana : 　CSS2　日文片假名字符
katakana-iroha : 　CSS2　日文片假名序号
lower-latin : 　CSS2　小写拉丁字母
upper-latin : 　CSS2　大写拉丁字母
说明:
若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用.
仅作用于具有display值等于list-item的对象（如li对象）.
注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性.
IE5.5尚不支持所有CSS2的值.
对应的脚本特性为listStyleType.

11.list-style-position:inside|outside设置列表中列表项标记被放置的位置
outside : 　列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside : 　列表项目标记放置在文本以内，且环绕文本根据标记对齐
说明:
仅作用于具有display值等于list-item的对象（如li对象）.
注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性.
对应的脚本特性为listStylePosition.

12.line-height:number设置一个数字，此数字会与当前的字体尺寸相乘来设置行间距.

13.clip:rect(top,right,bottom,left)
Clipping的中文解释就是剪辑的意思，这个属性决定了对象的哪个部位可以被看到.它不会改变任何对象的性质.
Clipping 的区域是一个矩形，而这个矩形的尺寸取决于于四个边的位置.
这四个边用 top, right, botton, left 来表示.
请注意：这四个边的位置是相对于对象的而不是相对于窗口的,且这个属性要和position:absolute一起用才有效果.例如:
img
{
position:absolute;
clip:rect(0px,50px,200px,0px)
}
脚本语法:object.style.clip="rect(0px,50px,200px,0px)"