您的位置：首页 > Web前端 > CSS

CSS之字体属性与文本属性

2018-02-07 13:13 429 查看

CSS之字体属性与文本属性

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>

运行结果如下:

文本属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航