有序和无序列表
有序列表，即列表有所以计数，如：1、2、3或者a、b、c。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<head>
<style type="text/css">
/* decimal 十进制数*/
.decimal {list-style-type: decimal}
/*小写罗马数字*/
.lroman {list-style-type: lower-roman}
/*大写罗马数字*/
.uroman {list-style-type: upper-roman}
/*小写字母排序*/
.lalpha {list-style-type: lower-alpha}
/*大写字母排序*/
.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="lroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="uroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="lalpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="ualpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>
无序列表
即列表前没有计数，用其他的特殊符号来替代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<head>
<style type="text/css">
/*用圆盘标记，圆盘是实心的*/
ul.disc {list-style-type: disc}
/*用圆来标记，空心*/
ul.circle {list-style-type: circle}
/*用正方形来标记*/
ul.square {list-style-type: square}
/*什么都不加来标记*/
ul.none {list-style-type: none}
</style>
</head>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="circle">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="square">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="none">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
自定义列表
使用dl、dd、dt来创建一个定义列表。
- <dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
<body>
<!--
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表，它有两个子标签
dt：被定义的内容
dd：对定义内容的描述
同样，dl、ul、ol之间都可以互相嵌套
-->
<dl>
<dt>武松</dt>
<dd>景阳冈打虎英雄，三碗过岗</dd>
<dd>后打死西门官人，无奈投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐饮企业家，炊饼发明人</dd>
</dl>
</body>
</html>
自定义列表.JPG
文本格式化
为内容设置不同的样式
文本格式的单位
-
px
如果我们将一个图片放大的话，我们会发现一个图片 是有一个一个的小色块构成的，这一个小色块就是一 个像素，也就是1px，对于不同的显示器来说一个像素 的大小是不同的。 -
百分比
也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px， 则100%就是16px，200%就是32px。(设置自适应使用多) -
em
em和百分比类似，是相对于font-size说的
1em = 1font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
/*
长度单位
像素px
- 像素是我们在网页中使用得最多的一个单位
一个像素就相当于屏幕中的一个小点
我们的屏幕实际上就是由这些像素点构成的
但是这些像素点是不能直接看见的
- 不同显示器一个像素的大小也不相同
显示效果越好、越清晰，像素就越小，反之像素越大
百分比%
- 也可以将单位设置为一个百分比的形式
这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
*/
.box{
width: 200px;
height: 200px;
background-color: red;
}
/*这里需要注意的就是width的值是根据font-size的值来决定的。*/
.box1{
font-size: 20px;
width: 2em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
颜色
颜色在我们所接触到的很多地方都有涉及，而且也可以看到，有的颜色用的是十六进制表示的，有的颜色是直接用颜色的英文单词代替的。那么在CSS中颜色有多种表达形式，这里我们只介绍简单的四种：
- 直接使用关键字来表示
- 是用十六进制数来表示
- 使用RGB值来表示
- 使用RGBA来表示
使用关键字来表示
- 十七种标准色
aqua、black、blue、fuchsia、gray、green、 lime、maroon、navy、olive、orange、
purple、red、silver、teal、white、yellow
有细心的朋友会看到，平时用的也不止这么多呀，当然了，还有很多哦。 - 130 种其他颜色
由于颜色比较多，这里我们就不一一列举了。
使用十六进制来表示
那么在日常的使用中，用的最多也就是十六进制的颜色了，有点和RGB相似，用的是三种颜色进行变化的。
- 0000FF
用的是三组十六进制的数字，里面包含了00代表的红色，00带边的绿色和FF代表的蓝色浓度。这样表现起来颜色就显得比较丰富了。
RGB值
也可以使用计算机中常用的RGB值来表示 颜色。可以使用0~255的数值，也可以使 用0%~100%的百分比数。
- RGB(100%,0%,0%)(红，绿，蓝)三原色越小颜色越深。
RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示 绿色浓度，第三个数表示蓝色的浓度。
RGBA表示一个颜色和RGB类似，只不过比
RGB多了一个A（alpha）来表示透明度， 透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
RGBA(255,100,5,0.5),透明度用0到1的数字来表示。
文字
文字的大小
在前几篇的文章中，细心的朋友会发现，我们在代码中都用到了font-size，这是专门用来指定文字大小的。
p{
font-size:50px
}
表示p元素的文字大小是50px。
字体
在之前的代码中我们也不难发现，我们在其中使用了font-family，用来制定标签中文字使用的字体。
p{font-famliy:Arial}
一般来说只有用户计算机中安装了我们指 定的字体时，它才会显示，否则这行代码 是没有意义的
其实，通过font-family也可以同时制定多个字体。
p{font-family:Arial , Helvetica , sans-serif}
浏览器会优先使用第一 个，如果没有找到则使用第二个，以此类推。
细心的朋友会发现，在上面的代码中我们用到了一个词，sans-serif，这里呢我们不是指定了某一个字体，而是指定了一类字体。那么字体又是怎么分类的呢？
字体的分类
- erif（衬线字体）即：有笔锋
- sans-serif（非衬线字体）没有笔锋
- monospace （等宽字体）
- cursive （草书字体）
- fantasy （虚幻字体）
以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的分类</title>
<style type="text/css">
p{
font-family: arial, 微软雅黑, 华文彩云, serif;
}
</style>
</head>
<body>
<h1>字体的分类</h>
<!--
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
可以将字体设置为这些大的分类，浏览器会自动选择指定的字体，并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
-->
<p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
斜体和粗体
- font-style用来指定文本的斜体。
指定斜体：font-style:italic
指定非斜体：font-style:normal - font-weight用来指定文本的粗体。
指定粗体：font-weight:bold
指定非粗体：font-weight:normal
小型大写字母
这个不要理解成为大、小写字母而是小型的大写字母，比如：
ABCDEFG 后面写了abcdefg两个连在一起，那么在用了这个font-variant属性之后呢，就会发现，原本小写的字母也变成大写字母了，只是会比之前大写的字母，小那么一号。
字体属性的简写
有时候会发现，我一个个的去定义大小，类型，风格时，会比较麻烦，其实，也有属性的简写。
font可以一次性同时设置多个字体的样式。
用法：
– font:加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺 序无所谓，也可以不写，但是大小和字体 必须写且必须写到后两个。
重点提醒，文字的大小和字体，大小必须在倒数第二位，字体在倒数第一位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的其它样式</title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: 微软雅黑;
/*
font-style可以用来设置文字的斜体
- 可选值：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的
- 一般我们只会使用italic
*/
font-style: italic;
/*
font-weight可以用来设置文本的加粗效果
- 可选值：
normal 默认值，文字正常显示
bold 文字加粗显示
该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体，所以200有可能比100粗，但也有可能是一样的
*/
font-weight: bold;
/*
font-variant可以用来设置小型大写字母
- 可选值：
normal 默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些
*/
font-variant: small-caps;
}
.p2{
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
/*
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式，但是颜色特殊，设置不了。
可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
*/
font: bold italic small-caps 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
对于文本的修饰
行间距
- line-height用于设置行高，行高越大则行 间距越大。
行间距 = line-height – font-size
大写化
text-transform样式用于将元素中的字母全都变成大写。
- 大写：text-transform:uppercase
- 小写：text-tansform:lowercase
- 首字母大写：text-transform:capitalize
- 正常：text-transform:none
文本线条4
text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。
- 可选值：
underline
overline
line-through
none
字母和单词的间距
letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。
对齐文本
text-align用于设置文本的对齐方式。
可选值：
left：左对齐
right：右对齐
justify：两边对齐
center：居中对齐
首行缩进
text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本的样式</title>
<style type="text/css">
.p1{
/*
text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
*/
text-transform: lowercase;
}
.p2{
/*
text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
*/
text-decoration: line-through;
}
a{
/*
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none*/
text-decoration: none;
}
.p3{
/*letter-spacing可以指定字符间距*/
/*letter-spacing: 10px;*/
/*word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小*/
word-spacing: 100px;
}
.p4{
/*
text-align用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
justify 两端对齐
- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
*/
text-align: justify;
}
.p5{
font-size: 20px;
/*
text-indent用来设置首行缩进
这个值一般都会使用em作为单位
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来
*/
text-indent: -9px;
}
</style>
</head>
<body>
<p class="p5">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，
我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，
闪闪地?着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，
她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来
</p>
<h1 class="p4">我是一个h1</h1>
<p class="p4">
在 我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，
我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地?着几十个星星的眼，
冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，
人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来
梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了
</p>
<p class="p4">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait.
He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no
business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared
said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel
sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,”
</p>
<p class="p3">
在 我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的
天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地?着几十个星星的眼，冷眼。他的口角上现出微笑，
似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细
小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末
的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟
缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小
粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形
</p>
<p class="p3">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait.
He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said.
“We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw
them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him
into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men
sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied.
</p>
<a href="#">我是超链接</a>
<p class="p2">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait.
He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no
business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,”
Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the
quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,”
</p>
<p class="p1">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait.
He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no
business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared
said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel
sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,”
</p>
</body>
</html>
可以复制下来，在自己电脑上试一下，然后效果就出来了。
网友评论