一、单位
1、长度单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长度单位</title>
<style type="text/css">
/*
* 长度单位
* 像素 px
* 像素是在网页中使用的最多的一个单位一个像素就相当于屏幕中的一个小点，
* 屏幕实际上就是由这些像素点构成的，但是这些像素点，是不能直接看见的。
* 不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。
*
* 百分比 %
* 也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值
* 使用百分比的好处是：当父元素的属性值发生变化时，子元素也会按照比例发生改变
* 在创建一个自适应的页面时，经常使用百分比作为单位
*
* em
* em和百分比类似，它是相对于当前元素的字体大小来计算的
* 1em = 1font-size
* 使用em时，当字体大小发生改变时，em也会随之改变
* 当设置字体相关的样式时，经常会使用em
*
*/
.box {
width: 300px;
height: 300px;
background-color: red;
}
.box1 {
font-size: 20px;
width: 2em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
2、颜色单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
/*
* 颜色单位：
* 在CSS中可以直接使用颜色的单词来表示不同的颜色
* 红色：red
* 蓝色：blue
* 绿色：green
* 也可以使用RGB值来表示不同的颜色
* 所谓的RGB值指的是Red Green Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色
* 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
* 也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
* 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色 ,第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围是00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：
* #ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc #aabbcc
*
*/
/*background-color: rgb(161,187,215);*/
/*background-color: rgb(100%,50%,50%);*/
/*background-color: #00f;*/
/*background-color: #abc;*/
/*#aabbcc*/
background-color: #084098;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、字体
1、字体的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
.p1 {
/*设置字体颜色,使用color来设置文字的颜色*/
color: red;
/*
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
* font-size设置的并不是文字本身的大小，
* 在页面中，每个文字都是处在一个看不见的框中的，设置的font-size实际上是设置格的高度，并不是字体的大小
* 一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同
*/
font-size: 30px;
/*
* 通过font-family可以指定文字的字体
* 当采用某种字体时，如果浏览器支持则使用该字体，如果字体不被支持，则使用默认字体
* 该样式可以同时指定多个字体，多个字体之间使用,分开
* 当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个
*/
/*font-family: arial , 微软雅黑;*/
/*
* 浏览器使用的字体默认就是计算机中的字体，
* 如果计算机中有，则使用，如果没有就不用
*
* 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。
*/
/*font-family: 华文彩云 , arial , 微软雅黑;*/
font-family: "curlz mt";
}
.p2 {
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粗，300有可能比200粗，但是也可能是一样的
*/
font-weight: bold;
/*
* font-variant可以用来设置小型大写字母
* 可选值：
* normal，默认值，文字正常显示
* small-caps 文本以小型大写字母显示
*
* 小型大写字母：
* 将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些。
*/
font-variant: small-caps;
}
.p3 {
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p4 {
/*
* 在CSS中提供了一个样式叫font，
* 使用该样式可以同时设置字体相关的所有样式,
* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
*
* 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
* 如果不写则使用默认值，但是要求文字的大小和字体必须写，
* 而且字体必须是最后一个样式, 大小必须是倒数第二个样式
*
* 实际上使用简写属性也会有一个比较好的性能
*/
font: small-caps bold italic 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
<p class="p4">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
2、字体的分类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体的分类</title>
<style type="text/css">
p {
font-family: arial, 微软雅黑, 华文彩云, serif;
}
</style>
</head>
<body>
<!--
在网页中将字体分成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>
