how2j.cn

使用<font>标签表示字体

步骤 1 : 字体元素   
步骤 2 : 颜色表示方法   
步骤 3 : 颜色速查手册   

步骤 1 :

字体元素

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>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

颜色表示方法

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


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

颜色速查手册

<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">&nbsp;</td> </tr> <tr> <td>AntiqueWhite</td> <td>#FAEBD7</td> <td style="background-color:#FAEBD7">&nbsp;</td> </tr> <tr> <td>Aqua</td> <td>#00FFFF</td> <td style="background-color:#00FFFF">&nbsp;</td> </tr> <tr> <td>Aquamarine</td> <td>#7FFFD4</td> <td style="background-color:#7FFFD4">&nbsp;</td> </tr> <tr> <td>Azure</td> <td>#F0FFFF</td> <td style="background-color:#F0FFFF">&nbsp;</td> </tr> <tr> <td>Beige</td> <td>#F5F5DC</td> <td style="background-color:#F5F5DC">&nbsp;</td> </tr> <tr> <td>Bisque</td> <td>#FFE4C4</td> <td style="background-color:#FFE4C4">&nbsp;</td> </tr> <tr> <td>Black</td> <td>#000000</td> <td style="background-color:#000000">&nbsp;</td> </tr> <tr> <td>BlanchedAlmond</td> <td>#FFEBCD</td> <td style="background-color:#FFEBCD">&nbsp;</td> </tr> <tr> <td>Blue</td> <td>#0000FF</td> <td style="background-color:#0000FF">&nbsp;</td> </tr> <tr> <td>BlueViolet</td> <td>#8A2BE2</td> <td style="background-color:#8A2BE2">&nbsp;</td> </tr> <tr> <td>Brown</td> <td>#A52A2A</td> <td style="background-color:#A52A2A">&nbsp;</td> </tr> <tr> <td>BurlyWood</td> <td>#DEB887</td> <td style="background-color:#DEB887">&nbsp;</td> </tr> <tr> <td>CadetBlue</td> <td>#5F9EA0</td> <td style="background-color:#5F9EA0">&nbsp;</td> </tr> <tr> <td>Chartreuse</td> <td>#7FFF00</td> <td style="background-color:#7FFF00">&nbsp;</td> </tr> <tr> <td>Chocolate</td> <td>#D2691E</td> <td style="background-color:#D2691E">&nbsp;</td> </tr> <tr> <td>Coral</td> <td>#FF7F50</td> <td style="background-color:#FF7F50">&nbsp;</td> </tr> <tr> <td>CornflowerBlue</td> <td>#6495ED</td> <td style="background-color:#6495ED">&nbsp;</td> </tr> <tr> <td>Cornsilk</td> <td>#FFF8DC</td> <td style="background-color:#FFF8DC">&nbsp;</td> </tr> <tr> <td>Crimson</td> <td>#DC143C</td> <td style="background-color:#DC143C">&nbsp;</td> </tr> <tr> <td>Cyan</td> <td>#00FFFF</td> <td style="background-color:#00FFFF">&nbsp;</td> </tr> <tr> <td>DarkBlue</td> <td>#00008B</td> <td style="background-color:#00008B">&nbsp;</td> </tr> <tr> <td>DarkCyan</td> <td>#008B8B</td> <td style="background-color:#008B8B">&nbsp;</td> </tr> <tr> <td>DarkGoldenRod</td> <td>#B8860B</td> <td style="background-color:#B8860B">&nbsp;</td> </tr> <tr> <td>DarkGray</td> <td>#A9A9A9</td> <td style="background-color:#A9A9A9">&nbsp;</td> </tr> <tr> <td>DarkGreen</td> <td>#006400</td> <td style="background-color:#006400">&nbsp;</td> </tr> <tr> <td>DarkKhaki</td> <td>#BDB76B</td> <td style="background-color:#BDB76B">&nbsp;</td> </tr> <tr> <td>DarkMagenta</td> <td>#8B008B</td> <td style="background-color:#8B008B">&nbsp;</td> </tr> <tr> <td>DarkOliveGreen</td> <td>#556B2F</td> <td style="background-color:#556B2F">&nbsp;</td> </tr> <tr> <td>Darkorange</td> <td>#FF8C00</td> <td style="background-color:#FF8C00">&nbsp;</td> </tr> <tr> <td>DarkOrchid</td> <td>#9932CC</td> <td style="background-color:#9932CC">&nbsp;</td> </tr> <tr> <td>DarkRed</td> <td>#8B0000</td> <td style="background-color:#8B0000">&nbsp;</td> </tr> <tr> <td>DarkSalmon</td> <td>#E9967A</td> <td style="background-color:#E9967A">&nbsp;</td> </tr> <tr> <td>DarkSeaGreen</td> <td>#8FBC8F</td> <td style="background-color:#8FBC8F">&nbsp;</td> </tr> <tr> <td>DarkSlateBlue</td> <td>#483D8B</td> <td style="background-color:#483D8B">&nbsp;</td> </tr> <tr> <td>DarkSlateGray</td> <td>#2F4F4F</td> <td style="background-color:#2F4F4F">&nbsp;</td> </tr> <tr> <td>DarkTurquoise</td> <td>#00CED1</td> <td style="background-color:#00CED1">&nbsp;</td> </tr> <tr> <td>DarkViolet</td> <td>#9400D3</td> <td style="background-color:#9400D3">&nbsp;</td> </tr> <tr> <td>DeepPink</td> <td>#FF1493</td> <td style="background-color:#FF1493">&nbsp;</td> </tr> <tr> <td>DeepSkyBlue</td> <td>#00BFFF</td> <td style="background-color:#00BFFF">&nbsp;</td> </tr> <tr> <td>DimGray</td> <td>#696969</td> <td style="background-color:#696969">&nbsp;</td> </tr> <tr> <td>DodgerBlue</td> <td>#1E90FF</td> <td style="background-color:#1E90FF">&nbsp;</td> </tr> <tr> <td>Feldspar</td> <td>#D19275</td> <td style="background-color:#D19275">&nbsp;</td> </tr> <tr> <td>FireBrick</td> <td>#B22222</td> <td style="background-color:#B22222">&nbsp;</td> </tr> <tr> <td>FloralWhite</td> <td>#FFFAF0</td> <td style="background-color:#FFFAF0">&nbsp;</td> </tr> <tr> <td>ForestGreen</td> <td>#228B22</td> <td style="background-color:#228B22">&nbsp;</td> </tr> <tr> <td>Fuchsia</td> <td>#FF00FF</td> <td style="background-color:#FF00FF">&nbsp;</td> </tr> <tr> <td>Gainsboro</td> <td>#DCDCDC</td> <td style="background-color:#DCDCDC">&nbsp;</td> </tr> <tr> <td>GhostWhite</td> <td>#F8F8FF</td> <td style="background-color:#F8F8FF">&nbsp;</td> </tr> <tr> <td>Gold</td> <td>#FFD700</td> <td style="background-color:#FFD700">&nbsp;</td> </tr> <tr> <td>GoldenRod</td> <td>#DAA520</td> <td style="background-color:#DAA520">&nbsp;</td> </tr> <tr> <td>Gray</td> <td>#808080</td> <td style="background-color:#808080">&nbsp;</td> </tr> <tr> <td>Green</td> <td>#008000</td> <td style="background-color:#008000">&nbsp;</td> </tr> <tr> <td>GreenYellow</td> <td>#ADFF2F</td> <td style="background-color:#ADFF2F">&nbsp;</td> </tr> <tr> <td>HoneyDew</td> <td>#F0FFF0</td> <td style="background-color:#F0FFF0">&nbsp;</td> </tr> <tr> <td>HotPink</td> <td>#FF69B4</td> <td style="background-color:#FF69B4">&nbsp;</td> </tr> <tr> <td>IndianRed </td> <td>#CD5C5C</td> <td style="background-color:#CD5C5C">&nbsp;</td> </tr> <tr> <td>Indigo </td> <td>#4B0082</td> <td style="background-color:#4B0082">&nbsp;</td> </tr> <tr> <td>Ivory</td> <td>#FFFFF0</td> <td style="background-color:#FFFFF0">&nbsp;</td> </tr> <tr> <td>Khaki</td> <td>#F0E68C</td> <td style="background-color:#F0E68C">&nbsp;</td> </tr> <tr> <td>Lavender</td> <td>#E6E6FA</td> <td style="background-color:#E6E6FA">&nbsp;</td> </tr> <tr> <td>LavenderBlush</td> <td>#FFF0F5</td> <td style="background-color:#FFF0F5">&nbsp;</td> </tr> <tr> <td>LawnGreen</td> <td>#7CFC00</td> <td style="background-color:#7CFC00">&nbsp;</td> </tr> <tr> <td>LemonChiffon</td> <td>#FFFACD</td> <td style="background-color:#FFFACD">&nbsp;</td> </tr> <tr> <td>LightBlue</td> <td>#ADD8E6</td> <td style="background-color:#ADD8E6">&nbsp;</td> </tr> <tr> <td>LightCoral</td> <td>#F08080</td> <td style="background-color:#F08080">&nbsp;</td> </tr> <tr> <td>LightCyan</td> <td>#E0FFFF</td> <td style="background-color:#E0FFFF">&nbsp;</td> </tr> <tr> <td>LightGoldenRodYellow</td> <td>#FAFAD2</td> <td style="background-color:#FAFAD2">&nbsp;</td> </tr> <tr> <td>LightGrey</td> <td>#D3D3D3</td> <td style="background-color:#D3D3D3">&nbsp;</td> </tr> <tr> <td>LightGreen</td> <td>#90EE90</td> <td style="background-color:#90EE90">&nbsp;</td> </tr> <tr> <td>LightPink</td> <td>#FFB6C1</td> <td style="background-color:#FFB6C1">&nbsp;</td> </tr> <tr> <td>LightSalmon</td> <td>#FFA07A</td> <td style="background-color:#FFA07A">&nbsp;</td> </tr> <tr> <td>LightSeaGreen</td> <td>#20B2AA</td> <td style="background-color:#20B2AA">&nbsp;</td> </tr> <tr> <td>LightSkyBlue</td> <td>#87CEFA</td> <td style="background-color:#87CEFA">&nbsp;</td> </tr> <tr> <td>LightSlateBlue</td> <td>#8470FF</td> <td style="background-color:#8470FF">&nbsp;</td> </tr> <tr> <td>LightSlateGray</td> <td>#778899</td> <td style="background-color:#778899">&nbsp;</td> </tr> <tr> <td>LightSteelBlue</td> <td>#B0C4DE</td> <td style="background-color:#B0C4DE">&nbsp;</td> </tr> <tr> <td>LightYellow</td> <td>#FFFFE0</td> <td style="background-color:#FFFFE0">&nbsp;</td> </tr> <tr> <td>Lime</td> <td>#00FF00</td> <td style="background-color:#00FF00">&nbsp;</td> </tr> <tr> <td>LimeGreen</td> <td>#32CD32</td> <td style="background-color:#32CD32">&nbsp;</td> </tr> <tr> <td>Linen</td> <td>#FAF0E6</td> <td style="background-color:#FAF0E6">&nbsp;</td> </tr> <tr> <td>Magenta</td> <td>#FF00FF</td> <td style="background-color:#FF00FF">&nbsp;</td> </tr> <tr> <td>Maroon</td> <td>#800000</td> <td style="background-color:#800000">&nbsp;</td> </tr> <tr> <td>MediumAquaMarine</td> <td>#66CDAA</td> <td style="background-color:#66CDAA">&nbsp;</td> </tr> <tr> <td>MediumBlue</td> <td>#0000CD</td> <td style="background-color:#0000CD">&nbsp;</td> </tr> <tr> <td>MediumOrchid</td> <td>#BA55D3</td> <td style="background-color:#BA55D3">&nbsp;</td> </tr> <tr> <td>MediumPurple</td> <td>#9370D8</td> <td style="background-color:#9370D8">&nbsp;</td> </tr> <tr> <td>MediumSeaGreen</td> <td>#3CB371</td> <td style="background-color:#3CB371">&nbsp;</td> </tr> <tr> <td>MediumSlateBlue</td> <td>#7B68EE</td> <td style="background-color:#7B68EE">&nbsp;</td> </tr> <tr> <td>MediumSpringGreen</td> <td>#00FA9A</td> <td style="background-color:#00FA9A">&nbsp;</td> </tr> <tr> <td>MediumTurquoise</td> <td>#48D1CC</td> <td style="background-color:#48D1CC">&nbsp;</td> </tr> <tr> <td>MediumVioletRed</td> <td>#C71585</td> <td style="background-color:#C71585">&nbsp;</td> </tr> <tr> <td>MidnightBlue</td> <td>#191970</td> <td style="background-color:#191970">&nbsp;</td> </tr> <tr> <td>MintCream</td> <td>#F5FFFA</td> <td style="background-color:#F5FFFA">&nbsp;</td> </tr> <tr> <td>MistyRose</td> <td>#FFE4E1</td> <td style="background-color:#FFE4E1">&nbsp;</td> </tr> <tr> <td>Moccasin</td> <td>#FFE4B5</td> <td style="background-color:#FFE4B5">&nbsp;</td> </tr> <tr> <td>NavajoWhite</td> <td>#FFDEAD</td> <td style="background-color:#FFDEAD">&nbsp;</td> </tr> <tr> <td>Navy</td> <td>#000080</td> <td style="background-color:#000080">&nbsp;</td> </tr> <tr> <td>OldLace</td> <td>#FDF5E6</td> <td style="background-color:#FDF5E6">&nbsp;</td> </tr> <tr> <td>Olive</td> <td>#808000</td> <td style="background-color:#808000">&nbsp;</td> </tr> <tr> <td>OliveDrab</td> <td>#6B8E23</td> <td style="background-color:#6B8E23">&nbsp;</td> </tr> <tr> <td>Orange</td> <td>#FFA500</td> <td style="background-color:#FFA500">&nbsp;</td> </tr> <tr> <td>OrangeRed</td> <td>#FF4500</td> <td style="background-color:#FF4500">&nbsp;</td> </tr> <tr> <td>Orchid</td> <td>#DA70D6</td> <td style="background-color:#DA70D6">&nbsp;</td> </tr> <tr> <td>PaleGoldenRod</td> <td>#EEE8AA</td> <td style="background-color:#EEE8AA">&nbsp;</td> </tr> <tr> <td>PaleGreen</td> <td>#98FB98</td> <td style="background-color:#98FB98">&nbsp;</td> </tr> <tr> <td>PaleTurquoise</td> <td>#AFEEEE</td> <td style="background-color:#AFEEEE">&nbsp;</td> </tr> <tr> <td>PaleVioletRed</td> <td>#D87093</td> <td style="background-color:#D87093">&nbsp;</td> </tr> <tr> <td>PapayaWhip</td> <td>#FFEFD5</td> <td style="background-color:#FFEFD5">&nbsp;</td> </tr> <tr> <td>PeachPuff</td> <td>#FFDAB9</td> <td style="background-color:#FFDAB9">&nbsp;</td> </tr> <tr> <td>Peru</td> <td>#CD853F</td> <td style="background-color:#CD853F">&nbsp;</td> </tr> <tr> <td>Pink</td> <td>#FFC0CB</td> <td style="background-color:#FFC0CB">&nbsp;</td> </tr> <tr> <td>Plum</td> <td>#DDA0DD</td> <td style="background-color:#DDA0DD">&nbsp;</td> </tr> <tr> <td>PowderBlue</td> <td>#B0E0E6</td> <td style="background-color:#B0E0E6">&nbsp;</td> </tr> <tr> <td>Purple</td> <td>#800080</td> <td style="background-color:#800080">&nbsp;</td> </tr> <tr> <td>Red</td> <td>#FF0000</td> <td style="background-color:#FF0000">&nbsp;</td> </tr> <tr> <td>RosyBrown</td> <td>#BC8F8F</td> <td style="background-color:#BC8F8F">&nbsp;</td> </tr> <tr> <td>RoyalBlue</td> <td>#4169E1</td> <td style="background-color:#4169E1">&nbsp;</td> </tr> <tr> <td>SaddleBrown</td> <td>#8B4513</td> <td style="background-color:#8B4513">&nbsp;</td> </tr> <tr> <td>Salmon</td> <td>#FA8072</td> <td style="background-color:#FA8072">&nbsp;</td> </tr> <tr> <td>SandyBrown</td> <td>#F4A460</td> <td style="background-color:#F4A460">&nbsp;</td> </tr> <tr> <td>SeaGreen</td> <td>#2E8B57</td> <td style="background-color:#2E8B57">&nbsp;</td> </tr> <tr> <td>SeaShell</td> <td>#FFF5EE</td> <td style="background-color:#FFF5EE">&nbsp;</td> </tr> <tr> <td>Sienna</td> <td>#A0522D</td> <td style="background-color:#A0522D">&nbsp;</td> </tr> <tr> <td>Silver</td> <td>#C0C0C0</td> <td style="background-color:#C0C0C0">&nbsp;</td> </tr> <tr> <td>SkyBlue</td> <td>#87CEEB</td> <td style="background-color:#87CEEB">&nbsp;</td> </tr> <tr> <td>SlateBlue</td> <td>#6A5ACD</td> <td style="background-color:#6A5ACD">&nbsp;</td> </tr> <tr> <td>SlateGray</td> <td>#708090</td> <td style="background-color:#708090">&nbsp;</td> </tr> <tr> <td>Snow</td> <td>#FFFAFA</td> <td style="background-color:#FFFAFA">&nbsp;</td> </tr> <tr> <td>SpringGreen</td> <td>#00FF7F</td> <td style="background-color:#00FF7F">&nbsp;</td> </tr> <tr> <td>SteelBlue</td> <td>#4682B4</td> <td style="background-color:#4682B4">&nbsp;</td> </tr> <tr> <td>Tan</td> <td>#D2B48C</td> <td style="background-color:#D2B48C">&nbsp;</td> </tr> <tr> <td>Teal</td> <td>#008080</td> <td style="background-color:#008080">&nbsp;</td> </tr> <tr> <td>Thistle</td> <td>#D8BFD8</td> <td style="background-color:#D8BFD8">&nbsp;</td> </tr> <tr> <td>Tomato</td> <td>#FF6347</td> <td style="background-color:#FF6347">&nbsp;</td> </tr> <tr> <td>Turquoise</td> <td>#40E0D0</td> <td style="background-color:#40E0D0">&nbsp;</td> </tr> <tr> <td>Violet</td> <td>#EE82EE</td> <td style="background-color:#EE82EE">&nbsp;</td> </tr> <tr> <td>VioletRed</td> <td>#D02090</td> <td style="background-color:#D02090">&nbsp;</td> </tr> <tr> <td>Wheat</td> <td>#F5DEB3</td> <td style="background-color:#F5DEB3">&nbsp;</td> </tr> <tr> <td>White</td> <td>#FFFFFF</td> <td style="background-color:#FFFFFF">&nbsp;</td> </tr> <tr> <td>WhiteSmoke</td> <td>#F5F5F5</td> <td style="background-color:#F5F5F5">&nbsp;</td> </tr> <tr> <td>Yellow</td> <td>#FFFF00</td> <td style="background-color:#FFFF00">&nbsp;</td> </tr> <tr> <td>YellowGreen</td> <td>#9ACD32</td> <td style="background-color:#9ACD32">&nbsp;</td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 前端基础-HTML-字体 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图