学习笔记
目录
一，字体基本
1.font-size（大小）
属性名：font-size（浏览器默认字号是16）
取值：数字+px
<style>
p
{
font-size: 25px;
}
</style>
</head>
<body>
<p>段落文字</p>
</body>
2.font-weight（粗细）
属性名：font-weight
取值：
- 关键字：正常：normal（400），加粗：bold（700）
- 纯数字：100~900的整百数
<style>
div
{
font-weight: 800;
}
</style>
</head>
<body>
<div>div文字</div>
</body>3.font-style（倾斜）
属性名：font-style
取值：正常：normal，倾斜：italic
<style>
div
{
font-style: italic;
}
em
{
font-style: normal;
}
</style>
</head>
<body>
<div>div文字</div>
<em>em</em>
</body>4.字体系列font-family
属性名：font-family
Windows：默认微软雅黑，macOS默认苹方
<style>
div
{
/*如果用户电脑没有安装微软雅黑，就按照黑体显示文字，
没有黑体就任意一种非衬线字体显示*/
font-family: 微软雅黑,黑体,sans-serif;
}
</style>
</head>
<body>
<div>div文字</div>
</body>5.样式的层叠问题
问题：
- 给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
结果：
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
<style>
p
{
color :red ;
color:blue;
}
</style>
</head>
<body>
<p>div文字</p>
</body>
6.字体font属性的连写
属性名：font
取值：font：style，weight，size，family
<style>
p
{
/*font:style weight size 字体;*/
font:italic 700 66px 宋体;
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>省略要求：只能省略前两个，如果省略了相当于设置了默认值