CSS 入门

本教程我们来学习基本的 CSS 知识，在学习 CSS 之前，大家肯定已经学习过了 HTML，在学习 HTML 的时候我们就已经讲到过，有很多的标签和属性其实都能直接通过 CSS 样式来代替实现，并且通过 CSS 样式来实现会更加方便。

相对于我们平时看到的网页来说，如果仅仅通过 HTML 代码是无法达到某些比较复杂视觉效果的，但是如果配合 CSS 就能很容易实现啦。

CSS 介绍

CSS 的英文全称为 Cascading Style Sheets，翻译成中文叫做层叠样式表，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

也就是说我们可以通过 CSS 样式来定义如何显示 HTML 代码，CSS 中的样式多种多样，比如说字体的样式，有设置字体大小、颜色、加粗、倾斜，还有列表样式、背景样式等等，后面我们都会慢慢的学到。

示例：

我们来看一段 CSS 代码：

div{
    font-size: 16px;
    line-height: 20px;
    color: #ccc;
    margin: 0;
    padding: 0;
}

其实从这段 CSS 代码中，我们也不难看出 CSS 的语法格式。

CSS 语法格式

每个 CSS 样式都是由两个部分组成的，即选择器和声明，而声明又包括属性和属性值，每个声明后面都有一个分号。

语法：

选择器{
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

选择器的种类挺多的，像比如标签选择器、类选择器、ID选择器、后代选择器等，后面我们都会讲到。

要注意的是，每一句样式声明后面的分号 ; 千万别忘记，特别是有多个样式声明的时候。

CSS 注释

这里我们再来讲一下 CSS 中的注释，注释大家应该不陌生，就是对代码的解释和说明，不同编程语言的注释代码可能存在差别，CSS 中的注释如下所示：

/* 这是CSS中的注释 */

CSS 特点

CSS 语言的特点有下面几点：

• 丰富的样式定义：CSS 提供了丰富的文档样式外观，以及设置文本和背景属性的能力。允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离。允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
• 易于使用和修改：CSS 可以将样式定义在 HTML 元素的 style 属性中，也可以将其定义在 HTML 文档的 header 部分，也可以将样式声明在一个专门的 CSS 文件中，以供 HTML 页面引用。
• 多页面应用：CSS 样式表可以单独存放在一个 CSS 文件中，这样我们就可以在多个页面中使用同一个 CSS 样式表。
• 层叠：层叠就是对一个元素多次设置同一个样式，这种情况下将使用最后一次设置的属性值。
• 页面压缩：样式声明在 CSS 样式表中，可以大大的减少 HTML 页面的内容，减少页面加载的时间。

总结

HTML 为页面定义结构，而 CSS 就是为 HTML 结构定义外观，简单理解就是：HTML 就是骨架，而 CSS 就是为骨架赋予血肉和皮肤外观，二者互相配合使用。