CSS之字体属性与文本属性
2018-02-07 本文已影响0人
359afe052eac
CSS之字体属性
- font-family 设置字体,比如微软雅黑,宋体
- font-size: 1cm; 设置字的大小
- font-style: italic; 设置斜体
- font-weight: 800; 设置字体加粗,400相当于normal,700等价于bold
- 这些属性可以给一个属性使用,也可以同时使用,div4就是同时使用这些属性
演示代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div0{
font-family:"宋体"}
#div1{
font-size: 1cm;
}
#div2{
font-weight:900;
}
#div3{
font-style: italic;
}
#div4{
font-weight:900;
font-style: italic;
font-size: 1cm;
font-family:"宋体"
}
</style>
</head>
<body>
<div>我是原始字体</div>
<div id="div0">我变宋体了</div>
<div id="div1">我变大了</div>
<div id="div2">我变粗了</div>
<div id="div3">我变斜了 </div>
<div id="div4">我全变了</div>
</body>
</html>
- 在浏览器中演示的结果如下:
字体属性
CSS之文本属性
-
color: #cb0000 设置颜色,可以用取色器获取16进制的颜色值
-
text-align 设置文本的对齐方式
- text-align: center; 表示居中
- text-align: right; 表示居右
- text-align: left; 表示居左
-
line-height 设置当前行与其相邻的上下两行的间距
- 例如 : line-height: 100px;表示当前行与上下两行间距100像素
-
text-decoration 向文本添加装饰
- 赋值为none 用来取消超链接的下划线
演示代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div0{
color: #cb0000;
}
#div1{
text-align: right;
}
#div2{
line-height: 100px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>我是原始样式</div>
<div id="div0">我变色了 </div>
<div id="div1"> 我置右了 </div>
<div id="div2">我有行间距了</div>
<a href="http://www.baidu.com">百度一下,你就知道</a>
</body>
</html>
运行结果如下:
文本属性
