【前端】如何制作一个自己的代码（10）
接上文。
- 颜色名称
| 将color的属性值，设置成颜色的英文名就能显示对应的颜色。 比如，这里的red表示红色，这种设置颜色的方式是最简单的。 但是不同的浏览器，对颜色的解析可能存在差异，实际开发中不建议使用颜色名称来指定颜色。 | <style> h3 { color: red; } <style> <h3>夜曲编程</h3>
|
2. RGB
也就是说，为了更精确地表示颜色，我们会通过具体的数值来最大限度地控制颜色。接下来，我们先来看看RGB，是如何表示颜色的。
| rgb()函数 RGB是red、green、blue的首字母缩写。 rgb()函数，是通过对red、green、blue三原色的强度进行控制，从而实现不同的颜色。 rgb()的语法规则：rgb(red,green,blue)。 这三个参数的取值为0到255的整数，最低值为0，最高值为255。 | <style> h3 { color: rgb(255,0,0); } </style> <h3>夜曲编程</h3>
|
补充：
部分RGB
红，绿，蓝三原色叠加，组合起来有1600多万种不同的颜色。我们了解几种常见的颜色，更多复杂的颜色使用时再查询即可。
3.十六进制码
CSS中，除了使用RGB定量地表示颜色，还有一种常见的表达方法--十六进制码。
| 十六进制码，是以#开头的6位十六进制数表示颜色的方式。其语法规则为：#FF0000。 这个6位数可以分为三组，依次对应red、green、blue三种颜色的强度。 每组两位数，最低值为00，最高值为FF。 比如#FF0000的FF表示red的强度，00表示green的强度，后一组00表示blue的强度。 | <style> h3 { color: #FF0000; } </style> <h3>夜曲编程</h3>
|
补充：
部分十六进制码
十六进制码大小写都可以。同样的，我们不需要记住太多十六进制码。有很多网页工具提供了不同颜色的十六进制码。
十六进制码的简写
使用十六进制码表示颜色时，如果每组的两个十六进制数是相同的。
例如 #FF0000、#FFFFFF、#AABBCC，则可以将它们简写#F00、#FFF、#ABC。
背景颜色
除了字体颜色外，在制作网页时我们往往会在网页中添加一些背景颜色让网页更加美观，吸引访问者的眼球。
我们设置字体颜色时，使用color属性。
而设置背景颜色，则使用background-color属性，属性值同样可以使用颜色名称、RGB和十六进制码。
| 第6-9行，通过RGB的方式，给h3元素设置背景颜色为：rgb(255,176,51) 第11-14行，通过十六进制码的方式，给p元素设置背景颜色为：#5E80F4 |
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> h3 { /* 给h3元素，设置背景颜色为rgb(255,176,51) */ background-color: rgb(255,176,51); }
p { /* 给p元素，设置背景颜色#5E80F4 */ background-color: #5E80F4; } </style> </head> <body> <h3>夜曲编程</h3> <p>网页开发基础</p> </body> </html> |
 |
除了前面的颜色样式外，字体样式和文本样式也是网页设计中的重要组成部分。
合适的字体和文本排版，不仅可以使页面更加美观，也可以提升用户体验。接下来，我们先来看看CSS如何设置字体样式。
| CSS设置字体样式的属性有很多。 比如，更改字体类型、控制字体风格、控制字体大小和粗细等等。 因为字体英文为font，所以四个属性都是以font开头。 |
|
明天继续。
今天累了。