从零开始自学HTML的基础知识我们已经学的差不多了，今天起我们来学习它的好搭档:CSS。
css，中文名为层叠样式表，主要用于如何显示HTML元素，就好比为画像上色，让htnl页面变得丰富多彩。
css的语法很简单，只有两部分:选择器和声明。
选择器指的是要改变样式的html标签。
声明指的是需要设置的样式属性，声明的组成是键值对，每个声明之间用分号;隔开。整个声明用大括号｛｝包括起来。
知道大家不太懂，还是上面的例子，选择器选择头发或是嘴唇，声明描述嘴唇或头发的颜色是红色还是黑色。
h1 {color:red; text-align:center;}
选择器选择了标题h1，并声明颜色为红色且居中显示。
css注释
注释的语法很简单，只要用/*看不见的内容*/括起来的内容就是注释。浏览器不会解读它。
插入css
要使css生效，有三种方法来将它插入到html文档中，外部样式表、内部样式表、内联样式表。
外部样式表：顾名思义，样式表不在html文档中，而是新建css文件，将css样式放到一个文件中，在需要的时候调用。
这样做的好处是内容与显示完全分离，css文件可以被多个html文件调用，必要时只要改变一个属性就可以改变多个页面。css文件后缀为.css。
内部样式表：内部样式表只作用于一个文件，可以影响当前文件中的多个元素标签，内部样式表写在<head>标签之中，以<style>开始，</style>结束。
内联样式表：内联样式表的作用域更小了，它只作用于当前元素标签。内联样式表写在元素标签之中。
讲完了，开撸代码：
<html>
<head>
<style>
h1 {text-align:center;}
p {color:red;}
</style>
</head>
<body>
<h1>css大法好</h1>
<p>红色的段落</p>
<p style="font-size:22">又大又红的段落</p>
</body>
</html>
代码展示：
css大法好
红色的段落
又大又红的段落
大家有没有发现，代码中有两个p标签，在内部样式表中，把p标签定义为红色，所以两个p标签都是红色，后来我们又在第二个p标签中定义了内联样式表，并将字体放大到22px，所以第二个p标签有两个样式属性:color和font-size。
可如果内联样式表和内部样式表拥有同样的标签属性该怎么办，听谁的好呢？
内联样式表 > 内部样式表 > 外部样式表
所以如果出现相同的属性，优先使用离得最近的，也就是内联样式表。
可能有童鞋有疑问了，p标签在内部样式表中定义为红色后，下方肯定会有很多个p标签，这样它们就全是红色了，可我想要其中一些变成绿色，另一些变成黄色，也可怎么办，难道要为每个p标签都添加内联样式表吗？如果后期要改变颜色又怎么办？
关于这个问题，我会在下一张给出解决办法！
暂无评论内容