文章目录

列表
- 无序列表
- 有序列表
- 列表嵌套
- 定义列表
单位
- 长度单位
- - 像素 px
  - 百分比
  - em
- 颜色单位
- - 颜色名为单位
  - RGB值
字体样式
- 字体分类
- - 衬线字体
  - 非衬线字体（无衬线字体）
- 字体的其他样式
- - font-style属性
  - font-weight属性（粗细）
  - font-variant 属性
- font简写属性
之前的

列表

列表就相当于去超市购物时的那个购物清单。在HTML中，也可以创建列表，在网页中一共有三种列表：
1. 无序列表
2. 有序列表
3. 定义列表

接下来让我们一起看一下这三种列表。

无序列表

现在我就在使用无序列表，无序列表是一个项目的列表，此列项目使用粗体圆点**（典型的小黑圆圈）**进行标记。
无需列表的使用：
- 使用< ul >标签来创建一个无序列表。
- 使用< li >在< ul >中创建列表项。一个< li >就是一个列表项。
- < ul >与< li >都是块元素。

<ul><li>阿牛大官人</li><li>西门大官人</li><li>唐僧大官人</li>
</ul>

那我们小黑圆圈能不能改成别的呢？

查看我们的参考手册手册我们发现，确实存在一个type属性，并且有三个属性值，disc是指默认的，square就是方的，circle就是圆的。看看区别。

但是要注意!

默认的项目符号我们一般都不使用！！！因此，把上面看到的三种都忘了吧。。。因为每个浏览器的默认样式不同，同样的默认样式，在火狐浏览器可能圆圈要比IE浏览器大一些，我们希望我们的项目在各个浏览器的效果都是一样的，所以我们一般不使用这些项目符号！！！那怎么办呢？？？

默认的不要，那首先就得把它去掉。

<style>ul{list-style: none;}
</style>

这样就能把我们的项目标记给去掉了。如果我们需要使用标记，可以通过为我们< li >标签设置背景颜色，这样就能保证我们各个浏览器的效果相同了，这里我们就先不说了。以后还会提到的。

有序列表

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

<ol><li>结构</li><li>表现</li><li>行为</li>
</ol>

有序列表使用有序的序号作为项目符号。总体上还是无序列表使用偏多。
type属性，可以指定序号的类型。可选值：
- 1，默认值，使用阿拉伯数字。
- a，使用小写字母作为序号。
- A，使用大写字母作为序号。
- i，使用小写的罗马数字作为序号。
- I，使用大写的罗马数字作为序号。
< ol >标签,也块是元素。

列表嵌套

列表之间都是可以互相嵌套的，我们可以在无序列表中放一个有序列表，在有序列表里放个无需列表，在无序列表里放无序列表，在有序列表里放有序列表。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表嵌套</title></head><body><ul><li>鱼香肉丝<ol><li>鱼</li><li>香</li><li>肉丝</li></ol></li><li>宫保鸡丁<ul><li>宫</li><li>保</li><li>鸡丁</li></ul></li><li>青椒肉丝</li></ul></body>
</html>

定义列表

定义列表是用来对一些词汇或内容进行定义。
使用< dl >标签，来创建一个定义列表。
< dl >标签有两个子标签：
- < dt >标签：用来指定被定义的内容。
- < dd >标签：对定义内容的描述。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定义列表</title></head><body><dl><dt>武松</dt><dd>景阳冈打虎英雄，战斗力9999！</dd></dl></body>
</html>

定义列表整体来说用的比较少，同样定义列表和前面说的无序列表和有序列表都可以相互嵌套。

单位

长度单位

像素 px

像素使我们在网页中使用的最多的一个单位。
- 一个像素就相当于我们屏幕中的一个小点。
- 我们屏幕实际上就是由这些像素构成的。
- 但是这些像素点是不能直接看见的，因为它太小了。（要是能直接看见，不是你视力太好了，而是显示器太次了。。。）
- 不同的显示器，一个像素的大小也不同。
显示效果越好，越清晰，像素就越小，反之像素越大。

