css 文字样式

css 通过 font-family
h2{font-family:黑体,幼圆;}
意思:如果有黑体就用黑体,幼圆有幼圆就用幼圆
p{font-family:Arial, Helvetica, sans-serif;}
意思:字体中没有Arial,就用Helvetica,没有sans-serif,都没有就用浏览器默认字体

文字的颜色
h2{ color:rgb(0%,0%,80%); } //rgb(红0%,绿0%,蓝80%)

p{
color:#333333; //数字控制方式
font-size:13px;
}
p span{ color:blue; } //英文单词控制方式

文字的粗细
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }
//100 200 300 文字粗细和文字大小基本没有什么区别

h1 span{ font-weight:lighter;} //font-weight 是定义文字粗细的 lighter 为正常文字,bold表示粗体normal,表示细体

文字下划线,顶划线,删除线
p.one{ text-decoration:underline; } /* 下划线 */
p.two{ text-decoration:overline; } /* 顶划线 */
p.three{ text-decoration:line-through; } /* 删除线 */
p.four{ text-decoration:blink; } /* 闪烁 */

文字斜体
h1{ font-style:italic; } /* 设置斜体 */
h1 span{ font-style:normal; } /* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }

英文字母大小写
p{ font-size:17px; }
p.one{ text-transform:capitalize; } /* 单词首字大写 */
p.two{ text-transform:uppercase; } /* 全部大写 */
p.three{ text-transform:lowercase; } /* 全部小写 */

css 段落文字(段落水平对齐,垂直对齐,行间距,子间距,首字放大)

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; }
-->

首字下沉
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 与右边的间隔 */
font-weight:bold; /* 粗体字 */
font-family:黑体; /* 黑体字 */
color:yellow; /* 字体颜色 */
}

字体间距
p.one{
font-size:10pt;
letter-spacing:-2pt; /* 字间距,绝对数值,负数 */
}
p.second{ font-size:18px; }
p.third{ font-size:11px; }
p.second, p.third{
letter-spacing: .5em; /* 字间距,相对数值 */
}

行间距
p.one{
font-size:10pt;
line-height:8pt; /* 行间距,绝对数值,行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行间距,相对数值 */
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值