3 文本标签及样式

最新推荐文章于 2024-04-12 21:34:27 发布

丨Anna丨

最新推荐文章于 2024-04-12 21:34:27 发布

阅读量446

点赞数

分类专栏：前端重拾 # HTML基础 # CSS 文章标签： html

本文链接：https://blog.csdn.net/u014331138/article/details/107957469

版权

前端重拾同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

HTML基础

3 篇文章 0 订阅

订阅专栏

文本标签及样式

1 文本标签

1.1 和

em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。这两个标签可以单独使用，也可以一起使用。通常em显示为斜体，而strong显示为粗体

示例：

		&lt;em&gt;和&lt;strong&gt;
		<hr/>
		<p>
			<strong>警告：任何情况下不要接近僵尸。</strong> 他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
		</p>

效果：

1.2 和

i标签会使文字变成斜体。b标签会使文字变成粗体。这两个标签和em和strong类似，但是这两个标签没有语义。所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。

示例：

&lt;i&gt;和&lt;b&gt;<hr/>
<p>
    <b>警告：任何情况下不要接近僵尸。</b> 他们只是 <i>看起来</i> 很友好，实际上他们是为了吃你的胳膊！
</p>

效果：

1.3

small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。浏览器在显示small标签时会显示一个比父元素小的字号。

示例：

&lt;small&gt;<hr/>
<p><small>&copy;2020 XXX 保留所有权利.</small></p>

效果：

1.4 <cite>

使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等

示例：

&lt;cite&gt;
<hr/>
<p><cite>《七龙珠》</cite>讲的是召唤神龙的故事。</p>

效果：

1.5 <blockquote>和<q>

blockquote和q表示标记引用的文本。blockquote用于长引用，q用于短引用。在两个标签中还可以使用cite属性来表示引用的地址。

示例：

&lt;blockquote&gt;和&lt;q&gt;
<hr/>
<p>
    孟子曾经说过：<blockquote>天将降大任于是人也...</blockquote>他说的真对啊！
    <p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
</p>

效果：

1.6 和

sup和sub用于定义上标和下标。

示例：

&lt;sup&gt;和&lt;sub&gt;
<hr/>
<p>sup上标主要用于表示类似于10<sup>3</sup>中的3。</p>
<p>sub下标则用于表示类似余H<sub>2</sub>O中的2。</p>

效果：

1.7 <ins>和<del>

ins表示插入的内容，显示时通常会加上下划线。del表示删除的内容，显示时通常会加上删除线。

示例：

&lt;ins&gt;和&lt;del&gt;
<hr/>
<p>ins表示插入的内容，显示时通常会加上下划线:我是一个<ins>可爱的</ins>小女孩</p>
<p>del表示删除的内容，显示时通常会加上删除线。<del>这一行不要了</del></p>

效果：

1.8 <code>和<pre>

如果你的内容包含代码示例或文件名，就可以使用code元素。pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。

示例：

&lt;code&gt;和&lt;pre&gt;
<hr/>
<pre>
	<code>
	function fun(){
		alert("hello");
	}
	</code>
</pre>

效果：

1.9 有序列表

使用ol和li来创建一个有序列表

示例：

		有序列表
		<hr/>
		<ol>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ol>

效果：

1.10 无序列表

使用ul和li来创建一个无序列表

示例：

		无序列表
		<hr/>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>

效果：

1.11 定义列表

使用dl、dd、dt来创建一个定义列表

示例：

		定义列表
		<hr/>
		<dl>
			<dt>定义项1</dt>
			<dd>定义描述1</dd>
			<dt>定义项2</dt>
			<dd>定义描述2</dd>
			<dt>定义项3</dt>
			<dd>定义描述3</dd>
		</dl>

效果：

2 文本格式化

为内容设置不同的样式

2.1 单位

（1）px：如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。
（2）百分比：也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
（3）em： em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

2.2 颜色

（1）关键字

在CSS中可以直接使用颜色的关键字来代表一种颜色。17中颜色：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow

（2）十六进制颜色

用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。

上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。

（3）RGB值

也可以使用计算机中常用的RGB值来表示颜色。可以使用0~255的数值，也可以使用0%~100%的百分比数。例如：
– RGB(100%,0%,0%)
– RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。

（4）RGBA值

RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。例如：
– RGBA(255,100,5,0.5)

2.3 文字大小

font-size用来指定文字的大小

示例：

	<head>
		<meta charset="UTF-8">
		<title>字体大小</title>
		<style type="text/css">
			p{
				font-size: 100px;
			}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
	</body>

效果：

2.4 字体

2.4.1 字体的分类

在网页中将字体分为5大类：

（1）serif（衬线字体）
（2）sans-serif（非衬线字体）
（3） monospace （等宽字体）
（4） cursive （草书字体）
（5）fantasy （虚幻字体）

以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

2.4.2 字体的设置

通过font-family可以指定标签中文字使用的字体

语法：

font-family: 字体名称

示例：

	<head>
		<meta charset="UTF-8">
		<title>字体设置</title>
		<style type="text/css">
			p{font-family:Arial}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
	</body>

效果：

注：一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。通过font-family可以同时指定多个字体。例如：p{font-family:Arial , Helvetica , sans-serif}。如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。这里面sans-serif并不是指的具体某一个字体。而是一类字体。

2.5 斜体和粗体

（1）font-style用来指定文本的斜体。
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal
（2）font-weight用来指定文本的粗体。
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

2.6 小型大写字母

font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。

 font-variant:small-caps

2.7 字体属性的简写

font可以一次性同时设置多个字体的样式

语法：

font:加粗 斜体 小型大写 大小/行高 字体
EG:
font:italic bold 12px/20px arial,sans-serif;

这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。（注意：使用该属性后加粗斜体小型大写行高将使用默认值，在其前面设置的属性将不生效。示例如下）

line-height: 150px;
<!-- line-height: 150px; 将被font使用默认值导致不生效-->
font: 12px arial,sans-serif;

2.8 行间距

在CSS中并没有提供一个可以直接设置行间距的属性，只能通过设置行高间接设置行间距。line-height用于设置行高，行高越大则行间距越大. 行间距 = line-height – font-size。

<!-- 直接接受一个具体的大小 -->
line-height：30px;
<!-- 接受百分比，表示相对于字体大小的百分比-->
line-height：100%;
<!-- 接受一个具体的数值，表示相对于字体的多少-->
line-height：1.25;

对于单行文本可以设置，行高与父容器的高度一致，这样单文本可以在父元素中垂直居中。

2.9 大写化

text-transform样式用于将元素中的字母全都变成大小。

– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none

2.10 文本的修饰

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条

可选值：
– underline
– overline
– line-through
– none

2.11 字母间距和单词间距

letter-spacing用来设置字符之间的间距。

word-spacing用来设置单词之间的间距。

这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

2.12 对齐文本

text-align用于设置文本的对齐方式。

可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐

2.13 首行缩进

text-indent用来设置首行缩进。该样式需要指定一个长度，并且只对第一行生效。

text-indent: 2em;

丨Anna丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

3 文本标签及样式

文本标签及样式

1 文本标签

1.1 <em>和<strong>

1.2 <i>和<b>

1.3 <small>

1.4 <cite>

1.5 <blockquote>和<q>

1.6 <sup>和<sub>

1.7 <ins>和<del>

1.8 <code>和<pre>

1.9 有序列表

1.10 无序列表

1.11 定义列表

2 文本格式化

2.1 单位

2.2 颜色

2.3 文字大小

2.4 字体

2.4.1 字体的分类

2.4.2 字体的设置

2.5 斜体和粗体

2.6 小型大写字母

2.7 字体属性的简写

2.8 行间距

2.9 大写化

2.10 文本的修饰

2.11 字母间距和单词间距

2.12 对齐文本

2.13 首行缩进