一般来说我们手机像素一个像素相当于计算机像素的1/4，但我们使用手机时也不会说同一个网站字体大小是电脑的1/4吧，那样太小了，啥都看不见了，所以一般手机的浏览器会默认把像素扩大4倍，如果说电脑的像素是12，手机里浏览的时候像素就是48.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>长度单位</title><style>.box{width:100px;height:100px;background-color: red;}</style></head><body><div class="box"></div></body>
</html>

百分比

也可以将我们的单位设置成百分比的形式。
这样我们的浏览器会通过其父元素的样式来计算该值。

来看我们百分比前先看一下这段代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>长度单位</title><style>.box{width:200px;height:200px;background-color: red;}.box1{width:100px;height:100px;background-color: yellow;}</style></head><body><div class="box"><div class="box1"></div></div></body>
</html>

如果我们更改一下：

.box1{
width:50%;
height:50%;
background-color: yellow;
}

发现没有区别！！！

这样做有什么好处呢？

当父元素的属性值发生变化时，子元素也会发生改变。在我们创建一些自适应的页面时，经常使用百分比作为单位。

em

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

1 em = 1 font-size

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

颜色单位

颜色名为单位

在CSS可以直接使用颜色单位来表示不同的颜色。
- 红色：red
- 蓝色：blue
- 绿色：green
但是这有什么问题呢？我们的词汇量有限呀，像我用red、green还成要是换个orange就拼不出来了。。。

当然我们也可以查询颜色名。

各种各样、乱七八糟的颜色，疯狂扩充我们的词汇量。

但是这颜色太多了，以至于单词也不足以表示我们五彩缤纷的世界。

RGB值

我们也可以使用RGB值来表示不同的颜色。

所谓的RGB值指的是通过Red、Green、Blue三元色，通过这三种颜色的不同浓度，来表示出不同的颜色。

例子：rgb(红色浓度，绿色浓度，蓝色浓度);

颜色的浓度需要一个0~255之间的值，255表示最大，0表示没有。

浓度也可以采用一个百分数来设置，需要一个0%~100%之间的数字。使用百分数最终也会转化成0到255的值。

0%表示0

100%表示255

也可以使用十六进制的rgb值来表示颜色，原理和上面的RGB原理一样，只不过使用十六进制数来代替，使用三组两位（每组表示一个元素）的十六进制数组来表示一个颜色。
语法：#红色绿色蓝色
十六进制：0-f。
三组两位的十六进制数组：每组表示一个元素。
第一组表示红色的浓度，第二组表示绿色的浓度，第三组表示蓝色的浓度。范围都是00-ff。

00 -->表示没有，相当于rgb中的0.

ff -->表示最大，相当于rgb中的255.

十六进制表示的rgb值用的比较多一点，因为相对简单，一般截图工具也可以截取颜色。

像红色（#ff0000）这种两位重复的颜色，可以简写，写成#f00.但是像#aabbcd这样不能简写，因为最后一组的两位不是重复的。

字体样式

设置字体颜色，使用color来设置文字的颜色，其实也可以说字体颜色是前景色，background-color是背景色。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体样式</title><style type="text/css">.p1{color: red;}</style></head><body><p class="p1">我是一个p标签 abcdEFG</p></body>
</html>

设置文字大小，使用font-size，在浏览器中一般默认的文字大小都是16px。

.p1{color: red;font-size: 25px;
}

font-size设置的并不是文字本身的大小。
在页面中，每一个文字都是c处于一个看不见的框中，就像我们上小学的时候使用的“田格本”。
我们设置的font-size实际上是设计我们的“格”，并不是字体大小。
一般情况下，字体都要比“格”小一些，有时候会比格大，根据字体不同，显示效果也不同。

