CSS -- 简介
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Ⅰ 什么是CSS</h2>CSS全<span style="color: black;">叫作</span>Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。样式指的是HTML标签的<span style="color: black;">表示</span>效果，<span style="color: black;">例如</span>换行、宽高、颜色等等层叠属于CSS的三大特性之一，<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>一个CSS文件里<h2 style="color: black; text-align: left; margin-bottom: 10px;">Ⅱ <span style="color: black;">为么</span>要用CSS</h2> /*这是注释*/ 在<span style="color: black;">无</span>CSS之前，<span style="color: black;">咱们</span>想要修改HTML标签的样式则<span style="color: black;">必须</span>为<span style="color: black;">每一个</span>HTML标签单独定义样式属性，如下<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!</span><span style="color: black;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><html></span>
<span style="color: black;"><head></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8">
</span><span style="color: black;"></head></span>
<span style="color: black;"><body></span>
<span style="color: black;"><</span><span style="color: black;">h1</span> <span style="color: black;">align</span><span style="color: black;">=</span><span style="color: black;">"center">
</span> <span style="color: black;"><</span><span style="color: black;">font</span> <span style="color: black;">color</span><span style="color: black;">=</span><span style="color: black;">"pink" size="5">Beyand The Game</font>
</span><span style="color: black;"></h1></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">align</span><span style="color: black;">=</span><span style="color: black;">"center">
</span> <span style="color: black;"><</span><span style="color: black;">font</span> <span style="color: black;">color</span><span style="color: black;">=</span><span style="color: black;">"pink" size="5">头上有包视野好，车身低矮隐蔽强</font>
</span><span style="color: black;"></p></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">align</span><span style="color: black;">=</span><span style="color: black;">"center">
</span> <span style="color: black;"><</span><span style="color: black;">font</span> <span style="color: black;">color</span><span style="color: black;">=</span><span style="color: black;">"pink" size="5">天下高伤出我辈，一入神教岁月催</font></span><span style="color: black;"></p></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">align</span><span style="color: black;">=</span><span style="color: black;">"center">
</span> <span style="color: black;"><</span><span style="color: black;">font</span> <span style="color: black;">color</span><span style="color: black;">=</span><span style="color: black;">"pink" size="5">雄图霸业燃烧中，所向之处皆炮灰</font>
</span><span style="color: black;"></p></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">align</span><span style="color: black;">=</span><span style="color: black;">"center">
</span> <span style="color: black;"><</span><span style="color: black;">font</span> <span style="color: black;">color</span><span style="color: black;">=</span><span style="color: black;">"pink" size="5">一代版本一代神 ，代代都有查狄伦</font></span><span style="color: black;"></p></span>
<span style="color: black;"></body></span>
<span style="color: black;"></html></span>
</div>这么做的缺点是记忆困难：<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>效果代码耦合度高：HTML语义与样式耦合到<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>了以上三个问题<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!</span><span style="color: black;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><html></span>
<span style="color: black;"><head></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8">
</span> <span style="color: black;"><style></span>
<span style="color: black;">h1</span><span style="color: black;">,</span><span style="color: black;">p</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">pink</span><span style="color: black;">;</span>
<span style="color: black;">font</span><span style="color: black;">-</span><span style="color: black;">size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">text</span><span style="color: black;">-</span><span style="color: black;">align</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></style></span>
<span style="color: black;"></head></span>
<span style="color: black;"><body></span>
<span style="color: black;"><h1>Beyand</span> <span style="color: black;">The</span> <span style="color: black;">Game</h1></span>
<span style="color: black;"><p>头上有包视野好，车身低矮隐蔽强</p></span>
<span style="color: black;"><p>天下高伤出我辈，一入神教岁月催</p></span>
<span style="color: black;"><p>雄图霸业燃烧中，所向之处皆炮灰</p></span>
<span style="color: black;"><p>一代版本一代神，代代都有查狄伦</p></span>
<span style="color: black;"></body></span>
<span style="color: black;"></html></span>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Ⅲ <span style="color: black;">怎样</span><span style="color: black;">运用</span>CSS</h2>语法<span style="color: black;">选取</span>器声明声明由属性和值<span style="color: black;">构成</span>，多个声明之间用分号分隔<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-447a44a1de72146b1891dd9d67a30809_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>四种引入方式行内式行内式是在标签的style属性中设定CSS样式。这种方式<span style="color: black;">无</span><span style="color: black;">表现</span>出CSS的<span style="color: black;">优良</span>，不<span style="color: black;">举荐</span><span style="color: black;">运用</span>。<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;">"</span><span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span><span style="color: black;">font</span><span style="color: black;">-</span><span style="color: black;">size</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">px</span><span style="color: black;">;</span><span style="color: black;">text</span><span style="color: black;">-</span><span style="color: black;">align</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">"</span><span style="color: black;">></span><span style="color: black;">"</span><span style="color: black;">IS</span><span style="color: black;">-</span><span style="color: black;">7</span><span style="color: black;">"</span><span style="color: black;">是一个非常了不起的车</p></span></div>嵌入式嵌入式是将CSS样式集中写在网页<head></head>标签内的的<style></style>标签对中<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!</span><span style="color: black;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><html></span>
<span style="color: black;"><head></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8">
</span> <span style="color: black;"><style></span>
<span style="color: black;">p</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">font</span><span style="color: black;">-</span><span style="color: black;">size</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">text</span><span style="color: black;">-</span><span style="color: black;">align</span><span style="color: black;">:</span> <span style="color: black;">center</span>
<span style="color: black;">}</span>
<span style="color: black;"></style></span>
<span style="color: black;"></head></span>
<span style="color: black;"><body></span>
<span style="color: black;"><p>"ST-II"是一个有两根的人</p></span>
<span style="color: black;"></body></span>
<span style="color: black;"></html></span>
</div>导入式新建<span style="color: black;">外边</span>样式表，<span style="color: black;">而后</span><span style="color: black;">运用</span>导入式和链接式引入<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">首要</span>在与html文件同级目录下有一个css文件夹</span><span style="color: black;">，</span><span style="color: black;">该文件夹下新建一个<span style="color: black;">外边</span>样式表mystyle</span><span style="color: black;">.</span><span style="color: black;">css</span><span style="color: black;">,</span><span style="color: black;">内容为</span>
<span style="color: black;">p</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">font</span><span style="color: black;">-</span><span style="color: black;">size</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">text</span><span style="color: black;">-</span><span style="color: black;">align</span><span style="color: black;">:</span> <span style="color: black;">center</span>
<span style="color: black;">}</span>
<span style="color: black;"><!</span><span style="color: black;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><html></span>
<span style="color: black;"><head></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8">
</span> <span style="color: black;"><style></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;">import</span> <span style="color: black;">"css/mystyle.css";*/
</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;">import</span> <span style="color: black;">url</span><span style="color: black;">(</span><span style="color: black;">"css/mystyle.css");</span>
<span style="color: black;"></style></span>
<span style="color: black;"></head></span>
<span style="color: black;"><body></span>
<span style="color: black;"><p>"705工程A"是一个非常挺人</p></span>
<span style="color: black;"></body></span>
<span style="color: black;"></html></span>
</div>链接式（<span style="color: black;">举荐</span><span style="color: black;">运用</span>）<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!</span><span style="color: black;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><html></span>
<span style="color: black;"><head></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8">
</span> <span style="color: black;"><</span><span style="color: black;">link</span> <span style="color: black;">rel</span><span style="color: black;">=</span><span style="color: black;">"stylesheet" href="css/mystyle.css"></span><span style="color: black;"></head></span>
<span style="color: black;"><body></span>
<span style="color: black;"><p>"260工程"是一个非常尖的人</p></span>
<span style="color: black;"></body></span>
<span style="color: black;"></html></span>
</div>导入式与链接式的区别<link/>标签属于XHTML,@import是属于CSS2.1特有的，<span style="color: black;">针对</span>不兼容CSS2.1的浏览器<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;">引起</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>的是它会在网页文件主体装载前装载CSS文件，<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>有样式的网页，这是链接式的优点<h2 style="color: black; text-align: left; margin-bottom: 10px;">Ⅴ <span style="color: black;">重视</span><span style="color: black;">重要</span>点</h2>style标签<span style="color: black;">必要</span>放到head内 ,type="text/css"<span style="color: black;">表率</span>文本类型的csstype属性其实<span style="color: black;">能够</span><span style="color: black;">不消</span>写，默认<span style="color: black;">便是</span>type="text/css"设置样式时<span style="color: black;">必要</span><span style="color: black;">根据</span>固定的格式来设置，key:value;其中 ; <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>省略就行了<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-678cd920dfbff8e92d86a4d790e8cb98_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
“板凳”（第三个回帖的人） 感谢您的精彩评论，为我带来了新的思考角度。 你的见解独到，让我受益匪浅，期待更多交流。
页:
[1]