html设置字体样式的属性(测试开发全栈-HTML)
上午讲了CSS字体属性的粗细,下午来说下字体样式。CSS使用font-style属性设置文本的风格。来看下语法:
p {
font-style: normal;
}
属性值有 normal和italic
normal是默认值,浏览器会显示标准的样式 font-style:normal;
italic 浏览器会显示斜体的样式
一起看下具体的效果:
来看看对应的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体样式</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p>我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>
<p>但愿人长久,千里共婵娟。</p>
</body>
</html>
在<style>中将所有段落的字体设置为斜体
在真正的开发中,将一个大段落的文字设置为斜体比较少见,可以将已经为斜体的字设置为正常展示的,看下实际的效果和代码:
可以看到最后一行文字是倾斜的,使用了<em>
<p>但愿人长久,千里共婵娟。</p>
<em>我是倾斜的,你知道吗?</em>
可以使用font-style将斜体设置为正常,看看效果:
字体正常了!!
看下对应的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体样式</title>
<style>
em {
font-style: normal;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p>我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>
<p>但愿人长久,千里共婵娟。</p>
<em>我是倾斜的,你知道吗?</em>
</body>
</html>
接下里说下字体的复合属性:
字体需求如下:
想要div字体倾斜、加粗、字号设置为16像素并且是微软雅黑
来看下效果:
可以看下对应代码是否满足要求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS之字体复合属性</title>
<!--想要div字体倾斜、加粗、字号设置为16像素并且是微软雅黑-->
<style>
.pink {
font-family:"Microsoft YaHei";
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div class="pink">十一结束了,大家要开始上班了</div>
</body>
</html>
可以看到 font-family是字体样式
font-size 大小
font-style 斜体
font-weight 加粗
好的,今天先到这里,明天就上班了。大家晚安~
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com