<!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>