CSS 基础教程、整理资料、笔记总结

CSS基础学习教程

非常好的文章推荐：http://www.w3cfuns.com/thread-5594274-1-1.html

在学习CSS教程之前，我希望大家先把html基础学好，如果基础不结实的话，在后面也你是不知道我写什么的。所以希望在学习这篇文章之前，如果没有懂html的可以看我之前写的上一篇html文章：http://www.cnblogs.com/yyman001/archive/2012/09/21/xhtml.html

步入正题，什么CSS?所谓CSS就是级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。如果我们的页面不使用CSS，你会感觉到很丑陋，就想是一推纯文本，杂乱不整。同过CSS来美化页面，页面上大部分的元素都可以进行修饰。

如果文章中有某些字体是这样的话，如：测试

是不建议使用，而不是错误的或不存在！

那么关于CSS的语法，很简单

选择器类型{属性名称：属性值;属性名称2：属性值2;}

就是这一种结构，选择器的类型，后面跟上一对大括号{},一定要写完整，不然CSS解析会错误，在书写上，有人会一个属性占一行。这个书写格式迟点再说。

选择器类型

选择符	解析	例子	备注
ID选择符	唯一的，不可重复 <#sID >	`#red`{color:red;}	自定义名字前加个井（#），定义一个
类选择符	可以重复使用 <E1.className>	`.center`{text-align: center}	自定义名字前加一个点（.）最为常用，也是建议使用的
类型选择符	可重复 <E1>	a { text-decoration:none; }	就是用标签元素的名字
选择符分组	<E1,E2,E3>	.td1,div a{ font-size:14px; }	也是常用的选择符，建议使用
包含选择符/后代选择器	E1 E2	table td { font-size:14px; }	无论E2嵌套多深都会执行
子对象选择符	E1 > E2 子对象提供了更精细的控制	body > p { font-size:14px; }	为了把E2范围缩小，更精确去找
属性选择符	E1[attr]	span[class=demo] { color: red; }	因为IE6不支持，所以不常用的属性，对于主流游览器是支持的，蛋是也不推荐使用
通配选择符	*	*{color:#fff}	非常不建议使用，会把每个元素都渲染一次，

为什么不建议使用id选择符，而更推荐使用类选择器？

一、样式都用class而不用id
　　有三个理由：
　　1，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。
　　2，id的优先级太高，若是写了一个#page_content a {color:#f60} ，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。
　　3，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。

二、用class_name方式写类名
　　以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见第一条。

详细：http://www.haogongju.net/art/956386

注意：关于包含选择符和子对象选择符 一些新手可能会出现混乱下面举个列子就会明白它们之间的关系。

<div>
     <ul>
         <li>是要修饰我啊，哈哈</li>
     </ul>
 <div>

修饰li元素例子：

使用包含选择符

div li{样式} ，还可以这样写 ul li{样式}

解析：所谓包含，只要li是属于某个包含对象的里面，就可以使用这种方法，可以看到，不需要很精准找到 li 元素的上级元素，可以是包裹在它外面的元素

使用子对象选择符

ul > li {样式}

解析：使用这种子对象选择符，只能是找到 li 元素的上级元素（父元素），不然不会生效，不可以写成 div > li 这种形式，因为div不是它的父元素，所以不可以。

CSS在html页面应用方式

主要是3种方式：

一、行内样式

在标签中添加css代码，优先级是最高

如：

<span style="color:#fff">使用行内样式把我的文字设置为白色</span>

二、内嵌式

在html页面的head标签之间添加css代码，优先级排第二

如：

<head>
 ...省略
<style>
 span{color:#fff;} /*使用内嵌式把span里面的文字变成白色*/
</style>
</head>

三、外部样式

独立的css文件写代码，在html引入文件，优先级最低，主要有2种，一种是是用关键之 @import，另一种则是使用 link 来引入css文件

由于@import 引入方式还有它的一些问题，所以很少人会使用，这里也不推荐使用，而是推荐使用 link 方式引入CSS文件

link 引入方式：

<link href="layout.css" rel="stylesheet" type="text/css" />

type:文件类型

href：css文件路径

rel：

CSS样式优先级

所谓优先级，就是谁的等级高，就优先使用谁的，而且低级的样式无法覆盖或修改优先级高设置的样式。

类型	优先级	备注
内联样式	1000	在页面里是最高，但我们不建议把css样式写在html文件结构中
ID选择器	100	这个也是不推荐使用的，重用性不高，一旦使用，再想修改样式必定要高过这个优先级
类，属性，伪类选择器	10	推荐使用的
元素标签，伪元素选择器	1	推荐使用
!important（CSS某个属性值）	最高	这个并不属于类型范围，在支持这个属性的游览器上，在属性值后面加上这个，优先执行，比内联样式优先级还要高！用途一般是为了游览器兼容