写给自己的web总结——css篇（1）

上一篇写了关于html的知识，算是小试牛刀，这次来尝试写一下css。

• 初步了解css

css的全称为cascading style sheet—— 层叠样式表，通过编入代码来对html里的标签做出各种各样的修饰与改变。

• 如何引入css

1. 引入外部css文件

这是我们最常用的方式，通过在head中引入一个link标签引入

例：<link rel="stylesheet" type="text/css" href="1234.css">

2.  在head里写一个style标签，把css写入该标签中

例：

<style>
*{ margin:0; padding:0; }
.miao{
height: 100px;
width: 80px;
background-color: black;
}

</style>

3. 在标签内部直接写在style属性里（个人不喜，但有时候确实好用）

例：<span class="q" style="width:1014px;height:138px;">

在多数情况下，我们推荐第一种方式，因为这样做的话由link引入的css不会阻塞html的

加载（属于异步加载，html和css会同时加载，不会出现在未加载玩css的情况下无法加载html）

4.import方式引入(已经弃用)

在head标签里面写一个style标签，在第一行写上@import url();url里面写上css文件的地址。

这种引入方式存在缺点导致它现在被废弃使用：

1.必须写在第一行，若有多个则一起写在最前面。

2.程序读到import的时候，会忽略掉import，等到html里面的所有内容包括图片在内的所有资源全都加载完之后才加载import的css文件（同步加载，先加载html）

• import与link的区别

1.@import 机制不同于link，link是加载页面前css加载完毕，@import 是先读取文件再加载

2.@import是css2.0里的 ie5以下不支持

3.用js控制dom时改变样式，只能用link，@import不是dom能控制的

4.最后一个很有意思，@import url有最大次数的限制，IE6最多引入31次，firefox并没有发现

@import的优点： 多个样式表导入一个样式表中，页面只需要引入一个即可

• 关于css的优先级

1.位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。

2.第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。 　

3.第三级的优先属性由<link/>标签所引入的样式表定义。 　

4.第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。 　

5.第五级优先的样式有用户设定。 　　

6.最低级的优先权由浏览器默认。

link标签引入和style标签修改样式二者之间并没有什么优先级，谁写在前面谁就先执行.。有时候会因为网速问题，link写在上面，但是link还没有加载进来，所以先运行了后面的style，这种问题是网速导致的，并不是二者本身拥有优先级的问题。需要注意的是写在后面的css会覆盖掉写在前面的css，这里再三强调，为了不引起冲突，且让用户具有良好的体验性，我还是推荐引入外部css文件

• 关于css的选择器

1.class选择器

我们最常使用的选择器，目的是元素添加一个类名。（一个元素可以有多个类名，一个类名也可以同时赋给多个元素，这并不互相冲突。）

例：我们先给一个标签附上一个类名

如<div class="p">

然后在css中对其进行控制(这里引图片是怕看不清前面的那个点）

2.  id选择器

跟class用法几乎一致，需要注意的是id选择器只能一对一使用，一个标签只能有一个id,一个id只能配给一个标签

例：我们先给一个标签附上一个id

如<div id="p">

然后在css中对其进行控制(注意这里用的是#）

我们一般不用用id来做标记，因为一旦使用，后台的php会提取出来id，然后换成他们的标记，因此可能会导致我们的选择器选择不出来我们想要的标签。

3属性选择器

下面的例子为带有title 属性的所有元素设置样式：

在css中必须要考虑权重问题：

• 属性选择器的权重问题:  !important  无穷 // 行间样式 1000 // id 100 // class|属性|伪类 10 // 标签|伪元素  1 // 通配符 0
• 权重的进制是
• 权重越大，优先级越高
• 权重相同，则遵循后面覆盖前面的原则
• 在计算机语言中，无穷+1>无穷

4.通配符选择器

常用作布局，由于其权重为0，任何一个属性都能将其覆盖

5.标签选择器

看懂了上面的就没啥说的，直接上图

6.父子选择器

找父选择器下的子选择器，沿用上述多个选择器的标准

可以不同的选择器一并使用（这里就只是截取了class=“last3”中的a标签，对其余的a标签无影响）

也可以多个同类选择器一并使用（main下的zhedang）

这里有一点需要注意，浏览器检索时是先找子选择器再找父选择器，因为便于检索，用我的话解释是一个爸爸可以有多个亲儿子，而一个儿子只能有一个亲爸爸，通过爸爸找儿子难，而通过儿子找爸爸是相对容易的。

7.直接子元素选择器

div>p

div直接子元素里面p，按我的理解就是只要儿子不要孙子

<div>
<p></p>
</div>

8.分组选择器

<p></p>

<a></a>

<div></div>

想同时给三种标签都加上相同的样式，就用p, a, div {} 这样的写法，记住中间是用逗号连接。

9 并列选择器

<p class=”demo”></p>
<div class=”demo”></div>

如果出现这种情况怎想要选择出类名是demo的div，我们可以使用div.select {} 来选择出来（标签名在前）。

当然，这种情况理应在写代码时避免

• 关于css的样式

样式=属性名加属性值，样式很多，这里不加详解，大家感兴趣可以去w3c查查看，只提几个要点

文字的颜色是color，而非font-color

系统默认字体：font-family：“arial”；

设置颜色的方法：1.输入英文单词(black)

2.输入三位颜色代码（#ff00cc）

3.rgb模式（rgb(255, 255, 255)）

px和em都是相对长度，但前者长度相对固定（可以按绝对理解），后者则是真正的相对长度。

盒模型样式顺序：上，右，下，左（4个）；上，左右，下（3个）；上下，左右（2个），上下左右（1个）；

这里要重点说盒模型

先引一张图片

css它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性

类比盒子，内容就是盒子里装的东西；而内边距(PADDING)就是怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出，记住这里的盒子本身不包括MARGIN。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。关于弹性盒子在之后的css3篇我会详细总结，这里就先理解一下。

在计算盒模型大小时要注意：

盒模型本身不包括margin

w3c的标准盒模型，width不包含padding和border，指的只有content。

IE6混杂模式的盒模型，width包含padding和border，它设定了整个盒子的大小。

css3中就有一个属性可以设置我们使用哪一种盒模型—— box-sizing: border-box IE6混杂模式的盒模型； content-box; 标准模式的盒模型