<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
颜色单位：
在CSS可以直接使用颜色的单词来表示不同的颜色
也可以使用RGB值来通过Red Green Blue三原色，
通过这三种颜色的不同的浓度，来表示出不同的颜色
例子：
rgb（红色浓度，绿色浓度，蓝色浓度）
颜色的浓度需要一个1~255之间的值，255表示最大，0表示最小
浓度也可以采用一个百分数来设置，需要一个0%-100%之间的数字
*/
p{
width:100px ;
height: 100px;
background-color:rgb(255,0,255);
}
div{
width: 100px;
height: 100px;
background-color: rgb(20%,90%,89%);
}
.p1{
/*
1.设置字体颜色，使用color来设置文字的颜色
2.浏览中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中，
我们设置font-size实际上是设置格的高度，并不是字体的高度
一般情况下文字都要比这个格要小一些，也有时候会比格要大
根据字体的不同，显示的效果不同
3.通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体，如果浏览器不支持则使用默认字体。
改样式可以同时指定多个字体，多个字体之间使用，分开
当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有再尝试下一个。
浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用。
在开发中太奇怪的字体一般不用。
字体的分类：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体
可以将字体设置为这些大的分类，当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
4.font-style可以用来设置文字的斜体
可选择：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜显示
大部分浏览器都不会对倾斜和斜体做区分，italic和oblique它们的效果往往是一致的，一般只会使用italic
5.font-weight设置文本的加粗效果
可选值：
normal 默认值，文字正常显示
bold 文字加粗显示
该样式也可以指定100~900之间的9个值，但是由于用户的计算机中往往没有这么多级别的字体，
所以达到我们想要的效果，也就是200有可能比100粗，300有可能比200粗，但是有可能一样
6.font-variant 可以用来设置小型大写字母
可选值：
normal 默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母： 将所有的字母都以大写形式显示，但小写字母的大写，要比大写字母小一些
*/
color: red;
font-size: 20px;
font-family: arial,微软雅黑,serif;
}
.p2{
font-size: 50px;
font-family: 宋体;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3{
/*
7.简写属性
在CSS中还为我们提供了一个样式叫font，
使用该样式可以同时设置字体相关的所有样式，
可以将字体的样式的值，统一写在font样式中，不同是值之间使用空格来隔开
使用font设置字体样式是，斜体加粗 大小字母 没有顺序要求，甚至可写可不写，不写使用默认值
但是要求文字的大小和字体必须写,字体必须是最后一个样式，大小必须是倒数第二个样式
使用简写属性解析更快，会有一个比较好的性能
*/
font: italic small-caps bold 60px "宋体";
}
</style>
</head>
<body>
<div>hello你好</div>
<p class="p1"></p>
<span class="p2">hi我是一段文字</span>
<span class="p3">hi我是一段文字</span>
<span style="font-family:serif;">我是一段文字，ABCa</span>
</body>
</html>
浙公网安备 33010602011771号