我的CSS学习笔记

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凸边
说明:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的heightwidth属性,或者设定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 :  由浮点数字和单位标识符组成的长度值。不可为负值.
注意:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框.
如果只提供一个,将用于全部的四条边.
如果提供两个,第一个用于上-下,第二个用于左-右.
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下.
要使用该属性,必须先设定对象的heightwidth属性,或者设定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)"


14.IE不支持伪类:lang

 

15.设置宽度以自适应分辨率

min-760px;

expression(document.body.clientWidth < 840? "800px": "85%" );

 

 16.让超出table 中td宽度的文字自动生成“...”

首先在table的style中加上“table-layout:fixed”,然后在td的style中加上“overflow:hidden; text-overflow:ellipsis; white-space:nowrap”即可实现。


 

 

原文地址:https://www.cnblogs.com/guoxiaowen/p/1076845.html