设置文字字体，通过font-family可以指定文字的字体。

.p1{color: red;font-size: 25px;font-family: "arial black";}

当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体。
该样式可以同时指定多个字体，多个字体之间使用,分开，当同时候多个字体时，浏览器会优先使用前面的字体，如果没有则使用下一个。
浏览器使用的字体就是计算机中的字体，如果计算机中有，则能用，如果没有就不能用。
在开发中，如果字体太奇怪，用的太少，尽量不要使用。有可能用户电脑没有，就不能达到想要的效果。偏要用的可以截个图，或者一些网络字体，让用户以一连网就自动下载，但是可能兼容性不是很好。

字体分类

在网页中将我们的字体分成了5 大类.

serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。
其实常用的就是前面两个。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体分类</title></head><body><p style="color:red ;font-size:25px; font-family:serif color:red">我是衬线字体ABCDEFghi</p><p style="font-size:25px ;font-family:sans-serif;color:red">我是非衬线字体ABCDEFghi</p></body>
</html>

衬线字体

衬线字体:

衬线字体(serif)，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
衬线字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高。在整文阅读的情况下，适合使用衬线字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。
中文字体中的宋体就是一种最标准的衬线字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体。

非衬线字体（无衬线字体）

无衬线字体:

无衬线体(sans-serif)指没有衬线的字体，与衬线字体相反，完全抛弃装饰衬线，只剩下主干，造型简明有力，更具现代感，起源也很晚。
适用于标题、广告，瞬间的识别性高。
无衬线体因棱角较少，方便渲染，广泛用于电脑屏幕。

再来看下其他三种字体

<p style="font-size:25px ;font-family:monospace;color:red">等宽字体ABCDEFghi
</p>
<p style="font-size:25px ;font-family:cursive;color:red">草书字体ABCDEFghi
</p>
<p style="font-size:25px ;font-family:fantasy;color:red">虚幻字体ABCDEFghi
</p>

我们说了，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。那这玩意有什么用呢？
一般会把这些字体放在我们font-family的最后一个，说白了就是兜底的。

p{font-family:arial,微软雅黑，华文彩云，serif;
}

字体的其他样式

已经说了字体的颜色color，字体的大小font-size，字体类型font-family。
还有什么字体的其他样式呢？直接查一下我们的参考手册。

font-style属性

font-style可以设置文字的斜体.

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体分类</title></head><body><p style="font-style:italic">斜体的字体样式。</p><p style="font-style:oblique">倾斜的字体样式。</p></body>
</html>

好像没什么区别，我们说，大部分浏览器都不会对倾斜和斜体效果做区分，也就是说我们设置italic和oblique他们的效果是一样的。
一般我们只会使用italic。

font-weight属性（粗细）

font-weight可以设置字体的粗细

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100\|200\|300\|400\|500\|600\|700\|800\|900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体分类</title><style>p.normal {font-weight:normal;}p.light {font-weight:lighter;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}</style></head><body><p class="normal">This is a paragraph.</p><p class="light">This is a paragraph.</p><p class="thick">This is a paragraph.</p><p class="thicker">This is a paragraph.</p></body>
<html>

一般用户计算机中没有9个级别的字体，所以不能达到我们想要的效果。
所以只能说200可能比100粗，300可能比200粗，但是也有可能是一样粗的。

font-variant 属性

设置小型大写字母的字体显示文本。
这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
我们来看看这是什么特殊的效果呢？首先看下可能的值：

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体分类</title><style>p.normal {font-variant:normal;}p.small {font-variant:small-caps;}</style></head><body><p class="normal">My name is Hege Refsnes.</p><p class="small">My name is Hege Refsnes.</p></body>
</html>

相对来说用的不是很多啦，大家可以看着玩玩。

font简写属性

