Web : CSS
常用属性
1. 使用Web字体
@font-face {
font-family: Delicious;
src: url('/Delicious-Roman.otf')
}
然后调用该字体：
h3 { font-family: Delicious, sans-serif; }
在IE中显示为
2. 规定添加到文本的修饰
text-decoration: none
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本的一条线
blink 定义闪烁的文本
3. 增加或减少字符间的空白(字符间距)
h1 {letter-spacing: -0.5em}
h2 {letter-spacing: 20px}
在IE中显示为
normal: 默认。规定字符间没有额外的空间
length: 定义字符间的固定空间(允许使用负值)
inherit
4. 设置字体的尺寸
font-size: 200%
medium: 默认值
smaller: 设置为比父元素更小的尺寸
larger: 设置为比父元素更大的尺寸
length: 设置为一个固定的值
%: 设置为基于父元素的一个百分比值
inherit
5. 规定元素中的文本的水平对齐方式http://www.w3school.com.cn/css/pr_text_text-align.asp
text-align: left; 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit
6. 设置所有外边距属性(依次为上右下左)
margin: 10px 5px 15px 20px
margin: 10px 表示4个外边距都是10px
7. 设置所有内边距属性(依次为上右下左)
padding: 10px 5px 15px 20px;
padding-left: 20px;
8. 设置元素的背景颜色
backgound-color: yellow
9. 设置所有的边框属性
border: 1px dashed #aaaaaa;
10. 这是边框样式
border-style: dotted dolid double dashed; 表示上边框是点状 右边框是实线 下边框是双线 左边框是虚线
和margin属性顺序一样
border-style: dotted; 所有4个边框都是点状
11. 规定元素应该生成的框的类型
display: inline; 默认。此元素会被显示为内联元素，元素前后没有换行符
none: 此元素不会被显示
block: 此元素会被显示为块级元素，此元素前后带有换行符
inherit: 规定应该从父元素继承display属性的值
12. 设置表格的边框是否合并为一个单一的边框
table {
border-collapse: collapse;
}
siparate 默认值。边框会被分开。不会忽略border-spacing和empty-cells属性
collapse 如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性
inherit
13. 设置背景图像http://www.w3school.com.cn/css/pr_background-image.asp
background-image: url(bgimage.gif);
background-repeat: none(默认值) 根据此值，可以设置图像无线平铺或者不平铺等。
14. 规定元素的定位类型
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
在IE中显示为
static 默认值。没有定位，元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)
absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，"left: 20"会向元素的LEFT位置添加20像素。
inherit
15. 定义元素在哪个方向浮动
float: none; 默认值。元素不浮动，并会显示在 其在文本中出现的位置
left: 元素向左浮动
right: 元素向右浮动
inherit
expression用法 :
width: expression(document.body.clientWidth);
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight);
top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2);
left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2);