Hexo

本文最初于2015-10-03发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

本文主要内容

CSS概述
CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表
CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器
CSS几种扩展选择器：后代选择器、交集选择器、并集选择器
CSS样式优先级

前言

现在的互联网前端分三层：

HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为。

CSS 概述

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1。因为css3和css2.1不矛盾，必须先学2.1然后学3。

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS的重点知识点

盒子模型、浮动、定位

CSS 整体感知

我们先来看一段简单的css代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size: 30px;
			text-decoration: underline;
			font-weight: bold;
			text-align: center;
			font-style: italic;
		}
		h1{
			color:blue;
			font-size: 50px;
			font-weight: bold;