CSS字体 ,文本属性

font-family:
作用:设置文本的字体系列
语法:font-family:字体名称
常用值:
一个字体名称或系列名称(介绍常用字体名称、字体系列)
微软雅黑 Microsoft YaHei
宋体 simsun
黑体 HeiTi
楷体 KaiTi
多个字体名称
逗号分开
如果浏览器不支持第一个字体,则会尝试下一个(回退机制)

.box{
/*font-family:"微软雅黑","宋体";*/
/*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同,谁在前使用哪一个*/
font-family:"微软雅黑abc","宋体"; /*第一个任意改写一个系统不存在的字体,会按照第二个字体显示*/}

注意如果字体名称包含空格、汉字、特殊字符,必须加引号。

.box{font-family: "Microsoft YaHei";}

font-size
作用:设置字体的大小
语法:font-size:值
常用值:
长度值(通常是像素px)
百分比(相对于父元素计算)
em
相对单位
如果用于字号,相当于父元素字号计算,如果用于其它属性,相对于当前元素的字号
大多数浏览器的默认值字号:16px
font-style
作用:设置字体风格
语法:font-style:值
常用值:
normal默认值
italic斜体显示
font-weight
作用:设置字体粗细
语法:font-weight:值
常用值:
normal默认值
bold加粗
100-900九级字重, 400相当于normal,700相当于bold
注:不是所有字体都内置了九级字重
line-height
作用:设置行高(效果是产生文本行间距)
语法:line-height:值
特性:实现单行文本的垂直居中
测量:文字高+行间距

常用值
normal默认。设置合理的行间距。
px 设置固定的行间距。
number设置数字,此数值会与当前的字号相乘来设置行间距。

百分比:相对于font-size计算

.box{
/*line-height:2;*/
line-height:200%; /*产生的效果一致都是字号的两倍*/
}

font简写
作用:设置所有字体属性
语法:font: 字体风格 字体加粗 字号/行高 字体;
依次【空格】隔开
总结:只有当【字号和字体】同时存在简写才是有效的,简写属性可以精简简代码

box2{
/* font:italic bold 20px "宋体"; */
font:20px "宋体";
}

text-align:
作用:设置文本的水平对齐方式
语法:text-align:值
常用值
left居左对齐 [默认值]。
right居右对齐。
center居中对齐。
justify两端对齐
注:适用于块状元素
text-decoration
作用:设置文本装饰
语法:text-decoration:值
常用值
none 默认。定义标准的文本。 【常用】
underline 定义文本下的一条线 【常用】
line-through 定义穿过文本的一条线。【比较常用】
overline 定义文本上的一条线。 【不常用】
text-indent
作用:设置文本块首行的缩进
语法:line-height:值
常用值
默认值:0
长度值,px,em(更方便)
百分比: 相对于元素内容宽进行计算
允许负值
color
作用:设置文字的颜色
语法:color:颜色值
常用值
颜色的常用表式方法
颜色名称:如red、blue等
.box{
/*line-height:2;*/
line-height:200%; /*产生的效果一致都是字号的两倍*/
}
.box2{
/* font:italic bold 20px "宋体"; */
font:20px "宋体";
}指定 CSS 表格边框,使用 border 属性,通常定义td,th的边框属性
表格会呈现双边框,是因为表和 th / td 元素有独立的边界。
table存在默认属性border-collapse:separate
border-collapse表示折叠边框
十六进制颜色表示方法
语法:如#ff0000
说明:#rrggbb
r,g,b取值范围为00-ff
r red 红色
g green 绿色
b blue 蓝色
认识常见颜色的写法
白色(#ffffff)、黑色(#000000)
红色(#ff0000)、绿色(#00ff00)、蓝色(#0000ff)
颜色简写
rgb颜色表示方法
语法:rgb(255,0,0)
说明:rgb(r,g,b)
r,g,b取值范围为0-255
认识常见颜色的写法
白色: rgb(255,255,255) 、黑色 : rgb(0,0,0) 
红色: rgb(255,0,0) 、绿色: rgb(0,255,0) 、蓝色: rgb(0,0,255) 
transparent透明色

字体文本属性大多具有继承性

可继承的属性
font-size
font-family
font-style
font-weight
font
line-height
text-align
text-indent
color
不可继承
text-decoration
穿透性

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值