CSS基础

一、CSS概念

CSS是Cascading Style Sheets（级联样式表）的缩写。

可以用CSS做什么？

CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。

CSS跟HTML的区别在哪里？

1. HTML用于结构化内容；CSS用于格式化结构化的内容。
2. 也就是CSS是装饰HTML的

采用CSS有哪些好处？

1. 通过单个样式表控制多个文档的布局；
2. 更精确的布局控制；
3. 为不同的媒体类型（屏幕、打印等）采取不同的布局；
4. 无数高级、先进的技巧。
5. 可以灵活的更换网页风格

二、CSS基本语法

CSS语法也很多，分的很详细，因为详细，所以强大。以下只介绍其中的一小部分。

CSS 语法由三部分构成：选择器、属性和值：

selector {property: value}

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。

为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。建议你对第三种方法（即外部样式表）予以关注。

方法1：行内样式表（style属性）

为HTML应用CSS的一种方法是使用HTML属性style。在上例的基础之上，通过行内样式表将页面背景设为红色：

<html>
  <head>
    <title>例子</title>
  </head>
  <body style="background-color: #FF0000;">
      <p>这个页面是红色的</p>
  </body>
</html>

方法2：内部样式表（style元素）

为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：

<html>
  <head>
<title>例子</title>
    <style type="text/css">
        body {background-color: #FF0000;}
    </style>
  </head>
  <body>
       <p>这个页面是红色的</p>
  </body>
</html>

方法3：外部样式表（引用一个样式表文件），推荐此方法。

外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。例如，样式表文件名为style.css，它通常被存放于名为style的目录中。style.css文件内容如下：

 body {
    background-color: #FF0000;
 }

如何在一个HTML文档里引用一个外部样式表文件（style.css）

<html>
  <head>
    <title>我的文档</title>
    <link rel="stylesheet" type="text/css" href=“style/style.css" />
  </head>
  <body>
  <h1>我的第一个样式表</h1>
  </body>
</html>

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。CSS允许根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，便可为网站增添奇特而有用的效果。需要通过伪类（pseudo-class）来控制这些效果。

三、三个重要概念

伪类是什么？

伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。

来看一个例子。在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器selector。

a {
  color: blue;
}

一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {
  color: blue;
}
a:visited {
  color: red;
}

为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。

ID选择器和类选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

ID选择器和类选择器的区别？

A1：二者主要的区别在哪里呢？

id你只能用来定义单一元素，定义二个以后。页面不会出现什么问题，但是W3检测的时候认为你页面不符合标准；class是类，同一个class可以定义多个元素。就页面效果而言，两个东西的视觉效果几乎无差别。

A2：id 选择符为什么要少用，它有有什么局限性？

单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！

A3：我该在什么时候使用ID，什么时候使用class？

单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。