前面我们说了字体的好多种样式，包括字体的大小、颜色、字体类型、斜体、粗体、小型大写字母。
如果我们要设置多种字体样式，写这么多会比较麻烦。
CSS中为我们提供而一个样式叫font，使用该样式可以同时设置文字相关的所有样式。不同值之间使用隔开。
顺序：斜体、加粗、小型大写字母。这三个没有顺序要求，甚至可写可不写。如果不写以默认值代替。但是大小和字体必须写！！！而且，字体必须是最后一个样式，大小必须是倒数第二个样式。
font 简写属性在一个声明中设置所有字体属性。可设置的属性是（按顺序）：
“font-style font-variant font-weight font-size/line-height font-family”

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>font</title><style>.p1{font-family: "微软雅黑";font-size: 50px;font-style: italic;font-weight: bold;font-variant: small-caps;}.p2{font: italic small-caps bold 50px "微软雅黑";}</style>
</head><body><p class="p1">我是语段文字，ABCDefg</p><p class="p2">我是语段文字，ABCDefg</p></body>
</html>

我们看到使用我们的简写属性很方便，而且，实际上使用我们的简写属性的性能更好。因为如果按照前者的那样写的话，设置5个样式浏览器需要解析5次，但是如果采用简写，浏览器只需要解析一次。

之前的

CSS选择器优先级怎么分？？html中的文本标签都有哪些？？CSS（二）
CSS选择器到底有哪些？CSS笔记（一）

HTML列表的简单使用以及在我们网页编程中的单位你了解多少？？CSS中的字体样式你又了解多少，进来康康！！HTML、CSS（三）相关推荐

c语言理解参数,c语言中对可变参数列表的简单理解
函数原型中一般情况下参数的数目是固定的,但是如果想在不同的时候接收不定数目的参数时该怎么办呢?c语言提供了可变参数列表来实现. 可变参数列表是通过宏来实现的,这些宏定义在stdarg.h的头文件中.头 ...
python空列表添加_Python列表的简单操作
Python列表的简单操作: 1. 在列表末尾添加元素:sth.append() 2. 在列表中添加元素:sth.insert(位置,元素) 3. 从列表中删除元素:1) del sth[元素位置] ...
php查询mysql表的行数据类型,PHP 使用mysql_fetch_row 查询获得数据行列表的简单示例...
对PHP MYSQL mysql_fetch_row –从查询获得数据行列表感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! mysql_fetch_row用于从mysql数据库中查询数据 ...
LabVIEW多列列表框简单玩法
多列列表框简单玩法 1.场景: 表格显示数据太单调?!要想做到像Excel表格或者其他APP那样丰富多彩怎么办?告诉你个秘密,其实可以通过多列列表框来实现哦! 话不多说直接接上内容 2.环境 Wind ...
火山安卓自定义列表框简单操作教程
本源码转载自利快云https://www.lkuaiy.com/ 火山安卓自定义列表框简单操作教程一.列表项布局设计 1.简单的在布局器中放两个文本框组件并公开. 二.列表数据类设计 1.定义一 ...
Flutter 视频列表的简单实现
Flutter 视频列表的简单实现参考 https://resocoder.com/2019/04/13/flutter-video-player-chewie-tutorial/ 视频的播放插件是 ...
前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用
一.字体样式(font) font-style [用于打开和关闭斜体文本] • normal 正常字体,关闭斜体 • italic 斜体 • oblique 模拟斜体 font-weight [为字体 ...
css中的换行符_如何使用CSS防止项目列表中的换行符？
css中的换行符 Introduction: 介绍: Dealing with various items in CSS sometimes pose very different problems. ...
拖拽生成html页面,简单拖拽即生成网页 VvvebJs
原标题:简单拖拽即生成网页 VvvebJs 导读VvvebJs是一个开源的网页拖拽自动生成的Java库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相 ...

HTML列表的简单使用以及在我们网页编程中的单位你了解多少？？CSS中的字体样式你又了解多少，进来康康！！HTML、CSS（三）