文本样式
2018-11-21 本文已影响0人
浮华_e823
文本标签
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
通常em显示为斜体，而strong显示为粗体。
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
small标签中的内容会比他的父元素中的文字要小一些
cite 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，
比如：书名 歌名 话剧名 电影名
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
sup标签 使用sup标签来设置一个上标
sub标签 sub标签用来表示一个下标
del标签 使用del标签来表示一个删除的内容 del标签中的内容，会自动添加删除线
ins标签 ins表示一个插入的内容
ins中的的内容，会自动添加下划线
pre标签和code标签
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<p>
<em>哈哈哈，你起迟了</em>
</p>
<p>
<strong>
注意：早睡早起
</strong>
</p>
<p>
<!-- i ->icon图标 -->
<i>
啦啦啦啦，就是这么强大
</i>
</p>
<p>
<b>多热烈的白羊</b>
</p>
<p>
ppppp就是你
<small>pppp不是你</small>
<big>bbbbbb是你是你就是你</big>
</p>
<p>
<cite>《莉莉安》</cite>宋冬野
</p>
<p>
安和桥:<q>宋冬野</q>
</p>
<div>
南山南:<blockquote>宋冬野</blockquote>
</div>
<p>2<sup>2</sup></p>
<p>
薛之谦<sup><a href="#">[3]</a></sup>
</p>
<p>
哈哈<sub>啦啦啦</sub>呵呵
</p>
<p>
<del>100000</del><br>
99999<br>
</p>
<p>
加油你是最棒的<ins>自信 自制力 自强不息</ins>
</p>
<pre>
if(True):
print(’相信自己‘)
</pre>
<pre>
<code>
if(True):
print(’你一定会很好的‘)
</code>
</pre>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style type="text/css">
/* text-decoration 设置文本属性
uppercase 全大写
lowercase 全小写
underline 下划线
overline 上划线
line-through 删除线
none 默认值*/
.p1{
text-transform: uppercase;
}
.p2{
text-transform: lowercase;
}
.p3{
text-decoration:underline;
}
.p3{
text-decoration: overline;
}
.p3{
text-decoration: line-through;
}
a{
text-decoration: none;
}
.p1{
letter-spacing: 1px;
word-spacing: 10px;
}
/*letter-spacing 字符间距
word-spacing 单词间距*/
.p4{
text-align: center;
}
/*left 左对齐
right 右对齐
justify 两端对齐
center 居中对齐*/
.p5{
font-size: 40px;
text-indent: 2em;
}
/*首行缩进用 text-indent 用2em*/
</style>
</head>
<body>
<p class="p5">
今天，人们的生活节奏非常快，很多年轻人在就业市场面前感到了巨大的压力。我大学毕业前就开始找工作了，很难找到我想要的工作。我被拒了很多次，但当我被聘用的那一刻，我感到了胜利
</p>
<a href="#">clj</a>
<p class="p1">
今天，人们的生活节奏非常快，很多年轻人在就业市场面前感到了巨大的压力。我大学毕业前就开始找工作了，很难找到我想要的工作。我被拒了很多次，但当我被聘用的那一刻，我感到了胜利
I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. So I made some preparations and believed that I wouldn't lose control. At the beginning, the employers asked me some simple questions, which I had prepared, so I felt confident. But when they asked me about the company, I forgot to search enough information. But I told myself to calm down, so I expressed my wish to work here. Two days later, I was informed that I got the job. My heart was beating very fast, just liked I had conquered the world.
</p>
<p class="p2">
I got the job. My heart was beating very fast, just liked I had conquered the world.
</p>
<p class="p3">
I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions.
</p>
<p class="p4">
今天，人们的生活节奏非常快，很多年轻人在就业市场面前感到了巨大的压力。我大学毕业前就开始找工作了，很难找到我想要的工作。我被拒了很多次，但当我被聘用的那一刻，我感到了胜利
I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. So I made some preparations and believed that I wouldn't lose control. At the beginning, the employers asked me some simple questions, which I had prepared, so I felt confident. But when they asked me about the company, I forgot to search enough information. But I told myself to calm down, so I expressed my wish to work here. Two days later, I was informed that I got the job. My heart was beating very fast, just liked I had conquered the world.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的其他样式</title>
<style type="text/css">
.p1{
color: pink;
font-size: 40px;
font-family: '宋体';
font-style: italic;
/*italic 斜体*/
font-weight: bold;
/*normal 默认粗细*/
/*bold 粗体*/
/*100 - 900 也可以设置粗体*/
font-variant: small-caps;
/*font-variant 设置字母小型大写
small-caps 小型大写字母*/
}
.p3{
font:italic small-caps bold 40px monospace;
}
</style>
</head>
<body>
<p class="p1">时常想起你，想起那些回忆 ACDFEEEEE</p><p class="p3">时常想起你，想起那些回忆 ACDFEEEEE</p>
</body>
</html>
