HTML&CSS基础第二部分（2）_small big css-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_60179418/article/details/120737834

文本标签

em和strong标签

<p>
    <em>语气</em>
    <strong>强调</strong>
</p>

这两个标签都表示一个强调的内容（有语义）。

em主要表示语气上的强调，em在浏览器中默认使用斜体显示。

strong表示强调的内容，比em更强烈，默认使用粗体显示。

i和b标签

i标签中的内容会以斜体显示，b标签中的内容会以粗体显示（无语义）。

small标签和big标签

big标签中的内容会比他的父亲元素中的文字要大一些，但无语义。

cite标签

网页中所有加书名号的内容都可以使用cite标签，表示参考内容。

q标签和blockquote标签

q标签表示一个短引用（行内引用）

q标签的内容浏览器会默认加上引号。

blockquote标签表示一个长引用(块级引用）

效果：

sup标签和sub标签

sup标签用来设置一个上标。

sub标签用来设置一个下标。

del标签和ins标签

del标签来表示一个删除的内容，del标签中的内容会自动添加删除线。

ins标签表示一个插入的内容，ins标签中的内容会自动添加下划线。

pre标签和code标签

pre标签是一个预格式标签，会将代码中的格式保存，不会忽略多个空格。

code标签专门用来表示代码，但并不会保留格式。

所以我们一般结合使用pre和code来表示一段代码。

部分表：

列表标签

在HTML可以创建列表，在网页中一共有三种列表：无序列表、有序列表、定义列表

列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放个无序列表。

无序列表

使用ul标签来创建一个无序列表

使用li标签在ul中创建一个一个的列表项，一个li就是一个列表项。

ul和li都是块元素。

通过type属性可以修改无序列表的项目符号

可选值：

disc，默认值，实心圆点

square，实心方块

circle，空心的圆

注意：默认的项目符号我们一般都不使用！

如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置。

有序列表

有序列表和无序列表类似，只不过它使用ol标签来代替ul。

有序列表使用有序的序号作为项目符号。

ol也是块元素。

type属性，可以指定序号的类型。

可选值：

1，默认值，使用阿拉伯数字

a/A，采用小写或大写作为序号

i/I，采用小写或大写的罗马数字作为序号

定义列表

定义列表用来对一些词汇或内容进行定义。使用dl标签来创建一个定义列表。

dl中有两个子标签：

dt：被定义的内容

dd：对定义的内容的描述

<dl>
    <dt></dt>
    <dd></dd>
</dl>

去掉项目符号

ul{
    list-style:none;
}

文本格式化

长度单位

像素px----像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点。

百分比%----也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。

em----em和百分比类似，它是相对于当前元素的字体大小来计算的。

使用em时，当字体大小发生改变时，em也会随之改变。当设置字体相关的样式时，经常会使用em。

nem=n*font-size

字体样式

color:设置字体颜色。

font-size:设置文字大小，浏览器一般的默认文字大小是16px。根据字体不同，显示效果不同。（font-size设置的并不是文字本身的大小。在页面中，每个文字都是处在一个看不见的框中的。）

font-family:指定文字字体。当采用某种字体时，如果浏览器支持则使用该字体，否则使用默认字体。该样式可以同时指定多个字体，多个字体之间使用,分开。当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个。

浏览器使用的字体默认就是计算机中的字体，计算机有才能使用。

可选值：

normal，默认值，文字正常显示

italic，文字会以斜体显示

oblique，文字会以倾斜的效果显示

font-weight:可以用来设置文本的加粗效果。

可选值：

normal，默认值，文字正常显示

bold，文字加粗显示

font:使用该样式可以同时设置字体相关的所有样式。

可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开。

无顺序要求，但是要求文字大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式。

使用简写属性会有比较好的性能。

行高

在CSS中并没有提供一个直接设置行间距的方式，只能通过设置行高来间接地设置行间距，行高越大行间距越大。

使用line-height来设置行高

可以接受的值：

1、像素

2、百分数

3、数值，则行高会设置字体大小相应的倍数

行间距=行高 - 字体大小

对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中。

在font中也可以指定行高。在字体大小后添加/行高，以此指定行高。如不指定则使用默认值（故要使用line-height要在font后指定）。

p{
    font:30px/50px "KaiTi";
}