一、字体属性
属性 |
描述 |
font-style |
设置字体风格 |
font-weight |
设置字体粗细 |
font-size |
设置字体的尺寸(一般用px表示) |
font-family |
设置字体系列 |
font |
简写属性,作用是把所有针对字体的属性设置在一个声明中(注意顺序)例如:font:italic bold 16px “楷体”; |
字体的简写属性顺序:
font:font-style || font-variant || font-weight || font-size/line-height || font-family。
二、文本属性
属性 | 描述 |
color | 设置文本的颜色,如red |
line-height | 设置文本的行高 |
text-align | 设置文本的对齐方式,如left、center、right |
text-decoration | 设置文本装饰,如underline、none、line-through |
注意:text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
例如:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>字体、文本属性</title>
<style type="text/css">
/*
div p span{
font-family: "楷体";
font-style: italic; <!--设置字体是斜体-->
font-size: 16px; <!--设置字体的大小-->
font-weight: 800; <!--设置字体加粗 100~500正常 600以上加粗 blod 字体加粗 normal 字体正常-->
}*/
h1{
text-align: center;
}
/*统一设置字体*/
div p span{
font: italic bold 16px "楷体";/*设置字体*/
color:blue;/*设置文本的颜色*/
text-decoration: underline;/*设置文字添加下划线*/
line-height: 30px; /*设置文本的行高*/
}
</style>
</head>
<body>
<div>
<h1>京东商城--全部商品分类</h1>
<h2>图书、音像、电子书刊</h2>
<p>
<span>电子书刊</span>电子书 网络原创 数字杂志 多媒体图书
</p>
<p><span>音像</span>音乐 影视 教育音像</p>
<p><span>经管励志</span>经济 金融学投资 管理 励志与成功</p>
</div>
</html>
浏览器运行效果: