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

CSS-文字相关属性

2017-03-29 22:06 176 查看
上篇博文介绍了css的固定格式，这次让我们来看看文字的相关属性吧！

css文字相关属性

在我们运用开发工具的同时，了解工具的快捷键会让我们事半功倍，我也会po出css中idea的一些快捷键

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字相关属性</title>
<style>
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family:"微软雅黑";

}
</style>
</head>
<body>
<!--
1.规定文字样式的属性
格式：font-style: italic;
取值：
normal:正常的，默认就是正常
italic：倾斜的
快捷键：
fs font-style
fsn font-style: normal;

2.规定文字的粗细的属性
格式：font-weight: bold;
单词取值：
bold：加粗
bolder：比加粗更粗
lighter：细线 ，默认
快捷键：
fw font-weight
fwb font-weight: bold;
fwbr font-weight: bolder;

数字取值：
100-900之间整百数字

3.规定文字大小的属性
格式：font-size: 30px;
单位：px(像素pixel)
注意点：通过font_size设置大小一定要带单位
快捷键
fz font-size
fz30  font-size: 30px;

4.规定文字字体的属性
格式：font-family:"微软雅黑";
注意点：如果取值是中文，需要用双引号或者单引号括起来
快捷键
ff font-family
-->

<p>
我是段落
</p>
</body>
</html>


在开发过程中我们可能还会遇到一些问题：

1、字体不存在？

系统会用默认字体

2、不想用默认字体？

给字体设置备选方案

格式：

font-family:”字体1”,”字体2”，…;

3、如果我们想给英文和中文分别单独设置字体？

中文字体可以包含英文

英文字体不包含中文

我们可以利用这个特点，先设置英文字体，在备选方案设置中文字体

ex.

font-family:”Arial”,”宋体”;

在补充一下文字属性的缩写

<style>
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family:"微软雅黑";

}
</style>


上面这段代码可以缩写为：

<style>
p{

font:italic bold 30px "微软雅黑";

}
</style>


我们可以看到可以把文字的四个属性同时缩写成一行

注意：

1、中间用空格隔开

2、style和weight两者可以互换位置，也可以省略不写

3、size和family两者不能换位置，并且不能省略，而且必须摆放在最后两位
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css idea
相关文章推荐
新的分享
章节导航