|
|
|
|
步骤 2 : 颜色表示方法 步骤 3 : 颜色速查手册
font常用的属性有 color和size, 分别表示颜色和大小
<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>
<font color="green">绿色默认大小字体</font> <br> <font color="blue" size="+2">蓝色大2号字体</font> <br> <font color="red" size="-2">红色小2号字体</font>
在html中，颜色通常使用两种方式来表示：
1. 颜色名，比如red, blue 2. 颜色对应的16进制，比如#ff0000 就表示红色 <font color="red" >用red表示红色字体</font>
<br>
<font color="#ff0000" >用#ff0000表示红色字体</font>
<font color="red" >用red表示红色字体</font> <br> <font color="#ff0000" >用#ff0000表示红色字体</font>
<style>
table.colorTable {
border-collapse:collapse;
}
table.colorTable td{
border: solid 1px gray;
padding: 8px;
font-size:12px;
background-color:#f1f1f1;
}
table.colorTable tr.head td{
background-color:#ddd;
font-size:15px;
font-weight:bold;
}
</style>
<table class="colorTable" >
<tr class="head">
<td width="25%">颜色名</th>
<td width="25%">十六进制颜色值</th>
<td width="50%">颜色</th>
</tr>
<tr>
<td>AliceBlue</td>
<td>#F0F8FF</td>
<td style="background-color:#F0F8FF"> </td>
</tr>
<tr>
<td>AntiqueWhite</td>
<td>#FAEBD7</td>
<td style="background-color:#FAEBD7"> </td>
</tr>
<tr>
<td>Aqua</td>
<td>#00FFFF</td>
<td style="background-color:#00FFFF"> </td>
</tr>
<tr>
<td>Aquamarine</td>
<td>#7FFFD4</td>
<td style="background-color:#7FFFD4"> </td>
</tr>
<tr>
<td>Azure</td>
<td>#F0FFFF</td>
<td style="background-color:#F0FFFF"> </td>
</tr>
<tr>
<td>Beige</td>
<td>#F5F5DC</td>
<td style="background-color:#F5F5DC"> </td>
</tr>
<tr>
<td>Bisque</td>
<td>#FFE4C4</td>
<td style="background-color:#FFE4C4"> </td>
</tr>
<tr>
<td>Black</td>
<td>#000000</td>
<td style="background-color:#000000"> </td>
</tr>
<tr>
<td>BlanchedAlmond</td>
<td>#FFEBCD</td>
<td style="background-color:#FFEBCD"> </td>
</tr>
<tr>
<td>Blue</td>
<td>#0000FF</td>
<td style="background-color:#0000FF"> </td>
</tr>
<tr>
<td>BlueViolet</td>
<td>#8A2BE2</td>
<td style="background-color:#8A2BE2"> </td>
</tr>
<tr>
<td>Brown</td>
<td>#A52A2A</td>
<td style="background-color:#A52A2A"> </td>
</tr>
<tr>
<td>BurlyWood</td>
<td>#DEB887</td>
<td style="background-color:#DEB887"> </td>
</tr>
<tr>
<td>CadetBlue</td>
<td>#5F9EA0</td>
<td style="background-color:#5F9EA0"> </td>
</tr>
<tr>
<td>Chartreuse</td>
<td>#7FFF00</td>
<td style="background-color:#7FFF00"> </td>
</tr>
<tr>
<td>Chocolate</td>
<td>#D2691E</td>
<td style="background-color:#D2691E"> </td>
</tr>
<tr>
<td>Coral</td>
<td>#FF7F50</td>
<td style="background-color:#FF7F50"> </td>
</tr>
<tr>
<td>CornflowerBlue</td>
<td>#6495ED</td>
<td style="background-color:#6495ED"> </td>
</tr>
<tr>
<td>Cornsilk</td>
<td>#FFF8DC</td>
<td style="background-color:#FFF8DC"> </td>
</tr>
<tr>
<td>Crimson</td>
<td>#DC143C</td>
<td style="background-color:#DC143C"> </td>
</tr>
<tr>
<td>Cyan</td>
<td>#00FFFF</td>
<td style="background-color:#00FFFF"> </td>
</tr>
<tr>
<td>DarkBlue</td>
<td>#00008B</td>
<td style="background-color:#00008B"> </td>
</tr>
<tr>
<td>DarkCyan</td>
<td>#008B8B</td>
<td style="background-color:#008B8B"> </td>
</tr>
<tr>
<td>DarkGoldenRod</td>
<td>#B8860B</td>
<td style="background-color:#B8860B"> </td>
</tr>
<tr>
<td>DarkGray</td>
<td>#A9A9A9</td>
<td style="background-color:#A9A9A9"> </td>
</tr>
<tr>
<td>DarkGreen</td>
<td>#006400</td>
<td style="background-color:#006400"> </td>
</tr>
<tr>
<td>DarkKhaki</td>
<td>#BDB76B</td>
<td style="background-color:#BDB76B"> </td>
</tr>
<tr>
<td>DarkMagenta</td>
<td>#8B008B</td>
<td style="background-color:#8B008B"> </td>
</tr>
<tr>
<td>DarkOliveGreen</td>
<td>#556B2F</td>
<td style="background-color:#556B2F"> </td>
</tr>
<tr>
<td>Darkorange</td>
<td>#FF8C00</td>
<td style="background-color:#FF8C00"> </td>
</tr>
<tr>
<td>DarkOrchid</td>
<td>#9932CC</td>
<td style="background-color:#9932CC"> </td>
</tr>
<tr>
<td>DarkRed</td>
<td>#8B0000</td>
<td style="background-color:#8B0000"> </td>
</tr>
<tr>
<td>DarkSalmon</td>
<td>#E9967A</td>
<td style="background-color:#E9967A"> </td>
</tr>
<tr>
<td>DarkSeaGreen</td>
<td>#8FBC8F</td>
<td style="background-color:#8FBC8F"> </td>
</tr>
<tr>
<td>DarkSlateBlue</td>
<td>#483D8B</td>
<td style="background-color:#483D8B"> </td>
</tr>
<tr>
<td>DarkSlateGray</td>
<td>#2F4F4F</td>
<td style="background-color:#2F4F4F"> </td>
</tr>
<tr>
<td>DarkTurquoise</td>
<td>#00CED1</td>
<td style="background-color:#00CED1"> </td>
</tr>
<tr>
<td>DarkViolet</td>
<td>#9400D3</td>
<td style="background-color:#9400D3"> </td>
</tr>
<tr>
<td>DeepPink</td>
<td>#FF1493</td>
<td style="background-color:#FF1493"> </td>
</tr>
<tr>
<td>DeepSkyBlue</td>
<td>#00BFFF</td>
<td style="background-color:#00BFFF"> </td>
</tr>
<tr>
<td>DimGray</td>
<td>#696969</td>
<td style="background-color:#696969"> </td>
</tr>
<tr>
<td>DodgerBlue</td>
<td>#1E90FF</td>
<td style="background-color:#1E90FF"> </td>
</tr>
<tr>
<td>Feldspar</td>
<td>#D19275</td>
<td style="background-color:#D19275"> </td>
</tr>
<tr>
<td>FireBrick</td>
<td>#B22222</td>
<td style="background-color:#B22222"> </td>
</tr>
<tr>
<td>FloralWhite</td>
<td>#FFFAF0</td>
<td style="background-color:#FFFAF0"> </td>
</tr>
<tr>
<td>ForestGreen</td>
<td>#228B22</td>
<td style="background-color:#228B22"> </td>
</tr>
<tr>
<td>Fuchsia</td>
<td>#FF00FF</td>
<td style="background-color:#FF00FF"> </td>
</tr>
<tr>
<td>Gainsboro</td>
<td>#DCDCDC</td>
<td style="background-color:#DCDCDC"> </td>
</tr>
<tr>
<td>GhostWhite</td>
<td>#F8F8FF</td>
<td style="background-color:#F8F8FF"> </td>
</tr>
<tr>
<td>Gold</td>
<td>#FFD700</td>
<td style="background-color:#FFD700"> </td>
</tr>
<tr>
<td>GoldenRod</td>
<td>#DAA520</td>
<td style="background-color:#DAA520"> </td>
</tr>
<tr>
<td>Gray</td>
<td>#808080</td>
<td style="background-color:#808080"> </td>
</tr>
<tr>
<td>Green</td>
<td>#008000</td>
<td style="background-color:#008000"> </td>
</tr>
<tr>
<td>GreenYellow</td>
<td>#ADFF2F</td>
<td style="background-color:#ADFF2F"> </td>
</tr>
<tr>
<td>HoneyDew</td>
<td>#F0FFF0</td>
<td style="background-color:#F0FFF0"> </td>
</tr>
<tr>
<td>HotPink</td>
<td>#FF69B4</td>
<td style="background-color:#FF69B4"> </td>
</tr>
<tr>
<td>IndianRed </td>
<td>#CD5C5C</td>
<td style="background-color:#CD5C5C"> </td>
</tr>
<tr>
<td>Indigo </td>
<td>#4B0082</td>
<td style="background-color:#4B0082"> </td>
</tr>
<tr>
<td>Ivory</td>
<td>#FFFFF0</td>
<td style="background-color:#FFFFF0"> </td>
</tr>
<tr>
<td>Khaki</td>
<td>#F0E68C</td>
<td style="background-color:#F0E68C"> </td>
</tr>
<tr>
<td>Lavender</td>
<td>#E6E6FA</td>
<td style="background-color:#E6E6FA"> </td>
</tr>
<tr>
<td>LavenderBlush</td>
<td>#FFF0F5</td>
<td style="background-color:#FFF0F5"> </td>
</tr>
<tr>
<td>LawnGreen</td>
<td>#7CFC00</td>
<td style="background-color:#7CFC00"> </td>
</tr>
<tr>
<td>LemonChiffon</td>
<td>#FFFACD</td>
<td style="background-color:#FFFACD"> </td>
</tr>
<tr>
<td>LightBlue</td>
<td>#ADD8E6</td>
<td style="background-color:#ADD8E6"> </td>
</tr>
<tr>
<td>LightCoral</td>
<td>#F08080</td>
<td style="background-color:#F08080"> </td>
</tr>
<tr>
<td>LightCyan</td>
<td>#E0FFFF</td>
<td style="background-color:#E0FFFF"> </td>
</tr>
<tr>
<td>LightGoldenRodYellow</td>
<td>#FAFAD2</td>
<td style="background-color:#FAFAD2"> </td>
</tr>
<tr>
<td>LightGrey</td>
<td>#D3D3D3</td>
<td style="background-color:#D3D3D3"> </td>
</tr>
<tr>
<td>LightGreen</td>
<td>#90EE90</td>
<td style="background-color:#90EE90"> </td>
</tr>
<tr>
<td>LightPink</td>
<td>#FFB6C1</td>
<td style="background-color:#FFB6C1"> </td>
</tr>
<tr>
<td>LightSalmon</td>
<td>#FFA07A</td>
<td style="background-color:#FFA07A"> </td>
</tr>
<tr>
<td>LightSeaGreen</td>
<td>#20B2AA</td>
<td style="background-color:#20B2AA"> </td>
</tr>
<tr>
<td>LightSkyBlue</td>
<td>#87CEFA</td>
<td style="background-color:#87CEFA"> </td>
</tr>
<tr>
<td>LightSlateBlue</td>
<td>#8470FF</td>
<td style="background-color:#8470FF"> </td>
</tr>
<tr>
<td>LightSlateGray</td>
<td>#778899</td>
<td style="background-color:#778899"> </td>
</tr>
<tr>
<td>LightSteelBlue</td>
<td>#B0C4DE</td>
<td style="background-color:#B0C4DE"> </td>
</tr>
<tr>
<td>LightYellow</td>
<td>#FFFFE0</td>
<td style="background-color:#FFFFE0"> </td>
</tr>
<tr>
<td>Lime</td>
<td>#00FF00</td>
<td style="background-color:#00FF00"> </td>
</tr>
<tr>
<td>LimeGreen</td>
<td>#32CD32</td>
<td style="background-color:#32CD32"> </td>
</tr>
<tr>
<td>Linen</td>
<td>#FAF0E6</td>
<td style="background-color:#FAF0E6"> </td>
</tr>
<tr>
<td>Magenta</td>
<td>#FF00FF</td>
<td style="background-color:#FF00FF"> </td>
</tr>
<tr>
<td>Maroon</td>
<td>#800000</td>
<td style="background-color:#800000"> </td>
</tr>
<tr>
<td>MediumAquaMarine</td>
<td>#66CDAA</td>
<td style="background-color:#66CDAA"> </td>
</tr>
<tr>
<td>MediumBlue</td>
<td>#0000CD</td>
<td style="background-color:#0000CD"> </td>
</tr>
<tr>
<td>MediumOrchid</td>
<td>#BA55D3</td>
<td style="background-color:#BA55D3"> </td>
</tr>
<tr>
<td>MediumPurple</td>
<td>#9370D8</td>
<td style="background-color:#9370D8"> </td>
</tr>
<tr>
<td>MediumSeaGreen</td>
<td>#3CB371</td>
<td style="background-color:#3CB371"> </td>
</tr>
<tr>
<td>MediumSlateBlue</td>
<td>#7B68EE</td>
<td style="background-color:#7B68EE"> </td>
</tr>
<tr>
<td>MediumSpringGreen</td>
<td>#00FA9A</td>
<td style="background-color:#00FA9A"> </td>
</tr>
<tr>
<td>MediumTurquoise</td>
<td>#48D1CC</td>
<td style="background-color:#48D1CC"> </td>
</tr>
<tr>
<td>MediumVioletRed</td>
<td>#C71585</td>
<td style="background-color:#C71585"> </td>
</tr>
<tr>
<td>MidnightBlue</td>
<td>#191970</td>
<td style="background-color:#191970"> </td>
</tr>
<tr>
<td>MintCream</td>
<td>#F5FFFA</td>
<td style="background-color:#F5FFFA"> </td>
</tr>
<tr>
<td>MistyRose</td>
<td>#FFE4E1</td>
<td style="background-color:#FFE4E1"> </td>
</tr>
<tr>
<td>Moccasin</td>
<td>#FFE4B5</td>
<td style="background-color:#FFE4B5"> </td>
</tr>
<tr>
<td>NavajoWhite</td>
<td>#FFDEAD</td>
<td style="background-color:#FFDEAD"> </td>
</tr>
<tr>
<td>Navy</td>
<td>#000080</td>
<td style="background-color:#000080"> </td>
</tr>
<tr>
<td>OldLace</td>
<td>#FDF5E6</td>
<td style="background-color:#FDF5E6"> </td>
</tr>
<tr>
<td>Olive</td>
<td>#808000</td>
<td style="background-color:#808000"> </td>
</tr>
<tr>
<td>OliveDrab</td>
<td>#6B8E23</td>
<td style="background-color:#6B8E23"> </td>
</tr>
<tr>
<td>Orange</td>
<td>#FFA500</td>
<td style="background-color:#FFA500"> </td>
</tr>
<tr>
<td>OrangeRed</td>
<td>#FF4500</td>
<td style="background-color:#FF4500"> </td>
</tr>
<tr>
<td>Orchid</td>
<td>#DA70D6</td>
<td style="background-color:#DA70D6"> </td>
</tr>
<tr>
<td>PaleGoldenRod</td>
<td>#EEE8AA</td>
<td style="background-color:#EEE8AA"> </td>
</tr>
<tr>
<td>PaleGreen</td>
<td>#98FB98</td>
<td style="background-color:#98FB98"> </td>
</tr>
<tr>
<td>PaleTurquoise</td>
<td>#AFEEEE</td>
<td style="background-color:#AFEEEE"> </td>
</tr>
<tr>
<td>PaleVioletRed</td>
<td>#D87093</td>
<td style="background-color:#D87093"> </td>
</tr>
<tr>
<td>PapayaWhip</td>
<td>#FFEFD5</td>
<td style="background-color:#FFEFD5"> </td>
</tr>
<tr>
<td>PeachPuff</td>
<td>#FFDAB9</td>
<td style="background-color:#FFDAB9"> </td>
</tr>
<tr>
<td>Peru</td>
<td>#CD853F</td>
<td style="background-color:#CD853F"> </td>
</tr>
<tr>
<td>Pink</td>
<td>#FFC0CB</td>
<td style="background-color:#FFC0CB"> </td>
</tr>
<tr>
<td>Plum</td>
<td>#DDA0DD</td>
<td style="background-color:#DDA0DD"> </td>
</tr>
<tr>
<td>PowderBlue</td>
<td>#B0E0E6</td>
<td style="background-color:#B0E0E6"> </td>
</tr>
<tr>
<td>Purple</td>
<td>#800080</td>
<td style="background-color:#800080"> </td>
</tr>
<tr>
<td>Red</td>
<td>#FF0000</td>
<td style="background-color:#FF0000"> </td>
</tr>
<tr>
<td>RosyBrown</td>
<td>#BC8F8F</td>
<td style="background-color:#BC8F8F"> </td>
</tr>
<tr>
<td>RoyalBlue</td>
<td>#4169E1</td>
<td style="background-color:#4169E1"> </td>
</tr>
<tr>
<td>SaddleBrown</td>
<td>#8B4513</td>
<td style="background-color:#8B4513"> </td>
</tr>
<tr>
<td>Salmon</td>
<td>#FA8072</td>
<td style="background-color:#FA8072"> </td>
</tr>
<tr>
<td>SandyBrown</td>
<td>#F4A460</td>
<td style="background-color:#F4A460"> </td>
</tr>
<tr>
<td>SeaGreen</td>
<td>#2E8B57</td>
<td style="background-color:#2E8B57"> </td>
</tr>
<tr>
<td>SeaShell</td>
<td>#FFF5EE</td>
<td style="background-color:#FFF5EE"> </td>
</tr>
<tr>
<td>Sienna</td>
<td>#A0522D</td>
<td style="background-color:#A0522D"> </td>
</tr>
<tr>
<td>Silver</td>
<td>#C0C0C0</td>
<td style="background-color:#C0C0C0"> </td>
</tr>
<tr>
<td>SkyBlue</td>
<td>#87CEEB</td>
<td style="background-color:#87CEEB"> </td>
</tr>
<tr>
<td>SlateBlue</td>
<td>#6A5ACD</td>
<td style="background-color:#6A5ACD"> </td>
</tr>
<tr>
<td>SlateGray</td>
<td>#708090</td>
<td style="background-color:#708090"> </td>
</tr>
<tr>
<td>Snow</td>
<td>#FFFAFA</td>
<td style="background-color:#FFFAFA"> </td>
</tr>
<tr>
<td>SpringGreen</td>
<td>#00FF7F</td>
<td style="background-color:#00FF7F"> </td>
</tr>
<tr>
<td>SteelBlue</td>
<td>#4682B4</td>
<td style="background-color:#4682B4"> </td>
</tr>
<tr>
<td>Tan</td>
<td>#D2B48C</td>
<td style="background-color:#D2B48C"> </td>
</tr>
<tr>
<td>Teal</td>
<td>#008080</td>
<td style="background-color:#008080"> </td>
</tr>
<tr>
<td>Thistle</td>
<td>#D8BFD8</td>
<td style="background-color:#D8BFD8"> </td>
</tr>
<tr>
<td>Tomato</td>
<td>#FF6347</td>
<td style="background-color:#FF6347"> </td>
</tr>
<tr>
<td>Turquoise</td>
<td>#40E0D0</td>
<td style="background-color:#40E0D0"> </td>
</tr>
<tr>
<td>Violet</td>
<td>#EE82EE</td>
<td style="background-color:#EE82EE"> </td>
</tr>
<tr>
<td>VioletRed</td>
<td>#D02090</td>
<td style="background-color:#D02090"> </td>
</tr>
<tr>
<td>Wheat</td>
<td>#F5DEB3</td>
<td style="background-color:#F5DEB3"> </td>
</tr>
<tr>
<td>White</td>
<td>#FFFFFF</td>
<td style="background-color:#FFFFFF"> </td>
</tr>
<tr>
<td>WhiteSmoke</td>
<td>#F5F5F5</td>
<td style="background-color:#F5F5F5"> </td>
</tr>
<tr>
<td>Yellow</td>
<td>#FFFF00</td>
<td style="background-color:#FFFF00"> </td>
</tr>
<tr>
<td>YellowGreen</td>
<td>#9ACD32</td>
<td style="background-color:#9ACD32"> </td>
</tr>
</table>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2018-11-19
不懂font元素有什么用？
4 个答案
liuxiaoqi 跳转到问题位置 答案时间：2021-11-17 游戏聊天里可以用
F1 跳转到问题位置 答案时间：2019-01-10 我查阅到html5已经废弃了，所以这节感觉可有可无
ggdog 跳转到问题位置 答案时间：2018-12-18 现在开发很少用了，用div(span)+css的多
耀耀不要闹 跳转到问题位置 答案时间：2018-11-19 买东西那个抢购字体 就能用
<font size="xx px" color = "xx" face = "xx">抢购</font>
改
应该是吧
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
