初识CSS以及块级元素、行内元素

一、在CSS之前

在CSS之前，网页制作的内容和格式是连在一起的。

其效果是

如果想要实现新闻内容的字体颜色不同于新闻类别，则修改相应的代码即可。如果有许多的内容，并且要修改许多内容的样式，则一条一条的修改显然不是一个好的方法。这就需要CSS了。

二、什么是CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。是一种用来表现HTML或 XML 等文件式样的计算机语言。通过设立样式表，可以统一地控制HTML中各标志的显示属性。使人更能有效地控制网页外观。

还是上面的例子，实现标题和内容的颜色不同

首先要添加引用“样式”

在“CSS测试.CSS”中，编辑如下

最终效果如下

这样，通过对不同的标签做不同的设置，可以实现不同的效果，并且实现了标题和内容的分离。

三、块级元素、行内元素

对上面的例子做如下改动：

实现的效果是

从上面的例子可以初步看出行内元素和块级元素的区别了。

我们可以将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。块元素和行内元素的基本差异是块元素一般都从新行开始。通俗的讲就是块级元素总是和其同级的兄弟块在竖直方向进行排列，并左右撑满；行内元素则与其同级的兄弟元素水平排列，呈现在一行里面。

当然，上面说的前提是在没有浮动的情况下，如果有浮动则又是另一番情况了。关于浮动将在后面做详细的解释

小弟初学CSS，上面纯属个人见解，如有不对的地方，还望各位大虾指正。