CSS-文字相关属性

上篇博文介绍了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两者不能换位置,并且不能省略,而且必须摆放在最后两位

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章