跑题最近看了这本书《精通CSS，高级web标准解决方案》。所以接下来的几篇文章结合自己的理解，参考本书做一个总结。好了，废话少说，言归正传。CSS的前世今生很久很久以前，早期的浏览器只支持轻量级的HTML，使用HTML添加基本的格式和结构。但是随着web的普及，人们已经不满足于仅仅结构和文字样式了！！看看1999年搜狐的页面：人们爱美，于是开始用HTML来表示页面，以至于web领域变得一团糟。想象一下，当您将所有样式放在同一个HTML文档中时。时间，多么可怕。在这一点上，HTML有点不对劲。HTML似乎不能被视为一种简单的标记语言。而是将性能、布局和内容融为一体，让人看起来复杂、混乱，更容易出错（不仅容易出错，而且相当难以察觉！）。简而言之，开发人员远离并使用可视化编辑器。这样下去的结果就是连开发者自己都不会写代码。（所以当时负责web开发的程序员们可能也是一头雾水）就在他们一头雾水的时候，CSS诞生了！为了解决这个问题，CSS的意义在于将文档的内容与表现形式分开。这对于程序员来说应该是相当熟悉的。内容和性能分离的好处是，我一个人设计内容的时候，不需要考虑性能，真正一个人执行的时候，不需要过多考虑内容。这样做的结果是：①结构更简单、更清晰。②修改方便，修改一个地方，就会在整个系统中实现。于是，标记（HTML）再次回归本源，天下太平。我们尽量去掉内容和表现的重叠部分，所以在以后的设计中，尽可能把内容和表现区分开来。命名HTML元素时，根据“它是什么”而不是“它看起来像什么”来命名它们。例如：如果您希望新闻类型的元素显示为红色。好的命名：news坏的命名：red同样，像leftbottom这样的方向的命名也是不好的。什么是CSS选择器？答：选择+容器。（也就是挑出来放到容器里）我们之前提到内容和表现要分离，选择器是实现这个技术的重要手段。如果我们把HTML和CSS开发的过程想象成不同的人自己打扮自己。那么HTML就是图中所示的人。它是一种结构化语言。它可以将页面分成几个部分，每个部分包含不同的元素。如：头部包括头顶、眼睛、耳朵等。那么什么是CSS，CSS就是用来装扮人的东西！！例如：帽子、眼镜、外套等。他的目的是让人有不同的风格，更好看，也可能更丑（取决于不同人的审美）。CSS选择器的作用是选择相应的元素并为其应用样式。例如：选择眼睛，给他戴上眼镜；选择脖子并系上领带。怎么样，明白了吧！！！接下来让我们看看有哪些选择器可用！元素选择器最常见的选择器，也是最简单的。Allyouneedistheelement.//把h2中的帅哥穿黑西装h2{color:black;}后代选择器用于寻找特定元素的后代。//快速给div家族的子h2穿上黑色西装。divh2{color:black;}类选择器用于查找特定类。//为别名新闻孩子穿上黑色西装。news{color:black;}ID选择器用于查找具有特定ID的元素。//给ID为header的美女套上黑色西装#header{color:black;}以上四个选择器是最简单也是最常用的分类。可以相互组合，比如：//选择类名news的p元素p.news{color:red;}伪类选择器什么意思？不要刚看到没见过的就急着去查资料。其实很简单！我们想一想：那么什么是“伪妈妈”？哈哈哈伪类：伪装成类的类，他不是类。分为以下两类：只对链接一个元素有效：a:linka:visited适用于任何元素：:hover:active和:focus和:first-child:lang一般选择器用*来表示选择出来所有的元素。*{填充：0;margin:0;}子选择器和相邻子选择器还记得后代选择器吗，用空格表示前一个元素的后代，这个后代是个大概念，儿子是后代，孙子也是后代...所以突出了儿子选择器的重要性！！对子选择器使用>符号。“>”：左边的地位大于右边，所以左边代表父亲，右边代表儿子。而相邻子选择器用的是“+”，怎么理解呢？“+”：一方面表示两个元素相等，处于同一层次，另一方面表示连接，即左边的元素是后面的元素。例如：//子选择器，选择navli的儿子#nav>li{padding:20px;}//相邻的子选择器，选择与h1同级，紧跟在h1后面的p元素h1+p{color:red;}属性选择器根据某个属性值查找元素。使用[属性值]表示可以根据这个属性值搜索出很多东西。先给出html代码：
