编程技术文章分享与教程

网站首页 > 技术文章 正文

「测试开发全栈-HTML」(10)css字体属性之字体样式和复合属性

hmc789 2024-11-25 12:50:49 技术文章 2 ℃

上午讲了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 加粗


好的，今天先到这里，明天就上班了。大家晚安~

Tags：

猜你喜欢

标签列表
最新留言