CSS初步学习（二）

最新推荐文章于 2025-03-05 10:41:39 发布

心心大王

最新推荐文章于 2025-03-05 10:41:39 发布

阅读量490

点赞数 5

文章标签： css 学习前端

本文链接：https://blog.csdn.net/2301_81364838/article/details/142780446

版权

一，CSS字体属性

CSS fonts（字体）属性用于定义字体系列，大小，粗细，和文字样式（如斜体）

1.1字体系列

CSS使用font-family属性定义文本的字体系列

<title>CSS字体属性之字体系列</title>
    <style>
       h2{
        font-family: '宋体';
       }
       p{
        font-family: '微软雅黑';/**微软雅黑的英文:Microsoft YaHei*/
       }
    </style>
</head>

<body>
    <h2>心心大王</h2>
    <p>我的</p>
    <p>还是我的</p>
</body>

①各种字体直接必须使用英文状态下的逗号隔开

②一般情况下，如果有空格隔开的多个单词组成的字体，加引号

③尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

④最常用的几个字体：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';

1.2字体大小

CSS使用font-size属性定义字体大小

p{
    font-size:20px;
}

①px（像素）大小是我们网页的最常用的单位

②谷歌浏览器默认的文字大小为16px

③不同浏览器肯默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

④可以给body指定整个页面文字的大小

<title>CSS字体属性之字体大小</title>
    <style>
       h2{
        font-size: 16px;
       }
       body{
        font-size: 16px;
       }/*标题标签比较特殊，需要单独指定文字大小*/
    </style>
</head>

<body>
    <h2>心心大王</h2>
    <p>我的</p>
    <p>还是我的</p>
</body>

1.3字体粗细

CSS使用font-weight属性设置文字粗细

语法：

font-weight:normal | bold | bolder | lighter | number

参数

normal：正常的字体，相当于number为400，声明此值将取消之前任何设置

bold：粗体，相当于number为700，也相当于b对象的作用

bolder：IE5+，特粗体

lighter：IE5+，粗体

number：IE5+， 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold，注意数字后没有单位

实际开发中，最常用数字表示粗细

1.4文字样式

CSS使用font-style属性设置文本的风格

p{
    font-style:normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式，font-style:normal
italic	浏览器会显示斜体的字体样式

<style>
      div{
        font-style: italic;
        font-weight: 700;
        font-size: 16px;
        font-family: 'Microsoft yahei';
      } 
    </style>
</head>

<body>
    <div>心心大王</div>
</body>

1.5字体的复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

body{
    font:font-style  font-weight  font-size/line-height  font-family;
}

 <style>
      div{
        /*复合属性：简写的方式
        font:font-style  font-weight  font-size/line-height  font-family;*/
        font: italic，700， 16px，'Microsoft yahei';
      } 
    </style>
</head>

<body>
    <div>心心大王</div>
</body>

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

1.6字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写文字
font-weight	字体粗细	记住加粗是700或者bold不加粗是normal或者400记住数字不要跟单位
font-style	字体样式	记住倾斜式italic 不倾斜是normal 工作中最常用的是normal
font	字体连写	1.字体连写是有顺序的，不能随缘换位置2.其中字号和字体必须同时出现