|
|
LOGO第六章开始学习CSS,为网页添加样式封面页第<#>页LOGO目录第一节认识CSS样式第二节CSS样式的优势第三节CSS代码语法第四节
CSS注释代码目录页第<#>页LOGO认识CSS样式第一节CSS全称为“层叠样式表(CascadingStyleSheets
)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，
可以让不同网页位置的文字有着统一的字体、字号或者颜色等。正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOGO举例
p{ font-size:12px; color:red; font-weight:bold;}查看index.html
文档（第六章）正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO第二节CSS样式的优势L>charset=utf-8">CSS样式的优势tyle>HTML学习，首先学习CSS样式的优势，其次学习CSS代码语法，最后学习CSS注释代码
正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO思考CSS样式的优势为什么使
用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“CSS样式的优势”、“CSS代码语法”、“CSS注释代码”这三
个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。正文第几章这里输入本章标题第<#>页
第几节这里输入本节标题LOGO实践CSS样式的优势第一步：把这三个短语用括起来。第二步：写入下列代码：s
pan{ color:red;}查看index1.html文档（第六章）正文第几章这里输入本章标题第<#>页第几节这里输入本节
标题LOGO第二节CSS样式的优势tent-Type"content="text/html;charset=utf-8">CSS样式的优势</ti<br>tle><styletype="text/css">span{color:red;}</style></head><body><br><p>HTML学习，首先学习<span>CSS样式的优势</span>其次学习<span>CSS代码语法</span>最后学习<<br>span>CSS注释代码</span></p></body></html>正文第几章这里输入本章标题第<#>页第几节这里输入本节标<br>题LOGO第三节CSS代码语法css样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：正文第几章这里输入本章标题第<#<br>>页第几节这里输入本节标题LOGO说明CSS代码语法选择符：又称选择器，指明网页中要应用样式规则的元素，如实例中是网页中所有的段（<br>span）的文字将变成蓝色，而其他的元素（如P）不会受到影响。正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO说<br>明CSS代码语法声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”<br>分隔，如下所示： p{font-size:12px;color:red;}正文第几章这里输入本章标题第<#>页第几节这里输入本节标<br>题LOGO注意CSS代码语法1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。2、为了使用样式更加容易阅读，可以<br>将每条代码写在一个新行内，如下所示：p{ font-size:12px; color:red;}正文第几章这里输入本章标题<br>第<#>页第几节这里输入本节标题LOGO第四节CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/注释语句/来<br>标明（Html中使用<!--注释语句-->)。就像下面代码：正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO谢谢聆听！封面页第<#>页封面目录图表图片图片图片图片图片图片图片图片图片图片封底</td>
</tr>
</tbody>
</table>
<div id="viewerPlaceHolder" style="width: 717px; height: 700px; display: none;">
</div>
</span>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="left list" style="text-align: left; font-size: 14px;">
<div id='lastart'></div>
<div id='nextart'></div>
</div>
</td>
</tr>
<tr>
<td style="height: 29px;">
<div style="padding-top: 20px;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="31%"></td>
<td>
<table cellpadding="0" cellspacing="0" style="margin: 0px auto;">
<tbody>
<tr>
<td><div class=" left" style='cursor: pointer'>
<a href="javascript:void(0);" onclick="wzhit(22);SaveArt();">
<img src="http://pubimage.360doc.com/wz/tb11.gif" /></a>
</div>
<div class=" left xianhua" id="sendFlowerToUser" style='cursor: pointer' onclick='Showflowerlayer("sendedLayer1");'>
献花(<span id="articleflowernum">0</span>)<div id='flowernumadd' class="addtionone">+1</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="31%" style="vertical-align: bottom; font-size: 12px;">
<div class="right" id="sharediv2">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="xiantao" style="padding-top: 5px;">
</div>
</td>
</tr>
<tr>
<td class="xgiambox" style="vertical-align: top; height: 30px; padding-top: 10px;">
<div class="right">(本文系<span class="name"><a target="_blank" href="http://www.360doc.com/userhome/68630570">启智职教的...</a></span>原创<span id="docsource"></span>)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="lswzbox">
<div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div class="bottom_article f_left">
<div class="str_border">
<strong>类似文章</strong>
<a href='http://www.360doc.com/relevant/956069478_more.shtml' target='_blank' class='a_more f_right' onclick='artStatistics("20-9-8");'>更多</a>
</div>
<ul class="barticle_list">
<li><span><a href=http://www.360doc.com/content/16/0727/10/13792507_578691103.shtml target=_blank onclick='artStatistics("20-9-7");'>有了这些，Html前端开发so easy！</a></span></li>
<li><span><a href=http://www.360doc.com/content/11/1204/08/19147_169522577.shtml target=_blank onclick='artStatistics("20-9-7");'>6大代码搜索引擎</a></span></li>
<li><span><a href=http://www.360doc.com/content/13/0321/15/21412_273014738.shtml target=_blank onclick='artStatistics("20-9-7");'>Emmetv1.0发布，快速编写HTML/CSS代码从ZenCoding变身</a></span></li>
<li><span><a href=http://www.360doc.com/content/11/0326/11/4618624_104713216.shtml target=_blank onclick='artStatistics("20-9-7");'>ps切图转网页代码（psd to html）（转载）</a></span></li>
<li><span><a href=http://www.360doc.com/content/12/0217/17/67582_187412709.shtml target=_blank onclick='artStatistics("20-9-7");'>IE6、IE7、IE8浏览器下的CSS、JS兼容性对比</a></span></li>
<li><span><a href=http://www.360doc.com/content/15/0430/10/25260732_466993645.shtml target=_blank onclick='artStatistics("20-9-7");'>常用 Sublime Text 插件列表</a></span></li>
<li><span><a href=http://www.360doc.com/content/12/1204/15/11096641_252070454.shtml target=_blank onclick='artStatistics("20-9-7");'>HTML CSS从入门到精通</a></span></li>
<li><span><a href=http://www.360doc.com/content/18/1013/16/13790267_794405608.shtml target=_blank onclick='artStatistics("20-9-7");'>html5和css3（共101集）</a></span></li>
<li><span><a href=http://www.360doc.com/content/18/0313/12/45654100_736614888.shtml target=_blank onclick='artStatistics("20-9-7");'>Web前端开发入门（一）简介</a></span></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<div id="Reflction">
<div id="360docRefTN">
</div>
<div id="360docRefCT">
</div>
<div id="360docRefPB" align="center">
</div>
</div>
<a name="sf"></a>
<div id="ReflectionPart">
<div class="mainbottom">
<div class=" left">
<img src="http://pubimage.360doc.com/wz/tb22.gif" />
</div>
<div class="plbox left">
<div class="plmain">
<div class="titwx">发表评论：</div>
<div>
<textarea name="SendRefTB" class="pltxt" id="SendRefTB" onfocus="testContent(1);"
onblur="testContent(2)"></textarea>
</div>
<div class="right">
<img id="ImgSendPL" src="http://pubimage.360doc.com/wz/tb24.gif" style="cursor: pointer;" onclick="SubmitReflection()" width="75" height="28" />
</div>
</div>
</div>
<div class=" left">
<img src="http://pubimage.360doc.com/wz/tb23.gif" />
</div>
</div>
</div>
</div>
</div>
</td>
<td align="center" valign="top" width="18px"></td>
<td align="left" valign="top" width="252px"></td>
</tr>
</tbody>
</table>
</div>
<script language="javascript" type="text/javascript">
var appName = navigator.appName.toLowerCase();
if (appName.indexOf("microsoft internet explorer") > -1) {
document.write("<scr" + "ipt type='text/javascript' src='http://www.360doc.com/js/StickySystemIENewVersion.js?t=2012122401'></sc" + "ript>");
}
else {
document.write("<scr" + "ipt type='text/javascript' src='http://www.360doc.com/js/StickySystemOtherNewVersion.js?t=2012122401'></sc" + "ript>");
}
</script>
<span id="LayerLogin"></span>
<script>GerLookingUserInfo(1,68630570,1,55,'-1',-1,10);OutputSource('http://www.360doc.com/userhome/68630570');OutputCategory(68630570,1,'馆藏分类');</script>
<script src="http://blockart.360doc.com/ajax/getstatusv2.ashx?aid=956069478" type="text/javascript" charset="utf-8" async="async"></script>
<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "http://www.360doc.com/document/21/0109/21/68630570_956069478.shtml",
"title": "HTML+CSS基础-第六章",
"pubDate": "2021-01-09T21:54:03"
}
</script>
</body>
</html>
| | |
