HTML中针对颜色的应用
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上期<span style="color: black;">文案</span>：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">panda456：从<span style="color: black;">这儿</span><span style="color: black;">起始</span>：<span style="color: black;">怎样</span>创建一个非常简单的HTML文档？</span><span style="color: black;">64 赞同 · 4 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span></a></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">相信<span style="color: black;">大众</span>在看完上一期<span style="color: black;">文案</span>之后都<span style="color: black;">晓得</span>在哪里写代码、<span style="color: black;">怎样</span>调试并预览等操作，以及HTML文档的主体结构，并探讨了<span style="color: black;">怎样</span>添加标题和段落。<span style="color: black;">因此呢</span>这期<span style="color: black;">文案</span>以及后面的<span style="color: black;">文案</span>都会跳过这些最<span style="color: black;">基本</span>的操作，直接进行讲解。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于颜色，这期<span style="color: black;">文案</span><span style="color: black;">重点</span>讲三点：</p>字体颜色背景颜色边框颜色<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要在HTML中添加这些颜色，要用到style属性，用于内联CSS。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">HTML支持140种颜色</a>，<span style="color: black;">因此呢</span>在大<span style="color: black;">都数</span><span style="color: black;">状况</span>下，只需输入对应的英文单词，<span style="color: black;">就可</span>找到这种颜色。<span style="color: black;">倘若</span>你对预置的颜色不满意，<span style="color: black;">能够</span>自己调色。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>字体颜色（color）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">举例，我要把标题改成蓝色文字（<span style="color: black;">倘若</span>不修改文字颜色，浏览器会默认<span style="color: black;">表示</span>为黑色，就像这篇<span style="color: black;">文案</span>），应该怎么做呢？<span style="color: black;">咱们</span>只<span style="color: black;">必须</span>在前标记里嵌入style属性<span style="color: black;">就可</span>：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">h1</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"color:blue;"</span><span style="color: black;">></span>我的<span style="color: black;">第1</span>个标题<span style="color: black;"></</span><span style="color: black;">h1</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用浏览器打开<span style="color: black;">瞧瞧</span>，标题<span style="color: black;">是不是</span>变<span style="color: black;">成为了</span>蓝色。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不仅标题<span style="color: black;">能够</span>添加字体颜色，段落<span style="color: black;">亦</span><span style="color: black;">能够</span>哦：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"color:red;"</span><span style="color: black;">></span>这是一个段落，我要把它设置为蓝色，只需在前面的标签上嵌入style属性<span style="color: black;">就可</span>，style用于内联CSS，在以后的<span style="color: black;">文案</span><span style="color: black;">其中</span><span style="color: black;">咱们</span>会<span style="color: black;">仔细</span>讲解CSS。<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面是完整的代码（千万不要忽略上下两部分，上面的示例只是局部代码，整体结构要完整且<span style="color: black;">不可</span><span style="color: black;">显现</span>错误。不爱学习的小伙伴们直接拿去复制）。再用浏览器打开看一看，标题和下面一段文字的颜色<span style="color: black;">是不是</span><span style="color: black;">表示</span>正常。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h1</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"color:blue;"</span><span style="color: black;">></span>我的<span style="color: black;">第1</span>个标题<span style="color: black;"></</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"color:red;"</span><span style="color: black;">></span>这是一个段落，我要把它设置为蓝色，只需在前面的标签上嵌入style属性<span style="color: black;">就可</span>，style用于内联CSS，在以后的<span style="color: black;">文案</span><span style="color: black;">其中</span><span style="color: black;">咱们</span>会<span style="color: black;">仔细</span>讲解CSS。<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>背景颜色（bac<span style="color: black;">公斤</span>round-color）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">背景颜色指一个HTML元素（<span style="color: black;">日前</span><span style="color: black;">咱们</span>所学的内容元素有<h1>至<h6>和<p>）覆盖着的颜色。例如这篇<span style="color: black;">文案</span>的背景颜色<span style="color: black;">便是</span>白色，黑色的文字覆盖在白色的背景上。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span><span style="color: black;">能够</span>随意更改文字的背景颜色，<span style="color: black;">乃至</span><span style="color: black;">能够</span>拿一张<span style="color: black;">照片</span><span style="color: black;">做为</span>背景（在以后的<span style="color: black;">文案</span>中会讲到）。想要更改背景颜色（<span style="color: black;">倘若</span>不嵌入背景颜色属性，默认<span style="color: black;">状况</span>下<span style="color: black;">便是</span>白色的，就像这篇<span style="color: black;">文案</span>），<span style="color: black;">一样</span>是在style属性里更改。例如我要把段落设置成黄色的背景：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"bac<span style="color: black;">公斤</span>round-color:yellow;"</span><span style="color: black;">></span>这是一个段落，我要把它的背景颜色设置为蓝色，只需在前面的标签上嵌入style属性<span style="color: black;">就可</span>，style用于内联CSS，在以后的<span style="color: black;">文案</span><span style="color: black;">其中</span><span style="color: black;">咱们</span>会<span style="color: black;">仔细</span>讲解CSS。<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">小提示：多个属性<span style="color: black;">能够</span>并列存在，<span style="color: black;">因此呢</span>你<span style="color: black;">能够</span><span style="color: black;">同期</span>给一段文字添加背景颜色和字体颜色，<span style="color: black;">乃至</span><span style="color: black;">更加多</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我再把标题设置成橙色背景，<span style="color: black;">大众</span>输入完代码之后<span style="color: black;">保留</span>并关闭，<span style="color: black;">保证</span>文件是HTML文档，<span style="color: black;">而后</span>用浏览器打开欣赏一下自己的「佳作」。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h1</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"bac<span style="color: black;">公斤</span>round-color:orange;"</span><span style="color: black;">></span>我的<span style="color: black;">第1</span>个标题<span style="color: black;"></</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"bac<span style="color: black;">公斤</span>round-color:yellow;"</span><span style="color: black;">></span>这是一个段落，我要把它的背景颜色设置为蓝色，只需在前面的标签上嵌入style属性<span style="color: black;">就可</span>，style用于内联CSS，在以后的<span style="color: black;">文案</span><span style="color: black;">其中</span><span style="color: black;">咱们</span>会<span style="color: black;">仔细</span>讲解CSS。<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>边框颜色（border）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">什么是边框？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">给<span style="color: black;">有些</span>文本添加边框，<span style="color: black;">亦</span><span style="color: black;">便是</span>用一个长方形（或正方形）把这些文本框起来。边框有三个参数<span style="color: black;">必须</span>设置，那<span style="color: black;">便是</span>边框的宽度、边框的样式、边框的颜色。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如我要把标题添加一个直边框，宽度（<span style="color: black;">亦</span><span style="color: black;">便是</span>粗细、<span style="color: black;">体积</span>）设置为5px，颜色设置为绿色；我再把下面的段落添加一个直边框，宽度为3px，颜色为绿色：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h1</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"border:5px solid green;"</span><span style="color: black;">></span>我的<span style="color: black;">第1</span>个标题<span style="color: black;"></</span>
</div>
软文发布论坛开幕式圆满成功。 http://www.fok120.com
页:
[1]