精通CSS+DIV:3,用CSS设置文字效果

一,文字样式
1,字体
p {font-family: 黑体,Arial,宋体,sans-serif;}

浏览器按先后顺序查找字体,如果这些字体都没有,则使用浏览器默认字体显示

2,大小
# 绝对大小物理单位(与分辨率无关)
p.inch {font-size: 0.5in;}
p.cm {font-size: 0.5cm;}
p.mm {font-size: 4mm;}
p.pt {font-size: 12pt;}
p.pc {font-size: 2pc;}

# 绝对大小关键字(不同浏览器效果不同)
p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six {font-size: x-large;}
p.seven {font-size: xx-large;}

# 相对大小(与分辨率和父标记有关)
p.one {font-size: 15px;}
p.one span {font-size: 200%;}  # 父标记的200%
p.two {font-size:30px;}
p.two span {font-size:0.5em;}  # 父标记的0.5


3,颜色
h1 {color: blues;}
h2 {color: #00f;}
h3 {color: #0000ff;}
h4 {color: rgb(0,0,255);}
h5 {color: rgb(0%,0%,100%);}


4,粗细
h1 span {font-weight: lighter;}
span.one {font-weight: 100;}
span.two {font-weight: 200;}
span.three {font-weight: normal;}


5,斜体
h1 {font-style: italic;}
h1 span {font-style: normal;}
p {font-style: oblique;}


6,下划线、顶划线和删除线
p.one {text-decoration: underline;}
p.two {text-decoration: overline;}
p.three {text-decoration: line-through;}
p.four {text-decoration: blink;}


7,英文字母大小写
p.one {text-transform: capitalize;}
p.two {text-transform: uppercases;}
p.three {text-transform: lowercase;}


二、段落样式
1,水平对齐
p.left {text-align: left;}        /*左对齐*/
p.right {text-align: right;}      /*右对齐*/
p.center {text-align: center;}    /*居中对齐*/
p.justify {text-align: justify;}  /*两端对齐*/



2,垂直对齐
td.top {vertical-align: top;}
td.bottom {vertical-align: bottom;}
td.middle {vertical-align: middle;}
span.zs {vertical-align: 10px;}
span.fs {vertical-align: -10px;}


3,行间距和字间距
p.one {line-height: 8pt;}             /*绝对数值行间距*/
p.two {line-height: 1.5em;}           /*相对数值行间距*/
p.three {letter-spacing: -2pt;}       /*绝对数值字间距*/
p.four {letter-spacing: .5em;}        /*相对数值字间距*/


4,首字放大
p {font-size: 15px;}
p span.first {
  font-size: 60px;
  float: left;
  padding-right: 5px;
  font-weight: bold;
  font-family: 黑体;
  color: blue
}

你可能感兴趣的:(css,浏览器)